三个点语法和DOM观察者

var arr=[1,2,3,4];
var arr1=[...arr];
console.log(arr1)// [1, 2, 3, 4]
1
2
3

var arr=[1,2,3,4];
var arr1=[0,...arr,5,6];
console.log(arr1)//[0, 1, 2, 3, 4, 5, 6]
1
2
3

…arr 是剩余的参数

function fn(a,b,...arg){
	console.log(a,b,arg)
}

fn(1,2,3,4,5,6);1 2 (4) [3, 4, 5, 6]

1
2
3
4
5
6

扩展对象键值对

var o={a:1,b:2,c:3};
var o1={e:5,...o};
console.log(o1)//{e: 5, a: 1, b: 2, c: 3}
复制一个对象
Object.assign({},{a:1,b:2});
1
2
3
4
5

DOM观察者

new MutationObserver(回调函数)
回调函数 有两个参数，一个mutationList观察变化的列表 observer 观察者

var div=document.querySelector("div");  

var  observer= new MutationObserver(function(mutationList,observer){
    console.log(mutationList)
    for(var i=0;i<mutationList.length;i++){
        console.log(mutationList[i].oldValue)
    }
    // attributeName: "cd" 修改的标签属性
    // type: "attributes" 变化的类型  attributes 标签属性变化  childList 子元素列表变化
    // addedNodes: 增加的元素列表
    // removedNodes  删除的元素列表
    // target: span 目标元素
    // oldValue: null 原来的值
})
根据上面创建的观察者实现观察，观察div的变化
observer.observe(div,{
    attributes:true,//标签属性
    childList:true,//子元素列表
    subtree:true//子树
})


div.setAttribute("ab","3");

div.firstElementChild.setAttribute("cd","3")
div.firstElementChild.textContent="abc"

var span=document.createElement("span");
div.firstElementChild.appendChild(span);
span.remove();

div.lastElementChild.value="10"
div.lastElementChild.setAttribute("value","10")

observer.disconnect(); 停止观察
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35