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

空谷忧人

已于 2024-08-26 21:48:58 修改

阅读量1k

点赞数 10

分类专栏：前端知识文章标签： es6 前端 javascript

于 2024-08-26 21:46:43 首次发布

本文链接：https://blog.csdn.net/qq_62555748/article/details/141561531

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

4.数组扩展

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

（1）将一个数组转为用逗号分隔的参数序列。

（2）替代函数的 apply 方法：由于扩展运算符可以展开数组，所以不再需要 apply 方法，将数组转为函数的参数了。

（3）合并数组：

4.2 新增数组方法

（1）Array.from()

方法用于将类数组转为真正的数组，常见的类数组有三类：

arguments
元素集合
类似数组的对象

①arguments：是一个类数组对象，它包含了传递给函数的所有实参。

②元素集合

③类似数组的对象（了解即可）

（2）Array.of()

Array.of() 方法用于将一组值，转换为数组。

5.对象的扩展

5.1 属性和方法的简洁表示

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

5.2 属性名表达式

ES6 允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

5.3 扩展运算符（...）

ES2018 将这个运算符引入了对象。

5.4 箭头函数

ES6 允许使用“箭头”（ => ）定义函数。可以优化函数的使用，但不是替换以前的函数声明方案使用，一般在函数作为参数传递的时候使用箭头。

箭头函数式使用规则

注意：对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是箭头函数没有自己的 this 对象，内部的 this 是引用外层的 this对象。

空谷忧人

关注

10
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
【ES6新特性】介绍ES6新特性的内容，如var，Let，Const声明变量的区别，解构赋值的概念，字符串的扩展，数组的扩展，以及对象的扩展。

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

扫一扫

专栏目录