【ECMAScript标准规范】

ECMAScript 是一种定义脚本语言核心功能的标准,最常见的实现就是 JavaScript。随着 ECMAScript 标准的不断发展,JavaScript 也引入了许多新的特性,极大提高了开发效率和代码可读性

1. ECMAScript 5 (ES5)

ECMAScript 5(2009年)是一个非常重要的版本,它引入了许多现代 JavaScript 的核心特性。

1.1 严格模式 (strict mode)

严格模式通过 'use strict'; 声明启用,作用是禁止一些不安全的操作,减少错误的发生。

示例:严格模式
javascript 复制代码
'use strict';

var obj = {};
obj.foo = 'bar';  // 没问题

foo = 'bar';  // 报错:变量未声明,严格模式下不允许隐式声明变量

1.2 JSON 对象

ES5 引入了 JSON 对象,提供了 parse()stringify() 方法,用于处理 JSON 数据。

示例:JSON.parse()JSON.stringify()
javascript 复制代码
// JSON.stringify:将对象转换为 JSON 字符串
const obj = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":25}'

// JSON.parse:将 JSON 字符串转换为对象
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj);  // { name: 'Alice', age: 25 }

1.3 Array 方法

ES5 增加了许多数组方法,帮助开发者更高效地操作数组。

示例:forEach(), map(), filter()
javascript 复制代码
const arr = [1, 2, 3, 4, 5];

// forEach:遍历数组
arr.forEach(item => console.log(item));

// map:返回一个新数组,包含原数组中每个元素的平方
const squares = arr.map(x => x * x);
console.log(squares); // [1, 4, 9, 16, 25]

// filter:筛选出大于 3 的元素
const greaterThanThree = arr.filter(x => x > 3);
console.log(greaterThanThree); // [4, 5]

2. ECMAScript 6 (ES6) - 2015年

ECMAScript 6(也叫 ES2015 或 ES6)是 JavaScript 的一次重要升级,新增了大量语言特性,使得 JavaScript 更加现代化。

2.1 letconst

ES6 引入了 letconst 来替代 var,提供了块级作用域。

示例:letconst
javascript 复制代码
// let:块级作用域
if (true) {
  let a = 10;
  console.log(a);  // 输出 10
}
// console.log(a);  // 报错:a is not defined

// const:声明常量,不可重新赋值
const b = 20;
b = 30;  // 报错:Assignment to constant variable.

2.2 箭头函数 (=>)

箭头函数简化了函数的语法,且 this 的绑定方式不同。

示例:箭头函数
javascript 复制代码
// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sumArrow = (a, b) => a + b;

console.log(sum(1, 2)); // 3
console.log(sumArrow(1, 2)); // 3

2.3 模板字符串(Template Literals)

模板字符串用反引号(`````)包裹,可以嵌入变量或表达式。

示例:模板字符串
javascript 复制代码
const name = 'Alice';
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);  // "Hello, my name is Alice and I am 25 years old."

2.4 类(Classes)

ES6 引入了类的概念,使得面向对象编程变得更加简洁。

示例:类(Class)
javascript 复制代码
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const alice = new Person('Alice', 25);
alice.greet();  // "Hello, my name is Alice."

2.5 Promise

Promise 是用于处理异步操作的新特性,能够使异步代码更加简洁和可读。

示例:Promise
javascript 复制代码
const promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Success!");
  } else {
    reject("Failure!");
  }
});

promise
  .then(result => console.log(result))  // "Success!"
  .catch(error => console.log(error));  // "Failure!"

3. ECMAScript 2017 (ES8)

ECMAScript 2017 引入了一些新的语言特性,最重要的两个特性是 async / awaitObject.entries()

3.1 asyncawait

asyncawait 用于简化异步操作,使得异步代码看起来像同步代码。

示例:asyncawait
javascript 复制代码
// 异步函数
async function fetchData() {
  const data = await new Promise((resolve) => setTimeout(() => resolve("Data fetched!"), 1000));
  console.log(data);
}

fetchData();  // 输出 "Data fetched!" (1秒后)

3.2 Object.entries()Object.values()

Object.entries() 返回一个对象的键值对数组,而 Object.values() 返回对象的值数组。

示例:Object.entries()Object.values()
javascript 复制代码
const person = { name: 'Alice', age: 25 };

// Object.entries:返回键值对数组
const entries = Object.entries(person);
console.log(entries);  // [['name', 'Alice'], ['age', 25]]

// Object.values:返回值数组
const values = Object.values(person);
console.log(values);  // ['Alice', 25]

4. ECMAScript 2019 (ES10)

ES10 引入了几个非常有用的新功能,如 Array.prototype.flat()Array.prototype.flatMap()Object.fromEntries()

4.1 Array.prototype.flat()Array.prototype.flatMap()

flat() 用于将嵌套的数组扁平化,而 flatMap() 首先对数组进行映射操作,然后扁平化。

示例:flat()flatMap()
javascript 复制代码
const arr = [1, [2, 3], [4, [5, 6]]];

// flat:将嵌套数组扁平化
console.log(arr.flat());  // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2));  // [1, 2, 3, 4, 5, 6]

// flatMap:先映射再扁平化
const mappedArr = arr.flatMap(x => x);
console.log(mappedArr);  // [1, 2, 3, 4, [5, 6]]

4.2 Object.fromEntries()

Object.fromEntries() 将一个键值对的数组转换为对象。

示例:Object.fromEntries()
javascript 复制代码
const entries = [['name', 'Alice'], ['age', 25]];
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'Alice', age: 25 }

5. ECMAScript 2020 (ES11)

ES11 引入了几个重要的新特性,其中包括 BigInt 类型、Nullish Coalescing Operator (??)Optional Chaining (?.)

5.1 BigInt

BigInt 类型允许你表示大于 Number 类型的整数。

示例:BigInt
javascript 复制代码
const bigIntNumber = 1234567890123456789012345678901234567890n;  // 后缀 n 表示 BigInt
console.log(bigIntNumber);  // 1234567890123456789012345678901234567890n

5.2 Nullish Coalescing Operator (??)

?? 用于判断 nullundefined,如果是,则返回默认值。

示例:??
javascript 复制代码
const name = null;
const defaultName = name ?? "Default Name";
console.log(defaultName);  // "Default Name"

5.3 Optional Chaining (?.)

`?.

允许你在访问深层嵌套的对象属性时避免出现TypeError,如果某个属性为 nullundefined,则返回 undefined`。

示例:?.
javascript 复制代码
const person = { name: 'Alice', address: { city: 'Wonderland' } };

// 安全访问深层属性
console.log(person.address?.city);  // "Wonderland"
console.log(person.contact?.phone);  // undefined

相关推荐
Beekeeper&&P...3 分钟前
web钩子什么意思
前端·网络
啵咿傲15 分钟前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy17 分钟前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
流烟默21 分钟前
CSS中Flex布局应用实践总结
前端·css·flex布局
松树戈33 分钟前
JS推荐实践
开发语言·javascript·ecmascript
草字1 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
没有黑科技1 小时前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见1 小时前
彻底搞懂前端环境变量使用和原理
前端
陌上阳光1 小时前
vscode连接远程开发机报错
ide·vscode·编辑器
小王码农记1 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue