深入理解ES6--对象、函数扩展
扩展对象的功能性
属性名称简写
let name = 'ligang'
let person = {
name,
sayName() {
console.log(name)
}
}javascript引擎会在访问作用域中查找其同名变量；如果找到，则变量的值被赋给对象字面量的同名属性。
Object.is()
Object.is()方法是为了弥补全等运算符’===’的准确性，其接受两个参数，如果两个参数类型相同且具有相同的值，则返回true。
console.log(+0 === =0) // true
console.log(Object.is(+0, -0)) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
console.log(isNaN(NaN)) // true注意：map.get()底层使用的就是Object.is()进行判断获取
let myMap = new Map().set('0', 'xxx')
myMap.get(0) // undefined
myMap.get('0') // xxxObject.assign()
对象组合，浅拷贝
自有属性枚举顺序
ESMAScript6严格定义了对象的自有属性被枚举时的返回顺序，这会影响到Object.getOwnPropertyNames()方法及Reflect.ownKeys返回属性的方式，Object.assign()方法处理属性的顺序也将随之改变。
- 所有数字键按照升序排序；
- 所有字符串按照它们被加入对象的顺序排序；
- 所有symbol键按照它们被加入对象的顺序排序。
let obj = {
a: 1,
0: 1,
c: 1,
2: 1,
b: 1,
1: 1
}
Object.getOwnPropertyNames(obj) // ["0", "1", "2", "a", "c", "b"]注意，for-in并非所有厂商都遵循相同的实现方式；Object.keys()和JSON.stringify()与for-in相同，所以目前也不明确！
原型访问super
let person = {
sayHi() {
return 'hi'
}
}
let friend = {
sayHi() {
// 获取其原型方法
return Object.getPrototypeOf(this).sayHi.call(this) + ' friend'
}
}
let friend2 = {
sayHi() {
return super.sayHi() + ' friend2'
}
}
Object.setPrototypeOf(friend, person);
friend.sayHi() // "hi friend"
Object.setPrototypeOf(friend2, person);
friend2.sayHi() // "hi friend2"函数
函数形参的默认值
ES5方式
function test(name) {
name = (typeof name !== 'undefined') ? name : 'ligang'
// name = name || 'ligang' // 当name为假值时会出现问题！！如，test(0)
return name
}ES6：注意，对于默认参数值，null是一个合法值
function test(name = 'ligang') {
return name
}
test(undefined) // ligang
test(null) // null默认参数表达式
function getvalue(n) {
return n
}
function add(first, second = getvalue(first)) {
return first + second
}
add(100) // 200注意：
getvalue()方法只有当调用add()函数且不传入第二个参数时才会调用；- 引用参数默认值时，只允许引用前面参数的值，即先定义的参数不能访问后面定义的参数。
展开运算符
数组
let ary = [1, 2, 3]
let max = Math.max(...ary, 5)
console.log(max) // 5对象
let obj = {a: 1, b: {c: 2}}
let obj2 = {...obj}
obj.b.c = 3
console.log(obj2) // {a: 1, b: {c: 3}} 浅拷贝特别说明： ES6中展开运算符只针对iterable才起作用，默认有数组、set、map和字符串。并不包含对象！ES6规范中也并未将展开运算符支持对象，但是目前的主流浏览器Chrome和firefox均已实现该特性。这意味着如果想在低版本浏览器中使用需要特别的Babel插件进行转换！object-rest-spread
明确函数的多重用途
JavaScript函数有两个不同的内部方法：[[Call]]和[[Construct]]（构造函数）。通过new关键字调用函数时，执行的是[[Construct]]函数，将this绑定到实例上；如果不通过new调用，则执行[[Call]]函数。
function Person(name) {
if (this instanceof Person) {
this.name = name
} else {
throw new Error('必须通过new关键词创建')
}
}
let p = new Person('ligang')
Person.call(p, 'lee') // 不会报错所以，我们无法区分通过Person.call()（或Person.apply()）调用还是new关键字创建！
元属性new.target可以解决，调用[[call]]方法，new.target的值为undefined。
function Person(name) {
if (typeof new.target !== 'undefined') {
this.name = name
} else {
throw new Error('必须通过new关键词创建')
}
}
let p = new Person('ligang')
Person.call(p, 'lee') // 必须通过new关键词创建箭头函数
- 没有this、super、arguments河new.target绑定；
- 不能通过new关键字调用；
- 没有原型；
- 不可以改变this的绑定； 如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this；否则，this的值会被设置为undefined。
let person = {
name: 'ligang',
sayName() {
return (() => this.name)()
}
}- 不支持重名的命名参数。
尾调用优化
ES6对尾调用（函数作为另一个函数的最后一条语句被调用）进行了优化。ES5中，尾调用实现为“创建一个新的栈，将其推入调用栈来表示函数调用，即未用完的栈都在内存中，当调用栈变大会造成程序内存溢出”。ES6中不在创建新栈，会清除并重新利用当前栈。
- 尾调用不访问当前栈的变量（即不是一个闭包）；
- 在函数内部，尾调用是最后一条语句；
- 尾调用的结果作为函数值返回。
function factorial(n) {
if (n <= 1) {
return 1
}
return n * factorial(n - 1)
}优化后
function factorial(n, p = 1) {
if (n <= 1) {
return 1 * p
}
let result = n * p
return factorial(n - 1, result)
}