es6新增

一、 let 和const变量声明

1.  let 声明块级作用域的变量:

     let 声明的变量不存在变量提升。

     let 在同一代码块不能重复。     

  for(let i=0;i<10;i++){

        }

        // console.log(i);

        let name = 1;

        name = "a";

        {

            let name = 2;

            console.log(name);

        }

        // console.log(name);

2. const 声明一个只读的常量。

声明后不能去修改值(对基础数据类型有效，引用数据类型赋值的是一个地址，修改数据也可以修改到值)。       

       const name1 = "zhang san";

        // name1 = "lisi";

        const peo = {name:'lisi',age:22};

        peo.age = 33;

        //console.log(peo);

二、 变量的解构赋值

   1, 数组的解构赋值, 左右两边的解构相同，就可以解构赋值。

        // let a = 1;

        // let b = 2;

        // let c = 3;

        let [a,b,c] = [1,,3];

        let [,,s3] = ["a","b","c"];

        //console.log(b);

        let [b1,b2,b3] = ["a1","a2"]; // 左右变量不够解构，默认值是undefined

        let [c1,...c2] = [1,2,3,4,5]; // ...c2,把剩下的值都赋值给c2

        //console.log(c2);

2. 对象的解构

   let { name2, age } = {name2:"s1",age:12};

        //console.log(name2, age);

        let { namea: nameTest, agea: ageTest, go="default" } = {namea:"s1",agea:12};// 对象解构根据key值把value赋值在对应的变量位置,解构可以设置默认值。

        //console.log(nameTest,go);

3.字符串解构

   let [d1,d2,d3] = "hello";

        console.log(d1,d2);//h e

4.函数的参数也可以解构

 function f1([x,y,z = 10]){

            console.log(x,y,z);

        }

        f1([1,2]);//1 2 10

三.字符串的扩展

 1.模板字符串

   

    {

            let name = "zhang san";

            let age = 10;

            let str = "姓名："+ name +"年龄：" +age;

            let str1 = `姓名${name}"年龄："${age}`;

            console.log(str1);//姓名zhang san"年龄："10

        }

 2.includes() 返回bool，表示是否找到传递的参数

       

 {

            let str = "    hello  world    ";

            console.log(str.includes("a"));//false

        }

 3.trimStart()去掉头部空格  trimEnd()去掉尾部空格

     

  {

            let str = "    hello  world    ";

            console.log(str.trimStart());//hello  world

            console.log(str.trimEnd());//    hello  world

        }

 4.matchAll()     

   {

            let str = " hello world ";

            console.log(str.matchAll("o").next());// 返回一个遍历器，需要用.next()方法去取结果。一般还是用match配合正则。

           

        }

  5.replaceAll()

   

     {

            let str = " hello world ";

            str1 = str.replace(/o/g,"-");

            str2 = str.replaceAll("o","-")

            console.log(str2);

        }

6.at()接受一个位置索引参数，返回指定位置的字符

       

{

            let str = " hello world ";

            console.log(str.at(3));//l

        }

    四，数值的扩展

     1.Number.isFinite()检测一个值是否有限

console.log(Number.isFinite(1/3));//true

    2. Number.isNaN()  检测一个值是否为NaN。

console.log(Number.isNaN("a"/10));//true

 3. Number.parseInt(),Number.parseFloat();

es6把这两个方法移到了Number对象上，window对象上的还保留了

 五.Math

Math.trunc()返回去除小数的整数部分

    {

            var num = -2.344;

            console.log(Math.trunc(num));//-2

        }

 2.sing()返回数字是正数(1)，还是负数(-1) 还是0(0,-0)

       

 {

            let num = -0;

            console.log(Math.sign(num));//-0

            console.log(Math.sign("A"));//NaN

        }

    3.BigInt(大整数)

      js最大能表示的数值是2的1024次方。       

 console.log(Math.pow(2,1023));

        {

            let num = 333343434n;

            let num1 = 2222222n;

            console.log(num + num1);

        }

 六.函数扩展

 1.rest参数，获取函数的所有参数，与arguments类似，rest是一个数组。

       

 {

            function f1(...values){

                console.log(values,arguments)

            }

            f1(1,3,4,5,6);

        }

 2.箭头函数

       1. 不能作为构造函数

       2. arguments对象,获取所有参数只能用(...values)

        普通函数的this是最近调用该函数的对象。

        箭头函数的this 代表的上层对象，没有自己的this对象   

    {

            function f1(){

                return 10;

            }

            let f2 = () => 10;//相当于return 10

            let f3 = (...values) => {

                let x = 10;

                let y = 15;

                return x + y;

            };

            let f4 = () =>(//直接返回一个对象

                {a:1,c:2}

            )

            let peo = {

                name:"zhang san",

                go:() =>{

                    console.log(this.name);

                }

            }

            console.log(f4);

        }

 箭头函数与普通函数this区别

   

    {

            let dom = {

                name:"dom",

                click1:function(){

                    document.addEventListener("click",function(){

                        // 普通函数谁调用，this就指向谁

                        console.log(this);

                    });

                },

                click2:function(){

                    document.addEventListener("click",()=>{

                        // 箭头函数this指向上一级

                        console.log(this);

                    });

                }

            }

            dom.click1();//#document

            dom.click2();//{name: 'dom', click1: ƒ, click2: ƒ}

        }

 3.尾调用

     

   {

            function g(x){

                return x + 10;

            }

            function f(x){

                return g(x);

            }

        }

  七.数组扩展

      1.  ...扩展运算符

        可把数组转为用，分隔的序列

         可合并多个数组

        可以拷贝数据       

 {

            var arr1 = [1,2,3,4,{a:1}];

            var arr2 = ["a","b"];

            var arr3 = [...arr1,...arr2];

            var arr4 = [...arr1];//只能深拷贝一层

            console.log(arr3);//[1, 2, 3, 4, {a:1}, 'a', 'b']

            console.log(arr4);//[1,2,3,4,{a:1}]

            console.log(arr4 === arr1);//false

        }

    2.from()//把类似数组对象转为数组

     

   {

            let o1 = {

                0:"a",

                1:"b",

                length:2

            }

            o1 = Array.from(o1);

            console.log(o1);// ['a', 'b']

        }

 3.of()把一组值转为数组

     

  {

            let a = Array.of(1,2,3);

            console.log(a);// [1, 2, 3]

        }

   4.find()找出符合条件参数的成员,返回第一个符合条件的值

     findIndex()返回索引

       

