跳至主要內容

ES7-8-9-10-11-12

zzf2022/1/7大约 5 分钟我的前端路线javascriptES新语法

ES7、8、9、10、11、12

ES7

array.includes

const names = ['abc', 'cba', 'nba', NaN];
// ES5
if(names.indexOf('cba') !== -1) {
  console.log('包含cba');
}
// ES7
if(names.includes('cba', 2)) { // fromIndex
  console.log('包含cba');
}
// indexOf无法判断NaN
if(names.indexOf(NaN) !== -1) {
  console.log('包含NaN');
}
// includes可以判断NaN
if(names.includes(NaN)) {
  console.log('包含NaN');
}

指数运算

const result1 = Math.pow(3, 3); // 3的3次方
// ES7
const result2 = 3 ** 3;
console.log(result1, result2); // 27 27

ES8

Object..values

  • 之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值：
const obj = {
  name: 'zjf',
  age: 21
}

console.log(Object.keys(obj)); // [ 'name', 'age' ]
console.log(Object.values(obj)); // [ 'zjf', 21 ]
// 其它
console.log(Object.values(['abc', 'cba', 'nba'])); // [ 'abc', 'cba', 'nba' ]
console.log(Object.values('zjf')); // [ 'z', 'j', 'f' ]

Object.entries

  • 通过Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
const obj = {
  name: 'zjf',
  age: 21,
  height: 1.9
}

console.log(Object.entries(obj)); // [ [ 'name', 'zjf' ], [ 'age', 21 ] ]
const objEntries = Object.entries(obj);
for(const item of objEntries) {
  console.log(item[0], item[1]); 
  // name zjf
  // age 21
}
// [[], [], []]entries理解
console.log(Object.entries(['abc', 'cba', 'nba'])); // [ [ '0', 'abc' ], [ '1', 'cba' ], [ '2', 'nba' ] ]
console.log(Object.entries('abc')); // [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

padStart和padEnd前后填充

const str = 'Hello world';
const newStr = str.padStart(15, '*').padEnd(20, '-'); // 前后填充
console.log(newStr); // ****Hello world-----

// 运用案例
const cardNum = '36044328959432043';
const lastFourNum = cardNum.slice(-4);
const finalNum = lastFourNum.padStart(cardNum.length, '*');
console.log(finalNum); // *************2043

Trailing-Commas的使用

function foo(m, n,) { // 可加,

}

foo(10, 20,);

async

ES9

Async iterators:迭代器

Object spread operstors: Object.defineproperty

Promise finally

ES10

flat和flatMap(数组降维)

  • flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  • flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
    • flatMap是先进行map操作，再做flat的操作
    • flatMap中的flat相当于深度为1(只降一维)
// flat数组降维
const nums = [10, 20, [2, 9], [[30, 40]], 90]; // 三维数组

const newNums = nums.flat(2); // 数组降维，默认降一维
console.log(newNums);

// flatMap
const nums1 = [10, 20, 30];
const newNums1 = nums1.map(item => { // map
  return item * 2;
})
console.log(newNums1); // [ 20, 40, 60 ]

const nums2 = [10, 20, 30];
const newNums2 = nums2.flatMap(item => { // flatMap
  return item * 2;
})
console.log(newNums2); // [ 20, 40, 60 ]

const newMessage2 = messages.map(item => {
  return item.split(' '); // map对item按 分割返回数组
})
console.log(newMessage2); // [[ 'Hello', 'World' ], [ 'hello', 'zjf' ], [ 'my', 'name', 'is', 'zjf' ]]

// 应用场景
const messages = ['Hello World', 'hello zjf', 'my name is zjf'];
const newMessage1 = messages.flatMap(item => {
  return item.split(' '); // flatMap降维返回数组
})
console.log(newMessage1); // ['Hello', 'World', 'hello', 'zjf','my', 'name','is', 'zjf']

Object.fromEntries

  • 我们可以通过 Object.entries 将一个对象转换成 entries，那么如果我们有一个entries了，如何将其转换 成对象呢
const obj = {
  name: 'zjf',
  age: 21,
  height: 1.9
}

const entries = Object.entries(obj);
console.log(entries); // [ [ 'name', 'zjf' ], [ 'age', 21 ], [ 'height', 1.9 ] ]

// const newObj = {};
// for(const item of entries) {
//   newObj[item[0]] = item[1];
// }
// console.log(newObj); // { name: 'zjf', age: 21, height: 1.9 }

const newObj = Object.fromEntries(entries); // entries转回对象
console.log(newObj); // { name: 'zjf', age: 21, height: 1.9 }

