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`今天的早餐是
 ${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 对象--可选