关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}

关于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]   没有歧义 统一了

   2. 还提供了数组的检索功能 返回布尔

   var courses = ['html', 'javascript', 'css'];
   ​
    console.log(courses.includes('php')); //flase
   ​
    console.log(courses.includes('html')); //true
   ​

   3. 在数组中检索第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   用法一样 返回索引

7. 一般函数的拓展
   1. 　给函数添加默认参数

      function foo(name="小明"){
      　　console.log(name);       
      }
      foo("小华") //"小华";
      foo()      //小明""

      　　

   2. 不确定个数的参数传递 接收

      function fn(...abc){
          console.log(abc)   //传入参数后 可以在函数中 通过 abc[0]  abc[1] .... 分别拿到第一个 第二个 ...参数     
      }
      
      fn(1);  //[1]
      

      fn(1,2);  //[1,2]   　

8.  箭头函数

   
   ​
   // 以往定义函数的方式
   ​
   function foo(a) {
    return a;
   }
   ​
   var bar = function (b) {
    return b;
   }
   ​
   // ES6 新增定义函数的方法
   ​
   // () => {
   //  console.log('定义了一个函数');
   // }
   ​
   // 一个函数是由以下几部分构成
   // a) 名称
   // b) 参数
   // c) 函数体
   // d) 返回值
   ​
   // let fn(函数名称) = (这里写参数) => {这里函数体，返回值可以写在这里}
   ​
   let sayHi = (name) => {
    console.log(`你好 ${name}`);
   }
   ​
   // sayHi('小虹');
   ​
   // 还有一些特殊写法
   ​
   // 比如 只有一个参数，可以省略 参数的括号
   // let 名称 = 参数 => {}
   ​
   // let sayHello = name => {
   //  console.log(`你好 ${name}`);
   // }
   ​
   // sayHello('小米');
   ​
   // 比如 没有参数，只写空的括号
   // let 名称 = () => {}
   ​
   // 比如 函数体中只有一行逻辑，可以省略 函数体的括号
   // let 名称 = () => console.log('只有一行逻辑')
   ​
   // let sayHello = (name) => console.log(`你好 ${name}`);
   ​
   // sayHello('小刚');
   ​
   // 比如 只有一个参数和只有一行逻辑
   // let sayHello = name => console.log(`你好 ${name}`);
   ​
   // sayHello('小则');
   ​
   // 如果只有一行逻辑，这个结果自动的返回
   ​
   let getName = name => name;
   ​
   let getName = (name) => {
    return name;
   }
   ​
   let a = getName('诠诠');
   ​
   console.log(a);

    

 

转载于:https://www.cnblogs.com/var-chu/p/8418002.html