// Object.fromEntries应用场景url参数params解析
const queryString = 'name=zjf&age=21&height=1.9';
const queryParams = new URLSearchParams(queryString);
console.log(queryParams); // URLSearchParams { 'name' => 'zjf', 'age' => '21', 'height' => '1.9' }
const paramObj = Object.fromEntries(queryParams);
console.log(paramObj); // { name: 'zjf', age: '21', height: '1.9' }

trim.start和trim.end

  • 用于字符串前后去空格
const str = '   Hello World    ';

console.log(str.trim()); // Hello World
console.log(str.trimStart()); // Hello World    
console.log(str.trimEnd()); //    Hello World

ES11

BigInt的使用

// ES11之前最大的数值
const maxInt = Number.MAX_SAFE_INTEGER;
console.log(maxInt); // 9007199254740991

console.log(maxInt + 1); // 9007199254740992
console.log(maxInt + 2); // 9007199254740992

// ES11之后：BigInt
const bigInt = 900719925474099111n;
console.log(bigInt); // 900719925474099111n
// console.log(bigInt + 10); // 目前不能直接相加
console.log(bigInt + 10n); // 900719925474099121n

const num = 100;
console.log(bigInt + BigInt(100)); // Number转BigInt

const smallNum = Number(bigInt); // BigInt转Number类型
console.log(smallNum);

Nullish Coalescing Operator(控制合并运算)

// 空值合并运算 ??

const foo = undefined;
// const bar = foo || 'default value'; // 当foo为undefined null '' 0时，取后面的default value
const bar = foo ?? 'default value'; // 当foo为undefined null 时，取后面的default value

console.log(bar);

Optional Chaining(可选链)

  • 在进行null和undefined判断时更加简洁清晰
const info = {
  name: 'zjf',
  // friend: {
  //   name: 'why',
  //   girlFriend: {
  //     name: 'qwe'
  //   }
  // }
}

console.log(info.friend.girlFriend.name); // qwe
if(info && info.friend && info.friend.girlFriend) { // 逻辑判断
  console.log(info.friend.girlFriend.name);
}
// 可选链写法
console.log(info.friend?.girlFriend?.name);

globalThis(全局对象获取)

  • 在浏览器中获取全局对象可通过window,this来获取
  • 在node环境中获取全局对象则可通过global来获取
  • ES11对获取全局对象进行了统一的规范：globalThis
// 获取某一个环境下的全局对象(global Object)

// 浏览器下
console.log(window);
console.log(this);

// node环境下
console.log(global);

// ES11
console.log(globalThis);

for in 标准化

  • 在ES11中，对for in进行了标准化，for...in是用于遍历对象的key的
const obj = {
  name: 'zjf',
  age: 21
}

for(const item in obj) { // 得到的item一定是key值
  console.log(item); // name age
}

ES12

FinalizationRegistry

  • FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调，监听对象是否被GC回收
// FinalizationRegistry类 监听对象销毁
const finalRegistry = new FinalizationRegistry((value) => {
  console.log('注册在finalRegistry的对象，某一个被销毁', value);
})

let obj = { name: 'zjf' };
let info = { age: 21 };

finalRegistry.register(obj, 'obj'); // 注册监听
finalRegistry.register(info, 'info');

obj = null;
info = null;

WeakRef(弱引用)

  • 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用
    • 如果我们希望是一个弱引用的话，可以使用WeakRef
// FinalizationRegistry类 监听对象销毁
const finalRegistry = new FinalizationRegistry((value) => {
  console.log('注册在finalRegistry的对象，某一个被销毁', value);
})

let obj = { name: 'zjf' };
let info = new WeakRef(obj); // 弱引用obj

finalRegistry.register(obj, 'obj'); // 注册监听

console.log(info.deref()?.name); // WeakRef的deref方法获取弱引用数据

obj = null;

logical assignment operator(逻辑赋值运算)

// 1.逻辑或赋值运算
let message = undefined;
// message = message || 'default value';
message ||= 'default value'; // default value
console.log(message);

// 2.逻辑与赋值运算
// const obj = {
//   name: 'zjf',
//   foo: function() {
//     console.log('foo函数被调用');
//   }
// }

// obj.foo && obj.foo()
// &&=
let info = {
  name: 'zjf'
}
info = info && info.name; // 如果info存在，且info.name存在，则将info.name赋给info
info &&= info.name;
console.log(info);
// 3.逻辑空赋值运算
let mess = 0; // 0 ''
mess ??= 'default value';
console.log(mess);
默认页脚
Copyright © 2026 zzf