《你不知道的JavaScript》整理(三)——对象

简介:

一、语法

两种形式定义:文字形式和构造形式。

//文字形式
var myObj = {
  key: value
};
//构造形式
var myObj = new Object();
myObj.key = value;

 

二、类型

对象是JavaScript的基础。

1)基本类型

在JavaScript中一共有六种主要类型(术语是“语言类型”):

string、number、booleannull、undefined、object

 

2)内置对象

JavaScript中还有一些对象子类型,通常被称为内置对象。

String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

引擎可以将一些基础类型自动转换成相应的内置对象,然后就能调用对象的属性或方法。

//将字符串转换为String对象
var strPrimitive = "I am a string";
console.log( strPrimitive.length ); // 13
console.log( strPrimitive.charAt( 3 ) ); // "m"

//将数字转换为Number对象
var num = 42.359.toFixed(2);
console.log(num);//42.36

 

三、内容

1)属性

var myObject = {
 a: 2
}; 
myObject.a; // 2 属性访问
myObject["a"]; // 2 键访问

.a语法通常被称为“属性访问”,["a"]语法通常被称为“键访问”。

 

2)复制对象

对于JSON安全(也就是说可以被序列化为一个JSON字符串并且可以根据这个字符串解析出一个结构和值完全一样的对象)的对象来说,有一种巧妙的复制方法:

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

相比深复制,浅复制非常易懂并且问题要少得多,所以ES6定义了Object.assign(..)方法来实现浅复制。

3)属性描述符

从ES5开始,所有的属性都具备了属性描述符。可通过方法Object.defineProperty()实现。

var myObject = {};

Object.defineProperty(myObject, "a", {
  value: 2,
  writable: true,
  configurable: true,
  enumerable: true

});

console.log(myObject.a); // 2

Vue.js就是通过这个方法来实现追踪变化。

 

4)Getter和Setter

在ES5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上。

var myObject = {
  // 给 a 定义一个 getter 
  get a() {
    return 2;
  }
};

Object.defineProperty(
  myObject, // 目标对象
  "b", // 属性名 
  { // 描述符
    // 给 b 设置一个 getter
    get: function() {
      return this.a * 2
    },
    // 确保 b 会出现在对象的属性列表中
    enumerable: true
  }
);

console.log(myObject.a); // 2
console.log(myObject.b); // 4

 

5)存在性

in操作符会检查属性是否在对象及其[[Prototype]]原型链中。

hasOwnProperty(..)只会检查属性是否在myObject对象中,不会检查[[Prototype]]链。

前面有一篇《JavaScript中typeof、toString、instanceof、constructor与in》做了些比较。

var myObject = {
  a: 2
};

("a" in myObject); // true
("b" in myObject); // false 

myObject.hasOwnProperty("a"); // true
myObject.hasOwnProperty("b"); // false

 

四、遍历

和数组不同,普通的对象没有内置的@@iterator,所以无法自动完成for..of遍历。

但你可以给任何想遍历的对象定义@@iterator。

var myObject = {
  a: 2,
  b: 3
};

Object.defineProperty(myObject, Symbol.iterator, {
  enumerable: false,
  writable: false,
  configurable: true,
  value: function() {
    var o = this;
    var idx = 0;
    var ks = Object.keys(o);
    return {
      next: function() {
        return {
          value: o[ks[idx++]],
          done: (idx > ks.length)
        };
      }
    };
  }
});

// 手动遍历 myObject
var it = myObject[Symbol.iterator]();
it.next(); //{ value:2, done:false }
it.next(); //{ value:3, done:false }
it.next(); //{ value:undefined, done:true }

// 用 for..of 遍历 myObject 
for (var v of myObject) {
  console.log(v);
}
// 2 
// 3




,如需转载请自行联系原作者	
相关文章
|
14天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
23天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
2月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
28 0
|
17天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
3天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
9天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
10 0