美文网首页工具类ES6~ES12
ES6方向:再回头过一遍ES6

ES6方向:再回头过一遍ES6

作者: 听书先生 | 来源:发表于2021-04-22 23:16 被阅读0次
    1、块级作用域let

    作用域就是变量的有效作用范围

    if(true){
        let num = 3;
    }
    console.log(num); // num is not defined
    

    这是因为let是块级作用域域,只能在对应的区域块中使用

    2、恒量const

    这里有个注意点,const是限制变量的重新分配,而不是去限制它的一些动作,比如数组给个空,但是它可以往数组中push元素,但是不能重新去定义变量。

    const num = [];
    num.push(1);
    num.push(2);
    console.log(num);
    const num = [1,2,3,4,5]; //报错
    
    3、解构数组

    将数组中的元素数据重新赋值

    es5等价操作
    function number(){
       return ['a','b','c']
    }
    var arr = number();
    var num1 = arr[0],num2 = arr[1],num3 = arr[2]
    es6操作
    function number(){
       return ['a','b','c']
    }
    var [num1,num2,num3] = number();
    
    4、解构对象
    function info(){
       return {
            name:'xiaochen',
            age:20
        }
    }
    var { name:userName, age:userAge } = info();
    console.log(userName,userAge);
    
    5、模板字符串

    可以直接的将变量和字符串连起来

    var name = 'xiaochen', age = 18;
    var str = `姓名:${name},年龄:${age}. `;
    console.log(str);
    
    6、带标签的模板字符串
    var name = 'xiaochen', age = 18;
    var str = userInfo`姓名:${name},年龄:${age}. `;
    
    function userInfo(strings,...values){
      console.log(strings);// 返回的是数组  ['姓名:',',年龄:','.'];
      
      console.log(values);// 返回的是数组 ['xiaochen',18]
    }
    
    7、判断字符串是否包含其他字符串
    startsWith: 判断字符串是不是以什么开头的
    endsWith:  判断字符串是不是以什么结尾的
    includes:  判断字符串里是不是包含某字符串
    var str = 'abcde';
    console.log(str.startsWith('a')); // true
    console.log(str.endsWith('e'));  // true
    console.log(str.endsWith('c'));  // true
    
    8、给函数参数设置默认的值
    function number(num1=10,num2=20){
        console.log(num1,num2);
    }
    
    number(); //10,20
    
    9、展开操作运算符
    let arr = ['a','b','c','d'];
    console.log(arr); // 'a' 'b' 'c' 'd'
    let array = [1,2,3,...arr];
    console.log(array);  // [1,2,3,'a','b','c','d']
    
    10、剩余操作运算符Rest

    剩余的参数都属于values里面的了

    function test(n1,n2,...values){
        console.log(n1,n2,values);
    }
    
    test(1,2,3,4,5,6); // 1 2 [3,4,5,6]
    
    
    11、解构参数
    function info(name,age,{ addr,school } = {}){
        console.log(name,age,addr,school);
    }
    info('xiaochen', 20, { addr : '湖南省' , school: 'zzz小学'})
    
    12、函数的名字name属性
    let userInfo = function(){
      return 1;
    }
    console.log(userInfo.name); // userInfo
    
    13、箭头函数
    let info = name => name;
    等价于es5的
    let info = function info(name){
      return name;
    }
    
    14、对象表达式
    let  info = {
      data,
      name,
      sum(){}
    }
    等价于ES5的
    let  info = {
      data : 'data',
      name: 'name',
      function sum(){}
    }
    
    15、对象属性名

    es5中对象的属性的名字不能带空格以及其他非法字符,但是es6有办法处理解决这个问题

    let obj = {}; 
    let obj.name-tea ='铁观音';// 出现报错
    es6处理方法
    obj['name-tea'] = '铁观音';
    使用变量做属性
    let name = 'drink'
    obj[name] = '茶'
    
    16、对比两个值是否相等
    Object.is({},{}); //false
    Object.is('a','a'); //true
    Object.is(NaN,NaN); //true
    Object.is(+0,-0); //false
    
    17、把对象属性赋值到另一个对象里去
    let obj = Object.assign({name:'xiaochen',age:20},{addr:'湖南省长沙市'})
    console.log(obj);
    // {name:'xiaochen',age:20,addr:'湖南省长沙市'}
    
    18、设置对象的prototype
    let user = {
      user(){
        return 'xiaochen'
      }
    }
    let stu = {
      stu(){
        return 'mingming'
      }
    }
    // 复刻某个对象
    let  copyObj = Object.create(user);
    // 判断这个对象和其他对象是否相等
    Object.getPrototypeOf(copyObj ) == user
    // 重新设置某个对象,参数1:要设置的那个对象,参数2:要设置成什么样的对象
    Object.setPrototypeOf(copyObj,stu)
    
    19、设置proto
    let user = {
      user(){
        return 'xiaochen'
      }
    }
    let stu = {
      stu(){
        return 'mingming'
      }
    }
    
    let obj = {
      __proto__:stu
    }
    console.log(obj.stu()); // 'mingming'
    obj.__proto__ = user;
    console.log(obj.user());// 'xiaochen'
    
    20、super
    let user = {
      user(){
        return 'xiaochen'
      }
    }
    let stu = {
      stu(){
        return 'mingming'
      }
    }
    
    let obj = {
      __proto__:stu,
      getName(){
        // super可以拿到上面__proto__中对象的属性方法
        return 'stu里返回的名字: '+super.stu() 
      }
    }
    console.log(obj.getName()); //stu里返回的名字: mingming
    

    相关文章

      网友评论

        本文标题:ES6方向:再回头过一遍ES6

        本文链接:https://www.haomeiwen.com/subject/jbjqrltx.html