对象

2021-08-27 17:34:23 作者：互联网

定义

对象可以通过两种方式定义：

声明（文字）形式 & 构造形式

// 文字声明语法
var myObj = {
  key: value
}

// 构造形式
var myObj = new Object();
myObj.key = value;

引用

引用对象中的内容有两种方法：

const myObject = {
  a: 2333
};

// 属性访问
myObject.a;   // 2333

// 键访问
myObject["a"];   // 2333

属性访问要求属性名满足标识符的命名规范，而键访问语法可以接受任意UTF-8/Unicode字符串作为属性名

键访问常被用于获取可变量属性值

同时，键访问可以接受 “可计算属性名”

const prefix = 'foo',
      myObject = {
          [prefix + 'bar']: 'hello',
          [prefix + 'baz']: 'world'
      };

myObject['foobar'];     // hello
myObject['foobaz'];     // world

数组

对象数组支持 “[ ]” 的访问方式

数组也是对象，即也可以用属性访问和键访问进行新增属性，对象属性并不会影响数组length的变化

const myArray = ['foo', 42, 'bar'];
myArray.baz = 'baz';
myArray.length;     // 3
myArray.baz;      // baz

使用 “[ ]” 方法新增数组内容

const myArray = [1, 2, 3];
myArray[3] = 4;

myArray;      // [1, 2, 3, 4]

复制对象

对于JSON安全的对象来说，有一种巧妙的复制方法
这种方法需要保证对象是JSON安全的，因此只适用于部分情况

var newObj = JSON.parse(JSON.stringify(someObj));

浅复制 Object.assign()

ES6定义了 Object.assign() 方法实现浅复制。
该方法接收两个参数，第一参数是目标对象，之后还可以跟一个或多个源对象。

属性描述符

var myObject = {
  a: 2
}

在创建普通属性时属性描述会使用默认值，例如上面的代码创建的不仅仅是2，还包含了另外的三个特性：

writable (可写，属性值可被修改)

enumerable (可枚举，属性可被遍历出来)

configurable (可配置，属性描述符配置可被修改)

使用 Object.defineProperty() 方法来添加/修改对象属性

var myObject = {};

Object.defineProperty(myObject, 'a', {
  value: 2,
  writable: true,
  configtarble: true,
  enumerable: true
});

myObject.a;   // 2

1. Writable

决定是否可以修改属性的值

2. configurable

决定属性是否是可配置的

即便属性是 configurable: false ，我们还是可以把writable的状态由true改为false，但是无法由false改为true!

把configurable修改成false是单向操作，无法撤销。

除了无法修改， configurable: false 还会禁止删除(delete)这个属性

3. Enumerable

属性是否会出现在对象的属性枚举中，即属性是否能被遍历出来

不变性

所有的方法创建的都是浅不变性，即他们只会影响目标对象和它的直接属性。深不变性指的是创建的内容是不可改变的，js中很少需要深不可变性

1. 对象常量

结合 writable:false 和 configurable:false 就可以创建一个真正的常量属性 (不可修改、重定义or删除)

2. 禁止扩展

禁止一个对象添加新属性且保留已有属性，使用如下方法
Object.preventExtensions()

3. 密封

Object.seal() 会创建一个“密封”的对象
这个方法会在一个现有对象上调用 Object.preventExtensions() 并把所有现有属性标记为configurable:false

所以密封之后不仅不能添加新属性，也不能重新配置or删除任何现有属性，虽然可以修改属性的值

4. 冻结

Object.freeze() 会创建一个冻结对象
这个方法实际上会在一个现有对象上调用 Object.seal() 并把所有“数据访问”属性标记为writable:false，这样就无法修改它们的值

Getter和Setter

对象默认的【【Put】】和【【Get】】操作分别可以控制属性值的设置和获取
getter是一个隐藏函数，会在获取属性值时调用。
setter也是隐藏函数，会在设置属性值时调用

定义getter和setter，可以覆盖单个属性的默认的【【Put】】操作。
通常getter和setter是成对出现的，只定义一个的话通常会出现意料之外的行为

var myObject = {
  // 给a定义一个getter
  get a() {
    return this._a_;
  },
  
  // 给a定义一个setter
  set a(val) {
    this._a_ = val * 2;
  }
};

myObject.a = 2;

myObject.a;   // 4

对象小结

1. js对象有字面形式和构造形式。其中字面形更常用，构造形式能提供更多选项

2. 对象是6个(7个)基础类型之一。对象有包括function在内的子类型，不同子类型具有不同的行为。

3. 对象是键/值对的集合。可以通过 .propName或者["propName"]语法来获取属性值

4. 属性的特性可以通过属性描述符来控制，例如 writable 和 configurable。此外，可以使用 Object.preventExtensions()、Object.seal() 和 Object.freeze() 来设置对象(及其属性)的不可变性级别。

5. 属性不一定包含值————它们可能是具备了getter/setter的“访问描述符”。

6. 属性可以是可枚举or不可枚举，这决定了它们是否会出现在 for..in 循环中

7. 使用ES6的 for..of 语法来遍历数据结构(数组、对象等等)中的值，for..of 会寻找内置或者自定义的 @@iterator对象并调用它的 next() 方法来遍历数据值

对象解构

解构，个人理解即将对象内的数据直接绑定到新声明的变量中。

// 解构目标测试对象
const testObject = {
    a: 1,
    b: 2,
    c: 3
}

解构方案一

直接将测试对象中的属性赋值到新声明变量中

// 解构testObject对象
const { a, b, c } = testObject;
console.log(a, b, c);	// 1, 2, 3

解构方案二

将测试对象中的属性放到 testArray 数组中

const testArray1 = [...testObject];
console.log(testArray1);		// [1, 2, 3]

// 面对复杂的测试对象
const testComplexObject = {
    a: {
        a1: 1,
        a2: 2,
        a3: 3
    },
    b: {
        b1: 1,
        b2: 2,
        b3: 3
    }
}
const testArray2 = [...testObject];
console.log(testArray2);		// [{a1: 1, a2: 2, a3: 3}, {b1: 1, b2: 2, b3: 3}]

标签：myObject,false,对象,Object,const,属性
来源： https://www.cnblogs.com/CreateBox/p/15194624.html