JS ES6基本语法，箭头函数、var、let、const的异同，解构赋值

痛定思痛。 2021-07-25 21:35 337阅读 0赞

## JS ES6基本语法，var、let、const的异同，解构赋值 ##

一、箭头函数  
简单的理解可以是简化代码，即当函数只有一个参数时可以省略（），当函数只有一个return时，可以省略\{\}、return

//没有形参时
    setTimeOut(()=>{ 
    console.log(this);
    }
    let num = [12, 2, 45, 67, 5, 89, 77, 65, 78, 99, 34, 2, 5, 45, 66, 78]
    //只有一个参数和一个return
    
    //原生写法
     num.filter(function (n) { 
            return n < 50;
          })
          
    //es6箭头函数
    num.filter(n => n < 50)

二、**var、let、const的异同**  
var 可以重复声明同名变量，let和const不能重复声明

var a = 2;
        var a = 3;
        console.log(a);//3
    
        let b = 2;
        let b = 4;
        console.log(b);//SyntaxError: Identifier 'b' has already been declared,b已经被声明，不能重复声明
    
        const c = 2;
        const c = 3;
        console.log(c);//SyntaxError: Identifier 'c' has already been declared,c已经被声明，不能重复声明

**var**：声明变量，一旦声明，在全局里都声明了（详看变量提升）

//可声明类型
        var a = 2;
        var arr = [2, 3];
        var json = {  a: 'sds', b: 'sda' };
        var str = 'nussl';
        var timer = null;
        var result = function () {  }
        ...

var a=23;
          f()
          console.log('3'+a);//23
          function f(){ 
            console.log('1'+a);//undefine
             var a=10;
            console.log('2'+a);//10
          }

var a=23;
          f()
          console.log('3'+a);//10
          function f(){ 
            console.log('1'+a);//23
            // var a=10;
             a=10;
            console.log('2'+a);//10
          }

**let**：声明的变量只在 let 命令所在的代码块内有效

let a = 4;
        if (1) { 
          let a = 34;
          console.log(a);//34在if块级作用域中声明的a只在if里起作用
        }
        console.log(a);//4

**const**：const 声明一个只读的常量，一旦声明，常量的值就不能改变，当声明的是复合类型数据，可以修改其属性

声明常量

const a = 2;
        console.log(a);//2
        a = 4;
        console.log(a);//报错TypeError，Assignment to constant variable，不能修改

复合类型数据（const指向的对象不可被修改，但对象内部的属性可以修改）

//const指向的对象不可被修改，但对象内部的属性可以修改
       const a = { 
          a1: 'hello,world!'
        }
        console.log(a);//{a1: "hello,world!"}
        a.a1 = 'hello,Es6';
        console.log(a);//{a1: "hello,Es6"}
        //对象储存的是一个地址

2、**变量提升**  
var 存在变量提升，let 、const 不存在变量提升

var，undefined是已经声明了但是获取不到值，这时应该把赋值放在输出之前

console.log(a;//undefined
        var foo = a;

let，找不到声明，说明声明失败，即let不存在变量提升，这时需要把声明和赋值放在输出前

console.log(a);
        let a=2;//报错referenceError，报错referenceError，Cannot access 'a' before initialization，初始化无法访问a即未声明a

const，与let同理

console.log(a);//报错referenceError，Cannot access 'a' before initialization，初始化无法访问a即未声明a
        const a = 2;

3、**暂时性死区**  
let：出现ReferenceError报错实际上是**暂时性死区**问题，当在块级作用域内let声明时，它所声明的变量就会绑定当前的区域，不会受外部的影响。

var temp = 2;
        if (true) { 
          temp=34;
          console.log(temp);//34
        }

var temp = 2;
        if (true) { 
          console.log(temp);//报错ReferenceError
          let temp;
        }

4、**块级作用域**  
ES5只有全局作用域和函数作用域，内层变量可能会覆盖外层变量，因此es6引入块级作用域解决覆盖问题

例子中即使if语句没有执行，但是由于变量提升导致内层的tmp变量覆盖了外层的tmp变量

var tmp = new Date();
        function f() { 
          console.log(tmp);
          if (false) { 
            var tmp = "hello world";
          }
        }
        f(); // undefined

5、**for循环与var、let**  
for/var:

for(var i=0;i<10;i++){ 
            setTimeout(function(){ 
              console.log(i);//10次10
              // i虽然在全局作用域声明,但是在for循环体局部作用域使用的时候，变量会被固定，不收外界干扰
            },10)
            console.log(i);//0123456789
          }

for/let:

for(let i=0;i<10;i++){ 
            setTimeout(function(){ 
              console.log(i);//0123456789
              // i是循环体内局部作用域，不受外界影响
              
            },10)
            console.log(i);//0123456789
          }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]

三、**解构赋值（数组、 对象、字符串、参数）**

规则：左右两边结构一致，声明和赋值在一句话里完成

1、数组的解构赋值

// 数组
        let [a, b, c, f] = [1, 2, 3, 4];
        console.log(a, b, c, f);//1,2,3,4

2、对象的解构赋值

// 对象
        let {  a, b, c } = {  a: 2, b: 3, c: 4 };
        let {  a, b, c } = {  a: 'sdsd', b: 'sccc', c: 'huhji' };

3、字符串的解构赋值

// 字符串
        let [a, b, c, d, f] = 'hello';
        console.log(a, b, c, d, f);//hello

4、参数的解构赋值

// 参数
        function add([x, y]) { 
          return x + y;
        }
        console.log(add([2, 3]));//5

5、混合赋值

// ....
        let [{  a, b }, [c, d, f], num, [h, i, j, k]] = [{  a: 'sds', b: 'fds' }, [2, 3, 4], 8, 'gfdc'];
        console.log(a, b, c, d, f, h, i, j, k, num);//sds fds 2 3 4 g f d c 8
    
        let [json, arr, num, str] = [{  a: 'sds', b: 'fds' }, [2, 3, 4], 8, 'gfdc'];
        console.log(json);//{a: "sds", b: "fds"}
        console.log(arr);//[2, 3, 4]
        console.log(num);//8
        console.log(str);//gfdc

四、**字符串的扩展**  
1、模板字符串

五、**数组的扩展**  
1、**数组的创建Array.of()**，创建一个具有可变数量参数的新数组实例，而不考虑参数的数量和类型

传统的创建

//传统的创建
    	var arr = [1];
        var arr1 = new Array(2);
        console.log(arr);//[1]
        console.log(arr1);//[empty*2]

es6Array.of()创建

// es6
        // Array.of:创建一个具有可变数量参数的新数组实例，而不考虑参数的数量和类型
        let arr2 = Array.of(5);
        console.log(arr2);//[5]
        
         let arr3 = Array.of(1, '23', true);
        console.log(arr3);//[1, "23", true]

2、**arguments**是一个对应于传递给函数的参数的类数组对象

var num = 0;
        function f(a, b, c) { 
          console.log(arguments);//Arguments(3) [3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
          for (let i = 0; i < arguments.length; i++) { 
            num += arguments[i];
          }
          console.log(num);//12
        }
    
        f(3, 4, 5);

3、**Array.from()**，将类数组对象或可迭代对象转化为数组 [博客参考][Link 1] [菜鸟教程][Link 2]  
**语法**：Array.from(arrayLike\[, mapFn\[, thisArg\]\])  
**arrayLike**：想要转换的类数组对象或可迭代对象。

// 参数为数组，返回的是与原数组一样的数组
        var arr1 = Array.from([1, 2]);
        console.log(arr1);// [1, 2]
        // 参数为字符串，返回的是将字符串拆分的数组
        var arr2 = Array.from("ssd");
        console.log(arr2);//["s", "s", "d"]

**mapFn**：可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

var temp = 0;
        var result = Array.from([1, 2, 3], function (e) { 
          return temp += e;
        })
        console.log(result);//[1,3,6]

**thisArg**：可选，用于指定 map 函数执行时的 this 对象。

arguments+Array.from();

// arguments是一个对应于传递给函数的参数的类数组对象
        // Array.from是将对象转为数组(把类数组转为数组)
        // forEach：数组里每个元素都执行一次回调函数
        var num = 0
        function f(a, b, c) { 
          Array.from(arguments).forEach(function (io) { 
            num += io;
            console.log(num);//1,3,6
          })
        }
        f(1, 2, 3);

4、**copyWithin**,选取数组中的某元素取代另外的元素，返回新数组  
语法：Array.prototype.copyWithin(target, start = 0, end = this.length)  
三个参数：  
target（必需）：被取代的起始索引  
start（可选）：取代的起始索引，默认为0，取负数时表示倒数  
end（可选）：取代的结束索引，默认为start到数组结尾的长度

// copyWithin
     	  //只有一个参数
      	  var arr6 = [0, 1, 2, 3, 4, 5];
          arr6.copyWithin(4);//从第四个位置开始替换，后两个参数为零默认从0开始读取至结尾
          console.log(arr6);//[0, 1, 2, 3, 0, 1]
          
          //两个参数
          var arr4 = [0, 1, 2, 3, 4, 5, 6];
          arr4.copyWithin(2, 4);//从第2个位置开始被取代，从第4个位置开始选择取代的值至末尾
          console.log(arr4);//[0, 1, 4, 5, 6, 5, 6]
    
    	  //三个参数
          var arr5 = [0, 1, 2, 3, 4, 5, 6, 7, 8];
          arr5.copyWithin(0, 4, 6)//从第0个位置开始替换，从第四个位置（4）开始读取，把四、五位置替换给1,2位置，替换的长度取决于后两个参数（6-4=2）
          console.log(arr5);//[4, 5, 2, 3, 4, 5, 6, 7, 8]

5、**find()**,用于找出第一个符合条件的数组元素

// find()方法：用于找出第一个符合条件的数组元素
        var arr7 = [-1, 2, -7, 9, 99, 76];
        var result = arr7.find(function (e) { 
          return e > 50;
        })
        console.log(result);//99

6、**findIndex**，返回第一个符合条件的元素下标值

var arr8 = [12, 34, 4, 23, 44, 5, 6, 78];
    
        // 返回第一个符合条件的元素下标值
        var re = arr8.findIndex(function (item) { 
          return item > 34;
        });
        console.log(re);//4（44）

*  其他数组参考菜鸟教程 [菜鸟教程es6-Array][Link 2]

**六、扩展运算符**

// rest参数，获取函数的多余参数(...values)
        function add(...res) { 
          let num = 0;
          // 遍历数组里的每一项
          for (let i of res) { 
            num += i;
          }
          return num;
        }
        console.log(add(2, 3, 4, 5));//14

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/0293d398aa5a4ef9b2a8c378c2b23e13.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
[Link 2]: https://www.runoob.com/w3cnote/es6-array.html