es6学习

Posted 2022-03-08 做个机灵鬼

let变量

1.不允许重复声明
2.存在块级作用域，常见块级作用域( if(), else(), for(), function())
3.不存在变量提升
4.不影响作用域链

const变量

1.声明变量时必须赋值
2.变量名一般采用大写
3.不允许变量修改
4.没有变量提升
5.存在块级作用域
6.声明对象或者数组是推荐使用const声明，const声明可以采用push等方法对数组进行修改

变量解构赋值(经常使用的对象方法或者数组元素时可以使用解构赋值)

  // 对数组的解构赋值
        const arr = ['张三','李四','李明'];
        // 数组里面对应三个变量
        let [zhang,li,ming] = arr;
        console.log(zhang,li,ming);
        // 对象的解构赋值
        const star = 
            name: '于谦',
            tags: ['抽烟','喝酒','烫头'],
            fn: function()
                console.log('可以表演相声');
            
        
     /*    let name,tags,fn = star;
        console.log(name,tags,fn); */
        let name,tags:[chou,he,tang],fn = star;
        // 当tags解析数组里面时，那么tags就不可以使用了
        // console.log(tags);
        console.log(chou,he,tang,);

模板字符串

1.直接使用反引号进行赋值多个标签
2.使用$()进行进行字符拼接

  // 反引号的使用
        let str = `<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>`;
        console.log(str);
        // 反引号进行字符串拼接
        let satr = 'web';
        let str2 = `$satr工程师`;
        console.log(str2);

简化对象写法

es6中允许直接往对象里添加变量

 let mingc = '尚硅谷';
        let price = 10000;
        let fn = function()
            console.log('每天学习');
        
        const str = 
            mingc,
             price,
             fn,
            sum()
                console.log('11');
            
        
        console.log(str); 

箭头函数

1.箭头函数的声明

let fn = () => 
          console.log('箭头函数');
      

2.箭头函数的this指向是静态的，无法通过调用改变this的指向，this指向函数体外层的环境

let fn = function()
       
        console.log(this);
    
    fn.call(,2,4,6);
       fn.apply(,[1,2,3])
    fn.call()//传统的函数可以利用call apply方法改变函数this的指向，调用call方法后this指向call传入的空对象
       let add = () => 
         console.log(this);
       
    //    无法改变箭头函数的指向，指向window

3.箭头函数不能做构造函数
4.箭头函数不能使用argument ，argument是函数运行是的实参列表
5.箭头函数的简写

        //5.箭头函数简写
       //1.不写括号(),当函数有且只有一个形参时 可以不写小括号
       //2.不写花括号,当函数体只有一行时不写花括号 并且语句的执行结果为函数返回值,不写花括号也不能写return
      /*  let fn = n => 
           console.log(n);
       
       fn(100);
       //生成1~100的随机数
       let sum = (n,m) =>  Math.ceil(Math.random() * (n-m+1)+ m);
       console.log(sum(1,100)); */

箭头函数的使用场景

1.this与函数体有关时不能使用 例如
事件的回调函数 ，对象的方法
2.适合使用箭头函数的
事件内的定时器的回调函数，数组的一些回调方法 filter map forEach

 // 两秒后盒子背景颜色变为粉色
        let ad =document.querySelector('.box');
        ad.onclick = function()
             //保存this,使用箭头函数则不用保存this，函数的外部环境的this指向事件源
            // let _this = this;
           setTimeout(()=>this.style.backgroundColor = 'pink',2000);
        
        // 2.选出一个数组的所有偶数
        let arr = [1,23,5,5,32,64,758,6,9,9,6,9,6,6,83,5,2];
       /*  let Arr = arr.filter(function(items)
            if(items % 2 ===0) 
                return true;
            
            else 
                return false;
            
        )
         console.log(Arr); */
        // filter 过滤 forEach map
        let Arr = arr.filter(items => items % 2 ===0);
        console.log(Arr);
        // 如果回调与this的值相关 则不能使用箭头函数 
        // 1.事件的回调函数 2.对象的方法
        //适合使用回调函数的场景，回调与this无关
        // 1.定时器 2.数组的一些回调方法 filter map forEach

