JavaScript 之对象/JSON/数组

Posted 2020-12-05 Be a stonecutter.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 之对象/JSON/数组相关的知识，希望对你有一定的参考价值。

对象

简单说，所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。

var obj = {
  p: \'Hello World\'
};

上面代码中，大括号就定义了一个对象，它被赋值给变量obj。这个对象内部包含一个键值对（又称为“成员”），p是“键名”（成员的名称），字符串Hello World是“键值”（成员的值）。键名与键值之间用冒号分隔。如果对象内部包含多个键值对，每个键值对之间用逗号分隔。

var o = {
  p1: \'Hello\',
  p2: \'World\'
};

{key: value} 是 JS 对象字面量写法

基本使用

var company = {
    name: \'evenyao\',
    age: 27,
    sayHello: function(){
        console.log(\'hello world\')
    }
}
console.log(company.name)
console.log(company[\'name\'])
company.sayHello()

//添加key:value
company.city = \'重庆市\'
company[\'business\'] = \'前端工程师\'

for(var key in company){
    console.log(key)
    console.log(company[key])
}

详细介绍

键名

对象的所有键名都是字符串，所以加不加引号都可以。上面的代码也可以写成下面这样。

var o = {
  \'p\': \'Hello World\'
};

如果键名是数值，会被自动转为字符串。

var o ={
  1: \'a\',
  3.2: \'b\',
  1e2: true,
  1e-2: true,
  .234: true,
  0xFF: true
};

o
// Object {
//   1: "a",
//   3.2: "b",
//   100: true,
//   0.01: true,
//   0.234: true,
//   255: true
// }

但是，如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），也不是数字，则必须加上引号，否则会报错。

var o = {
  \'1p\': "Hello World",
  \'h w\': "Hello World",
  \'p+q\': "Hello World"
};

上面对象的三个键名，都不符合标识名的条件，所以必须加上引号。

注意，javascript的保留字可以不加引号当作键名。

var obj = {
  for: 1,
  class: 2
};

属性

对象的每一个“键名”又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

var o = {
  p: function (x) {
    return 2 * x;
  }
};

o.p(1)
// 2

上面的对象就有一个方法p，它就是一个函数。

对象的属性之间用逗号分隔，最后一个属性后面可以加逗号（trailing comma），也可以不加。

var o = {
  p: 123,
  m: function () { ... },
}

上面的代码中m属性后面的那个逗号，有或没有都不算错。

属性可以动态创建，不必在对象声明时就指定。

var obj = {};
obj.foo = 123;
obj.foo // 123

上面代码中，直接对obj对象的foo属性赋值，结果就在运行时创建了foo属性。

对象的引用

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

上面代码中，o1和o2指向同一个对象，因此为其中任何一个变量添加属性，另一个变量都可以读写该属性。

此时，如果取消某一个变量对于原对象的引用，不会影响到另一个变量。

var o1 = {};
var o2 = o1;

o1 = 1;
o2 // {}

上面代码中，o1和o2指向同一个对象，然后o1的值变为1，这时不会对o2产生影响，o2还是指向原来的那个对象。

但是，这种引用只局限于对象，对于原始类型的数据则是传值引用，也就是说，都是值的拷贝。

var x = 1;
var y = x;

x = 2;
y // 1

上面的代码中，当x的值发生变化后，y的值并不变，这就表示y和x并不是指向同一个内存地址。

表达式还是语句？

对象采用大括号表示，这导致了一个问题：如果行首是一个大括号，它到底是表达式还是语句？

{ foo: 123 }

JavaScript引擎读到上面这行代码，会发现可能有两种含义。第一种可能是，这是一个表达式，表示一个包含foo属性的对象；第二种可能是，这是一个语句，表示一个代码区块，里面有一个标签foo，指向表达式123。

为了避免这种歧义，JavaScript规定，如果行首是大括号，一律解释为语句（即代码块）。如果要解释为表达式（即对象），必须在大括号前加上圆括号。

({ foo: 123})

这种差异在eval语句中反映得最明显。

eval(\'{foo: 123}\') // 123
eval(\'({foo: 123})\') // {foo: 123}

上面代码中，如果没有圆括号，eval将其理解为一个代码块；加上圆括号以后，就理解成一个对象。

属性的操作

读取属性

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

var o = {
  p: \'Hello World\'
};

o.p // "Hello World"
o[\'p\'] // "Hello World"

上面代码分别采用点运算符和方括号运算符，读取属性p。

请注意，如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理。但是，数字键可以不加引号，因为会被当作字符串处理。

var o = {
  0.7: \'Hello World\'
};

o[\'0.7\'] // "Hello World"
o[0.7] // "Hello World"

方括号运算符内部可以使用表达式。

o[\'hello\' + \' world\']
o[3 + 3]

数值键名不能使用点运算符（因为会被当成小数点），只能使用方括号运算符。

obj.0xFF
// SyntaxError: Unexpected token
obj[0xFF]
// true

上面代码的第一个表达式，对数值键名0xFF使用点运算符，结果报错。第二个表达式使用方括号运算符，结果就是正确的。

检查变量是否声明

如果读取一个不存在的键，会返回undefined，而不是报错。可以利用这一点，来检查一个全局变量是否被声明。

// 检查a变量是否被声明
if (a) {...} // 报错

if (window.a) {...} // 不报错
if (window[\'a\']) {...} // 不报错

上面的后二种写法之所以不报错，是因为在浏览器环境，所有全局变量都是window对象的属性。window.a的含义就是读取window对象的a属性，如果该属性不存在，就返回undefined，并不会报错。

需要注意的是，后二种写法有漏洞，如果a属性是一个空字符串（或其他对应的布尔值为false的情况），则无法起到检查变量是否声明的作用。正确的做法是可以采用下面的写法。

if (\'a\' in window) {
  // 变量 a 声明过
} else {
  // 变量 a 未声明
}

属性的赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。

o.p = \'abc\';
o[\'p\'] = \'abc\';

上面代码分别使用点运算符和方括号运算符，对属性p赋值。

JavaScript允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性。

var o = { p: 1 };

// 等价于

var o = {};
o.p = 1;

查看所有属性

查看一个对象本身的所有属性，可以使用Object.keys方法。

var o = {
  key1: 1,
  key2: 2
};

Object.keys(o);
// [\'key1\', \'key2\']

delete命令

delete命令用于删除对象的属性，删除成功后返回true。

var o = {p: 1};
Object.keys(o) // ["p"]

delete o.p // true
o.p // undefined
Object.keys(o) // []

上面代码中，delete命令删除o对象的p属性。删除后，再读取p属性就会返回undefined，而且Object.keys方法的返回值中，o对象也不再包括该属性。

注意，删除一个不存在的属性，delete不报错，而且返回true。

var o = {};
delete o.p // true

上面代码中，o对象并没有p属性，但是delete命令照样返回true。因此，不能根据delete命令的结果，认定某个属性是存在的，只能保证读取这个属性肯定得到undefined。

delete命令不能删除var命令声明的变量，只能用来删除属性。

var p = 1;
delete p // false
delete window.p // false

上面命令中，p是var命令声明的变量，delete命令无法删除它，返回false。因为var声明的全局变量都是顶层对象的属性，而且默认不得删除。

for...in循环

for...in循环用来遍历一个对象的key和value。

var o = {a: 1, b: 2, c: 3};

for (var i in o) {
  console.log(i);  //遍历key
  console.log(o[i]);  //遍历value
}
// 1
// 2
// 3

JSON

JSON 格式

JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。

JSON 对值的类型和格式有严格的规定。

复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。

以下是合格的 JSON 值。

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["张三", "李四"] }

[ { "name": "张三"}, {"name": "李四"} ]

以下是不合格的 JSON 值。

{ name: "张三", \'age\': 32 }  // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined } // 不能使用undefined

{ "name": "张三",
  "birthday": new Date(\'Fri, 26 Aug 2011 07:13:10 GMT\'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函数和日期对象

需要注意的是，空数组和空对象都是合格的 JSON 值，null本身也是一个合格的 JSON 值。

ES5 新增了JSON对象，用来处理 JSON 格式数据。它有两个方法：JSON.stringify()和JSON.parse()。

JSON.stringify()

基本用法

JSON.stringify方法用于将一个值转为字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原。

JSON.stringify(\'abc\') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// \'[1,"false",false]\'

JSON.stringify({ name: "张三" })
// \'{"name":"张三"}\'

上面代码将各种类型的值，转成 JSON 字符串。

需要注意的是，对于原始类型的字符串，转换结果会带双引号。

JSON.stringify(\'foo\') === "foo" // false
JSON.stringify(\'foo\') === "\\"foo\\"" // true

上面代码中，字符串foo，被转成了""foo""。这是因为将来还原的时候，双引号可以让 JavaScript 引擎知道，foo是一个字符串，而不是一个变量名。

如果原始对象中，有一个成员的值是undefined、函数或 XML 对象，这个成员会被过滤。

var obj = {
  a: undefined,
  b: function () {}
};

JSON.stringify(obj) // "{}"

上面代码中，对象obj的a属性是undefined，而b属性是一个函数，结果都被JSON.stringify过滤。

如果数组的成员是undefined、函数或 XML 对象，则这些值被转成null。

var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"

上面代码中，数组arr的成员是undefined和函数，它们都被转成了null。

正则对象会被转成空对象。

JSON.stringify(/foo/) // "{}"

JSON.stringify方法会忽略对象的不可遍历属性。

JSON.parse()

JSON.parse方法用于将JSON字符串转化成对象。

JSON.parse(\'{}\') // {}
JSON.parse(\'true\') // true
JSON.parse(\'"foo"\') // "foo"
JSON.parse(\'[1, 5, "false"]\') // [1, 5, "false"]
JSON.parse(\'null\') // null

var o = JSON.parse(\'{"name": "张三"}\');
o.name // 张三

如果传入的字符串不是有效的JSON格式，JSON.parse方法将报错。

JSON.parse("\'String\'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

上面代码中，双引号字符串中是一个单引号字符串，因为单引号字符串不符合JSON格式，所以报错。

深拷贝的另一种写法

// 深拷贝函数
function deepCopy(src){
    return JSON.parse(JSON.stringify(src));
}    

var obj = {
    name: \'evenyao\',
    age: 27,
    friends: [\'aa\', \'bb\', \'cc\']
}
//调用JSON深拷贝函数
var obj2 = deepCopy(obj)

JavaScript 对象和 JSON 的关系

JavaScript 对象的字面量写法只是长的像 JSON 格式数据，二者属于不同的范畴，JavaScript 对象中很多类型(函数、正则、Date) JSON 格式的规范并不支持，JavaScript 对象的字面量写法更宽松。

数组

基本使用

var arr = [3, 4, 5, 6]
console.log(arr.length)  //4
console.log(arr[0])      //3
console.log(arr[3])      //6
console.log(arr[4])      //undefined
arr[4] = \'hello\'
console.log(arr[4])      // \'hello\'

arr.push(\'evenyao\')      //再数组最后添加一个元素
console.log(arr)         // [3, 4, 5, 6, \'hello\', \'evenyao\']
var value = arr.pop()    //把数组最后一位弹出来，返回 
console.log(value)       //\'evenyao\'
console.log(arr)         //[3, 4, 5, 6, \'hello\']

arr.unshift(\'root\')     //在数组第一位新增
console.log(arr)         //[\'root\', 3, 4, 5, 6, \'hello\']
var value2 = arr.shift() //把数组第一位拿出来返回，数组发生变化
console.log(value2)      // \'root\'
console.log(arr)         //[3, 4, 5, 6, \'hello\']

var arr2 = arr.splice(1, 2)         //从下标为1的元素开始，拿出来2个元素作为一个数组返回，原数组发生改变
console.log(arr)         // [3, 6, \'hello\']
console.log(arr2)        //  [4, 5]

arr.splice(1, 0, 8,9)    //从下标为1的位置（元素6）开始，删除0个，新增两个元素(在6前面新增8,9)
console.log(arr)         //[3, 8, 9, 6, \'hello\']

var arr3 = arr.slice(2,3)           //从 arr 下标为2开始，到下标为3结束(不包括3)，做为新数组，原数组不变
console.log(arr3)       // [9]
console.log(arr)        //[3, 8, 9, 6, \'hello\']

var str = arr.join(\'-\')
console.log(str)        // "3-8-9-6-hello"

var arr4 = [3, 5, -1, 18, 9, 27]
arr4.reverse()          //倒序，本身发生变化
arr4.sort(function(v1, v2){   //排序，本身发生变化
    return v1-v2; //v2-v1
})

创建数组

在JavaScript多种方式创建数组

构造函数

在使用构造函数创建数组时如果传入一个数字参数，则会创建一个长度为参数的数组，如果传入多个，则创建一个数组，参数作为初始化数据加到数组中

    var a1 = new Array(5);
       console.log(a1.length);//5
       console.log(a1); //[] ,数组是空的

       var a2 = new Array(5,6);
       console.log(a2.length);//2
       console.log(a2); //[5,6]

字面量

    var b = [1, 2, \'hello\'];

但是使用字面量方式，无论传入几个参数，都会把参数当作初始化内容

var a1 = [5];
console.log(a1.length);//1
console.log(a1); //[5]

var a2 = [5,6];
console.log(a2.length);//2
console.log(a2); //[5,6]

使用带初始化参数的方式创建数组的时候，最好最后不要带多余的”,”，在不同的浏览器下对此处理方式不一样

var a1 = [1,2,3,]
console.log(a1.length)
console.log(a1)

这段脚本在现代浏览器上运行结果和我们设想一样，长度是3，但是在低版本IE下确实长度为4的数组，最后一条数据是undefined

数组的索引与长度

数组的值可以通过自然数索引访问进行读写操作，下标也可以是一个得出非负整数的变量或表达式

var a1 = [1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3

数组也是对象，我们可以使用索引的奥秘在于，数组会把索引值转换为对应字符串（1=>”1”）作为对象属性名

console.log(1 in a1);//true，确实是一个属性

这样我们可以看出所有的索引都是属性名，但只有自然数（有最大值）才是索引，一般我们在使用数组的时候不会出现数组越界错误也正是因为此，数组的索引可以不是连续的，访问index不存在的元素的时候返回undefined

var a = new Array(1,2,3);
a[100] = 100;
console.log(a.length); //101
console.log(a[3]); //undefined
console.log(a[99]); //undefined
console.log(a[100]); 100

上面的例子中，虽然直接对a[100]赋值不会影响a[4]或a[99],但数组的长度却受到影响，数组length属性等于数组中最大的index+1，我们知道数组的length属性同样是个可写的属性，当强制把数组的length属性值设置为小于等于最大index值时，数组会自动删除indexd大于等于length的数据，在刚才代码中追加几句

a.length = 2
console.log(a);//[1,2]

这时候会发现a[2]和a[100]被自动删除了，同理，如果把length设置为大于最大index+1的值的时候，数组也会自动扩张，但是不会为数组添加新元素，只是在尾部追加空空间

a.length=5;
console.log(a); //[1,2] //后面没有3个undefined

元素添加/删除

基本方法

上面例子已经用到向数组内添加元素方法，直接使用索引就可以（index没必要连续）

var a=[1,2,3];
a[3]=4;
console.log(a);//[1, 2, 3, 4]

前面提到数组也是对象，索引只是特殊的属性，所以我们可以使用删除对象属性的方法,使用delete 删除数组元素

delete a[2];

console.log(a[2]); //undefined

这样和直接把a[2]赋值为undefined类似，不会改变数组长度，也不会改变其他数据的index和value对应关系

栈方法

上面例子中，尤其是其删除方法，并不是我们希望的表现形式，我们很多时候希望删除中间一个元素后，后面元素的index都自动减一，数组length同时减一，就好像在一个堆栈中拿去的一个，数组已经帮我们做好了这种操作方式，pop和push能够让我们使用堆栈那样先入后出使用数组

var a = [1, 2, 3];
a.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(a.length);//4
console.log(a.pop());//4
console.log(a); //[1, 2, 3]
console.log(a.length);//3

队列方法

既然栈方法都实现了，先入先出的队列怎么能少，shift方法可以删除数组index最小元素，并使后面元素index都减一，length也减一，这样使用shift/push就可以模拟队列了，当然与shift方法对应的有一个unshift方法，用于向数组头部添加一个元素

var a=[1, 2, 3];
a.unshift(4);
console.log(a);//[4, 1, 2, 3]
console.log(a.length);//4
console.log(a.shift());//4
console.log(a); //[1, 2, 3]
console.log(a.length);//3

终极神器

JavaScript提供了一个splice方法用于一次性解决数组添加、删除（这两种方法一结合就可以达到替换效果），方法有三个参数

1.开始索引

2.删除元素的位移

3.插入的新元素，当然也可以写多个

splice方法返回一个由删除元素组成的新数组，没有删除则返回空数组

删除

指定前两个参数，可以使用splice删除数组元素，同样会带来索引调整及length调整

var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]

如果数组索引不是从0开始的，那么结果会很有意思，有一这样数组

var a = new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8]=5;

console.log(a.splice(3,4)); //[3]
console.log(a.length); //5
console.log(a); //[2: 2, 3: 4, 4: 5]

上面例子可以看到，splice的第一个参数是绝对索引值，而不是相对于数组索引，第二个参数并不是删除元素的个数，而是删除动作执行多少次，并不是按数组实际索引移动，而是连续移动。同时调整后面元素索引，前面索引不理会

插入与替换

只要方法第二个参数，也就是删除动作执行的次数设为0，第三个参数及以后填写要插入内容就splice就能执行插入操作，而如果第二个参数不为0则变成了先在该位置删除再插入，也就是替换效果

var a = [1,2,3,4,5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

常用操作

join(char)

这个方法在C#等语言中也有，作用是把数组元素（对象调用其toString()方法）使用参数作为连接符连接成一字符串，不会修改原数组内容

var a = [1,2,3,4,5];
console.log(a.join(\',\')); //1,2,3,4,5
console.log(a.join(\' \')); //1 2 3 4 5

slice(start,end)

不要和splice方法混淆，slice方法用于返回数组中一个片段或子数组，如果只写一个参数返回参数到数组结束部分，如果参数出现负数，则从数组尾部计数（-3意思是数组倒第三个，一般人不会这么干，但是在不知道数组长度，想舍弃后n个的时候有些用，不过数组长度很好知道。。。。，好纠结的用法），如果start大于end返回空数组，值得注意的一点是slice不会改变原数组，而是返回一个新的数组

var a = [1,2,3,4,5];
console.log(a); //[1, 2, 3, 4, 5]
console.log(a.slice(1,2));//2
console.log(a.slice(1,-1));//[2, 3, 4]
console.log(a.slice(3,2));//[]
console.log(a); //[1, 2, 3, 4, 5]

concat(array)

看起来像是剪切，但这个真不是形声字，concat方法用于拼接数组，a.concat(b)返回一个a和b共同组成的新数组，同样不会修改任何一个原始数组，也不会递归连接数组内部数组

var a = [1,2,3,4,5];
var b = [6,7,8,9];
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]

reverse()

方法用于将数组逆序，与之前不同的是它会修改原数组

var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]

sort

sort方法用于对数组进行排序，当没有参数的时候会按字母表升序排序，如果含有undefined会被排到最后面，对象元素则会调用其toString方法，如果想按照自己定义方式排序，可以传一个排序方法进去，很典型的策略模式，同样sort会改变原数组。

var a=[5,4,3,2,1]
a.sort()
console.log(a) //[1, 2, 3, 4, 5]

但是。。。

var a=[7,8,9,10,11]
a.sort()
console.log(a) //[10, 11, 7, 8, 9]

因为按照字母表排序，7就比10大了，这时候我们需要传入自定义排序函数

如果想按照数值排序，可

    var a = [7,8,9,10,11]

    a.sort(function(v1,v2){
        return v1-v2
    })
    console.log(a) //[7, 8, 9, 10, 11]

    var users = [
        {
            name: \'aaa\',
            age: 21
        },
        {
            name: \'baa\',
            age: 18
        },
        {
            name: \'abc\',
            age: 24
        }
    ]
    // 按age 从小到大排序

    var sortByAge = users.sort(function(v1, v2){
        return  v1.age > v2.age
    })

  // 按name从大到小排序
    var sortByName = users.sort(function(v1, v2){
        return  v1.name > v2.name
    })

参考链接

参考阮一峰 javascript 教程
参考 JavaScript数组操作方法和 ES5数组拓展

以上是关于JavaScript 之对象/JSON/数组的主要内容，如果未能解决你的问题，请参考以下文章

golang生成JSON及解析JSON

JSON与XML对比MIMEJSON对象JSON数组

数据转化之JSON

javascript基础之 json

Python之json编码

jjson - 支持注释的 json 和 javascript 对象解析之 Python 模块

JavaScript 之 对象/JSON/数组

对象

基本使用

详细介绍

键名

属性

对象的引用

表达式还是语句？

属性的操作

读取属性

检查变量是否声明

属性的赋值

查看所有属性

delete命令

for...in循环

JSON

JSON 格式

JSON.stringify()

基本用法

JSON.parse()

深拷贝的另一种写法

JavaScript 对象和 JSON 的关系

数组

基本使用

创建数组

构造函数

字面量

数组的索引与长度

元素添加/删除

基本方法

栈方法

队列方法

终极神器

删除

插入与替换

常用操作

join(char)

slice(start,end)

concat(array)

reverse()

sort

参考链接

JavaScript 之对象/JSON/数组