ES6-对象拓展

• 1: 同名赋值(简洁表达式)
• 2: 属性名表达式
  • 注意点
• 3. Object.is() 同值相等
  • 实现原理
• 4. Object.assign()
  • 基本实例
  • 同名属性的合并
  • 合并引用类型的变量
  • JQuery的extend方法
• 5. Object.keys Object.values Object.entries
• 6. __proto__
• 7. …(拓展运算符和rest运算符)
  • 拓展运算符
  • rest运算符
• 8. Object.getOwnPropertyDescriptor()

1: 同名赋值(简洁表达式)

对象的属性和方法 允许直接使用变量和函数来表示

var name = 'xxx';
var age = 22;
var greet = function(){
	console.log('Hello World!');
}

var obj = {
	name,
	age,
	greet,
}
console.log(obj) // success { name: 'xxx', age: '22', greet: f() }
obj.greet() // success 'Hello World!'

2: 属性名表达式

ES5中在定义字面量对象的时候,只能使用标识符定义属性

var obj = {
    foo: true
}

ES6中允许在定义字面量对象的时候,使用表达式定义属性,即把表达式放在方括号内

var prop = 'name'
var obj = {
    [prop] : 'xxx',
    ['a' + 'g' + 'e']: 12
}
console.log(obj) // success { age: 12, name: "xxx" }

注意点

属性名表达式与简洁表示法,不能同时使用,会报错

var foo = 'name'
var obj = {
    [foo]
} // error 编辑器报错

属性名表达式是对象的情况

var keyA = {a: 1};
var keyB = {b: 2};
var obj = {
    [keyA] : '1',
    [keyB] : '2'
}
console.log(obj) // success { [object Object] : '2' }
// 对象作为属性名表达式的时候 会转化为`[object Object]`
// 相同属性名的情况下，后者会覆盖前者

3. Object.is() 同值相等

弥补 == 和 === 的一些缺点

• == 会进行数据类型转换 0 == '0' true
• ===的缺点 NaN !== NaN``````+0 === -0

Object.is(NaN, NaN) // success true;
Object.is(+0, -0)   // success false;
Object.is({}, {})   // success flase;
Object.is([], [])   // success false;

实现原理

Object.defineProperty(Object, 'is', {
    value: function(x, y) {
        if (x === y) {
            // x !== 0 非0的情况
            // 1 / x === 1 / y; 针对+0 不等于 -0的情况
            return x !== 0 || 1 / x === 1 / y;
        }
        // 针对NaN的情况 除NaN外的变量 自身等于自身
        return x !== x && y !== y;
    },
    configurable: true,
    enumerable: false,
    writable: true
});

4. Object.assign()

• 用于将所有可枚举属性的值从一个或多个源对象分配到目标对象 浅拷贝

基本实例

let obj1 = {
    name : 'xxx'
}
let obj2 = {
    age: 12
}
let obj3 = {
    sex: 'male',
}
let obj = Object.assign(obj1, obj2, obj3)
console.log(obj3) // success {name: 'xxx'}
console.log(obj2) // success {age: 12}
console.log(obj1) // success {age: 12, name: 'xxx', sex: 'male'}
console.log(obj)  // success {age: 12, name: 'xxx', sex: 'male'}

同名属性的合并

let obj1 = {
    name: 'obj1',
    age: 12
}
let obj2 = {
    name : 'obj2',
    sex: 'male'
}
let obj = Object.assign({}, obj1, obj2)
console.log(obj) // success {age: 12, name: "obj2", sex: "male"}

合并引用类型的变量

let obj1 = {
    userInfo: {
        loginName: 'admin',
        password: '123456'
    }
}
let obj = {
    mainColor: '#165DAA'
}
obj = Object.assign(obj, obj1)
console.log(obj) // success { mainColor: "#165DAA", userInfo: {loginName: "userAdmin", password: "123456"} }

// 嵌套对象的合并是浅拷贝 数据源内容变化 合并后的对象的值也会随着变化
obj1.userInfo.loginName = 'userAdmin'
console.log(obj.userInfo) // success {loginName: "userAdmin", password: "123456"}
console.log(obj1.userInfo) // success {loginName: "userAdmin", password: "123456"}

