es6+最佳入门实践(7)

7.set和map数据结构

7.1.什么是set?

Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复

 let st = new Set([1,2,2,3,3,4])
console.log(st)  // [1,2,3,4]

Set的size属性可以知道set中有多少元素,类似于数组的length属性

let st = new Set([1,2,2,3,3,4])
console.log(st.size); //4

7.2.Set的相关方法

1.add 添加一个数据

let st = new Set([1, 2, 3])
st.add(4)
console.log(st)

2.delete 删除一个数据

let st = new Set([1, 2, 3]);
st.delete(3);
console.log(st);

3.has 判断是否存在某个元素

let st = new Set([1, 2, 3]);
console.log(st.has(1)) //true
console.log(st.has(10)) //false

4.clear 清除所有数据

let st = new Set([1, 2, 3])
st.clear()
console.log(st)

5.keys 返回键名的遍历器

let st = new Set([1, 2, 3])
console.log(st.keys())

6.values 返回值的遍历器

let st = new Set([1, 2, 3])
console.log(st.values())

7.entries 返回键/值对的遍历器

let st = new Set([1, 2, 3])
console.log(st.entries().next())

8.foreach 使用回调函数遍历元素

let st = new Set([0, 12, 3])
st.forEach((v,k,s)=>{
    console.log(v, k, s)
})

7.3.什么是Map?

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

let k1 = {a:1};
let k2 = {b:1};

let obj = {
    [k1]: 1,
    [k2]: 2
};
console.log(obj)  //{[object Object]: 2}

上面代码中k1和k2都被转换成了[object Object],因此,k2 把 k1覆盖了,之所以要把k1和k2转换成字符串的原因就是js中的对象属性只能是字符串类型,为了解决这个问题,ES6提供了Map数据结构

1.如何创建一个Map?

let mp = new Map([
    ['a', 1],
    ['b', 2]
])
console.log(mp)
let mp2 = new Map([
        [k1,1],
        [k2,2]
    ])
console.log(mp2)

2.Map的属性size

let mp2 = new Map([
        [k1,1],
        [k2,2]
    ])
console.log(mp2.size)

7.4.Map的相关方法

1.set(key, value) 添加新的键值对

let m = new Map()
m.set('a', 1)
console.log(m)

2.get(key) 获取key对应的值

let m = new Map()
m.set('a', 1)
console.log(m.get('a'))

3.delete(key) 删除key

let m = new Map([
    ['a', 1],
    ['b', 2]
]);
m.delete('a')
console.log(m)

4.has(key) 查看是否存在某个key

let m = new Map([
    ['a', 1],
    ['b', 2]
]);
console.log(m.has('a')) //true
console.log(m.has('c')) //false

5.clear()

let m = new Map([
    ['a', 1],
    ['b', 2]
]);
m.clear()
console.log(m)

6.keys()返回键名的遍历器

let m = new Map([
    ['a', 'hello'],
    ['b', 'nodeing']
]);
for(let k of m.keys()){
    console.log(k)
}

7.values()返回值的遍历器

let m = new Map([
    ['a', 'hello'],
    ['b', 'nodeing']
]);
for(let k of m.values()){
    console.log(k)
}

8.entries() 返回键/值对的遍历器

let m = new Map([
    ['a', 'hello'],
    ['b', 'nodeing']
]);
for(let k of m.entries()){
    console.log(k)
}

9.foreach 遍历Map

let m = new Map([
    ['a', 'hello'],
    ['b', 'nodeing']
]);

m.forEach((v,k,m) => {
    console.log(v, k, m)
})

视频教程地址:http://edu.nodeing.com/course/50

原文地址:https://www.cnblogs.com/dadifeihong/p/10358122.html

时间: 2024-10-03 03:24:29

es6+最佳入门实践(7)的相关文章

es6+最佳入门实践(8)

8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0) setTimeout(function () { alert(1); }, 2000); setTimeout(function () { alert(2) }, 1000); alert(3) 上面代码的弹出顺序是 0 3 2 1 ,像这种不按从上到下依次执行的代码叫做异步代码,其实还有很多类

es6+最佳入门实践(10)

10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator函数后返回一个迭代器对象,使用这个迭代器对象可以遍历出Generator函数内部的状态 Generator函数和传统函数的不同点有:1 函数定义的时候,function关键字后面加"*", 2 内部使用yield关键字定义内部状态 function* HelloGenerator() {

es6+最佳入门实践(1)

1.let和const 1.1.let和块级作用域 在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的区域是一个块级作用域 { var a = 10 } // 输出10 console.log(a) 如果上述代码中定义变量的时候使用let,在外面使用变量a就会报错 { let a = 10 } // 以下输出会报错 console.log(a) es6中新增了块级作用域,let定义的a只能在当前的{

es6+最佳入门实践(12)

12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this.age = age; } Person.prototype.showName = function () { console.log(this.name); }; let p = new Person("xiaoqiang", 10); p.showName(); 上面这种写法与传统的面

es6+最佳入门实践(6)

6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.null)和引用数据类型(Object),在es6中新增的Symbol数据类型划分到基本数据类型 为什么会有这样一种数据类型呢? //别人给了你一个定义好的对象 var obj = { name: "xiaoqiang", showName: function(){alert(1)} } //

es6+最佳入门实践(9)

9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有了这个接口可以做不同的事情,在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的.而Iterator接口提供的统一访问机制主要表现为遍历操作,任何数据类型只要具有Iterator接口,就可以完成遍历操作(遍历操作指依次处理该数据结构的所有成员),总结起来就是说我们需要一种统一的机制来依次处

es6+最佳入门实践(5)

5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : name, age : age } 在es6中,我们可以简写成这样一种形式 let name = "xiaoqiang"; let age = 12; let obj = { name, age } 以上只是属性的简写,如果有方法应该怎么写呢?首先我们来回顾一下es5中的写法 var obj =

es6+最佳入门实践(3)

3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...arr); //打印结果 1 2 3 //等价于 console.log(1,2,3); 从上面代码中,我们可以看出...arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列 在函数调用的时候,可以用这个扩展运算符把数组里面的元素展开,分别传给函数的形参 let arr = [4, 5, 6]

es6+最佳入门实践(4)

4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "nodeing"; return a + b } console.log(Fn("hello")) 这样写有一个缺点就是当我传入一个空字符串的时候,返回的结果并不是我想要的结果,正确的输出结果应该是:hello,但是因为空字符串会被转换成false, b = '' || "