ES6语法常用总结

const声明常量的时候必须赋初始值，否则报错

const声明常量，常量就是值（内存地址）不能变化的值

• 对于简单类型，数值类型、字符串类型。内存地址就是值，不可以更改
• 对于复杂类型，数组，对象等，内存地址不可以改，但是地址中存的值就可以被改变的。内部的值可以更改但是重新赋值就不可以。

const arr = [100,200]
arr[0] = 0
console.log(arr)// 值被更改  [0, 200]
arr = ['a','b'] // 报错，不允许重新赋值 Assignment to constant variable.

解构赋值

• 变量与数组中个数相同，一一对应关系

let [a,b,c] = [1,2,3]

• 如果数组中的值少于要赋值的变量个数，则没有与之对应的就是undefined

let [foo] = [];
let [bar,foo] = [1]// foo的值就是undefined

对象解构

let person = { name:'zs', age: 18 }
let {name,age} = person
console.log(name)
console.log(age)
?/ 用name属性去匹配对象中的name属性

重命名对象属性中的属性

let person = { name:'zs', age: 18 }
let {name:myName,age:myAge} = person
console.log(name)
console.log(age)

变量的解构赋值

解构赋值就是只要等号两边的模式相同，左边的变量就会被对应赋值。

      let [x, y = "b"] = ["a"];
      console.log(y); // b

      let [x, y = "b"] = ["a", undefined];
      console.log(y); // b

      let [x, y = "b"] = ["a", null];
      console.log(y); // null。除了没有值和undefined之外，其他的值都算对其进行赋值操作。都是后面的值。

解构赋值分类：

• 数组的解构赋值

• 对象的解构赋值

• 字符串的解构赋值

• 数字以及布尔值的解构赋值

• 函数参数的解构赋值

解构赋值的情况

两种情况：

• 完全解构

• 不完全解构

不完全解构

let [a = 1, b] = [];
// a = 1, b = undefined

数组的解构赋值、

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

解构赋值允许指定默认值

      let [foo = true] = [];
      //   foo; // true
      console.log(foo); // true
在使用默认值的时候，应该注意undefined，因为undefined是不能赋值的。
let [x = 1] = [undefined];
x // 1
 
let [x = 1] = [null];
x // null

对象解构

      // 这种表示，解构赋值的时候，去原有的对象中找相同属性的名字，再一一赋值，如果没有和变量名相同的属性名，则为undefined。并不是按照顺序来的
      let { bar, foo } = { foo: "aaa", bar: "bbb" };
      //   foo; // "aaa"
      //   bar; // "bbb"
      console.log(bar);
      console.log(foo);

      let { baz } = { foo: "aaa", bar: "bbb" };
      console.log(baz); // undefined

// 通过解构，我们可以很容易的把对象的方法复制给变量。
const { log } = console;// console对象中的log方法，解析出来给一个变量，这个变量名叫log
log('hello') // hello
// ****************或者
const { log:minelog } = console;
minelog ('hello') // hello

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

字符串解构
字符串本身也是一个对象，有时候，可以当成一个数组解构

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

还可以当做一个对象解构

      let { length: len } = "hello";
      console.log(len); // 5

函数参数的解构赋值

      function add([x, y]) {
        return x + y;
      }

      console.log(add([1, 2])); // 3

箭头函数是用来简化函数定义语法的

• 函数的执行结果就是函数的返回值，则可以省略return

const fn = (n1,n2) => {
	return n1 + n2
} 
省略为：
const fn = (n1,n2) => n1 + n2

• 如果函数的形参只有一个，则小括号也可以省略

const fn2 = n1 =>{
	return n1+20
}
省略为：
const fn2 = n1 => n1 + 20

箭头函数没有自己的this。在箭头函数中的this指向的是函数定义位置的上下文this

function fn() {
          console.log(this);//{ name: "zs", age: 18 }
          return () => {
            console.log(this);//{ name: "zs", age: 18 }
          };
        }
        const obj = { name: "zs", age: 18 };
        const fn2 = fn.call(obj);
        fn2()

对象不能产生作用域。只有函数有作用域

      // var或者let都是window
      let obj = {
        age: 20,
        say: () => {
          console.log(this); //var或者let都是window。这是因为对象没有作用域。只有函数有作用域
          // alert(this.age)// undefined
        }
      };
      obj.say();

剩余参数

    function sum(first,...args){
        console.log(first)// 10
        console.log(args)// [20,30,40]
    }
    sum([10,20,30,40])

箭头函数中是使用不了arguments的

const sum = (...arg){ // 表示可以接收所有的实参
	
}
//
let arr = [10,20,30,40]
let [s1,...s2] = arr
console.log(s1)// 10
console.log(s2)// [20,30,40]

函数的扩展

es6中函数的扩展包含：默认值，剩余运算符，扩展运算符。

默认值

在es5中，函数的默认值设定是，通过“||”进行设定的，当函数参数为undefine时，取默认值。

在es6中，函数的默认值是写在参数定义的后面。

代码示例如下：

// es5
      function log(x, y) {
        y = y || "web";
        console.log(x, y);
      }

      function log(x, y = "web") {
        console.log(x, y);// 1 "web"
      }
      log(1)

扩展运算符...

let arr = [1,2,3]
...arr // 1,2,3

合并两个数组

// 方法一：
var arr1 = [1,2,30]
var arr2 = [4,5,6]
var arr3 = [..arr1,...arr2]
// 方法二：
arr1.push(...arr2)// push方法可以接收多个参数

将类数组或可遍历对象转换成真正的数组

var oDivs = document.getElementByTagName('div')
console.log(oDivs)
var ary = [...oDivs]// 就将伪数组转换成了真正的数组
就可以使用数组的api方法了

Array的扩展方法 Array.from() （将伪数组转成真正数组）

      const arrayList = {
        "0": "张三",
        "1": "张三2",
        "2": "张三3",
        "3": "张三4",
        "4": "张三5",
        length: 5 // 注意一个伪数组是必须有 length属性的，没有这个属性是转不成真正的数组的
      };
      console.log(arrayList); /// {0: "张三", 1: "张三2", 2: "张三3", 3: "张三4", 4: "张三5"}
      const newArr = Array.from(arrayList);
      console.log(newArr);// ["张三", "张三2", "张三3", "张三4", "张三5"]

Array.from()接收第二个参数

第二个参数接收一个函数，函数的作用就是对数组中的每一个item进行加工处理
数组中多少个数据，第二个参数就会被调用多少次

      const arrayList = {
        "0": "1",
        "1": "2",
        "2": "3",
        "3": "4",
        "4": "5",
        length: 5 // 注意一个伪数组是必须有 length属性的，没有这个属性是转不成真正的数组的
      };
      var newArr = Array.from(arrayList, function(item) {
        return item * 2;
      });
      console.log(newArr);//[2, 4, 6, 8, 10]

Array.find()查找数组中的符合条件的第一个值

Array.findIndex()查找数组中第一个符合条件的数组成员的位置