ES6,ES7,ES7,ES8,ES9,ES10新特性(超详细!!! 附用法)代码

目录

ES6(2015)

let 和 count

箭头函数

模板字符串

默认参数值

数组解构赋值

对象解构赋值

类和继承

Promise 对象

模块化

扩展运算符

ES7(2016)

Array.prototype.includes 方法

指数运算符

函数参数的尾逗号

Object.values 和 Object.entries

async/await

ES8(2017)

字符串填充方法(String padding)

Object.entries()方法

Object.values()方法

Async 函数

SharedArrayBuffer和Atomics对象(用于多线程编程)

ES9(2018)

异步迭代

Promise.finally()

Rest/Spread 属性

正则表达式命名捕获组

ES 10 (2019)

Array.flat()

String.trimStart() 和 String.trimEnd()

Object.fromEntries()

Optional Catch Binding

Array.flatMap()


ES6(2015)

let 和 count

let 和 const 声明变量与传统的 var 不同,let 和 const 声明的变量具有块级作用域,不会变量提升,而且不能被重复声明。const 声明的变量是常量,不能被重新赋值。

let name = '小豪';
const arr = [];

箭头函数

一种更简洁的函数定义方法,使用箭头符号来代替 function 关键字,可以省略大括号和 return 关键字,箭头函数会继承父作用域的 this 值。

const func = (a, b) => a + b;
func(1, 2); // 3

模板字符串

模板字符串是一种新的字符串定义方法,使用反引号(`)来表示字符串,可以在字符串中插入变量或表达式,使用 ${} 包裹。

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

默认参数值

ES6 允许在函数的参数列表中设置默认参数值,当调用函数时不传递参数时,会自动使用默认值。

function foo(age = 25,){ // ...}

数组解构赋值

一种快速取出数组元素并赋值给变量的方法,可以极大地简化代码。

let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1

对象解构赋值

与数组解构赋值类似,可以快速取出对象属性值并赋值给变量。

let {a,b} = {a:10,b:20}
console.log(a,b) // 10,20

类和继承

ES6 提供了 class 关键字来定义类和继承关系,使得 JavaScript 更加面向对象。

class Man {
  constructor(name) {
    this.name = '小豪';
  }
  console() {
    console.log(this.name);
  }
}
const man = new Man('小豪');
man.console(); // 小豪

Promise 对象

Promise 对象用来处理异步操作,可以更方便地处理异步代码,避免回调地狱。

Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ,再打印 2

模块化

ES6 引入了模块化的概念,使用 import 和 export 关键字来导入和导出模块,使得代码更加模块化和易于管理。

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

扩展运算符

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

ES7(2016)

Array.prototype.includes 方法

ES7 引入了 Array.prototype.includes 方法,用于判断一个数组是否包含某个特定的值,返回布尔值。这个方法取代了数组的 indexOf 方法,使代码更加清晰和易读。

// 使用 includes 方法判断数组是否包含某个值
const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(10)); // false

指数运算符

ES7 引入了指数运算符(**)来进行幂运算,语法更加简洁,避免了使用 Math.pow 方法。

// 使用指数运算符进行幂运算
const result = 2 ** 3; // 2的3次方,结果为8
console.log(result);

函数参数的尾逗号

ES7 允许函数定义的最后一个参数使用逗号进行结尾,这样可以方便在修改或添加参数时避免出错,提高代码的可维护性。

// 函数定义中使用尾逗号
function sum(a, b,) {
  return a + b;
}
console.log(sum(2, 3)); // 5

Object.values 和 Object.entries

ES7 引入了 Object.values 和 Object.entries 方法,分别用于获取对象的属性值数组和键值对数组,方便遍历对象的属性。

// 使用 Object.values 获取对象的属性值数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]

// 使用 Object.entries 获取对象的键值对数组
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

async/await

虽然 async/await 是 ES8 的特性,但它在 ES7 中就已经被加入了标准。async/await 是一种更直观、更简洁的异步编程方式,让异步代码看起来像同步代码一样易于理解。

// 使用 async/await 处理异步操作
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncFunction() {
  console.log('Start');
  await delay(1000);
  console.log('After 1 second');
}

asyncFunction();

ES8(2017)

字符串填充方法(String padding)

ES8 新增了字符串的 padStart 和 padEnd 方法,用于在字符串的开头或结尾添加指定数量的字符,方便对齐文本格式。

// 字符串填充方法
let str = 'hello';
console.log(str.padStart(10, 'a')); // "aaaaahello"
console.log(str.padEnd(10, 'b')); // "hellobbbbb"

Object.entries()方法

虽然 Object.values 和 Object.entries 方法在 ES7 中已经被引入,但在 ES8 中对其进行了稳定化处理,使其能够在各种 JavaScript 环境中被广泛使用。

// Object.entries()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

Object.values()方法

// Object.values()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]

Async 函数

ES8 对 async 函数进行了一些改进,允许 async 函数直接返回值,而不必通过 Promise.resolve 包裹。

// Async 函数
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => {
  console.log(data);
});

SharedArrayBuffer和Atomics对象(用于多线程编程)

ES8 增加了对 SharedArrayBuffer 和 Atomics 对象的支持,用于在多线程编程中共享内存并执行原子操作。

SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

// SharedArrayBuffer和Atomics对象
const buffer = new SharedArrayBuffer(16);
const view = new Int32Array(buffer);

Atomics.store(view, 0, 42);
console.log(Atomics.load(view, 0)); // 42

ES9(2018)

异步迭代

await可以和for...of循环一起使用,以串行的方式运行异步操作

async function process(array) {
  for await (let i of array) {
    // doSomething(i);
  }
}

Promise.finally()

Promise对象现在具有一个finally()方法,无论Promise实例是成功还是失败,都会在最后执行该方法。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

promise.finally(() => {
  console.log('Promise complete');
});

Rest/Spread 属性

ES9允许在对象字面量中使用Rest和Spread属性。

const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

正则表达式命名捕获组

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30
 
const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d      = '2018-04-30',
  usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

ES 10 (2019)

Array.flat()

Array.flat()方法用于将多维数组(嵌套数组)扁平化为一维数组。

const nestedArray = [1, [2, [3, 4], 5]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, [3, 4], 5]

// 可以通过传入参数指定扁平化的层级
const deeplyNestedArray = [1, [2, [3, [4, 5]]]];
const deeplyFlattenedArray = deeplyNestedArray.flat(2);
console.log(deeplyFlattenedArray); // [1, 2, 3, 4, 5]

String.trimStart() 和 String.trimEnd()

String.trimStart()和String.trimEnd()方法,用于删除字符串开头和结尾的空格。

const text = '   Hello, World!   ';
console.log(text.trimStart()); // 'Hello, World!   '
console.log(text.trimEnd()); // '   Hello, World!'

Object.fromEntries()

Object.fromEntries()方法用于将一个包含键值对的数组转换为一个对象

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

Optional Catch Binding

ES10允许在try/catch块中省略catch绑定参数,以避免未使用的参数警告

try {
  // Some code that may throw an error
} catch {
  // Handle the error without specifying the error parameter
}

Array.flatMap()

对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。

[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]

  • 28
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值