rest参数(可用来替代argument)

可以获取到函数的所有实参，并返回一个数组，…对象名

 function main(...add) 
            // arguments用来获取所有实参
            console.log(arguments);//获取到函数运行的实参列表
            console.log(add);//把所有实参整合成一个数组返回
            // 输出一个数组的最大值 利用es6将数组打散...，Math.max方法是不能传入一个数组的
            console.log(Math.max(...add));

        
        main(1,23,4,5,);

扩位运算符

把一个数组或者对象去掉[]或者里面原有的数据不变

 let arr = ['李明','张三','李四'];
        function fn() 
            console.log(arguments);
        
        // ...arr会把数组进行展开 => '李明','张三','李四'
         fn(...arr);
        let killOne = 
            q:'天音波'
        
        let killTwo = 
            w:'神龙摆尾'
        
        let killThree = 
            e:'天雷破'
        
        let killFour = 
            r:'地动山摇'
        
        let user = ...killOne,...killTwo,...killThree,...killFour;
        console.log(user);

应用：数组合并，数组克隆，将伪数组转换为数组

Symbol数据类型

  // es6 提供了一种原始的数据类型 Symbol,表示独一无二的值
        let s1 = Symbol();
        console.log(s1);
        // 返回结果的false
         let s2 = Symbol('lili');
         let s3 = Symbol('lili');
         console.log(s2===s3);
        //  返回结果等于true
        let s4 = Symbol.for('lili');
        let s5 = Symbol.for('lili');
        console.log(s4===s5);
        // Symbol 不能与其他数据类型进行计算
       /*  let s6 = Symbol(11);
        console.log(s6+11); */
         const result = s1 + 123;

迭代器

迭代器iterator是一个接口，某种数据类型部署了这个接口就可以实现数据自定义遍历， iterator存在于 Array等数据原生具备iterator接口(可使用for of遍历数据)
数组的原型上具有Symbol.iterator这个方法,这个方法返回了一个指针对象，该指针对象指向数据的初始位置，指针对象里面有个next方法，每次调用next方法时 返回一个value和done值， value表示该数组的值，done返回一个布尔值，false则表示该数组未到遍历完
对象调用方法 通过.xxx 或者[]

 // 迭代器iterator是一个接口，某种数据类型部署了这个接口就可以实现数据biali
        // iterator存在于 Array等数据原生具备iterator接口(可使用for of遍历数据)
        const arr = ['刘德华','张学友','黎明','郭富城'];
        for(let i of arr) 
            console.log(i);
        
     /*    for(let i in arr) 
            console.log(i);
         */
       
        // 数组的原型上具有Symbol.iterator这个方法,这个方法返回了一个指针对象
        // 该指针对象指向数据的初始位置
        // 指针对象里面有个next方法，每次调用next方法时 返回一个value和done值
        // value表示该数组的值，done返回一个布尔值，false则表示该数组未到遍历完
        // 对象调用方法 通过.xxx 或者[]
        let s = arr[Symbol.iterator]();
        console.log(s.next());
        console.log(s.next());
        console.log(s.next());
        console.log(s.next());
        console.log(s.next());
        // 迭代器遍历自定义对象
         const team = 
            name: 'byte',
            member: [
                'one',
                'two',
                'three',
                'four'
            ],
            // 手动配置Symbol.iterator
            [Symbol.iterator]:function()
                // 方法里面返回一个指针对象
                let index = 0;
                return 
                    
                    // 指针对象里面有个next方法
                      next : () => 
                        //   声明一个对象
                          const result =  value: this.member[index],done:false;
                        //   只要返回done的值是ture，for of 函数就会停止执行
                        if(index >= this.member.length) 
                           result.done = true;
                        
                          index++;
                         return result;
                      
                
            
        
        // 遍历对象的member值
        for(let i of team) 
              console.log(i);