关于ES6

Posted var-chu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于ES6相关的知识,希望对你有一定的参考价值。

关于ES6

  1. 块级作用域

    任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域

  2. let

    let 是ES6新增的声明变量的一种方法,与 var 最明显的区别是

    1. 不存在变量提升

    2. 产生新的作用域(块级作用域)

    3. 在一个作用域中 不允许重复声明

    4. 暂时性死区 在一个块级作用域的任何地方 声明过 就不会再访问外面的了


      var c = 123;
      ?
      if(true) {
      console.log(c);
      let c;
      } // c is not defined   程序会报错 区别于var 它不会预解析 也不会向外找  
  3. const 关键字

    const 用于声明常量(通常大家习惯将常量定义成大写),而常量一旦赋值就不允许被更改,其他属性与let一样

  4. 变量的解构赋值

    按照某种模式,从数组和对象中提取值,对变量进行赋值这被称为解构。

    1. 数组的解构赋值


      //1.左右对等 左侧对变量进行了声明 右侧是一个标准的数据类型(数组)
      var [a, b, c] = [1, 2, 3];
      ?
      console.log(a, b, c);   // 1 2 3
      ?
      //2. 左右两侧不对等
      let [name, age] = [‘小明‘, 16, ‘男‘];
      ?
      console.log(name, age);   //小明   16
      ?
      let [name, age, gender, home] = [‘小明‘, 16, ‘男‘];
      ?
      console.log(name, age, gender, home); //小明 16 男 undefined
      ?
      // 3. 允许嵌套
      let [name, [age], gender] = [‘小红‘, [16], ‘女‘];
      ?
      console.log(name, age, gender); //小红 16 女
      ?
      // 4. rest 运算符
      // ES6 新增了运算符 ...
      let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8];
      ?
      console.log(a); //1
      console.log(b); //2
      console.log(c); //3
      console.log(d); //[4,5,6,7,8]
    2. 对象的解构赋值

      //1.左右对等 左侧对变量进行了声明 右侧是一个标准的数据类型(对象)
      let {name: name1, age: age1} = {name: ‘小明‘, age: 16};
      console.log(name1);

      //可以简写如下:
      let {name, age} = {age: 16, name: ‘小明‘};
      ?
      console.log(name, age);
      //注意:然后根据属性名来对应 没有顺序的要求
      ?
      // 2.左右不对等
      // let {name, age} = {name: ‘小明‘, age: 16, gender: ‘男‘};
      ?
      // let {name, age, gender, home} = {name: ‘小明‘, age: 16, gender: ‘男‘};
      ?
      // console.log(name, age, gender, home); //home 为 undefinded
      ?
      // 3.也是支持嵌套
      let {name, child: {childname}, age} = {
      name: ‘小红‘,
      age: 16,
      child: {
      childname: ‘小小红‘
      }
      };
      console.log(name, childname, age);
  5. string的扩展

    1. str.includes("i") //str是否包含 i 返回布尔

    2. str.startsWith(‘my‘) //str 是不是以 my 开头的 布尔

    3. str.endWith(‘my‘) //str 是不是以 my 结尾的 布尔

    4. no.padStart(6, ‘0‘) //希望长度固定为 6 位,不够在开始位置 以 0 补充

    5. no.padEnd(6, ‘0‘) //希望长度固定为 6 位,不够在结尾位置 以 0 补充

  6. 数组的扩展

    1. Array.of方法创建数组


    // 创建一个若干单元的数组
    let users = new Array(1, 2, 3);   //等价于 let users = [1, 2, 3]
    ?
    let nums = new Array(3);         // 创建一个长度为 3 的数组   存在歧义
       
    // ES6 可以通过 Array.of 方法创建数组  
    ?
    let users = Array.of(1, 2, 3);   //等价于 let users = [1, 2, 3]
    ?
    let nums = Array.of(1);         // 等价于 let users = [1]   没有歧义 统一了
    1. 还提供了数组的检索功能 返回布尔

    var courses = [‘html‘, ‘javascript‘, ‘css‘];
    ?
    console.log(courses.includes(‘php‘)); //flase
    ?
    console.log(courses.includes(‘html‘)); //true
    ?
    1. 在数组中检索第1个满足条件的项, 条件当成回调函数的返回值

    var bs = [1, 3, 4, 7, 16];
    ?
    var res = bs.find(function (val, key, item) {
    // 第1个参数为数组单元值
    // console.log(val);
    // 第2个为索引值
    // console.log(key);
    // 第3个参数为数组本身
    // console.log(item);
    return val > 4;
    });
    // console.log(res); //   根据情况 这个函数执行了4次 满足条件 结束返回 7
    同样:find 换为 findIndex   用法一样 返回索引

     

 

以上是关于关于ES6的主要内容,如果未能解决你的问题,请参考以下文章

关于代码片段的时间复杂度

关于阮一峰老师es6(第三版)中管道机制代码的理解浅析

关于ES6的数组字符串方法

关于片段生命周期

关于代码分割

关于js----------------分享前端开发常用代码片段