ES6 怎么使用ES6

ES6解构赋值

数据解构-原始数据解构

 let arr = [10,20,30,40,50,60];
       let a = arr[0]
       let b = arr[1]
       let c = arr[2]
       let d = arr[3]
       let e = arr[4]
       let f = arr[5]
       console.log(a,b,c,d,e,f); 

Es6 数据解构

		let [a,b,c] = [1,2,3]
        console.log(a,b,c);

复杂数据结构

		let arr = ['张三',18,['吃饭','睡觉','打豆豆']];
        let [nemu,age,[a,b,c]] = arr;
        console.log(nemu,age,a,b,c);

部分结构

		let arr = ['张三',18,['吃饭','睡觉','打豆豆']];
        // let [age] = arr; // 单输出第一个
        // let [,age] = arr; // 单输出第2个  ,是占位符
        let [,,[a,b,c]] = arr;  // 输出数组里面的三个值
        console.log(a,b,c);

不定长数据解构 （…扩展运算符）

 		let city = ['河南','四川','武汉','内蒙','哈尔滨'];
        let [a,...b] = city;
        console.log(a,b);

解构默认值

		let city = [];
        let [a = '云台山'] = city;
        console.log(a);

对象解构

普通对象解构

	let josn = {name: '张三', age: 18, sex: '男'};
      let {name,age,sex} = josn;
      console.log(name,age,sex);

对象解构重命名

	let josn = {name: '张三', age: 18, sex: '男'};
    let {name:n,age:a,sex:s} = josn;
    console.log(n,a,s);

复杂数据类型解构重命名（对象）

 let dataObj = {
      data: [{
          name: '胡歌',
          age: 32
        },
        {
          name: '彭于晏',
          age: 32
        }
      ]
    };
    let {
      data: [{
        name: unameh,
        age: lage
      }, {
        name: uname,
        age: zage
      }]
    } = dataObj
    console.log(unameh,lage,uname,zage);

结果：胡歌 32 彭于晏 32

字符串解构

	let str = 'hello world';
    let [a, b, c, d, e, f] = str;
    console.log(a, b, c, d, e, f);

结果：h e l l o

解构的用途

1.变量的交换

	let a = 10;
    let b = 20;
    [b,a] = [a,b];
    console.log(a,b);

结果：a20 b10

2.请求回来的数据，只获取里面的一部分

 let {dataObj} = {code: 200,mag: 'ok',dataObj:['jack','rose','bob','张三']}
        console.log(dataObj);

结果：[‘jack’, ‘rose’, ‘bob’, ‘张三’]

3.可以迅速提取一个对象中的方法

 let math = {
      PI: 3.1415926,
      floor: function () {
        console.log(123);
      },
      fn: function () {
        console.log(456);
      },
      random: function() {
        console.log(789);
      }
    }
    let {PI, floor, fn, random} = math;
    console.log(PI);
    floor()
    fn()
    random()

结果：A. 3.1415926 B. 123 C. 456 D. 789

获取最小值 和 最大值

	let {min, max} = Math;
    console.log(min(10,34,55,43,224,77,88));
    console.log(max(10,34,55,43,224,77,88));

结果： 最小值：10， 最大值：224

字面量对象的简写

在Es6 中当我们要声明的对象的属性与要引用值的变量同名时，就可以实现简写。
相当于直接将变量赋值表达式拿过来放在对象里。

    // 不简写的写法
	let name = '张三';
    let age = '18';
    let obj1 = {
      name: name,
      age: age,
      getName(){
        console.log(this.name);
      },
      getAge(){
        console.log(this.age);
      }
    }
    obj1.getName()
    obj1.getAge()

	// 简写
	let obj1 = {
      name, // name 可以简写成一个
      age, 	// age 可以简写成一个
      getName(){
        console.log(this.name);
      },
      getAge(){
        console.log(this.age);
      }
    }
    obj1.getName()
    obj1.getAge()

模板字面量

模板字面量用反引号 ( `` )（而不是单引号 ( ‘’ ) 或双引号( “” )）表示，可以包含用 ${} 表示的占位符。这样更容易构建字符串。

	let name = '张三';
    let str= '我的名字是' + name; // 之前的写法
    let str1 = `我的名字叫${name}`;// 现在扩展写法
	// 小例子
	let {random,floor} = Math;
    setInterval(() => document.body.style.background = `rgb(${floor(random()*256)},${floor(random()*256)},${floor(random()*256)})`,1000);