9. 还原一个商品放大镜

比例=-（大图片的宽高-容器宽高）/（小图片的宽高-拖拽的宽高）

nagvigetor.userAgent();

location.reload();//重新加载

dom api(application program interface)

getElementsByClassName();
//返回一个数组

querySelect();//选中一个符合条件的
querySelectAll();//选中所有符合条件的

obj.childNodes//空格和换行也包括在内
obj.children//选中标签，不包括空格，但是不是w3c的标准

obj.nextSibling//选中下一个元素，包括空格和文本
obj.nextElementSibling//选中下一个标签

找到下一个元素的函数

function next(elem){
    while(elem.nextSibling!=null){
        var elemNext=elem.nextSibling;
        if(elemNext.nodeType==1)return elemNext;
    }
    return null;
}

nodeType

注释:8

元素<p>…:1

文本:3

属性

dom属性：attribute

对象属性：properties

事件

es6

数组解构

const arr=[1,2,3,4,5,6];
let [a1,a2,a3,a4,a5,a6]=arr;
console.log(a1,a2,a3,a4,a5,a6);

对象解构

const obj1={
    name:"lisi",
    age:44
};
let {name,age}=obj1;
console.log(name,age);

字符串解构

let str1="hello";
//let s1=str1[0];//let是新语法，不能重复定义
let [s1,s2,s3,s4,s5]=str1;
console.log(s1,s2,s3,s4,s5);

函数解构

function fn1({name,age}){
   console.log(name,age);
}
fn1({
 name:"lisi",
 age:23
});

函数参数设置默认值

function fn2(x=2,y=3){//undefined + undefined(数字) 结果是NaN
    return x+y;
}
fn2();

扩展运算符的使用

数组拼接

const arr1=[1,2,3];
const arr2=[4,5,6];
const arr3=[...arr1,...arr2];
console.log(arr3);

对象拼接，后面覆盖前面

const obj1={
 name:"aixan",
 age:20
}
const obj2={
 genderL:"male",
 age:6
}
const obj3={...obj1,...obj2};
console.log(obj3);

dom数组转换为正常数组

伪数组：虽然是数据的一系列集合，但是不具备正常数组的方法

var arr=document.getElemmentByClassName('');
var aLi=[...arr];
console.log(aLi);

arguments

function fn3(x,y){
    console.log(arguments);
    console.log(x+y);
}
fn3(1,2,3,4,5);

function fn3(x,y,...rest){
    console.log(rest);
    console.log(x+y);
}
fn3(1,2,3,4,5);

箭头函数

var fn4=(x,y)=>{console.log(x+y);};

var fn5=str=>log(str);//log未定义

当函数只有一个参数的时候可以省略括号

当函数体只有一条语句的时候{}可以省略

箭头函数注意的点

• 不能当做构造函数（类），不能使用new命令
• 箭头函数不能使用arguments对象，但是可以用“rest”
• 箭头函数没有this

this指向的是调用(函数)的对象，但是如果调用的是箭头函数，则无效

对象数组遍历

var list=[
    {name:"xixi",age:20},
    {name:"xixixi",age:30},
    {name:"xi",age:40}
]
for(const aa of list){
    console.log(aa);
}
for(const aa of list.keys){
    console.log(aa);
}
for(const aa of list.values()){
    console.log(aa);
}
for(const [k,v] of list.entries){
    console.log(k,v);
}
list.forEach(
    (value,index,arr)=>{
        value.age+=60;
        console.log(value,index,arr);
    }
);
list.map(
    (v,i,a)=>{
        return value;
    }
);
list.filter(
    (v,i,a)=>{
        return value.age>100;
    }
)

可以省略属性值

var a={
    name,
    age,
    eat(){
        //body
    };
}

交换变量

var aa=666;
var bb=999;
[bb,aa]=[aa,bb];