ECMAScript 2015(ES6)

2025-02-20 20:00

2025-02-21 19:10

980

核心特性

1. 块级作用域声明

let 块级作用域变量，解决 var 的变量提升和全局污染问题

javascript

      {
  let x = 10;
  console.log(x); // 输出: 10
}
console.log(x); // ReferenceError: x is not defined

const 声明常量，不可重新赋值（但对象/数组内容可修改）

javascript

      const name = "xlei";
console.log(name); // 输出: 'xlei'
PI = "xxxx"; // TypeError: Assignment to constant variable.

const obj = {};
obj.name = "xlei";
console.log(obj.name); // 输出: xlei

2. 箭头函数

简化函数语法，自动绑定外层 this（无自己的 this）。

javascript

      const sum = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;
console.log(greet("xlei"), sum(1, 2)); // 输出: Hello, xlei! 3

3. 模板字符串

使用反引号（`）定义，支持多行字符串和变量插值（${}）。

javascript

      const name = "星泪";
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, 星泪!

4. 解构赋值

允许从数组或对象中提取值，赋值给变量。

javascript

      // 数组解构
const [a, b] = [1, 2];
console.log(a, b); // 输出: 1

// 对象解构
const { name, age } = { name: "xlei", age: 25 };
console.log(name, age); // 输出: xlei 25

5. 默认参数

为函数参数设置默认值。

javascript

      function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出: Hello, Guest!
greet("星泪"); // 输出: Hello, 星泪!

6. 扩展运算符

展开数组或对象，用于合并、复制等操作

javascript

      const arr1 = [1, 2, 3];
function sum(x, y, z) {
  return x + y + z;
}
console.log(sum(...arr1)); //输出:6
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); //输出:[1,2,3,4,5,6]

7. 类（Class）

语法糖，基于原型的面向对象编程更清晰。

javascript

      class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

const xlei = new Person("星泪");
xlei.greet(); // 输出: Hello,星泪!

8. 模块（Modules）

javascript

      // 导出模块（math.js）
export function add(x, y) {
  return x + y;
}

// 导入模块
import { add } from "./math.js";
console.log(add(2, 3)); // 输出: 5

9. Promise

用于处理异步操作，避免回调地狱。

javascript

      const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

promise.then(result => {
  console.log(result); // 输出: Success!
});

10. Symbol 类型

唯一且不可变的值，用于对象属性的唯一标识

javascript

      const id = Symbol("uniqueId");
const obj = { [id]: 123 };

11. 新的数据结构

Set：集合，不重复且无序的元素集合。

javascript

      const set = new Set([1, 2, 2, 3]); // {1, 2, 3}

Map：键值对集合，键可以是任何类型的值，值可以是任何类型的值。

javascript

      const map = new Map();
map.set("key", "value");
console.log(map.get("key")); // 输出: value

12. Proxy 代理

代理对象，用于拦截和修改操作，如读取、写入、删除属性等。Vue3 就是基于 Proxy 实现的响应式数据绑定。

javascript

      const target = {};
let proxy = new Proxy(target, {
  get: function (target, property, receiver) {
    return property in target ? target[property] : "Not Found";
  },
  set: function (target, property, value, receiver) {
    if (target[property] != value) {
      target[property] = value;
      console.log(`${property} 更新为 ${value}`);
    }
  }
});

proxy.name = "xlei";

console.log(proxy.name); // 输出: "xlei"
console.log(proxy.age); // 输出: "Not Found"

13. 字符串/数组/对象的新增方法(常用)

字符串

includes() 判断字符串中是否包含指定子串

javascript

      const str = "Hello, World!";
console.log(str.includes("World")); //输出:true

数组

find() 在函数中如果找到符合条件的数组元素就 return，并停止查找
findIndex() 返回符合条件的数组元素的索引

javascript

      const arr = [1, 2, 3, 4, 5];
console.log(arr.find(item => item > 3)); //输出:4
console.log(arr.findIndex(item => item > 3)); //输出:3

对象

Object.values() 返回一个数组，包含对象自身可枚举属性的值。
Object.entries() 返回一个数组，包含对象自身可枚举属性的键值对数组。
Object.keys() 返回一个数组，包含对象自身可枚举属性的键。

javascript

      const obj = { name: "xlei", age: 25 };
console.log(Object.values(obj)); //输出:["xlei",25]
console.log(Object.entries(obj)); //输出:[["name","xlei"],["age",25]]
console.log(Object.keys(obj)); //输出:["name","age"]

Object.assign() 将源对象的所有可枚举属性复制到目标对象中。

javascript

      const target = { a: 1, b: 2 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2); //{a:1,b:2,c:3}

总结

ECMAScript 2015（ES6）是 JavaScript 现代化的里程碑，其特性大幅提升了代码的简洁性、可读性和功能性，成为现代 Web 开发的基石。后续版本（ES2016+）在 ES6 基础上进一步扩展，形成了完整的现代 JavaScript 生态。

评论区

评论区寄了

文章目录