Es6基础知识总结

var&let&const

var和let的区别

• 作用域限制
  • var声明的变量往往会越域
  • let声明的变量有严格局部作用域
• 声明次数
  • var可以声明多次；
  • let只可以声明一次；
• 变量提升问题
  • var会存在变量提升；
  • let不存在变量提升；

const声明常量（只读常量）

const声明的是常量，不能对const声明的变量进行修改；

解构表达式

//1、 数组解构
        let arr = [1,2,3];
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];

        let [a,b,c] = arr;

        console.log(a,b,c)

        //2、对象解构
        const person = {
            name: 'jack',
            age: 18,
            language: ['java','c','python']
        }
        //解构对象属性
        const {name:abc,age,language} = person;

        console.log(abc,age,language);
        
        //3、字符串解构
        let str = "hello.vue";
        console.log(str.startsWith("hello"));
        console.log(str.endsWith(".vue"));
        console.log(str.includes("e"));
        console.log(str.includes("hello"));
        
        //4、字符串模板
        
        // 字符串插入变量和表达式，变量名放入${}中，${}中可以放js表达式
        let info = `我是${abc},今年${age}岁了`;
        console.log(info);

函数优化

函数参数默认值

 <script>
        //1、函数参数默认值赋值
        //在ES6以前，无法给一个参数设置默认值，只能采用变通写法
        function add(a,b){
            b = b || 1;
            return a + b;
        }
        console.log(add(10));

        //现在可以这么写，直接给参数加上默认值，没传只会自动使用默认值
        function add(a,b=1){
            return a + b;
        }

        console.log(add(10));

        //2、不定参数
        function fun(...values) {
            console.log(values.length);
        }
        fun(1,2);
        fun(1,2,3,4);

        //3、箭头函数
        //以前声明一个方法
        var print1 = function(str){
            console.log(str)
        };
        console.log(print1('老式写法'));

        var print2 = str => {console.log(str)};
        console.log(print2('箭头函数的写法'));

        var sum1 = function(a,b){
            c = a + b
            return a + c;
        }

        var sum2 = (a,b) => a + b;
        console.log(sum2(11,12));

        var sum3 = (a,b) => {
            c = a + b;
            return a+c;
        }

        console.log(sum3(10,20));

        //4、箭头函数结合解构表达式
        const person = {
            name: 'jack',
            age: 18,
            language: ['java','c','python']
        }

        var hello2 = ({name}) => console.log(`hello,${person.name}`);
        hello2(hello2(person));

    </script>

对象优化

<script>

        const person = {
            name: 'jack',
            age: 18,
            language: ['java','c','python']
        }

        console.log(Object.keys(person)); //['name','age','laguage']
        console.log(Object.values(person));//['jack','18','laguage']
        console.log(Object.entries(person));//['name','age','laguage']

        const target = {a: 1};
        const source1 = {b: 2};
        const source2 = {c: 3};

        //合并对象
        Object.assign(target,source1,source2);
        console.log(target);

        //声明对象简写
        const age =23;
        const name='张三';

        const person1 = {age:age,name:name};

        const person2 = {age,name};
        console.log('person',person2);

        //对象函数属性简写
        let person3 = {
            name: 'jack',
            eat: function(food){
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，必须使用对象.属性
            eat2: food => console.log(person.name + "在吃" + food),
            eat3(food){
                console.log(this.name + "在吃" + food)
            }
        }

        person3.eat('橘子');
        person3.eat2('苹果');
        person3.eat3('香蕉');

        //对象拓展运算符
        let person4 = {name: 'AMY',age: 15};
        let someone = {...person4};
        console.log('someone',someone);

        //合并对象
        let age1 = {age: 15};
        let name1 = {name: 'Amy'};
        let person5 = {
            name: '张三'
        }
        person5 = {...age1,...name1};
        console.log(person5);
        

    </script>

数组优化（map函数和reduce函数）

<script>

        //Es6中新增了map和reduce方法
        //map():接收一个函数，将原数组中的所有元素用这个函数处理后放回新数字返回
        let arr = ['1','20','-5','3']
        
        // arr = arr.map((item) => {
        //     return item*2;
        // })
        arr = arr.map((item) => item*2)    
        console.log(arr)
        //reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
        /**
        1、previousValue: 上一次调用回调返回的值，或者是提供的初始值
        2、currentValue: 数组中当前被处理的元素
        3、index: 当前元素在数组中的索引
        4、array: 调用reduce的数组
        **/
        let result = arr.reduce((a,b) => {
            console.log('上一次处理后',a);
            console.log('当前处理',b);
            return a + b;
        })
        console.log(result);

    </script>

Promise