ES6学习总结一（变量；箭头函数；解构赋值）

时间：2023-03-08 22:00:42

一、变量

var 

1 可以重复声明（var a=1;var a=7;）（一开始用着会觉得限制很少，但是在大型项目会麻烦，人多嘴杂的时候定义重复了就容易出问题还不好找）

2 无法限制修改

3 没有块级作用域(块指{}以外就不能访问)

function(){

    var a=10;

}

alert(a); //

ES6的变量：

let:

不能重复声明（重复声明会报错:a已经声明过了，const也是）；

let a=0;

let a=1;

let是变量，可以修改；

let a=0;

a=1;
alert(a); //1

有块级作用域；（const同理）

if(true){

    let a=0;

}

alert(a);//报错：a 没定义（a只在语法块起作用）

const:不能重复声明；const是常量，不能修改；有块级作用域；

const a=0;

a=1;
alert(a); //报错

下面来看一个经典的运用场景：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用闭包来解决的问题:利用函数垫了一层作用域</title>

</head>

<body>

    <input type="button" value="按钮1">

    <input type="button" value="按钮2">

    <input type="button" value="按钮3">

</body>

<script>

    // window.onload=function(){

    //     var aBtn=document.getElementsByTagName('input');

    //     for(var i=0;i<aBtn.length;i++){

    //         aBtn[i].onclick=function(){

    //             alert(i);//3 3 3

    //         };

    //     }

    // }

    window.onload=function(){

        var aBtn=document.getElementsByTagName('input');

        for(var i=0;i<aBtn.length;i++){

            (function(i){

                aBtn[i].onclick=function(){

                    alert(i);//0 1 2

                };

            })(i);

        }

    }

</script>

</html>

但是如果用有块级作用域的let声明i，就直接可以打印出想要的结果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>let</title>

</head>

<body>

    <input type="button" value="按钮1">

    <input type="button" value="按钮2">

    <input type="button" value="按钮3">

</body>

<script>

    window.onload=function(){

         var aBtn=document.getElementsByTagName('input');

         for(let i=0;i<aBtn.length;i++){

            aBtn[i].onclick=function(){

                 alert(i);//0 1 2

             };

         }

     }

</script>

</html>

二、箭头函数

之前函数写法：

function 名字(){}

ES6写法：

()=>{}

总结：

就是把名字省略，()后增加一个箭头；是之前函数的一种简写，就像var a=new Array()可以简写成var a=[]一样。

如果只有一个参数，()可以省；

如果只有一个return，{}可以省；(注意没有或者多余一个return都不能省)

举例1：

let show=function(a,b){

     alert(a+b);

}

let show=(a,b)=>{

     alert(a+b);

}

举例2：

let arr=[2,5,1,9,4];

//arr.sort(function(n1,n2){

//    return n1-n2;

//});

//arr.sort((n1,n2)=>{

 //   return n1-n2;

//});

arr.sort((n1,n2)=>return n1-n2);

alert(arr);

三、解构赋值

1. 左右两边结构必须一样

2. 右边必须是个东西

3. 声明和赋值不能分开（必须在一句话里完成）

例如：

// 数组
let[a,c,x]=[1,2,3];

console.log(a,c,x);// 1 2 3
// json

let{a,b,c}={a:1,b:2,c:3};

console.log(a,b,c);// 1 2 3
// 复杂一点的

let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[1,3,5],9,'lmx'];

console.log(a,b,n1,n2,n3,num,str);

// 粒度根据实际可更改
let [json,arr,num,str]=[{a:12,b:5},[1,3,5],9,'lmx']; 
console.log(json,arr,num,str);

错误写法：

// 左右两边结构不一样

let {a,b}=[1,2];

console.log(a,b);
// 右边不是个东西

let {a,b}={1,2};

console.log(a,b);//Uncaught SyntaxError: Unexpected token ,
// 解构赋值是同步的 不能拆分

let [a,b];//这样定义是不标准的

[a,b]=[1,2];

console.log(a,b);// Uncaught SyntaxError: Missing initializer in destructuring declaration

相关文章