Javascript 是一种广泛使用的编程语言，尤其在 Web 开发中占有重要的地位。为了不断提高 Javascript 的性能和功能，Javascript 社区不断推出新的版本，其中 ES6、ES7 和 ES8 是最常用的版本。
本文将对 Javascript ES6、ES7 和 ES8 的新特性进行总结和介绍，并提供相应的示例代码，帮助读者更好地理解这些新特性。
ES6 新特性
1. 块级作用域
ES6 引入了块级作用域，可以用 let 和 const 声明变量和常量。这样，在块级作用域内声明的变量和常量只在该作用域内有效，不会污染全局作用域。
// let 声明变量
function test() {
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
// const 声明常量
const PI = 3.1415926;2. 箭头函数
ES6 引入了箭头函数，可以简化函数的写法，并且自动绑定 this 关键字。
// 箭头函数
const sum = (a, b) => a + b;
// this 指向
const obj = {
name: 'John',
getName: function() {
setTimeout(() => {
console.log(this.name); // John
}, 1000);
}
};3. 模板字符串
ES6 引入了模板字符串，可以方便地拼接字符串，并且支持多行字符串和变量插值。
// 模板字符串
const name = 'John';
const age = 25;
const message = `My name is ${name}, and I'm ${age} years old.`;
console.log(message);4. 解构赋值
ES6 引入了解构赋值，可以方便地从数组和对象中取出值，并赋值给变量。
// 数组解构赋值
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c);
// 对象解构赋值
const obj = { name: 'John', age: 25 };
const { name, age } = obj;
console.log(name, age);5. 默认参数
ES6 引入了默认参数，可以在函数定义时给参数设置默认值。
// 默认参数
function test(x = 1, y = 2) {
console.log(x, y);
}
test(); // 1, 2
test(3); // 3, 2
test(undefined, 4); // 1, 46. 扩展运算符
ES6 引入了扩展运算符，可以方便地将数组或对象展开成多个参数。
// 扩展运算符
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
const obj1 = { name: 'John' };
const obj2 = { age: 25 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);7. Promise
ES6 引入了 Promise，可以更好地处理异步操作，避免回调地狱。
// Promise
function test() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
});
}
test().then((result) => {
console.log(result);
});8. Class
ES6 引入了 Class，可以更方便地定义类和继承关系。
// Class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`My name is ${this.name}, and I'm ${this.age} years old.`);
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
study() {
console.log(`${this.name} is studying in grade ${this.grade}.`);
}
}
const student = new Student('John', 15, 9);
student.sayHello();
student.study();ES7 新特性
1. Array.prototype.includes
ES7 引入了 Array.prototype.includes，可以方便地判断数组中是否包含某个元素。
// Array.prototype.includes const arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
2. 指数运算符
ES7 引入了指数运算符，可以方便地进行幂运算。
// 指数运算符 console.log(2 ** 3); // 8 console.log(10 ** -1); // 0.1
ES8 新特性
1. async/await
ES8 引入了 async/await，可以更方便地处理异步操作，使代码更加简洁易读。
// async/await
function test() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
});
}
async function main() {
const result = await test();
console.log(result);
}
main();2. Object.values 和 Object.entries
ES8 引入了 Object.values 和 Object.entries，可以方便地获取对象的值和键值对数组。
// Object.values 和 Object.entries
const obj = { name: 'John', age: 25 };
console.log(Object.values(obj)); // ['John', 25]
console.log(Object.entries(obj)); // [['name', 'John'], ['age', 25]]3. String.prototype.padStart 和 String.prototype.padEnd
ES8 引入了 String.prototype.padStart 和 String.prototype.padEnd，可以方便地对字符串进行填充。
// String.prototype.padStart 和 String.prototype.padEnd const str = 'Hello'; console.log(str.padStart(10, 'x')); // 'xxxxxHello' console.log(str.padEnd(10, 'x')); // 'Helloxxxxx'
总结
本文介绍了 Javascript ES6、ES7 和 ES8 的新特性，包括块级作用域、箭头函数、模板字符串、解构赋值、默认参数、扩展运算符、Promise、Class、Array.prototype.includes、指数运算符、async/await、Object.values 和 Object.entries、String.prototype.padStart 和 String.prototype.padEnd 等特性。这些新特性可以大大提高 Javascript 的编程效率和性能，帮助开发者更好地完成 Web 开发任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bf2558add4f0e0ff8ac2a4