当前位置：首页 > article >正文

ECMAScript 6

article 2024/11/8 4:30:55

JavaScript 是一门非常有前途的语言，随着时代的发展，JavaScript 的编程规范也在不断地迭代更新，就如同 JDK 版本从 JDK1.0(1996 年)到现在的 JDK22(2024 年)，JavaScript 的规范 ECMAScript 也从 ES1.0(1997 年)到 ES12(2023 年)。前端工程化的普及和浏览器对新特性的支持让前端得到了飞速发展，前端工程师也逐渐的使用更新的 ES6+语法来编写自己的前端代码，那么作为新时代的软件工程师，让我们拥抱变化，开始学习 ES6 的语法吧。

ECMAScript 6，简称ES6，是JavaScript语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一
ES6对JavaScript的改进在以下几个方面：

更加简洁：ES6引入了一些新的语法，如箭头函数、类和模板字符串等，使代码更加简洁易懂。
更强大的功能：ES6引入了一些新的API、解构语法和迭代器等功能，从而使得JavaScript更加强大。
更好的适用性：ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序。

总的来说，ES6在提高JavaScript的核心语言特性和功能方面取得了很大的进展。由于ES6已经成为了JavaScript的标准，它的大多数新特性都已被现在浏览器所支持，因此现在可以放心地使用ES6来开发前端应用程序。

1. 变量声明（let 和 const）

let：
- 块级作用域：在 ES6 之前，JavaScript 只有全局作用域和函数作用域。let关键字的引入使得变量具有块级作用域，这与其他许多编程语言类似。例如，在一个for循环中使用let声明的变量，其作用域仅限于该for循环块内部。

for (let i = 0; i < 5; i++) {
    console.log(i);
}
console.log(i); // 会报错，因为i的作用域仅限于for循环块

不存在变量提升：使用var声明变量时会出现变量提升的情况，即变量可以在声明之前使用，其值为undefined。但let声明的变量不会出现这种情况，在声明之前使用会报错。

console.log(a); // 报错：a is not defined
let a = 5;

const：
- 常量声明：const用于声明常量，一旦声明，其值就不能再重新赋值。这对于那些在程序运行过程中不应该被修改的值非常有用，比如数学常量PI或者配置对象等。

const PI = 3.14159;
PI = 3; // 报错：Assignment to constant variable.

同样具有块级作用域：和let一样，const声明的常量也具有块级作用域。

2. 箭头函数（Arrow Functions）

简洁的语法：箭头函数提供了一种更简洁的函数定义方式。例如，传统函数定义为function(x) { return x * 2; }，用箭头函数可以写成(x) => x * 2。如果函数体只有一条语句，并且这条语句是返回一个值，那么可以省略大括号和return关键字。
词法作用域下的this：在普通函数中，this的值是在函数被调用时确定的，这可能会导致一些难以理解的情况，尤其是在回调函数中。箭头函数没有自己的this，它的this是从定义它的外层作用域中继承而来的。例如：

const obj = {
    value: 10,
    method: function() {
        setTimeout(() => {
            console.log(this.value); 
        }, 100);
    }
};
obj.method(); // 10，箭头函数中的this继承自obj

如果使用普通函数作为setTimeout的回调，this的值会指向window（在浏览器环境中）或者global（在 Node.js 环境中），而不是obj。

ES6的解构表达式：

ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象，方括号 [] 表示数组。通过解构赋值，函数更方便进行参数接受等！

数组解构赋值：

可以通过数组解构将数组中的值赋值给变量，语法为：
let [a, b, c] = [1, 2, 3]; //新增变量名任意合法即可，本质是按照顺序进行初始化变量的值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

该语句将数组 [1, 2, 3] 中的第一个值赋值给 a 变量，第二个值赋值给 b 变量，第三个值赋值给 c 变量。
可以使用默认值为变量提供备选值，在数组中缺失对应位置的值时使用该默认值。例如：

let [a, b, c, d = 4] = [1, 2, 3]; console.log(d); // 4

对象解构赋值

可以通过对象解构将对象中的值赋值给变量，语法为：
let {a, b} = {a: 1, b: 2};
//新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值
//等价于 let a = 对象.a let b = 对象.b

console.log(a); // 1
console.log(b); // 2

该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量，b 属性值赋值给 b 变量。
可以为标识符分配不同的变量名称，使用 : 操作符指定新的变量名。例如：

let {a: x, b: y} = {a: 1, b: 2}; console.log(x); // 1 console.log(y); // 2

箭头函数定义语法：

语法 (参数 1，参数 2，...，参数)=>{函数声明 } (参数 1，参数 2，...，参数 N)=>表达式(单一) //相当于:(参数 1，参数 2，...，参数 N) =>{ return 表达式;} //当只有一个参数时，圆括号是可选的 (单一参数) =>{函数声明} 单一参数 =>{函数声明} //没有参数的函数应该写成一对圆括号 ()=>{函数声明}

查看全文

http://www.kler.cn/a/383915.html