ES6

let const

let 声明的变量不会出现 变量提升，
所在的 {} 区域 会形成块级作用域出现暂时性死区。
eg:可以用来当做循环中的计数器使用。

   var a=[];
        for(let i=0;i<10;i++){
            // 每一个下表里面都存进去一个函数
            a[i]=function(){
                // 此时这个 i 指向的是 局部变量 i 的值，且每一次变量都是 一个全新的变量

                // 打印 i
                console.log(i);
            }
        }
        // 此时每个数组下存放的就是 循环内  i 的值   
        a[6]()       

const 的特性和let 差不多 ，只不过只能声明一次，不能够再次赋值。

参数解构和对象解构

**参数解构，和对象解构类似，**本质就是 “ 解构模式：赋值的变量”，当右边的数据中，有符合左边的结构模式的时候接进行变量的赋值操作就可以结构出值来。

普通解构

1. let [a, b, c] = [1, 2, 3];
   默认值的参数解构
   当为undefind 的时候才启用。 为 null 的时候不起用。
   let [a=1]=[a];

对象解构

  //   根据 对象结构，进行，数据结构的模拟结构。
      let {p: [x, { y }],} = obj;
      console.log(x,y);
    //   对象的结构赋值可取到继承的属性。
    const obj1={};
    const obj2={foo:'bar'};
    // 设置继承的对象    obj  继承obj2
    Object.setPrototypeOf(obj1,obj2);
    // 所以此时 obj1 就拥有了obj2 的属性  foo.
    const {foo}=obj1;
    console.log(foo);
    // *****************************
    // 对象解构也可以设置默认值 ，如果结构不出要解构的对象可以使用默认值,默认值生效的条件是，对象的属性值严格等于undefined.,如果等于null 就不会触发默认值 。
    var {f=3}={};
    console.log(f);
    var {e,g=5}={e:1}
    console.log(e,g);
    // 如果一个已经声明的变量如果 使用对象结构。

问题
如果将一个已经声明的变量用于解构赋值，必须非常小心

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

正确解决办法。

// 正确的写法
let x;
({x} = {x: 1});

字符串的解构赋值

 // **************字符串赋值的解构********************
    let [a,b,c,d,e]='hello';
    console.log(a,b,c,d,e);
    // 类似 length 属性  可以对其解构出字符串的长度
    let {length:len}="hello";
      console.log(len);

函数解构赋值

同参数解构 和对象解构，也可以设置默认值。

  // 函数的参数也可以使用解构赋值
      function add([x,y]){
        return x+y;
      }
      add([1,2]);
      console.log( add([1,2]));

可以正确使用圆括号 的几种方式

[(b)] = [3]; // 正确  左边部分包裹。
({ p: (d) } = {}); // 正确  整体包裹
[(parseInt.prop)] = [3]; // 正确

解构的用途

1. 交换变量

 let x = 1;
      let y = 2;
      [x, y] = [y, x];
      console.log(x,y);

1. 从函数返回多个值
   函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

    // 从函数返回多个值
      function demo(){
        return [1,2,3];
      }
      let [a,b,c]=demo();
      console.log(a,b,c);
      // 从函数中返回一个对象
      function demo2(){
        return {
          foo:1,
          bar:2
        }
      }
      let {foo,bar}=demo2();
      console.log(foo,bar);

3. 非顺序函数传参

函数参数的定义,传统给函数传参的时候需要顺序放入，现在利用解构可以实现不按顺序传参。

   // 函数参数的定义,传统给函数传参的时候需要顺序放入，现在利用解构可以实现不按顺序传参。
      function demo({a,b,c}){
        console.log(a,b,c);
        return a+b+c;

      }
      console.log(demo({c:1,b:2,a:3}));

4. 对json 数据进行解构格外有用

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

5. 函数参数的默认值

      //  函数参数的默认值
      jQuery.ajax = function (
        url,
        {
          async = true,
          beforeSend = function () {},
          cache = true,
          complete = function () {},
          crossDomain = false,
          global = true,
          // ... more config
        } = {}
      ) {
        // ... do stuff
      };

6. 遍历map 结构

  // 遍历 map  解构。
    const map=new Map();
    // 键值的形式
    map.set('first','hello');
    map.set('second','word');
    
    for(let [key,value] of map){
      console.log(key,value);
    }
    // 获取键名
	for (let [key] of map) {
	  // ...
	}

	// 获取键值
	for (let [,value] of map) {
	  // ...
	}

7. 输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

字符串的拓展

• for of 可以 遍历字符串

 // for of  遍历字符串
      for (const value of "滴滴代打") {
        console.log(value);
      }

• 自定义模板
  使用 <% js代码 %>

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

• 标签模板

alert`hello`=====alert(`hello`)

字符串新增方法

