【ES6新特性】介绍ES6新特性的内容，如var，Let，Const声明变量的区别，解构赋值的概念，字符串的扩展，数组的扩展，以及对象的扩展。

news2024/12/24 20:53:44

1.var，let，const的区别

1.1 var

1.2 let

1.3 const

1.4 区别总结

2.解构赋值

2.1 基本解构化赋值

2.2 数组取值

2.3 对象解构化赋值和取值

2.4 Math对象的解构化使用

3. 字符串扩展

3.1 新增字符串遍历方式

3.2 模版字符串

3.3 字符串的函数扩展

4.数组扩展

4.1 新增扩展运算符spread ( ... ）

4.2 新增数组方法

（1）Array.from()

（2）Array.of()

5.对象的扩展

5.1 属性和方法的简洁表示

5.2 属性名表达式

5.3 扩展运算符（...）

5.4 箭头函数

1.var，let，const的区别

1.1 var

语法格式: var 变量名;

该关键字定义作用域为全局。（全局变量）
var 声明的变量会被提升至作用域的顶部。你可以在变量声明之前使用它，此时变量的值为 undefined。虽然变量会被提升，但变量的赋值不会被提升。因此，在变量声明之前试图访问该变量时，其值仍是 undefined。（变量提升）
可以多次使用 var 声明同一个变量名，而不会引发语法错误。（重复声明）

1.2 let

语法格式: let 变量名;

只在最近的 { } 内有效。（块级作用域）
let不存在变量提升,var声明的变量在浏览器解析js代码的时候就会创建，但是let在js代码执行的时候才创建。（不存在变量提升）
同级作用域中不允许重复声明变量！出现同名变量会报错！（不允许重复声明）
变量在没有被声明之前不允许使用。（未声明不可使用）

1.3 const

声明一个只读的常量。一旦声明，常量的值就不能改变。语法格式: const 变量名=常量值;

其特点在let特点的基础上多一个不可变性。

声明的时候必须初始化，并且值不可以改变。（不可变性）
只在 { } 中有效。（块级作用域）
不可向上提升，不可重复声明(所有的变量不可重复)。（不存在变量提升，不允许重复声明）
变量在没有被声明之前不允许使用。（未声明不可使用）

注：虽然 const 变量本身不可重新赋值，但如果是对象或数组的话，其内部的属性是可以修改的。

1.4 区别总结

var：具有函数作用域，变量提升，可以重复声明。
let：具有块级作用域，变量不可提升，不能重复声明，可以重新赋值。
const：具有块级作用域，变量不可提升，不能重复声明，不能重新赋值。

2.解构赋值

2.1 基本解构化赋值

给变量a,b赋值。

let[a,b]=[12,14];
        console.log(a);
        console.log(b);

2.2 数组取值

在数组中取值

let arr=["嘿嘿","哈哈","嘻嘻"];
        let[s1,s2]=arr;
        console.log(s1);//嘿嘿
        console.log(s2);//哈哈

2.3 对象解构化赋值和取值

对象解构化赋值

//对象解构化赋值
        var obj={
            name:"张三",
            age:20,
            test:function(){
              console.log("我是对象中定义的函数")  
            }
        }

对象解构化取值

       //对象解构化赋值
        var obj={
            name:"张三",
            age:20,
            test:function(){
              console.log("我是对象中定义的函数")  
            }
        }
        //传统方式取值
         let name=obj.name;
         let age=obj.age;
        //解构化取值
        let{name,age}=obj;
        console.log(name+"---"+age);
        //传统方式，使用函数
        obj.test();
        //解构化方式，使用函数
        //取出对象obj里面为名为test的函数。
        let{test}=obj;
        test();

2.4 Math对象的解构化使用

Math对象的解构使用

        //Math对象的使用
        console.log(Math.ceil(3.14));//向上取整  4
        console.log(Math.floor(3.14));//向下取整 3
        console.log(Math.round(6.8));// 四舍五入 7
        // 使用结构化后，使用更加简洁
        let{ceil,floor,round}=Math;
        console.log(ceil(9.21));
        let{log}=console;
        log("aaaa");

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

3. 字符串扩展

3.1 新增字符串遍历方式

格式：

for (let 变量名 of 字符串){

//循环代码

}

注意: ：let后定义的变量值为每次遍历的字符串的字符的值。

还能遍历其他的可迭代（iterable）对象，如数组 (Array)，字符串 (String)，映射 (Map)，集合 (Set)类数组对象等等。

3.2 模版字符串

let url = "www.zyp.com";
2let a2 = "<a href='" + url + "'></a>"; // 字符串拼接
3let a3 = `<a href='${url}'></a>`; // 使用模板字符串
4
5console.log(a2); // 输出: <a href='www.zyp.com'></a>
6console.log(a3); // 输出: <a href='www.zyp.com'></a>

3.3 字符串的函数扩展

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

注：这三个方法都支持第二个参数，表示开始搜索的位置

repeat()：返回一个新字符串，表示将原字符串重复 n 次。

padStart()和padEnd()：字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。 padStart() 用于头部补全， padEnd() 用于尾部补全。

trimStart()和trimEnd()：它们的行为与 trim() 一致， trimStart() 消除字符串头部的空格， trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

at() ：接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

注意：如果参数位置超出了字符串范围， at() 返回 undefined