当前位置:   article > 正文

js之es新特性

js之es新特性

ES6 (ECMAScript 2015)

1. let 和 const

  • let 允许声明一个块作用域的变量。
  • const 允许声明一个块作用域的常量。
let x = 10;
if (x === 10) {
    let x = 20; // 这里的 x 和外面的 x 不是同一个变量
    console.log(x); // 20
}
console.log(x); // 10

const y = 5;
// y = 10; // 会抛出错误,因为y是一个常量
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2. 模板字符串

  • 允许字符串内嵌表达式,可以用反引号 (``) 来定义。
let name = "world";
console.log(`Hello, ${name}!`); // "Hello, world!"
  • 1
  • 2

3.箭头函数

  • 提供了一种更简洁的写法来声明匿名函数。
let add = (a, b) => a + b;
console.log(add(2, 3)); // 5
  • 1
  • 2

4.解构赋值

  • 允许用类似数组或对象字面量的语法来分配值到变量中。
// 数组解构
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 对象解构
let {firstName, lastName} = {firstName: "John", lastName: "Doe"};
console.log(firstName); // John
console.log(lastName); // Doe
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.Promise

  • 提供了一种更好的异步编程解决方案,比传统的回调函数方式更易于理解和维护。
let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("done"), 1000);
});

promise.then(
    result => console.log(result), // "done"
    error => console.log(error)
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

ES7 (ECMAScript 2016)

1.数组的 includes 方法

  • 判断数组是否包含某个值。
let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false
  • 1
  • 2
  • 3

2.指数运算符

  • 简化了幂运算的书写。
console.log(2 ** 3); // 8
  • 1

ES8 (ECMAScript 2017)

1.async/await

  • 使异步代码看起来更像同步代码。
async function asyncCall() {
  console.log('calling');
  let result = await new Promise((resolve) => {
    setTimeout(() => resolve("resolved"), 1000)
  });
  console.log(result);
}

asyncCall();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.Object.values()

  • 该方法返回一个给定对象自身的所有可枚举属性值的数组,不包括原型链上的属性。
const object = { a: 1, b: '2', c: true };
console.log(Object.values(object)); // [1, '2', true]
  • 1
  • 2

3.Object.entries()

  • 与Object.values()类似,Object.entries()返回一个给定对象自身的所有可枚举属性[key,
    value]对的数组。
const object = { a: 1, b: '2', c: true };
console.log(Object.entries(object)); // [['a', 1], ['b', '2'], ['c', true]]
  • 1
  • 2

4.String Padding

  • 两个实用的字符串实例方法:padStart()和padEnd()允许以一种便捷的方式给字符串前后填充字词,直到达到目标长度。
padStart()
let str = "5";
console.log(str.padStart(2, "0")); // "05", 填充至长度2,用"0"填充
  • 1
  • 2
padEnd()
let str = "5";
console.log(str.padEnd(2, "0")); // "50", 填充至长度2,用"0"填充
  • 1
  • 2

5.Object.getOwnPropertyDescriptors();

  • 此方法用于获取一个对象的所有自身属性的描述符。若没有任何自身属性,则返回空对象。
const obj = {
  property1: 42
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.property1.writable); // true
console.log(descriptors.property1.value); // 42
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

6.尾部逗号 (Trailing commas) 在函数参数列表和调用中

  • ES8 允许在函数参数定义和调用时使用尾部逗号,这有助于版本控制系统中清晰地查看实际更改的参数,避免因格式更改引起的不必要的差异。
function myFunc(
  param1,
  param2, // 尾部逗号
) {
  // 函数体
}

myFunc(
  1,
  2, // 尾部逗号
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

ES9 (ECMAScript 2018)

1. 异步迭代(for-await-of)

  • 允许使用 for…of 循环迭代异步操作,特别是对异步生成的集合。
async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

(async () => {
  for await (let num of asyncGenerator()) {
    console.log(num);
  }
})();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2.Promise.prototype.finally()

  • 可以指定一个在promise执行之后无论是fulfilled还是rejected都会执行的回调函数。
new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => resolve("Success"), 1000);
})
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Promise is settled."));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.Rest/Spread 属性

  • 对象现在也支持 rest 参数和 spread 属性。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

ES10 (ECMAScript 2019)

1.Array.prototype.flat() 和 Array.prototype.flatMap()

  • 可以按照指定的深度递归地将数组扁平化。
let arr = [1, [2, [3, [4]]]];

console.log(arr.flat()); // 默认深度为1, 结果: [1, 2, [3, [4]]]
console.log(arr.flat(2)); // 指定深度为2, 结果: [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 指定深度为Infinity, 结果: [1, 2, 3, 4]
  • 1
  • 2
  • 3
  • 4
  • 5

2.String.prototype.trimStart() 和 String.prototype.trimEnd()

  • 分别用于去除字符串开头和结尾的空白字符。
let greeting = '   Hello world!   ';

console.log(greeting.trimStart()); // "Hello world!   "
console.log(greeting.trimEnd()); // "   Hello world!"
  • 1
  • 2
  • 3
  • 4

3.Object.fromEntries()

  • 把键值对列表转换为一个对象
let entries = [['name', 'John'], ['age', 30]];
let obj = Object.fromEntries(entries);

console.log(obj); // { name: "John", age: 30 }
  • 1
  • 2
  • 3
  • 4

ES11 (ECMAScript 2020)

1.BigInt 类型

  • 支持任意精度的整数。
let bigInt = 1234567890123456789012345678901234567890n;

console.log(bigInt + 1n); // 1234567890123456789012345678901234567891n
  • 1
  • 2
  • 3

2.动态导入(import())

  • 允许你按需动态加载模块
(async () => {
  if (condition) {
    const module = await import('./module.js');
    module.doSomething();
  }
})();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.Promise.allSettled()

  • 返回一个在所有给定的promise已经fulfilled或rejected后的promise,并带有每个promise的结果。
let promises = [
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  Promise.reject(new Error('an error'))
];

Promise.allSettled(promises)
  .then(results => results.forEach((result) => console.log(result.status)));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

ES12 (ECMAScript 2021)

1.String.prototype.replaceAll()

  • 允许替换字符串中出现的所有匹配项。
let quote = 'To be or not to be';
console.log(quote.replaceAll('be', 'test')); // "To test or not to test"
  • 1
  • 2

2.逻辑赋值运算符

  • 包含逻辑与 (&&=), 逻辑或 (||=) 和逻辑空值 (??=) 赋值运算符。
let x = 0;
let y = 1;

x &&= 2; // x = x && 2
console.log(x); // 0

y ||= 2; // y = y || 2
console.log(y); // 1

let z = null;
z ??= 2; // z = z ?? 2
console.log(z); // 2
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/113451
推荐阅读
相关标签
  

闽ICP备14008679号