ES6 新特性

98 阅读2分钟

以下是 ES6 中的一些新特性和代码示例加注释:

  1. let 和 const 关键字
javascriptCopy code
// 使用 let 声明变量,可以在块级作用域中声明变量
let x = 1;
if (true) {
  let x = 2;
  console.log(x); // 输出 2
}
console.log(x); // 输出 1
// 使用 const 声明常量,常量的值不能被重新赋值
const PI = 3.14159;
PI = 3; // 报错,常量的值不能被重新赋值
  1. 解构赋值
javascriptCopy code
// 数组解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出 1 2 3
// 对象解构赋值
let {name, age} = {name: '张三', age: 18};
console.log(name, age); // 输出 "张三" 18
  1. 箭头函数
javascriptCopy code
// 箭头函数,可以使用箭头(=>)定义函数
let sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出 3
// 箭头函数可以省略 return 关键字
let double = n => n * 2;
console.log(double(3)); // 输出 6
// 箭头函数可以与解构赋值结合使用
let arr = [{name: '张三', age: 18}, {name: '李四', age: 20}];
let names = arr.map(({name}) => name);
console.log(names); // 输出 ["张三", "李四"]
  1. 模板字符串
javascriptCopy code
// 模板字符串,使用反引号(`)定义字符串,可以插入变量和表达式
let name = '张三';
let age = 18;
console.log(`我的名字是 ${name},今年 ${age} 岁。`);
// 可以在模板字符串中使用多行文本
let text = `
  第一行
  第二行
  第三行
`;
console.log(text);
  1. 对象字面量的增强写法
javascriptCopy code
// 对象字面量的增强写法,可以简化对象的创建和属性的定义
let name = '张三';
let age = 18;
let person = {
  name, // 等同于 name: name
  age, // 等同于 age: age
  sayHello() { // 等同于 sayHello: function() {}
    console.log(`我的名字是 ${this.name},今年 ${this.age} 岁。`);
  }
};
person.sayHello(); // 输出 "我的名字是 张三,今年 18 岁。"
  1. 扩展运算符
javascriptCopy code
// 扩展运算符,可以将数组或对象展开成多个参数
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6]
let obj1 = {name: '张三', age: 18};
let obj2 = {gender: '男', address: '北京'};
let obj3 = {...obj1, ...obj2};
console.log(obj3); // 输出 {name: '张三', age: 18, gender: '男', address: '北京'}
  1. Promise 对象
javascriptCopy code
// Promise 对象,用于异步编程
function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('hello');
    }, 1000);
  });
}
fetchData().then(function(data) {
  console.log(data); // 输出 "hello"
});
  1. async/await
javascriptCopy code
// async/await,用于异步编程,可以将异步代码写成同步代码的形式
async function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('hello');
    }, 1000);
  });
}
async function main() {
  let data = await fetchData();
  console.log(data); // 输出 "hello"
}
main();