• string.raw()

     // raw 是用来处理模板字符串的,也就是处理一些容易被转译的字符使其能够展现
      // 1，\n 不是换行符，而是两个普通字符，转译
      let a = String.raw`hi\n${1 + 3}`;
      console.log(a);//hi\n4
      // 2，此时也不会被转译
      let b = String.raw`hi\u000a`;
      console.log(b);//hiu000a
      // 3，内插表达式还能够正常运行。
      let name = "小明";
      let c = String.raw`hi\n${name}`;
      console.log(c);//hi\n小明
      // 字符中，偶数列，间隔插入数字
      let d = String.raw({ raw: "hello" }, 0, 1, 2, 3);
      console.log(d);//h0el12l30
      // 数组中，偶数列插入数字。同时能够执行一些计算
      let e = String.raw(
        { raw: ["one", "two", "three"] },
        2 + 3,
        "java" + "script"
      );
      console.log(e);//one5twojavascriptthree

• 新增查找字符串的方法，includes、startsWidth、endWidth

  //   ***********ES6 新增查找字符中是否包含要查找的字符串*************
  //true 找到  false  找不到
      let s = `hello word`;
      console.log`${s.includes("w")}`; // 返回布尔值，表示是否找到参数字符串
      console.log`${s.startsWith("h")}`; //返回布尔值，表示参数字符串是否在原字符串的头部。
      console.log`${s.endsWith("d")}`; //返回布尔值，表示参数字符串是否在原字符串的尾部。
  // 同时还可以指定开始查找的位置开始查找。
      console.log`${s.includes("ll", 2)}`;
      console.log`${s.startsWith('world',6)}`;
      console.log`${s.endsWith('hello',5)}`//endsWidth  的指定位置是从哪个位置作为最后的字符。

• 重复字符的方法 reapeat

 /*
        1，重复字符串的 api  repeat(n)  n:数值类型，用来指定重复的次数。
        2，不能为负数
        3，如果小于1的话就等于不重复视为0，NaN 等同于0
        4，如果为字符串的话会转为数值再运行！
      */
      console.log`${"x".repeat(5)}`; // xxxx
      console.log`${"x".toUpperCase().repeat(5)}`; //转大写重复五次
      console.log`${'a'.repeat('5')}`;

• 字符串补全 padStart/padEnd

 // **************字符串长度补全功能*****************************
      // 1，padStart()  头部补全  参数1，补全生效的最大长度 参数2，添加的字符串

      console.log`${"t".padStart(5, "ad")}`;
      // 2, padEnd()    尾部补全

      console.log`${"t".padEnd(4, "ad")}`; //参数1， 补全的最大长度，参数2，添加的字符串

• 消除字符串前后等不可见的空白字符 trimStart/trimEnd

 //   *************消除字符串开头和结尾的空格***************************
      // 他们的行为和 trim() 一致。
      //并且对  tab   换行符等不可见的空白符号也是有效的。
      //返回新字符串，不会对原字符串进行修改。
      const str = " demo ";
      console.log`${str.trim()}`;
      console.log`${str.trimStart()}`; //消除开头的空格
      console.log`${str.trimEnd()}`; //消除结尾的空格
      // 同时这两个方法，还有别名  trimLeft()====trimStart()   trimRight====trimEnd()

• 匹配替换目标所有字符串replaceAll()

   //   *************正则匹配字符的方法********************
      // 1,mathAll() 返回一个正则表达式在当前字符串的所有匹配项

      // ****************查找替换所有字符**************************
      // 1,replace 只能查找替换第一项
      /*
    新增了replaceAll()查找替换所有项，使其个别字符不用正则也能更直观 ,
    参数1，查找的内容/正则(带g 修饰)，
    参数2，需要替换的内容 也可以为一特殊符号：{
        $&：匹配的子字符串。
        $` ：匹配结果前面的文本。
        $'：匹配结果后面的文本。
        $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
        $$：指代美元符号$。
        
    },也可以是一个回调函数 
    eg:'aabbcc'.replaceAll('b', () => '_')
    */
      console.log(`${"abc_d--abc_d--abc_d".replaceAll("_", "匹配了下划线")}`);

      // 正则匹配，需要带 g  否则报错
      console.log(`${"abcd--abcd--abcd".replaceAll(/b/, "这是b")}`);

math 对象的拓展

• trunc() 转换成功返回 数值，转换失败，返回NaN

   console.log(Math.trunc(4.1))//去除一个数的小数部分，返回整数部分

• sign 方法来判断一个数到底是正数还是负数还是0，非数值，会先转换为数值。
  正数 返回+1 负数返回-1，参数为0 则为0 参数为-0 则为-0；其他值为NaN

        console.log(Math.sign(5));
        console.log(Math.sign(-5));
        console.log(Math.sign(0));
        console.log(Math.sign(-0));
        console.log(Math.sign(NaN));