Es6对象的扩展

属性的简写方法

var name = '秦司令';
var json = {name} // name:'秦司令'

上面代码中,变量在对象中当做属性名,属性值就是变量的值,这就是属性的简写方式。

var age = 19
var obj = {
   name:'秦司令',  
   age
}
console.log(obj) // {name:'秦司令',age:19}

函数中的声明的对象也能简写

function example(x,y){
  return {x,y}
}
console.log(example(1,2)) // {x:1,y:2}

上面代码如果不传参,x和y的参数就是undefined。

对象里面的函数也可以简写。

var json = {
  add(){
    alert(1)
  }
}
// 上面的方法等同于下面
var json = {
  add:function(){
    alert(1)
  }
}

简写一个Generator函数,前面需要要加上 * 号

var obj = {
    * add(){
      yiled 'hello word'
    }
}

上面代码中,Generator函数等下一期跟你们分享,详细讲解。

属性名表达式

js定义对象有两种方式

var obj = {}
obj.name = '秦司令';
obj['a' + 'ge'] = 19;

上面代码中,方法一是用标识符作为对象属性名,方法二是用表达式作为属性名,这是将表达式方在中括号内,中括号内可以写变量,请看下面代码。

let age = 'age';
var json = {
  [age] :19,
  ['a' + 'bc'] : 123
}
console.log(json) // {age:19,abc:123}

表达式还可以用于定义方法名。

var obj = {
    ['a' + 'bc'](){
        return 'abc'
    }
}
console.log(obj.abc()) // abc

注意,对象的简写不能和表达式一起使用,会报错。

var name = '秦司令';
console.log({ [name] }) // 报错
console.log({ [name] : 123 }) // 秦司令:123

如果属性表达式是一个对象的话,默认情况下会自动转为字符串,[object Object] 。

var dx = {}
var json = {
  [dx]:123
}
console.log(json) // {[object Object] :123}

方法name的属性

函数的name属性,返回函数名,对象方法也是函数,因此也有name属性。

var obj = {
  add(){
    return 123
  }
}
console.log(obj.add.name) // add

上面代码,方法add的name属性就是函数名,add。

函数name属性有两种特殊情况,bind方法创造的函数,name属性返回 bound 加上函数名 ;Function 构造函数创造的函数,name属性返回anonymous 英语意思为(匿名的)

(new Function()).name // anonymous
function abc(){}
console.log(abc.bind().name) // bound abc

如果对象方法是一个Symbol值,那么name属性返回的就是这个Symbol值的描述。

var s = Symbol('foo')
var s1 = Symbol()
let obj = {
  [s](){},
  [s1](){}
}
console.log(obj[s].name) // ['foo']
console.log(obj[s1].name) // ""

上面代码中,s对应的Symbol值有描述,s1没有

属性的可枚举性和遍历

可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。
Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = {foo:123};
Object.getOwnPropertyDescriptor(obj,'foo');
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述对象的enumerable属性称为 "可枚举性" , 如果该属性为false,就表示某些操作会忽略当前属性。

目前,有四种操作会忽略enumerable为false属性
for..in循环:只遍历对象自身和继承的可枚举性的属性
Object.keys() : 返回对象自身的所有可枚举属性的键名
JSON.stringify() : 只转换自身的可枚举性的属性
Object.assign() : 忽略enumerable为false的属性,只拷贝对象自身的可枚举性的属性

var json1 = {name:'秦司令'}
Object.defineProperty(json1,'age',{
    value:19,
    enumeable:false
})
for(var i in json1){
    console.log(i)   // name 
};
console.log(Object.keys(json1)) // ['name']
console.log(JSON.stringify(json1))  // {"name":"秦司令"}
console.log(Object.assign({},json1))  // {name: "秦司令"}

上面代码中,都获取不到enumerable为false的属性,Object.defineProperty是专门设置描述对象的属性;

属性的遍历

Object.getOwnPropertyNames(obj)

该方法返回一个数组,包含自身的所有属性(不包含Symbol属性,但是包括不可枚举属性)的键名

var json1 = {name:'秦司令'}
Object.defineProperty(json1,'age',{
    value:19,
    enumeable:false
})
console.log(Object.getOwnPropertyNames(json1)) // ["name", "age"]

Object.getOwnPropertySymbols(obj)

该方法返回一个数组，包含对象自身的所有 Symbol 属性的键名,只返回Symbol的键名。

var jsonArr = {[Symbol('123')]:1,b:2,c:9,3:'d',[Symbol()]:123}
console.log(Object.getOwnPropertySymbols(jsonArr)) //  [Symbol(123), Symbol()]

Reflect.ownKeys(obj)

该方法返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

var jsonArr = {[Symbol('123')]:1,b:2,c:9,3:'d',[Symbol()]:123}
console.log(Reflect.ownKeys(jsonArr)) // ["3", "b", "c", Symbol()]

上面代码中,Reflect.ownKeys该方法返回一个数组,返回所有的属性,这个数组的顺序是这样的,首先是数值属性,然后是字符串,按照字符串的位置加入,最后是Symbol属性

super关键字

Object.prototype.name = 'lider'
var json = {
    name:'我是json',
    add(){
        return super.name;
    }
}
console.log(json.add());

上面代码中,super该方法是指向Object的原型。

看下面的列子

var obj = {
    name:'我是obj',
    na(){
          console.log(this.name)
    }
}

var json = {
    name:'我是json',
    add(){
        return super.name;
    }
}

Object.setPrototypeOf(json,obj)
console.log(json.add()); // 我是obj

上面的代码,把json的原型改成了obj的原型,所以name属性就指向obj里面的。

super该方法现正只能,用在对象的简写方法内容。

// 报错
const obj = {
  foo: super.foo
}

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

对象的扩展运算符

Es2018将扩展运算符引入了对象。

var [a...b] = [1,2,3]
a //1
b // 2 3

解构赋值

对象的解构赋值用于从一个对象取值,相当于将目标对象自身所有可遍历属性(包括enumerable),但尚未被读取的属性,分配到指定的对象上面,所有的键和它们的值,都会拷贝到新对象上面。

let {x,y...z} = {x:1,y:2,c:3,d:4}
x // 1
y // 2
z // {c:3,d:4}

上面代码中,变量z是解构赋值所在的对象,它获取等号右边尚未读取的值,并且将(键值和属性值) 一同拷贝过来

解构赋值要求等号右边必须是对象,如果不是对象,就会强制转换为对象,undefined和null无法转换为对象,所以它们会报错。

let {...z} = null;
let {...a} = undefined

解构赋值必须最后一个参数是扩展运算符,否则会报错。

let {...a,b} = {a:1,b:2}

注意,解构赋值的拷贝是浅拷贝,即如果一个键值的是数组或者是对象,那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

另外,扩展运算符的解构赋值,不能复制继承的原型。

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

如果扩展运算符后面是一个对象,则没有任何效果。

console.log( {...{} , a:123 } ) // {a:123}

如果扩展运算符后面不是对象,则会自动将其转为对象。

console.log({...1}) // {}

上面代码中,将其转换为对象包装类Number{1} ,因此它没有属性则返回空对象。

如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

扩展运算符的参数之中,如有取值函数get,这个函数是会执行的。

let abc = {
    get aa(){
        return 1
    }
}
console.log(abc)

let abc1 = {
    ...{
        get aa(){
            return '我自动执行'
        }
    }
}
console.log(abc1)

Es6对象的扩展