ECMAScript6.0（一）

一、变量let和const：

var：

1. 可以重复声明
2. 无法限制修改无法限制修改
3. 没有块级作用域没有块级作用域

let：不能重复声明，变量~可以修改，块级作用域
const：不能重复声明，常量~不可以修改，块级作用域

<script>
    window.onload = function() {
        var aBtn = document.getElementsByTagName('input');

        for(var i = 0; i < aBtn.length; i++) {
            aBtn[i].onclick = function() {
                alert(i);  //全都是3
            };
        }
        
        //老方法，麻烦，加一层function
        for(var i = 0; i < aBtn.length; i++) {
            (function (i){
                aBtn[i].onclick = function() {
                    alert(i);  //0,1,2
                };
            })(i);
            
        }

        for(let i = 0; i < aBtn.length; i++) {  //let块级作用域
            aBtn[i].onclick = function() {
                alert(i);  //0,1,2
            };
        }
    }
</script>
<input type="button" value="按钮1" >
<input type="button" value="按钮2" >
<input type="button" value="按钮3" >

二、箭头函数：

1. 如果只有一个参数，()可以省
2. 如果只有一个return，{}可以省如果只有一个return，{}可以省

window.onload = function() {
    alert('hello');
};
window.onload = ()=> {
    alert('hello');
};

let show = function() {
    alert('show');
};
let show = ()=> {
    alert('show');
};
show();

let show = function(a) {
    return a*2;
};

let show = (a) => { //使用箭头函数
    return a*2;
};

let show = a => {   //省略()
    return a*2;
};

let show = a => a*2;  //省略{}

alert(show(12));

三、函数的参数：

1. 参数扩展/数组展开
2. 默认参数

1.参数扩展

• 收集参数：Rest parameter必须是最后一个

function show(a,b,...args) {
    alert(a);
    alert(b);
    alert(args);
}

show(1,23,556,677,34);

• 展开数组：展开后的效果，跟直接把数组的内容写在这儿一样

let arr=[1,2,3];

function show(a,b,c) {
    alert(a);
    alert(b);
    alert(c);
}
show(...arr);  // show(1,2,3); 效果一样

let arr1=[1,2,3];
let arr2=[5,6,7];
let arr=[...arr1,...arr2];
alert(arr);   //1,2,3,5,6,7

function show(...args){
    fn(...args);
}

function fn(a, b){
    alert(a+b);
}
show(12, 5);

2.默认参数

function show(a, b=5, c=12){
    console.log(a, b, c);
}
show(99, 19, 88);

四、解构赋值：

1. 左右两边结构必须一样
2. 右边必须是个东西右边必须是个东西
3. 声明和赋值不能分开(必须在一句话里完成)声明和赋值不能分开(必须在一句话里完成)

let [a,b,c] = [1,2,3];   //左右两边结构必须一样
console.log(a, b, c);

let {a,c,d} = {a:12, c:5, d:6};
console.log(a, c, d);

let [{a, b}, [n1, n2, n3], num, str]=[{a: 12, b: 5}, [12,5,8], 8, 'cxzcv'];
console.log(a,b,n1,n2,n3,num,str);

//随意拆成想要的粒度
let [json, arr, num, str]=[{a: 12, b: 5}, [12,5,8], 8, 'cxzcv'];
console.log(json,arr,num,str);

注意：

let [a,b]={a: 12, b: 45};  //错误，左边是数组，右边是json
let {a,b}={12,5};  //右边不是个东西


let [a,b];
[a,b]=[12,5];  //声明和赋值不能分开
console.log(a,b);  

五、数组：

方法：

• map 映射 一个对一个
• reduce 汇总 一堆出来一个
• filter 过滤器
• forEach 循环(迭代)

map：

let arr = [12,5,8];

let result = arr.map(function (item) {
    return item*2;
});

//箭头函数简写 let result = arr.map(item => item*2);

alert(result); //24,10,16
------------------------------------------------------
let score=[19, 85, 99, 25, 90];
let result=score.map(item=>item>=60?'及格':'不及格');

alert(score);
alert(result);

reduce：

//求和
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
    //alert(tmp+','+item+','+index);
    return tmp+item;   
});

alert(result);

//求平均数
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
    if(index!=arr.length-1){ //不是最后一次
        return tmp+item;
    }else{ //最后一次
        return (tmp+item)/arr.length;   
    }
});

alert(result);

filter：

let arr = [12,5,8,99,27,36,75];
let result = arr.filter(item => {
    if(item % 3 == 0){
        return true;
    } else {
        return false;
    }
});

//简写
let result = arr.filter(item => {
    return item % 3 == 0;
});
//简写
let result = arr.filter(item => item % 3 == 0);

alert(result);

let arr=[
    {title: '男士衬衫', price: 75},
    {title: '女士包', price: 57842},
    {title: '男士包', price: 65},
    {title: '女士鞋', price: 27531},
];
let result = arr.filter(json => json.price >= 10000);
console.log(result);

forEach：

let arr = [12,3,6,8];

//不加参数
arr.forEach(item => {
     alert(item); 
});

//加参数
arr.forEach((item,index) => {
    alert(index + ':' +item);
});