getBoundingClientRect用于获取某个元素相对于视窗的位置集合。
.top:元素上边到视窗上边的距离;
.right:元素右边到视窗左边的距离;
.bottom:元素下边到视窗上边的距离;
.left:元素左边到视窗左边的距离;
getComputedStyle与style的区别
1.只读与可写
getComputedStyle方法是只读的,不能设置;而element.style能读能写。
2.获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的样式都显示出来);而element.style只能获取元素style属性中的CSS样式。
getComputedStyle(dom,null)使用{.属性名1}或者getPropertyValue('属性名2')获取属性值。区别是,属性名1必须是驼峰名称,属性名2原始css名称即可。
深拷贝
1、Object.create() es6创建对象的另一种方式,可以理解为继承一个对象, 添加的属性是在原型下。
2、一维数组拷贝,var copy = sourceArr.slice(0);
3、JSON对象拷贝,var copy =JSON.parse(JSON.stringify(source));
4、Dom拷贝,dom.cloneNode(true);
5、递归拷贝
方式一:instanceof 通过判断对象的原型链中是不是能找到类型。Array、Object、RegExp、Date、HTMLParagraphElement(DOM)
方式二:typeof 是判断参数是什么类型的实例,返回值为说明运算类型的字符串。“number”、“string”、“boolean”、“object”、“function”、“undefined”
方式三:获取对象原型链上的描述。Object.prototype.toString.call(_obj),如:"[object Array]"、"[object Object]"、"[object Function]"、'[object RegExp]'、'[object Date]'、'[object HTMLParagraphElement]'
//暂不考虑Date,DOM,RegExp
function deepClone(obj) {
if (!obj || typeof obj !== 'object') {
return obj;
}
let objStruct = obj instanceof Array ? [] : {};
for (let key in obj) {
objStruct[key] = deepClone(obj[key]);
}
return objStruct;
}
通过原型链获取对象类型
function isType(data, type) {
const typeObj = {
'[object String]': 'string',
'[object Number]': 'number',
'[object Boolean]': 'boolean',
'[object Null]': 'null',
'[object Undefined]': 'undefined',
'[object Object]': 'object',
'[object Array]': 'array',
'[object Function]': 'function',
'[object Date]': 'date', // Object.prototype.toString.call(new Date())
'[object RegExp]': 'regExp',
'[object Map]': 'map',
'[object Set]': 'set',
'[object HTMLDivElement]': 'dom', // document.querySelector('#app')
'[object WeakMap]': 'weakMap',
'[object Window]': 'window', // Object.prototype.toString.call(window)
'[object Error]': 'error', // new Error('1')
'[object Arguments]': 'arguments',
}
let name = Object.prototype.toString.call(data) // 借用Object.prototype.toString()获取数据类型
let typeName = typeObj[name] || '未知类型' // 匹配数据类型
return typeName === type // 判断该数据类型是否为传入的类型
}