{

            let arr = [1,3,5,6];

            let b = arr.find((n)=>n>3);

            console.log(b);//5

            let c = arr.findIndex((n) => n > 3);

            console.log(c);//2

        }

  5.keys()遍历数组的下标，values()遍历数组的元素

     

  {

            let arr = [1,3,5,7];

            for(let item of arr.keys()){

                console.log(item);

            }

        }

   6.includes()返回一个bool,表示数组是否包含此值

       

 {

            let arr = [1,2,3,4];

            console.log(arr.includes(9));//false

        }

7.flat()把嵌套数组拉平

     

  {

            let arr = [1,[2,3]];

            let b = arr.flat();

            console.log(b);//[1, 2, 3]

        }

8.at()根据数组索引返回对应元素，可以支持倒序

   

    {

            let arr = ["a","b","c","d"];

            console.log(arr.at(-1));//d

        }

 七.对象扩展

    1.属性名表达式

       

 {

            let o = {};

            o.aa = "aa";

            let test = "ss";

            o[test] = "bb";

            let c = {[test]:"cc"};

            console.log(c);

        }

 2.  ...对象扩展运算符

        {

            let o = {name:"test1",age:10};

            let o1 = {a:1,b:2};

            let b = {...o,...o1};

            console.log(b);//{name: 'test1', age: 10, a: 1, b: 2}

        }

  3.Object.assign(target,source)//把source对象合并到target上

   

     {

            let t = {a:1};

            let s = {b:2};

            Object.assign(t,s);

            console.log(t);//{a: 1, b: 2}

        }

 4.keys() 返回对象的key为一个数组  values() 把对象的value值返回为一个数组

 

      {

            let o = {a:1,b:2,c:3};

            console.log(Object.keys(o));//['a', 'b', 'c']

            console.log(Object.values(o));//[1, 2, 3]

        }

   5.entries(),把对象转为数组(二维)

       

 {

            let o = {a:1,b:2,c:3};

            console.log(Object.entries(o).flat());//['a', 1, 'b', 2, 'c', 3]



        }

  八.Symbol 数据类型 独一无二的值

   

     {

            let s = Symbol();

            console.log(typeof(s));

            let a = {};

            a[s] = "hhh";

            console.log(a);//{Symbol(): 'hhh'}

        }

   九.Set 数据结构 ，和数组类似，内部数据不会重复。

      1.数组去重

     

  {

            let s = new Set([1,2,2,3,3,4]);

            console.log(s);//Set(4) {1, 2, 3, 4}

            let arr =[1,2,2,3,3,4];

            let s1 = [...new Set(arr)];

            console.log(s1);//[1, 2, 3, 4]

        }

 2.add()添加数据，返回set对象，delete()删除，has()判断是否有此成员，clear()清除所有成员

     

   {

            let s = new Set();

            s.add("a").add("b").add("c");

            s.delete("b");

            // s.clear();

            console.log(s.size)//2

            console.log(s);//{'a', 'c'}

        }

   十。Map数据结构   键值对的集合

        set，get

        has(key) 返回一个bool值，表示当前键是否存在

        delete(key) 删除某个键

        clear() 清除整个map数据     

   

  {

            let o={a:1};

            let b={[o]:"bb"}; // 如果键不是字符串，会自动转为字符串。

            let m = new Map();

            m.set(o,"bb");

            console.log(m.get(o));//bb

        }

        {

            let map = new Map([["name","zhang san"],["age",10]]);

            console.log(map.get("name"));

            console.log(map.size);

            for(let [key,value] of map){

                console.log(key,value);

            }

         

        }