ES6学习总结(三)

ES6中的解构赋值

为了更方便数据的访问,ES6提供了解构赋值,它的语法就是数组和对象的字面量语法。
对象解构

let node = { 
	    type: "object",
	    name: "foo"
	}
let {type, name, age = 13, value} = node;
console.log(type, name, age, value) // object foo 13 undefined

上例中给出了对象结构的一些基本用法,包含赋值和给予默认值,在没有赋值也没给默认的情况下声明的变量值为undefined。

下面续写以上例子表现对象解构赋值

// 运用结构赋值时需要加(),因为暴露的花括号会被解析成代码块语句,用圆括号包裹标示了里面的内容应该被解释为表达式
({ type, name } = {type: 'num', name:'number'})
console.log(type, name) // num number

//赋值给名称不同的变量时":"右边是目标变量,左边是要给赋值的变量
let obj = { 
	    name: "digua",
	    age: 24
	}
let {name: local , age: num} = obj
console.log(local, num) // digua 24
//对象嵌套赋值
let obj = {
    person: {
        name: 'digua'
        start: {
             line: 'code',
             column: 4
        }
    }
}
let { person : { start } } = obj
let { person : { localStart } } = obj
console.log(start) // {line: 'code', column: 4}
console.log(localStart) // {line: 'code', column: 4}

数组结构
数组的解构类似对象,只是将对象字面量替换成数组字面量,解构作用不在是具名属性上而是数组的内部位置上。

let colors = ["red", "green", "blue"];
let [first, second, third, fouth = "black"] = color
console.log(first, second, third, fouth) //"red", "green", "blue", "black"
// 嵌套
let colorArr = ["red", [ "green", "lightgreen" ], "blue"];
let [firstColor, [secondColor]] = colorArr;
console.log(firstColor) // red
console.log(secondColor) // green
// 剩余项
let colorArr = ["red", "green", "lightgreen"];
let [firstColor, ...restColors] = colorArr;
console.log(firstColor) // red
console.log(restColors) // ["green", "lightgreen"]

混合解构
对象和数组解构的混合使用

let obj = {
    person: {
        name: 'digua'
        start: {
             line: 'code',
             column: 4
        }
    },
    range: [0, 1, 2]
}
let {person: { start: end}, range: [startIndex]} = obj 
console.log(end, startIndex) // { line: 'code', column: 4 }, 0

新的基本类型

在ES6中引入了新的基本类型符号(Symbol),它的出现意味着我们可以创建非字符串类型的属性名称,可以防止使用常规手段来探查这些名称。
创建

// 符号的描述信息被存储在内部属性[[Description]]中,当符号的toString方法被显示或隐式调用时,该属性都会被读取。此外没有任何办法可以从代码中直接访问[[Description]]属性。
let name = Symbol();
let person = {}
person[name] = "digua"
console.log(person[name]) //digua
console.log(person.name) //undefined
console.log("name" in person) // false
console.log(name)  // Symbol() 
//使用符号的情况
// 使用defineProperty设置一个不可读的属性
let name = Symbol("first name");
let person = {
      [name]: "digua"
}
Object.defineProperty(person, firstName, { writable: false });
//使用defineProperties
Object.defineProperties(person, {
  [lastName]: {
       value: 'tudou',
       writable: false
  }
})

共享符号值
ES6提供了“全局符号注册表”能够在不同代码段使用相同的符号值,创建共享符号值的方法时Symbol.for(),该方法接受一个参数为目标符号值的标识符,也会成为该符号的描述信息。

//Symbol.for() 方法首先会搜索全局符号注册表,看是否存在一个键值为 "uid" 的符号值。
//若是,该方法会返回这个已存在的符号值若不少创建一个新的符号值并将该简直记录到全局符号注册表中
let uid = Symbol.for("uid");
let object = {};
object[uid] = "12345";
console.log(object[uid]); // 12345
let uid2 = Symbol.for("uid");
console.log(uid === uid2); // true 
console.log(object[uid2]) // 12345
//可以使用Symbol.keyFor()方法在全局符号注册标准根据符号值检索到对应键值
console.log(Symbol.keyFor(uid2)) // "uid"

检索符号属性
ES6中提供了Object.getownPropertySymbols()可以检索对象的符号类型属性

let uid = Symbol.for("uid");
let object = {};
object[uid] = "12345";
let symbols = Object.getOwnPropertySymbols(object);
console.log(symbols) // [Symbol(uid)]

