Object

到目前为止,大多数引用值的示例使用的是 Object 类型。Object 是 ECMAScript 中最常用的类型之一。虽然 Object 的实例没有多少功能,但很适合存储和在应用程序间交换数据。
1
2
3
let decade = new Object();
decade.name = "MSS";
decade.age = 29;
另一种方式是使用对象字面量(object literal)表示法。对象字面量是对象定义的简写形式,目的是为了简化包含大量属性的对象的创建。
1
2
3
4
let person = {  // 与 new Object()相同
name: "Nicholas",
age: 29
};

Array

创建数组

有几种基本的方式可以创建数组。一种是使用 Array 构造函数,比如:
1
2
3
4
5
6
7
8
9
10
11
12
13

let colors = new Array();

let colors = new Array(20); //创建一个初始 length 为 20 的数组

let colors = new Array("red", "blue", "green"); //创建一个包含 3 个元素的数组

let names = []; // 创建一个空数组
let values = [1,2,]; // 创建一个包含 2 个元素的数组

let colors = new Array(3); // 创建一个包含 3 个元素的数组
let names = new Array("Greg"); // 创建一个只包含一个元素,即字符串"Greg"的数组

数组空位

使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。ECMAScript 会将逗号之间相应索引位置的值当成空位,ES6 规范重新定义了该如何处理这些空位。

1
2
3
4

const options = [,,,,,]; // 创建包含 5 个元素的数组
console.log(options.length); // 5
console.log(options); // [,,,,,]

数组索引

1
2
3
4
5
6

let colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 添加第四项

数组 length 属性的独特之处在于,它不是只读的。通过修改 length 属性,可以从数组末尾删除或添加元素。

1
2
3
let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors.length = 2;
alert(colors[2]); // undefined

检测数组

一个经典的 ECMAScript 问题是判断一个对象是不是数组。在只有一个网页(因而只有一个全局作用域)的情况下,使用 instanceof 操作符就足矣

1
2
3
if (value instanceof Array){
// 操作数组
}

Array.isArray()方法这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。

1
2
3
4

if (Array.isArray(value)){
// 操作数组
}

迭代器方法

在 ES6 中,Array 的原型上暴露了 3 个用于检索数组内容的方法:keys()、values()和entries()。keys()返回数组索引的迭代器,values()返回数组元素的迭代器,而 entries()返回索引/值对的迭代器

1
2
3
4
5
6
7
8
9
10
11
12

const a = ["foo", "bar", "baz", "qux"];
// 因为这些方法都返回迭代器,所以可以将它们的内容
// 通过 Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"]
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]


复制和填充方法

ES6 新增了两个方法:批量复制方法 copyWithin(),以及填充数组方法 fill()。这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const zeroes = [0, 0, 0, 0, 0];
// 用 5 填充整个数组
zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes); // [0, 8, 8, 8, 0];

与 fill()不同,copyWithin()会按照指定范围浅复制数组中的部分内容,然后将它们插入到指定索引开始的位置。开始索引和结束索引则与 fill()使用同样的计算方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 从 ints 中复制索引 0 开始的内容,插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从 ints 中复制索引 5 开始的内容,插入到索引 0 开始的位置
ints.copyWithin(0, 5);
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3);
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript 引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持负索引值,与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

转换方法

前面提到过,所有对象都有 toLocaleString()、toString()和 valueOf()方法。其中,valueOf()返回的还是数组本身。而 toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说,对数组的每个值都会调用其 toString()方法,以得到最终的字符串。

1
2
3
4
let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
alert(colors.toString()); // red,blue,green
alert(colors.valueOf()); // red,blue,green
alert(colors); // red,blue,green

join()

join()方法接收一个参数,即字符串分隔符,返回包含所有项的字符串。

1
2
3
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

push()

push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度。

1
2
3
4
5
var arr = [1, 2, 3];

console.log(arr.push(4, 'pink')); // 5;

console.log(arr);//[1, 2, 3,4, 'pink'];

pop()

pop()方法则用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项。

1
2
3
 var arr = [1, 2, 3];
console.log(arr.pop()); //3
console.log(arr); //[1,2]

shift()

它会删除数组的第一项并返回它,然后数组长度减 1。

1
2
3
 var arr = [1, 2, 3];
console.log(arr.shift()); //1
console.log(arr);//[2,3]

unshift()

在数组开头添加任意多个值,然后返回新的数组长度。

1
2
3
4
var arr = [1, 2, 3];
console.log(arr.unshift('red', 'purple'));//5

console.log(arr);//['red', 'purple',1, 2, 3]

concat()

用于连接两个或多个数组

1
2
3
4
5
6
7

var arr1=["a","b","c"],
arr2=["d","e",1,3],
arr3;
// concat
arr3=arr1.concat(arr2,["m",99,8]);
console.log(arr3);

slice()

从已有的数组返回选定元素

如果没有指定end,那么切分的数组包含从start到数组结束的所有元素

如果slice()方法的参数有一个负数,则用数组长度加上该数确定相应位置

1
2
3
4
5
6
// slice(start,end) end下标
var colors=["red","green","blue","yellow","orange"];
//var newColors=colors.slice(1,3); //["green","blue"]
//var newColors2=colors.slice(2,4); //["blue","yellow"]
var newColors3=colors.slice(-4,3); // 1,3 ["green","blue"]
console.log(newColors3);

splice()

删除从index处开始的零个或多个元素

1
2
3
4
5
6
7
8
9
10
var arr = ["a", "b", "c", "d", "e", "f"];
// 删除
var delArr = arr.splice(2, 3);
console.log(arr); // [a,b,f]
// 插入
var insertArr = arr.splice(3, 0, "m", "n", 88);
console.log(arr); //["a", "b", "f", "m", "n", 88]
// 替换
var replaceArr = arr.splice(1, 2, "x", "y", "z");
console.log(arr); //["a", "x", "y", "z", "m", "n", 88]

reverse()

1
2
3
let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()

1
2
3
let values = [0, 1, 5, 10, 15];
values.sort();
alert(values); // 0,1,10,15,5

indexOf()、

接收两个参数:要查找的元素和一个可选的起始搜索位置。从数组前头(第一项)开始向后搜索

1
2
3
4

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)); // 3
alert(numbers.indexOf(4, 4)); // 5

lastIndexOf()

接收两个参数:要查找的元素和一个可选的起始搜索位置。lastIndexOf()从数组末尾(最后一项)开始向前搜索。

1
2
3
4

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.lastIndexOf(4, 4)); // 3

includes()

接收两个参数:要查找的元素和一个可选的起始搜索位置。从数组前头(第一项)开始向后搜索

1
2
3
4

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.includes(4)); // true
alert(numbers.includes(4, 7)); // false