es6高级技巧(持续更新)

本文介绍了ES6中的一些高级特性,包括Object.entries和Object.fromEntries用于操作对象,Symbol的独特性及其在属性名中的应用,WeakMap和WeakSet的区别,Promise.allSettled处理异步结果,以及Array.of和Array.from的用法和.flat().at()方法的示例。
摘要由CSDN通过智能技术生成

最近常用一些es6的高级技巧,趁有时间稍微总结下,后续想到或阅读到一些其他的再进行更新
1、Object.entries()和Object.fromEntries()
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。
Object.fromEntries()方法将键值对列表转换为一个对象。

使用Object.entries()时,可以传入一个对象作为参数。这个对象可以是任何具有可枚举属性的对象

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

使用Object.fromEntries()时,可以传入一个键值对数组作为参数。这个数组中的每个元素都是一个包含键和值的数组

const entries = [["a", 1], ["b", 2], ["c", 3]];

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

2、Symbol类型和Symbol属性
凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

注意,Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

Symbol 值不能与其他类型的值进行运算,会报错。但是,Symbol 值可以显式转为字符串,另外,Symbol 值也可以转为布尔值但是不能转为数值

const obj = {};
let a = Symbol('a');
let b = Symbol('b');
obj[a] = 'Hello';

由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。
向一个未知属性名的对象中添加一个新属性:

let obj = {
  // ...此处省略n多个属性
  name: 'ronda'
};
// 因为symbol是独一无二的,那么属性名就可以用symbol来表示。
let tempName = Symbol('name');
obj[tempName] = '张三';  // '张三'保存到了obj对象中
console.log(obj[tempName]);  //张三
console.log(obj);

3、WeakMap和WeakSet
如果我们使用对象作为常规 Map 的键,那么当 Map 存在时,该对象也将存在。它会占用内存,并且应该不会被(垃圾回收机制)回收。
WeakMap 在这方面有着根本上的不同。它不会阻止垃圾回收机制对作为键的对象(key object)的回收。

WeakMap 的键必须是对象,不能是原始值

let weakMap = new WeakMap();

let obj = {};

weakMap.set(obj, "ok"); // 正常工作(以对象作为键)

// 不能使用字符串作为键
weakMap.set("test", "Whoops"); // Error,因为 "test" 不是一个对象

如果我们在 weakMap 中使用一个对象作为键,并且没有其他对这个对象的引用 —— 该对象将会被从内存(和map)中自动清除。

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // 覆盖引用

// john 被从内存中删除了!

4、Promise.allSettled()
Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议的promise,并带有一个对象数组,每个对象表示对应的promise结果。

const promises = [
  Promise.resolve('resolved'),
  Promise.reject('rejected'),
  Promise.resolve('resolved')
];

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

 // 输出结果:
 // [
 //  { status: 'fulfilled', value: 'resolved' },
 //  { status: 'rejected', reason: 'rejected' },
 //  { status: 'fulfilled', value: 'resolved' }
 // ]

5、Array.of、Array.from
Array.of
(1)Array.of()方法创建一个具有可变数量参数的新数组实例。
(2)Array.of方法用于创建一个由参数组成的新数组。它与Array构造函数不同之处在于,当参数只有一个且为数字时,Array.of会创建一个只包含该数字的数组,而不是创建指定长度的空数组。
(3)Array.of() 主要是弥补数组构造函数 Array() 的不足。因为参数个数的不同,导致 Array() 的重载,Array.of 不存在由于参数不同而导致的重载,并且基本上可以用来替代 Array() 或 new Array()

Array与Array.of的比较

Array()               // []
Array(2)              // [, ,]
Array(1, 2)          // [1, 2]

Array.of()            // []
Array.of(2)           // [2]
Array.of(1, 2, 'abc')  // [1, 2, "abc"]

Array 方法在没有参数、一个参数、两个参数时,返回结果都不一样。
· 没有参数的时候返回一个空数组;
· 有一个参数的时候,返回一个长度为此参数的空数组,并且此数组不能被迭代;
· 有两个参数的时候,才会把参数当成数组的每一项返回;
以此可以看出Array.of的好处

Array.from
(1)Array.from()方法从类似数组或可迭代对象创建一个新的数组实例。
(2)Array.from方法将类似数组或可迭代对象转换为真正的数组。它可以接收第二个参数来进行映射或筛选操作。

const arr1 = Array.of(1, 2, 3);
console.log(arr1); // [1, 2, 3]

const str = 'Hello';
const arr = Array.from(str);
console.log(arr); // 输出: ['H', 'e', 'l', 'l', 'o']

const nums = [1, 2, 3, 4, 5];
const doubled = Array.from(nums, num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

6、.at和flat
.at()方法返回指定索引处的元素。

.at方法用于获取数组指定索引位置的元素,支持负数索引。

flat()方法将嵌套的数组扁平化为一个新的数组。

flat方法用于将多维数组扁平化为一维数组,可以指定扁平化的层数。

 const arr3 = [1, 2, 3, 4, 5];
 console.log(arr3.at(2)); // 3

 const arr4 = [1, [2, [3]]];
 console.log(arr4.flat()); // [1, 2, [3]]
  • 12
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值