JQuery的extend方法

• $.extend(arg1,arg2,arg3) 对象合并 默认浅拷贝
• $.extend(true,arg1,arg2) 第一个参数填true 执行的就是深拷贝

5. Object.keys Object.values Object.entries

• Object.keys(obj) 返回参数对象自身所有可遍历的键名
• Object.values(obj) 返回参数对象自身所有可遍历的键值
• Object.entries(obj) 返回参数对象自身所有可遍历的键值对

var obj = {
    name : 'age',
    age : 12,
    sex: 'male'
}
console.log(Object.keys(obj)) // success ["name", "age", "sex"]
console.log(Object.values(obj)) // success ["xxx", 12, "male"]
console.log(Object.entries(obj)) // [["name", "xxx"], ["age", 12], ["sex", "male"]]

6. __proto__

隐式原型,返回的是该对象的直接构造函数的原型,可以用来读取或设置当前对象的隐式原型

var obj1 = {
    a: 1,
    name: 'yyy'
}
var obj2 = {
    name: 'xxx',
    age: 12,
    say: () => {
        console.log('Hello World!')
    }
}
obj1.__proto__ = obj2 // 设置对象的原型
console.log(obj1.name) // success yyy
console.log(obj1.age) // success 12
obj1.say() // success Hello World!
console.log(obj1.__proto__) // success obj2

ES6提供三个方法有关原型链的方法，分别是读、写、创造

• 读取: Object.getPrototypeOf(obj)
• 设置: Object.setPrototypeOf(obj1,obj2)
• 创造: Object.create({a:1,b:2})

var obj = {
    name: 'xxx',
    age: 12,
    say: () => {
        console.log('Hello World!')
    }
}
var obj1 = {
    loginName: 'admin',
    password: '123456'
}
Object.setPrototypeOf(obj1, obj)
console.log(obj1.__proto__) // success obj
console.log(Object.getPrototypeOf(obj1)) // success obj
console.log(obj1.__proto__ == Object.getPrototypeOf(obj1)) // success true

var obj2 = new Create({a: 1, b: 2})
console.log(obj2.__proto__) // success {a: 1, b: 2}

Object.create()有关的两道面试题

// 修改数值型变量 
// 自身存在 修改自身的变量值 
// 自身不存在 直接创建 不会修改原型上的内容
var a = { name: 'kelen' };
var b = Object.create(a);
b.name = 'boke';
console.log(a.name);  // success 'kelen'
     
// 修改引用型变量 
// 自身存在 修改自身的变量值 
// 自身不存在 查找原型上是否存在 存在则操作原型上的数据 否则报错
var a = { person : { name: 'kelen' } };
var b = Object.create(a);
b.person.name = 'kobe';
console.log( a.__proto__, b.__proto__ ); // success { person : { name: 'kelen' } } { person : { name: 'kelen' } }

7. …(拓展运算符和rest运算符)

• ...对象 / 数组

拓展运算符

// 对象使用拓展运算符 效果等同于 Object.assign
var obj1 = {
    a : 1
} 
var obj2 = {
    a : 2,
    b : 2
}
var obj = {
    ...obj1, ...obj2 // success {a: 2, b : 2}
    ...obj2, ...obj1 // success {a: 1, b : 2}
}

// 数组使用拓展运算符
var arr1 = [1,2] 
var arr2 = [2,3]
var arr = [...arr,...arr1] 
console.log(arr) // success [1, 2, 3]

rest运算符

解构赋值的时候使用,就是rest运算符(一定要放在最后一个变量或属性名称身上)

var [x,...y] = [1,2,3]
console.log(x, y) // success x = 1, y = [2,3]

var {foo,...bar} = {
    foo:1,
    bar:2,
    baz:3
} 
console.log(foo, bar) // success foo = 1  bar = {bar:2,baz:3}

8. Object.getOwnPropertyDescriptor()

• Object.getOwnPropertyDescriptor(对象, 属性名)

方法返回指定对象上一个自有属性对应的属性描述符

自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性

var obj = {
    name: 'xxx',
    age: 12
}
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name')
console.log(descriptor) 
// success
// {
//     configurable: true
//     enumerable: true
//     value: "xxx"
//     writable: true
// }