三个点语法和DOM观察者

三个点语法和DOM观察者

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

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

…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]

扩展对象键值对

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});

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(); 停止观察