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

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
      }

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

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

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、模板字符串

 <script>
    // 模板字符串
    // 1、声明
    let str = `你好！`;
    console.log(str, typeof (str));//你好！ string
    // 2、允许换行，传统的使用""时换行报错，需要添加+号
    let json = `<ul><li>十一</li>
                  <li>十二</li>
                  <li>十三</li>
              </ul>`;

    // 3、变量拼接
    let name = "zs";
    let me = `${name}今年23岁`;
    console.log(me);//输出：zs今年23岁
  </script>

五、数组的扩展
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()，将类数组对象或可迭代对象转化为数组 博客参考 菜鸟教程
语法：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 对象。

 let map = {
      do: function (e) {
        return e * 2;
      }
    }

    var result = Array.from([1, 2, 3], function (e) {
      return this.do(e);
    }, map)

    console.log(result);//[2, 4, 6]

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

六、扩展运算符

    // 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