es6学习笔记-Object

269 阅读4分钟

Object Updates

Object属性能简写吗?

  • es5中,Object的属性必须是key-value形式,
var x = 0,y = 0;
// es5
obj = {
    x:x,
    y:y
}
// es6
obj = {
    x,
    y
}

Computed property Names

  • es6之前Object的key在定义时必须是字符串,如果想增加“动态”的key,必须是先计算出key,利用object[key] = value的方式来修改
  • es6之后可以直接用变量或者表达式来定义key。
// es5
var obj = {
    foo:'bar'
}
obj['baz'+quux()] = 42
// es6
let obj = {
    foo:'bar',
    ['bar' +quux()]: 42
}

Method Properties

es5时代Object的属性只支持常规函数,对于异步函数是不支持的。

// es5
var obj = {
    foo:function(a,b) {
        
    },
    bar: function(x,y) {
        
    }
    // quux: no equivalent in es5
}
// es6
let obj = {
    foo(a,b) {
        
    },
    bar(x,y) {
        
    },
    * quux(x,y) {
        
    }
}

Set

在js中,通常使用ArrayObject来存储数据。但是在频繁操作数据的过程中查找或者同级数据需要手动来实现,并不能简单的直接使用。比如如何保证Array是去重的,如何统计Object的数据总数等,必须自己手动实现类似的需求,不是很方便。es6中,为了解决以上痛点,新增了数据结构SetMap,它们分别对应传统数据结构的“集合”和“字典”

生成Set实例:可以定义一个空的Set实例,也可以在实例化的同事传入默认的数据

初始化的参数必须是可遍历的,可以是数组或者自定义遍历的数据结构

let s = new Set()
let s2 = new Set([1,2,3,4])

添加数据

Set数据结构不允许数据重复,所以添加重复的数据是无效的。

s.add('hello');

s.add('good').add('bye')

删除数据:可以删除指定的数据,也可以删除全部数据

s.delete('hello') // true

s.clear()

统计数据:Set可以快速进行统计数据,如数据是否存在、数据的总数。

// 判断是都包含数据项,返回true或者false
s.has('hello')
// 计算数据项总数
s.size

查询数据

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员
  • for...of...:可以直接遍历每个成员
console.log(s.keys()); // SetIterator {"hello", "good"}
console.log(s.values()); // SetIterator {"hello", "good"}
console.log(s.entries()); // SetIterator {"hello" => "hello", "good" => "good"}
s.forEach(item => {
    console.log(item);
})
// hello
// good

for (let item of s) {
    console.log(item);
}
// hello
// good

思考:

  • 因为Set的值总是唯一的,所以需要判断两个值是否相等,那么+0,-0,NaN,undefined可以被重复添加吗?
  • Set对存储的类型是不限的,如果想限制只能存储对象,该怎么办?请使用WeakSet

Map

Map是用来实现字典的功能(Object键值对)

实例化

Iterable可以时一个数组或者是其他iterable对象,其元素为键值对(两个元素的数组,例如:[[1,'one'],[2,'two']])。每个键值对都会添加到新的Mapnull会被当成undefined

let map = new Map([iterable])

添加数据

map.set(1, 'value')
map.set(3, 'value-3')

删除数据

// 删除:指定key
map.delete(1)
// 清空
map.clear()

统计数据

// 统计
console.log(map.size)

// 查找:查找key值
console.log(map.has(1))

查询数据

  • get():返回某个Map对象中的一个指定元素
  • keys():返回一个新的Iterable对象。它包含按照顺序插入Map对象中每个元素的key值
  • values():返回一个新的Iterable对象。包含按照顺序插入Map对象中每个元素的values值
  • entries():返回一个新的包含[key,value]的对的Iterable?对象,返回的迭代顺序与Map对象的插入顺序相同
  • forEach():会以插入顺序对Map对象中的每一个键值对执行一次参数中提供的回调函数。
  • for...of:可以直接遍历每个成员
// 索引
console.log(map.keys(),map.values(),map.entries())

map.forEach((value, key) => {
    console.log(value,key)
})

for (const [key, value] of map) {
    console.log(key,value)
}

Object也是按照键值对存储和读取的,那么他们之间还有其他区别吗?

  • 键的类型:Object的键只能是字符串或者Symbols,但一个Map的键可以是任意值,包含函数、对象、基本类型。
  • 键的顺序:Map的键值是有序的,而添加到对象中的键不是。因此,当对它进行遍历时,Map对象是按插入顺序返回键值。
  • 键值对的统计:可以通过size属性直接获取一个Map的键值对个数,而Object的键值对个数只能手动计算。
  • 键值对的遍历:Map可直接进行迭代,而Object的迭代需要先获取它的键数组,然后进行迭代。
  • 性能:Map在涉及频繁增删键值对的场景下会有性能优势。

Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或者多个源对象复制到目标对象,它将返回目标对象。

const target = {
    a: 1,
    b: 2
}
const source = {
    b: 4,
    c: 5
}
Object.assign(target,source);

基本语法

Object.asign(target,...source)

参数 含义 必选
target 目标对象 Y
source 源对象 N

源对象的个数是不限制的(0或多个),如果是零个,直接返回目标对象,如果是多个相同属性的,会被后边的源对象的属相覆盖。

如果目标对象不是对象,则会自动转换为对象