（三）ES6 内置对象

JC72

已于 2022-04-11 21:20:59 修改

阅读量691

点赞数

分类专栏：前端学习：ES6与Ajax 文章标签：前端 es6 javascript

于 2022-04-09 21:46:26 首次发布

本文链接：https://blog.csdn.net/weixin_46227563/article/details/124023192

版权

本文详细介绍了ES6中的内置对象，包括Set和Map的使用，如成员添加、删除及注意事项；同时讲解了Proxy和Reflect用于对象操作的高级特性；还涵盖了字符串、数值、对象和数组的扩展，如includes、padStart/padEnd、Object.assign等新方法。

摘要由CSDN通过智能技术生成

新增

一、Set 与 Map

1. Set

(1) 认识Set

集合
Set 是一系列无序、没有重复值的数据集合
（数组是一系列有序的数据集合）
Set 没有下标去标识每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员

(2) Set实例的方法和属性

add 方法：
const s = new Set();
s.add(1).add(2); //Set(2) {1, 2}
has 方法：
console.log(s.has(1)); //true
console.log(s.has(3)); //false
delete 方法：
s.delete(1); //Set(1) {2}
s.delete(3);
使用 delete 删除不存在的成员，什么都不会发生，也不会报错
clear 方法：
s.clear();
console.log(s); //Set(0) {}
forEach 方法：
按照成员添加进集合的顺序遍历

s.forEach(function (value, key, set) {
   
	//Set 中 value = key
	console.log(value, key, set);
});
//1 1 Set(2) {1, 2}
//2 2 Set(2) {1, 2}

size 属性：
console.log(s.size); //2

(3) Set构造函数的参数

数组：
const s = new Set([1, 2, 1]);
console.log(s); //Set(2) {1, 2}
字符串：
console.log(new Set('hi')); //Set(2) {"h", "i"}
arguments：
function fun() { console.log(new Set(arguments)); }
fun(1, 2, 1); //Set(2) {1, 2}
NodeList：
console.log(new Set(document.querySelectorAll('p')));
Set：
const s = new Set([1, 2, 1]);
console.log(new Set(s)); //Set(2) {1, 2}
console.log(new Set(s) === s); //false

(4) Set的注意事项

Set 判断重复的方式：
Set 对重复值的判断基本遵循严格相等（===）
但是对于 NaN 的判断与严格相等不同，在 Set 中 NaN 等于 NaN
什么时候使用 Set：
1）数组或字符串去重时
数组去重 console.log([...new Set([1, 2, 1])]); //(2) [1, 2]
字符串去重 console.log([...new Set('abbacbd')].join('')); //abcd
2）不需要通过下标访问，只需要遍历时
3）为了使用 Set 提供的方法和属性时
4）存放 DOM 元素

2. Map

(1) 认识Map

映射
Map 和对象都是键值对的集合
Map 和对象的区别：
- 对象一般用字符串当做键
- 基本数据类型（数组、字符串、布尔值、undefined、null）和引用数据类型（对象、[]、{}、函数、Set、Map 等）都可以作为 Map 的键

(2) Map实例的方法和属性

set 方法：
使用 set 添加新成员，键如果已经存在，后添加的键值对覆盖已经有的
const m = new Map();
m.set('age', 18).set(true, 'true').set('age', 20);
console.log(m); //Map(2) {"age" => 20, true => "true"}
get 方法：
console.log(m.get('age')); //20
console.log(m.get(true)); //true
get 获取不存在的成员，返回 undefined
console.log(m.get('true')); //undefined
has 方法：
console.log(m.has('age')); //true
console.log(m.has('true')); //false
delete 方法：
m.delete('age');
m.delete('name');
使用 delete 删除不存在的成员，什么都不会发生，也不会报错
clear 方法：
m.clear();
console.log(m); //Map(0) {}
forEach 方法：

m.forEach(function (value, key, map) {
   
	console.log(value, key, map);
});
//20 "age" Map(2) {"age" => 20, true => "true"}
//true true Map(2) {"age" => 20, true => "true"}

size 属性：
console.log(m.size); //2

(3)Map构造函数的参数

数组：
只能传二维数组，而且必须体现出键和值
const m = new Map([ ['name','Mike'], ['age', 18] ]);
console.log(m); //Map(2) {"name" => "Mike", "age" => 18}
Set：
const s = new Set([ ['name','Mike'], ['age', 18] ]);
console.log(s); //Set(2) {Array(2), Array(2)}
console.log(new Map(s)); //Map(2) {"name" => "Mike", "age" => 18}
Map
const m1 = new Map([ ['name','Mike'], ['age', 18] ]);
console.log(m1); //Map(2) {"name" => "Mike", "age" => 18}
const m2 = new Map(m1);
console.log(m2 === m1); //false

(4) Map的注意事项

Map 判断键名是否相同的方式：
Map 对相同值的判断基本遵循严格相等（===）
但是对于 NaN 的判断与严格相等不同，在 Map 中 NaN 等于 NaN
什么时候使用 Map：
如果只是需要 key —> value 的结构，或者需要字符串以外的值做键，使用 Map 更合适
只有模拟现实世界的实体时，才使用对象

(5) Map的应用

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
      const [p1, p2, p3] = document.querySelectorAll('p');
      // console.log(p1, p2, p3);
      // const m = new Map();
      // m.set(p1, 'red');
      // m.set(p2, 'green');
      // m.set(p3, 'blue');
      const m = new Map([
        [
          p1,
          {
   
            color: 'red',
            backgroundColor: 'yellow',
            fontSize: '40px'
          }
        ],
        [
          p2,
          {
   
            color: 'green',
            backgroundColor: 'pink',
            fontSize: '40px'
          }
        ],
        [
          p3,
          {
   
            color: 'blue',
            backgroundColor: 'orange',
            fontSize: '40px'

最低0.47元/天解锁文章

JC72

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（三）ES6 内置对象

文章目录新增一、Set 与 Map1. Set(1) 认识Set(2) Set实例的方法和属性(3) Set构造函数的参数(4) Set的注意事项2. Map(1) 认识Map(2) Map实例的方法和属性(3)Map构造函数的参数(4) Map的注意事项(5) Map的应用二、Proxy 与 Reflect扩展一、字符串1. 新增的方法(1) includes()(2) padStart() 和 padEnd()(3) trimStart() 和 trimEnd()2. 模板字符串(1) 模板字符串与一般
复制链接

扫一扫