【前端】--- ES6上篇（带你深入了解ES6语法）

前言：ECMAScript是 JavaScript 的标准化版本，由 ECMA 国际组织制定。ECMAScript 定义了 JavaScript 的语法、类型、语句、关键字、保留字等。

ES6 是 ECMAScript 的第六个版本，于 2015 年发布，引入了许多重要的新特性，使 JavaScript 更加现代化。

变量声明：

作用域有块作用域，函数作用域，全局作用域，其中全局作用域>函数作用域>块作用域

**let和var的区别 (ES6使用let更加严谨）： **

let声明:

使用 let 声明的变量仅在其定义的块（用 { } 包围的代码块）内有效。这意味着变量在块外不可访问。

{
    let x = 10;
    console.log(x); // 输出 10
}
console.log(x); // ReferenceError: x is not defined

var声明:

使用 var 声明的变量的作用范围是整个函数体。如果在函数外部声明，变量将是全局的。

function myFunction() {
    var x = 10; // 函数作用域
    console.log(x); // 输出 10
}
myFunction();
console.log(x); // ReferenceError: x is not defined

const声明:

** const:声明常量的 特点和语法 与let相同的。能改变的是变量，常量不能够改变**

  1.常量不允许修改值。

  2.常量必须赋初始值。

  3.const与let相同 同样有块作用域(没有预解析，变量提升

  4.const定义的引用类型值内容可以修改。

   const PI = 3.1415926;
   // PI=3.14; //报错，1.常量不允许修改值
   // const numA; //2.常量必须赋初始值。
   // numA= 10;

   const obj = { a: 1 };
   console.log(obj);
   obj.a = 20; // 不报错，没有修改到内存地址
   obj = { b: 1 };// 报错，修改内存地址了。console.log(obj);
   //如果存储的是一个数值，存的就是一个值
   //如果存储的是一个对象，存的就是一个内存地址

解构（数组，对象，字符串）：

数组解构：

解构: 左边一种结构，右边一种结构，左右一一对应

1.完全解构

2.不完全解构(部分解构)

3.忽略方式解构

4.嵌套解构

5.剩余运算符方式解构Ig

6.解构默认值

7.使用场景

场景1:使用解构方式实现两数交换

场景2:使用函数返回值

** 1.完全解构：**

      //1.完全解构
      let a, b;
      [a, b] = [1, 2];
      console.log(a, b);

** 2.不完全解构(部分解构)**

      //2.不完全解构(部分解构)
      let [a] = [1, 2, 3];
      console.log(a);
      let [b, c] = [1];
      console.log(b, c);//如果解构不成功，变量值就默认等于undefined

** 3.忽略方式解构**

      //3.忽略方式解构
      let [, , a] = [1, 2, 3];
      console.log(a);

4.嵌套解构

      //4.嵌套解构
      let [a, b, [c]] = ["a", "b", ["c"]];
      console.log(a, b, c);

5.剩余运算符方式解构

      //5，剩余运算符方式解构
      let [a, ...b] = [1, 2, 3, 4, 5, 6, 7];
      console.log(a, b);//a只取第一个，剩下的都赋值给b

6.解构默认值

      //6.解构默认值
      let [a, b = 100] = [90];
      console.log(a, b);//如果设置了默认值，当没有第二个参数值时就取默认值180

场景1:使用解构方式实现两数交换

      let a = 10;
      b = 20;
      [a, b] = [b, a];
      console.log(a, b);

场景2:使用函数返回值

      //使用场景二：使用函数返回值
      function fu() {
        return [1, 2, 3]
      }
      let res = fu()
      console.log(res[0], res[1], res[2])

      let [a, b, c] = fu()
      console.log(a, b, c)

对象解构：

数组解构和对象解构的不同:

数组解构是按照顺序一一解构

对象解构与顺序无关，根据属性名和变量名进行比较

1.完全解构

2. 部分解构

3.解构之后重命名

4.剩余运算符对象解构 - 浅指贝

5。对象默认值

6.使用场景: 场景1: 函数返回值

** 1.完全解构**

      //1.完全解构
      let obj = {
        name: 'zhangsna',
        age: 20
      }
      let { age, name } = obj;
      console.log(name, age);

** 2. 部分解构**

      //2.部分解构
      let obj = { name: 'zhangsan', age: 20 };
      let { age } = obj;
      console.log(age);
      let { address, name } = obj;
      console.l0g(address, name);//如果没有匹配到则变量undefined

**3.解构之后重命名**

      //3.解构之后重命名(匹配的属性名:变最名
      let obj = { name: 'zhangsan', age: 20 };
      let { name: myname, age: myage } = obj;
      console.log(myname, myage);

**4.剩余运算符对象解构 - 浅指贝**

      //4。剩余运算符对象解构-浅拷贝...
      let obj = { name: 'zhangsan', age: 20, address: '大河区' };
      let { name, ...rest } = obj;
      console.log(name, rest);

** 5.对象默认值**

      //5。对象默认值
      let obj = { name: 'zhangsan', age: 20, address: '天河区' };
      let { name, img = 'aaa.png' } = obj;
      console.log(name, img);

** 6.使用场景: 场景1: 函数返回值**

      //场景1:函数返回值
      function fn() {
        return {
          name: 'zhangsan', age: 20, address: '天河区'
        }
      }
      let res = fn();//之前不解构方式
      console.log(res.name, res.age, res.address);//解构方式
      let { name, age, address } = res;
      console.log(name, agP, address);

字符串解构：

字符串解构很简单，就是将字符解构出来赋给变量

    let str = 'ababa'
    let [a, b, c, d] = str
    console.log(a, b, c, d) //a b a b

    let { length } = str
    console.log(length)//5

对象扩展：

对象扩展

1.属性和方法的简洁表达方式

2.属性如果对象属性名和接收的变量名相同可以直接用变量名作为性名方法 方法名(){)

3.0bject.assign()用于对象合井

4.0bject.is()方法 比较两个值是否严格相等

5.遍历对象的方法（键，值，键值对） 以及将对像转为map对象的方法

1.属性和方法的简洁表达方式,键值对的命名和方法的命名

const name = "xiaoming";
      let vue = {
        name,//等同于name:xiaoming
        data() {
          console.log("我是data-fn")
        }
        //等同于
        // data:function(){
        //   console.log("我是data-fn"))
        // }
      }

2.动态属性名：在对象字面量中，使用方括号 [ ] 语法可以动态地计算属性名。这意味着你可以通过表达式来生成属性名。动态方法名：在对象字面量中，方法名同样可以使用动态计算的方式。

//2.表达式方式的属性名和方法名
      let obj = {
        ['my' + 'name']: 'zhangsan',
        ["say" + "Hi"]() {
          console.log("sayHi...")
        }
      }

      let nameobj = {}
      console.log(obj);
      obj.sayHi();
      //后面写项目时，对象的属性可能是动态添加进去。并需要动态获取出来let nameobj{};
      let arr = ["zhangsan", "lisi", "wangwu"];
      //{"zhangsan1":"zhangsan","lisi2":"lisi"}
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
        nameobj[arr[i] + (i + 1)] = arr[i];
      }
      console.log(nameobj);
      // lisi2: "lisi"
      // wangwu3: "wangwu"
      // zhangsan1: "zhangsan"

      for (let i = 0; i < arr.length; i++) {
        console.log(nameobj[arr[i] + (i + 1)])
        // zhangsan
        // lisi
        // wangwu
      };

3.0bject.assign()用于对象合井

    //1.0bect.assign()用于对象合并
    //注意点:如果不希望更改源对象，第一个参数可以给一个}
    //合井时如果存在相同属性，后面对象的会覆盖前面对象属性值
    let a = { name: 'zhangsan', width: 100 };
    let b = { age: 20, width: 200 };
    let ret = Object.assign({}, a, b);
    console.log(ret);
    console.log(a, b);

** 4.0bject.is()方法 比较两个值是否严格相等**

    //2.0bject.is()方法   比较两个值是否严格相等
    console.log(1 == 1);//true
    console.l0g("1" == 1);//true
    console.log("1" === 1);//false

    console.log(object.is(1, 1)); //true
    console.log(object.is("1", 1));//false
    console.log(Object.is({}, {}))//false

** 5.遍历对象的方法（键，值，键值对） 以及将对像转为map对象的方法**

    let obj = {
      name: '11',
      age: 22
    }

    //遍历值
    console.log(Object.values(obj))
    //遍历键值对
    console.log(Object.entries(obj))
    //遍历键
    console.log(Object.keys(obj))

    //将对象转换成map
    let map = new Map(Object.entries(obj))
    console.log(map)

数组扩展：

1.扩展运算符...

解构。数组合并

2.find(callback) 查找，找出第一个符合条件的数组成员

3.findIndex(callback)

4.Array.of()

5.Array.from(obj)将对象转换为真正的数组

6.数组includes()方法

7.at()方法通过下标访问数组

**1.扩展运算符...      解构。数组合并**

      //1。扩展运算符...
      let arr1 = ["a", "b", "c"]
      // let arr2 = arr1.concat();
      let arr2 = [...arrl]
      arr1.push("d")
      console.log(arr1, arr2);

      let arr3 = ["x", "y", "z"];
      let arr4 = [...arr1, ...arr3];
      console.log(arr4);

** 2.find(callback) 查找，找出第一个符合条件的数组成员**

      // 2.find(callback) 查找，找出第一个符合条件的数组成员
      let arr1 = [1, 2, 3, 4, 5, 6];
      let result = arrl.find(function (item) {
        return item > 3; 1
      })
      console.log("result", result);

** 3.findIndex(callback)**

      //3.findIndex(callback)查找。找出第一个符合条件的数组成员对应的索引
      let arr1 = [1, 2, 3, 4, 5, 6];
      let result = arr1.findIndex(function (item) {
        return item > 3;
      })
      console.log("result2", result);

** 4.Array.of()**

      //4.Array.of()将一组值转换为数组 (了解)
      console.log(Array.of(1, 2, 3))
      console.log(Array.of(99))

      let arr = Array(5)
      console.log(arr);//[empty]*5

** 5.Array.from(obj)将对象转换为真正的数组**

      //5.Array.from(obj[,fn])将对象转换成真正的数组
      //获取到的dom对象集合并不是真正数组
      //arguments 也不是真正数组
      //转换条件:需要是可遍历的对象，需要有索引以及length属性
      function fn() {
        console.log("arguments:", arguments);
        //arguments.forEach(function()())//报供arguments.forEach is not a function
        Array.from(arguments).forEach(function (item) {
          console.log(item);
        })
      }
      fn("zhangsan", "lisi")
      console.log(["zhangsan"])
      let obj = { 0: "zhangsan", 1: "lisi", length: 2 }
      console.log(Array.from(obj));

** 6.数组includes()方法 **

    //数组的includes方法
    let arr = [1, 2, 34, 5, 33]
    console.log(arr.includes(33))

** 7.at()方法通过下标访问数组**

    let arr = [12, 3, 3, 2, 56, 5]

    //正数  与之前数组访问下标相同
    //负数  从后往前进行查找
    console.log(arr.at(1))
    console.log(arr.at(-1))//5

字符串扩展：

字符串新增的方法

1.**includes**()  判断是否包含 返回true /false

2.**startswith**() 判断字符串是否是在原字符串的头部 返回true / false

 3.**endsWith**()判断字符串是否是在原字符串的结尾返回true  / false

4.**repeat() **将字符串重复n次 返回重复后的新字符事

5.**padStart**() **padEnd**() 字符串填充

6.字符替换 **replace**() 和 **replaceAll**()

7.优化代码的兼容性所以将**trimleft**()更新了**trimstart**() **trimright**()更新了**trimend**()

** 1.includes() 判断是否包含 返回true /false**

      let str = "hello world"
      console.log(str.includes(h));//true
      console.log(str.includes(yy));//false

** 2.startswith() 判断字符串是否是在原字符串的头部 返回true / false**

      let str = "hello world"
      console.log(str.startsWith(h));//true
      console.log(str.startswith(e));//false

** 3.endsWith()判断字符串是否是在原字符串的结尾返回true / false**

      let str = "hello world"
      console.log(str.endsWith('world'));//true
      console.log(str.endsWith('hello'));//false

** 4.repeat() 将字符串重复n次 返回重复后的新字符事**

      let str = "hello world"
      console.log(str.repeat(3));//hello worldhello worldhello world

5.padStart() padEnd() 字符串填充

      let str = 'addsfsaf'
      //str.padstart(目标长度，[，填充字符串])
      let s = str.padStart(10)
      let s1 = str.padStart(10, '2')

      console.log(s1)  //22addsfsaf

      let str = 'addsfsaf'
      //str.padstart(目标长度，[，填充字符串])
      let s = str.padEnd(10)
      let s1 = str.padEnd(10, '2')

      console.log(s1) //addsfsaf22

6.字符替换 replace() 和 replaceAll()

      //替换所有
      let s = "aflsdjflsefel"
      console.log(s.replaceAll('s', 'a'))
      //替换第一个
      let s = "aflsdjflsefel"
      console.log(s.replace('s', 'a'))

到这里就结束了，感谢大家的观看╮(￣▽￣")╭