温故而知新@Javascript对象

温故而知新@Javascript对象_第1张图片

文章目录

  • 对象的定义
    • 属性的类型
      • 数据属性
      • 访问器属性
      • 数据属性和访问器属性的对比
      • 读取属性的特性
  • 合并对象
  • 对象的解构
    • 嵌套解构
    • 注意事项

对象的定义

ECMA-262将对象定义为一组属性的无序集合

属性的类型

属性分为两类:数据属性访问器属性

数据属性

数据属性包含一个保存数据值的位置。 读取和写入都在这个位置。
它们有四个特性:

特性 描述 默认值
configurable 能否使用delete、能否需改属性特性、或能否修改访问器属性、,false为不可重新定义,默认值为true true
enumerable 对象属性是否可通过for-in循环,flase为不可循环,默认值为true true
writable 对象属性是否可通过for-in循环,flase为不可循环,默认值为true true
value 属性实际的值 undefined

要修改属性的默认特性,必须使用Object.defineProperty()
Object.defineProperty(obj, prop, descriptor)
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol
descriptor:要定义或修改的属性描述符

//例子
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

访问器属性

所谓的访问器属性指的就是 getter和setter这两个函数,一个在获取属性时调用,一个在设置属性时调用,默认值undefined,这两个函数不是必须的
它们必须使用Object.defineProperty()定义

//例子
var bValue = 38;
Object.defineProperty(o, "b", {
  // 使用了方法名称缩写(ES2015 特性)
  // 下面两个缩写等价于:
  // get : function() { return bValue; },
  // set : function(newValue) { bValue = newValue; },
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable : true,
  configurable : true
});
o.b; // 38

数据属性和访问器属性的对比

configurable enumerable value writable get set
数据描述符 可以 可以 可以 可以 不可以 不可以
存取描述符 可以 可以 不可以 不可以 可以 可以

读取属性的特性

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

const object1 = {
  property1: 42
};

const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');

console.log(descriptor1.configurable);
// expected output: true

console.log(descriptor1.value);
// expected output: 42

合并对象

es6提供了Object.assign()方法
将所有可枚举属性的值从一个或多个源对象分配到目标对象
要注意的是实际上对每个源对象执行的是浅复制
如果有重复的值,取的是最后一个

对象的解构

简单的来说 对象的解构就是
使用与对相匹配的结构来实现对对象属性赋值

这里的结构不需要完全一致,你可以忽略你所不需要的属性,当然也可以在原本属性引用不存在的情况下加上默认值
例子

let person={
	name:'alex',
	age:18,
	phone:'110'
}
let {name,age} =person
let {name,age,home='shanghai'} =person
let {name:personName,age:personAge} =person

// name alex age 18
// personName alex personAge 18

嵌套解构

解构对于引用嵌套的属性或者赋值目标没有限制
通过一个例子更好理解

let person={
	name:'alex',
	age:18,
	phone:'110',
	job:{title:'it'}
}
let {job:{title}} = person
// title it

注意事项

如果一个解构表达式涉及多个赋值,开始的赋值成功而后面的赋值出错,则整个结构只会完成一部分

你可能感兴趣的:(Javascript笔记,javascript)