ES6

1.ES6队列：

　　当我们想获取一个ul下的li标签的类数组进行遍历获取value，可以采用Array.from(类数组，方法)　

 　　 　　<ul>

            　　<li>1</li>

            　　<li>2</li>

            　　<li>3</li>

            　　<li>4</li>

       　　 </ul>

   　　

 　　　　 const lis = document.querySelectorAll('li')

    　　　　const lisArray = Array.from(lis)

    　　　　const names = lisArray.map( item => item.textContent)

    　　　　console.log(names); // => ['1', '2', '3', '4']

   　　　　 const names1 =  Array.from(lis, item => item.textContent )

    　　　　console.log(names1);// => ['1', '2', '3', '4']

　　也可以对函数的arguments对象进行转换　　　

 　　　　function sum(){

        　　　　return Array.from(arguments).reduce((prv, cur)=>prv + cur)

   　　　　 }

    　　　　console.log(sum(1,2,3,4));// => 10

　　对字符串也可进行数组转换

　　　　const string = 'name'

　　　　console.log(Array.from(string)) //=>['n', 'a', 'm', 'e']

　　Array.of方法不管你传入多少个参数始终返回一个数组

　　　　new Array.of(1) //=> ['1']

 

2.ES6更多的数组方法：　

　　Array.find()返回符合条件的item
　　Array.findIndex()返回符合条件的index

　　Array.some()返回某一个item是否存在符合条件的布尔值

　　Array.every()返回所有item是否存在符合条件的布尔值

　　const obj = [

            {name:'1',value:'one'},

            {name:'2',value:'two'},

            {name:'3',value:'there'},

        ]

        console.log(obj.find(item => item.name === '2')) //=>{name:'2',value:'two'}

        console.log(obj.findIndex(item => item.name === '2')); //=>1

        console.log(obj.some(item => item.name === '2')); //=>true

        console.log(obj.every(item => item.name === '2')); //=>false

 

3.ES6剩余参数：

　采用...名称的方式将剩余参数放入一个数组中　

　　function sum(rate,...num){

        　　return num.map(item => item * rate)

   　　 }

    　　console.log(sum(0.67,13,22,53,41));

    　　const player = ['Make','#001',213,123,442]

    　　const [name,id,...scores] = player

    　　console.log(name,id,scores);

4.ES6扩展运算符

　　const arr1 =  ['1', '2', '3', '4']

        const arr2 =  ['1', '2', '3', '4']

        console.log(arr1.concat(arr2));//传统拼接方法  

        console.log([...arr1,...arr2]);//ES6拼接方法

5.ES6对象字面量　　

　　const arr1 = ["jake","make",'dear']

         const arr2 = ["jake1","make1",'dear1']

         const arr = {

            [arr1.shift()]:arr2.shift(),

            [arr1.shift()]:arr2.shift(),

            [arr1.shift()]:arr2.shift(),

         }

         console.log(arr);//=>{dear: "dear1",jake: "jake1",make: "make1"}

6.ES6处理Promise　

　　const u1 = new Promise((reslove,reject)=> {

            setTimeout(()=> {

                reslove({'name':'make'})

            },500)

        })

        const u2 = new Promise((reslove,reject)=> {

            setTimeout(()=> {

                reslove({'age':'24'})

            },1000)

        })

        //取决于所有返回结果

        Promise.all([u1,u2]).then(res =>{

            const [name,age] = res

            console.log(res);

        }).catch(err => {

            console.log(err);

        })

        //取决于第一个返回结果

        Promise.race([u1,u2]).then(res =>{

            const [name,age] = res

            console.log(res);

        }).catch(err => {

            console.log(err);

        })

7.ES6Symbol唯一标识符　　

 　　const studuents = {

            [Symbol('make')]:{age:14},

            [Symbol('make')]:{age:14},

            [Symbol('jake')]:{age:14},

        }

        const syms = Object.getOwnPropertySymbols(studuents).map(sym => studuents[sym])//遍历方法

        console.log(syms);

 

8.ES6类的扩展

　　通过super()方法就很容易的继承父类的属性;

        class Animal {

            constructor(name,belly) {

                this.name = name;

                this.belly = belly;

            }

            eat(food){

                this.belly.push(food);

            }

        }

        class Dog extends Animal{

            constructor(name, age){

                super(name);

                this.age = age

            }

            bark() {

                console.log(`barl Bark!`);

            }

        }

        const lucky = new Dog('lucky',2);