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

一、语法

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

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

二、类型

对象是JavaScript的基础。

1)基本类型

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

string、number、boolean、null、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
时间: 2024-10-16 18:27:20

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

JavaScript 基础(三) 对象 条件判断

JavaScript的对象是一种无序的集合数据类型,它是由若干键对组成. var guagua = { name:'瓜瓜', birth:1988, school:'No.1 Middle School', height:1.70, weight:65, score:null }; JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开.注意,最后一个键值对不需要在末尾加,, 如果加了,有的浏览器(如低版本的IE)将报错. 上述对象申明了一个name属性,值

《你不知道的JavaScript》三卷读后感

本系列的作者是Kyle Simpson,上卷译者赵望野.梁杰,中卷译者单业,下卷译者单业.姜南. 我个人觉得第一卷是本系列最好的(必读),而第二卷虽然也讲解了很多知识点,但是对于异步和性能的那部分提及了信任问题上,我不敢苟同,毕竟开源的大环境下,林子大了什么鸟都有,不能因为一两个问题而对所有的开源项目都抱以怀疑,而Promise如文中介绍的一样,真正上手后真的会爱不释手,配合async.await一起使用以及一些新的语法,可以节省不少代码,易用程度不亚于那些流行的异步框架(关键还是在于真正去用,

《你不知道的JavaScript》整理(二)——this

最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函数在哪里被调用(调用栈).函数的调用方法.传入的参数等信息. this就是记录的其中一个属性,会在函数执行的过程中用到. this既不指向函数自身也不指向函数的作用域. this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用. 一.调用位置 调用位置就在当前正在执行的函数的前一个调用中

《你不知道的JavaScript》整理(一)——作用域、提升与闭包

最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 1)函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a,

JavaScript日期时间对象的创建与使用(三)

时钟效果一: 代码: <html> <head> <meta charset="utf-8"/> <title>JavaScript日期时间对象的创建与使用</title> </head> <body> <h2 id="time"></h2> <script type="text/javascript"> function Cl

你不知道的Javascript(上卷)读书笔记之一 ---- 作用域

你不知道的Javascript(上卷)这本书在我看来是一本还不错的书籍,这本书用比较简洁的语言来描述Js的那些"坑",在这里写一些博客记录一下笔记以便消化吸收. 1 编译原理 在此书中,开始便提出:Javascript是一门编译型语言,我一开始以为这是国内翻译的锅,翻译的不够准确,后来我还专门去github看了,作者确实是将Js描述为一门编译型语言(compiled language).然而我认为作者更想表达的是Js也拥有和Java一般的特定的编译过程.而不是传统得认为只是单纯的进行&

JavaScript作用域闭包(你不知道的JavaScript)

JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

你不知道的JavaScript之类型

JavaScript是一门简单易用的语言,应用广泛,同时它的语言机制又十分复杂和微妙,即使经验丰富的开发人员也需要用心学习才能真正掌握. <你不知道的JavaScript>中是这样定义类型的: 类型是值的内部特征,它定义了值的行为,以使其区别于其他值. 这样的定义可能略简单了一些,不够已经足够让我们去理解类型的含义. 不得不提的强制类型转换 在JavaScript中,强制类型转换无处不在,在我们的程序中,有意无意地,都经常地利用到强制类型转换.它给我们带来了许多便利,同时也容易造成某一些坑.当

你不知道的JavaScript(1)LHS查询和RHS查询

打算把<你不知道的JavaScript>中的知识点整理下,写点自己的心得,同时也敦促自己看书. 先做个整体的介绍,最后会再给个综合的例子. RHS 查询与简单地查找某个变量的值别无二致,而LHS 查询则是试图找到变量的容器本身,从而可以对其赋值. LHS查询 LHS查询指的是找到变量的容器本身,从而可以对其进行赋值.也就是找到赋值操作的目标. LHS查询的时候会沿着作用域链进行查询,找到的话就会将值赋值给这个变量,如果到达作用域顶端仍然找不到,就会在作用域链顶端创建这个变量. 举个例子 var

《你不知道的JavaScript》系列分享专栏

<你不知道的JavaScript>系列分享专栏 你不知道的JavaScript"系列就是要让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途 <你不知道的JavaScript>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/205515.html 文章 你不知道的JavaScript--Item3 隐式强制转换 你不知道的JavaScript--Item4 基本