ES6 一些常用使用

 //1、解构数组
         let arr1 = ['apple', 'coffee', 'cake'];
         let [fruit, drink, dessert] = arr1;
         console.log(fruit, drink, dessert);
         //2、解构对象
         let obj = {
             fruit: 'apple',
             drink: 'coffee',
             dessert: 'cake'
         };
         // 此键值对前面是对象中定义的属性，后面是定义的变量
         let {
             fruit: fruit1,
             drink: drink1,
             dessert: dessert1
         } = obj;
         console.log(fruit1, drink1, dessert1);
         // 3、模版字符串,可以自由的使用换行符
         let drink = 'coffee',
             fruit = 'apple',
             dessert = 'cake';
         let breakfast = `今天的早餐是 ${drink} 、
             ${fruit}和${dessert}`;
         console.log(breakfast);
         // 4、带标签的模版字符串
         let fruit = 'apple',
             drink = 'coffee',
             dessert = 'cake';
         let breakfast = kitchen`今天的早餐是\n ${fruit}、${drink}和${dessert}!`;
         // 用于对输入的内容的单独处理，例如在货币前面加上货币符号，或者对很大的数字进行相应的转换
         function kitchen(strings, ...values) {
             // stings 是个数组，包含的是摸板字符串中的已知字符串，他还有个 raw 属性包含的是 本身输入的原内容
             // console.log(strings);
             // console.log(values);
             let result = '';
             for (let i =0,len = values.length;i<len;i++) {
                 result += strings[i];
                 result += values[i];
             }
             result += strings[strings.length - 1];
             console.log(result);
         }
         // 5、判断字符串是否包含其他字符串，返回值均为布尔值
         // 字符串的新方法：startsWith() 是否是以...为开始
         // 字符串的新方法：endsWith() 是否是以...为结束
         // 字符串的新方法：includes() 是否是包含...
         let fruit = 'apple',
             drink = 'coofee',
             dessert = 'cake';
         let breakfast = `今天的早餐有${fruit}、${drink}、${dessert}!`;
         console.log(breakfast.startsWith('今天'));
         console.log(breakfast.endsWith('cake!'));
         console.log(breakfast.includes('tea'));
         // 6、函数的默认参数 Default Parameter Values
         function breakfast(dessert = 'cake', drink = 'coffee') {
             return `${dessert} ${drink}`;
         }
         console.log(breakfast());
         console.log(breakfast('icecream', 'beer'));
         // 7、展开操作符 spread
         let foods = ['cake', 'coffee'],
             fruit = 'apple';
         console.log(...foods);
         console.log(foods.join(' '));
         let allFoods = ['apple', ...foods];
         console.log(allFoods);
         // 8、剩余操作符 rest
         function breakfast(dessert, drink, ...foods) {
             // 除了dessert和drink之外剩下的传入的参数为被包含到 foods 数组里
             console.log(dessert, drink, foods);
         }
         breakfast('cake', 'coffee', 'tea', 'banana');
         // 9、解构参数
         function breakfast(dessert, drink, {location, name}={}) {
             console.log(dessert, drink, location, name);
         }
         breakfast('cake', 'cooffee', {location:'beijing', name:'cahtrine'});
         // 10、函数的名字 function 的 name 属性
         function breakfast() {}
         console.log(breakfast.name);
         let letBreakfast = function (){};
         console.log(letBreakfast.name);
         let newletBreakfast = function superBreakfast(){};
         console.log(newletBreakfast.name);
         // 11、箭头函数 arrow function
          //如果函数体只有一条return语句，可以简写成如下形式，该函数的返回值是 dessert
         let breakfast = dessert => dessert;
         // 等价于
         var breakfast = function breakfast(dessert) {
             return dessert;
         }
         //如果函数只有一个参数，则参数的括号可以省略；如果没有参数，则需要用空括号
         let drink = (Parameter1,Parameter2) => {
             //函数体
         }
         // 12、对象表达式
         let dessert = 'cake',drink = 'coffee';
         let foods = {
             dessert,
             drink,
             breakfast() {}
         }
         // 13、对象的可计算属性名
         let food = {};
         let drink = 'hot drink';
         food[drink] = 'coffee';
         console.log(food);
         // 14、对比两个值是否相等 Object.is(Parameter1,Parameter2)
         console.log(+0 === -0);
         console.log(NaN == NaN);
         console.log(Object.is(+0, -0));
         console.log(Object.is(NaN, NaN));
         // 15、把对象复制到另一个对象里 Object.assign
         let breakfast = {},
             drink = {
                 drink: 'beer'
             }
         Object.assign(breakfast, drink);
         drink.drink = 'coofee';
         console.log(breakfast);
         console.log(drink);
         // 16、设置对象的 prototype，Object.setPrototypeOf()
         let breakfast = {
             getdrink() {
                 return 'coffee';
             }
         };
         let dinner = {
             getdrink() {
                 return 'tea';
             }
         };
         let drink = Object.create(breakfast);
         console.log(drink);
         console.log(drink.getdrink());
         console.log(Object.getPrototypeOf(drink) === breakfast);
         Object.setPrototypeOf(drink, dinner);
         console.log(drink.getdrink());
         console.log(Object.getPrototypeOf(drink) === dinner);
         // 17、可以直接设置对象的 __proto__
         let breakfast = {
             getdrink() {
                 return 'coffee';
             }
         };
         let dinner = {
             getdrink() {
                 return 'tea';
             }
         };
         let drink = {
             __proto__: breakfast
         };
         console.log(drink);
         console.log(drink.getdrink());
         console.log(Object.getPrototypeOf(drink) === breakfast);
         drink.__proto__ = dinner;
         console.log(drink);
         console.log(drink.getdrink());
         console.log(Object.getPrototypeOf(drink) === dinner);
         // 18、super
         let breakfast = {
             getdrink() {
                 return 'coffee';
             }
         };
         let sunday = {
             __proto__: breakfast,
             getdrink() {
                 return super.getdrink() + ' && milk';
             }
         };
         console.log(sunday.getdrink());
         // 19、手动创建迭代器 iterators
         // 迭代器特征：1、每次执行都会返回一个对像{value:value,done:true/false}
         // 迭代器特征：2、next 方法，每次执行它返回 1 中的对象
         // 在ES6 中 Generators 能够生成上述迭代器
         function chef(foods) {
             let i = 0;
             return {
                 next() {
                     let done = i >= foods.length? true : false;
                     let value = !done? foods[i++] : undefined
                     return {
                         value: value,
                         done: done
                     }
                 }
             }
         }
         let me = chef(['coffee', 'tea']);
         console.log(me.next());
         console.log(me.next());
         console.log(me.next());
         // 20、生成器 Generators
         function* chef(foods) {
             for(let i = 0,len = foods.length;i<len;i++) {
                 yield foods[i];
             }
         }
         let me = chef(['coffee', 'tea']);
         console.log(me.next());
         console.log(me.next());
         console.log(me.next());
         // 21、classes 类
          class chef {
              constructor(foods) {
                 //  类的初始值设置
                 this.foods = foods;
              }
              cook() {
                  console.log(this.foods);
              }
          }
          let me = new chef('egg');
          me.cook();
         // 22、get 和 set
         class chef {
             constructor(foods) {
                 this.foods = foods;
                 this.dish = [];
             }
             get menu() {
                 return this.dish;
             }
             set menu(food) {
                 this.dish.push(food);
             }
             cook() {
                 console.log(this.foods);
             }
         }
         let me = new chef('egg');
         me.menu = '七分熟的牛排';
         me.menu = '西红柿炒鸡蛋';
         console.log(me.menu);
         // 23、类的静态方法 static，不需要实例化类，能够直接使用的方法
         class chef {
             static cook(food) {
                 console.log(food);
             }
         }
         chef.cook('egg');
         // 24、继承 extends
         class Person {
             constructor(name, birthday) {
                 this.name = name;
                 this.birthday = birthday;
             }
             confir() {
                 console.log(`${this.name} ${this.birthday}`);
                 console.log(1);
             }
         }
         class Chef extends Person {
             constructor(name, birthday) {
                 super(name, birthday);
             }
         }
         let me = new Chef('章三', '2016-01-01');
         me.confir();
         // 25、Set 元素不可重合,接收一个数组
         let drinks = new Set(['coffee','tea','bear']);
         // 添加 add
         drinks.add('colar');
         // Set不能有重复的项
         drinks.add('coffee');
         console.log(drinks);
         // 删除 delete
         drinks.delete('coffee');
         console.log(drinks);
         // 查看是否有 has
         console.log(drinks.has('colar'));
         // 查看有几项 size
         console.log(drinks.size);
         // 循环处理 forEach
         drinks.forEach(food => {
             console.log(food);
         });
         // 清空 clear
         drinks.clear();
         console.log(drinks);
         // 26、Map 对对象的扩展，使对象的key 可以是任何一个值
         let food = new Map();
         let fruit = {}, cook = function(){}, dessert = '甜点';
         // 添加 set
         food.set(fruit, 'apple');
         food.set(cook, '西红柿炒鸡蛋');
         food.set(dessert, 'cake');
         console.log(food);
         // 查看键对应的值 get
         console.log(food.get(fruit));
         console.log(food.get(function(){}));
         // 查看有几项 size
         console.log(food.size);
         // 删除 delete
         food.delete(fruit);
         // 是否有 has
         console.log(food.has(fruit));
         // 循环处理 forEach
         food.forEach((value, key) => {
             console.log(`${key} = ${value}`);
         })
         // 27、Object.keys()、Object.values() 获取对象的所有键/值
         const people= {
             name: 'zhangsan',
             sex: 'girl',
             age: '22'
         }
         console.log(Object.keys(people));
         console.log(Object.values(people));
         // 实现数组去重
         let arr = [1,2,2,1,4,5,7];
         let obj = {};
         arr.forEach(v => obj[v]=1);
         console.log(Object.keys(obj));
         // 28、Object.entries() 将键值对换成数组
         const people= {
             name: 'zhangsan',
             sex: 'girl',
             age: '22'
         }
         console.log(Object.entries(people));
         // 29、... 扩展运算符
         // 使用 ... 扩展符合并两个对象
         const peop1 = {name:'zhangsan', age:22};
         const peop2 = {name: 'lisi', sex: 'girl'};
         console.log({...peop1, ...peop2, date:'2018-0101'});
         // 数组去重
         let arr = [1,2,2,1,4,5,7];
         let newArr = [...new Set(arr)];
         console.log(newArr);
         // 30、ES6 的模块化
         // -------1.js-------------------------
         export const name='123'; // 暴露一个模块的内容
         exprot const fun = ()=>{console.log("hello")};
         // -------2.js-------------------------
         import {name, fun} from './1.js';//引入一个模块
         31、default
         // -------1.js-------------------------
         exprot default const test = ()=>{console.log('world')};
         // -------2.js-------------------------
         import abc form './1.js';
         abc(); //执行1.js中的 test方法
         32、模块化，用别名方式引用
         // -------1.js-------------------------
         export const name='123'; // 暴露一个模块的内容
         exprot const fun = ()=>{console.log("hello")};
         exprot default const test = ()=>{console.log('world')};
         // -------2.js-------------------------
         import * as mod1 from './1.js'
         console.log(mod1);
         // mod1 是个对象，包含了 1.js 中所有暴露的内容
         // 33、Array.from 从一个类似数组或者一个可迭代对象中创建一个新的数组实例
         console.log(Array.from({
             0:'zhangsan',
             1:'lisi',
             2:'wangwu',
             length:3
         }));
         // 实现数组去重
         var arr = [1,2,2,1,4,5,7];
         let newarrfun = (arr)=>{
             return Array.from(new Set(arr));
         }
         console.log(new Set(arr));
         console.log(newarrfun(arr));
         // // 第二个参数是新数组每一项执行的回调函数--可选
         let doubleArr = (arr) => {
             return Array.from(new Set(arr), v => v*2)
         }
         console.log(doubleArr(arr));
         // 第三个参数是执行回调函数时指定的 this 对象--可选