使用知名符号暴露内部方法
ES6 定义了“知名符号”来代表 JS 中一些公共行为。
Symbol.hasInstance :供 instanceof 运算符使用的一个方法,用于判断对象继承关系。
Symbol.isConcatSpreadable :一个布尔类型值,在集合对象作为参数传递给
Array.prototype.concat() 方法时,指示是否要将该集合的元素扁平化。
Symbol.iterator :返回迭代器(参阅第七章)的一个方法。
Symbol.match :供 String.prototype.match() 函数使用的一个方法,用于比较字符串。
Symbol.replace :供 String.prototype.replace() 函数使用的一个方法,用于替换子字符串。
Symbol.search :供 String.prototype.search() 函数使用的一个方法,用于定位子字符串。
Symbol.split :供 String.prototype.split() 函数使用的一个方法,用于分割字符串。
Symbol.toPrimitive :返回对象所对应的基本类型值的一个方法。
Symbol.toStringTag :供 String.prototype.toString() 函数使用的一个方法,用于创建对象的描述信息。
Symbol.species :用于产生派生对象的构造器。
Symbol.unscopables :一个对象,该对象的属性指示了哪些属性名不允许被包含在with 语句中。

Set与Map

ES6中引入了两种新的集合类型Set和Map,此前只有数组类型。
Set
Set是不包含重复值的有序列表,set允许对它包含的数据进行快速访问。(Set不会使用强制类型转换来判断值是否重复,但是有个例外,-0和+0会被认为相等。)
Set类型使用new Set来创建,它包含size属性(检查创建的列表有多少项),has()方法(判断是否存在某项),add()方法(添加项),delete()方法(删除项),
clear()方法(清除所有项)。

例子:

let nset = new Set()
nset.add("digua")
nset.add(99)
nset.add('99')
nset.add({'name': 'tudou'})
console.log(nset.size); // 4
console.log(nset.has('digua')) // true
nset.delete(99)
console.log(nset.size); // 3
nset.clear()
console.log(nset.size, nset.has('digua')) // 0 , false

Set类型和数组类型之间的转换
数组类型转换成Set类型只需要将数组传给Set的构造器就可以了,Set转换成数组可以借助于扩展运算符(…),如例:

// 数组转Set类型
let nset = new Set([1,2,3,4,5])
console.log(nset.size) //5
// Set类型转数组
let arr = [...nset]
console.log(arr) // [1, 2, 3, 4, 5]

遍历Set,ES6中在Set中添加了forEach()方法来处理每一项,forEach()会传入一个回调函数,它包含三个参数:
1、Set中的下一个值。
2、和第一次参数相同的值。
3、Set实例本身
对于第一个和第二个参数相同的情况是因为set没用键值对组合,但是ES6制定者为了让它和其它遍历情况保持一致,认定Set中的每一项同时为键和值。
例:

let mset = new Set([1,2,3])
mset.forEach(function (value, index, ownSet) {
  console.log(value, index)
  console.log(ownSet === mset)
})
// 1, 1    true
// 2, 2    true
// 3,3    true

WeakSet
WeakSet用WeakSet构造器来创建,包含 add() 方法、 has() 方法以及 delete()方法。该类型区分与Set的一点是只允许存储对象弱引用(),也不能存储基本类型的值。(对象的弱引用在它自己成为该对象的唯一引用时,不会阻止垃圾回收)

let obj = { name: 'digua'}
let nset = new WeakSet()
nset.add(obj)
console.log(nset.has(key)) // true
nset.delete(key)
console.log(nset.has(key)) // false

Map
Map类型是键值对的有序列表,键和值可以是任意类型,这里键的比较也没有采取强制类型转换,比如 “5” 和5可以同时作为键值。
Map中包含size属性(包含多少键值)、get()方法(根据键名取值)、set()方法(传入一个键值对)、has()方法(是否包含某键值)、delete()方法(删除项)、clear()方法(清除所有项)。
例子:

let nmap = new Map(["people", "little"])
nmap.set("name", "digua")
console.log(nmap.get("name"))  // digua
nmap.set("age", 20)
console.log(nmap.size) // 3
console.log(nmap.has("age")) // true
map.delete("age") 
console.log(nmap.has("age")) // fasle
nmap.clear();
console.log(nmap.size) / 0

Map也提供了forEach()方法,它的回调函数中接收三个值:
1、Map中下一项的值
2、该值对应的键
3、Map实例本身

let nmap = new Map(["name","digua"],["age", 20])
nmap.forEach(function(value, key, ownMap) {
   console.log(key + ":" + value)
   console.log(ownMap === nmap)
})
// name:digua  true
// age:20  true

WeakMap
WeakMap对Map而言和WeakSet对Set一样,都是存储对象的方式。WeakMap中所有的键值都必须是非空(null)对象,这些对象都是弱引用不会干扰垃圾回收。
WeakMap与Map所含有的方法类似,但是没有size属性和clear()方法。
例子

let key1 = {'name': 22}
let key2 = {'name': 33}
let nmap = new WeakMap([key, 'digua'],[key2,'tudou'])
console.log(nmap.has(key1)) // true
console.log(nmap.get(key1)) // digua
console.log(nmap.delete(key1))
console.log(nmap.has(key1)) // false

WeakMap和WeakSet都是弱引用可以用来在某些情况下的防止内存泄漏。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值