JS 一些比较陌生但实用的API

1、window.getComputedStyle方法

功能：获取最终应用在元素身上的样式
语法： getComputedStyle("元素", "伪元素")，第二个参数可选
返回值：元素的样式对象
IE6-8不支持该属性，有个对应属性currentStyle。
与style的区别：style只能拿到元素style属性中的样式信息，getComputedStyle可以拿到任意属性/值的集合，与getPropertyValue配合使用就可以拿到任意属性值。
Tip:jquery/zepto的css方法拿不到伪元素样式，但该方法可以！！

2、Element.getBoundingClientRect方法

功能：相对于视口，获取指定元素size和position
语法：element.getBoundingClientRect()
返回值：包含bottom,height,left,right,top,width,x,y的对象(Chrome下)，基准点是视口左上角。
Tip:当Element被display:none后，返回的所有属性都为0

3、Object.assign方法

语法：Object.assign(target, ...sources)，返回target对象，将sources中所有可枚举属性赋值到target对象，但是只是浅复制，即复制引用，看下列子：

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // 深度复制
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

注意：Object.assign()方法是浅复制，使用时要注意这点

4、scrollIntoView & scrollIntoViewIfNeed

• scrollIntoView(param)

    

    
click
    

param可取boolean和object，当为Boolean时，取true（默认值）与可视区域顶部对齐；当object时，可设置两个key，一个block，取值为start/end，功能类似于取Boolean，另一个behavior，取值instant(auto)/smooth；兼容性有限！

• scrollIntoViewIfNeed
  scrollIntoViewIfNeeded是比较懒散的，如果元素在可视区域，那么调用它的时候，页面是不会发生滚动的。其次是scrollIntoViewIfNeeded只有Boolean型参数，也就是说，都是瞬间滚动