JavaScript数组

小知识

  • JavaScript数组长度范围
1
0 ~ 2^32-2
  • 数组直接量的语法允许有可选的结尾的逗号
1
2
let arr = [,,];
console.log(arr.length); // 2
  • 数组是对象的特殊形式:以下例子索引变成对象属性
1
2
3
o = {};
o[0] = "one";
console.log(o); // { '0': 'one' }
  • 当给数组设置长度值时,在长度值范围内的值将被删除
1
2
3
a = [12,23,34,45];
a.length = 2;
console.log(a); // [12,23]
  • 将数组设为只读
1
2
3
a = [1,2,3];
Object.defindProperty(a,"lengrh",{writable:false});
a.length = 0; // a长度不会被改变
  • 冻结数组对象:使数组对象不可删除或修改它的属性
1
2
3
a = [1,2,3];
Object.freeze(a);
a.length = 0; // a长度不会被改变

Array各类方法

Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例。

1
2
3
4
5
let arr = 'abc'
let newArr = Array.from(a);
console.log(newArr); // [ 'a', 'b', 'c' ]
console.log(Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]

Array.isArray() 用于确定传递的值是否是一个 Array。

1
2
3
4
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

1
2
3
4
5
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

Array.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

1
2
3
4
5
6
7
let arr1 = ["a", "b", "c"];
let arr2 = ["d", "e", "f"];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [ "a", "b", "c", "d", "e", "f" ]
console.log(arr1); // ["a", "b", "c"]
console.log(arr2); // ["d", "e", "f"]

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。

1
2
3
4
5
6
7
8
9
10
11
12
// 三个参数:
let a = ["alpha", "beta", "copy", "delta", "erro", "fetch", "goooo"].copyWithin(0, 3, 6);
// 参数1为索引值,也就是目标值 a[0] = "alpha";
// 参数2 参数3 为范围,范围是a[3]-a[6],即a[3],a[4],a[5]。注意:不包括 a[6]
// 原数组是 a[0],a[1],a[2],a[3],a[4],a[5],a[6]
// 新数组是 a[3],a[4],a[5],a[3],a[4],a[5],a[6]
console.log(a); // [ 'delta', 'erro', 'fetch', 'delta', 'erro', 'fetch', 'goooo' ]
// 两个参数:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0); // ["Banana", "Orange", "Apple", "Mango"]; // 将a[0]付给a[2]

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

1
2
3
4
5
6
7
8
var arr = ["a", "b", "c"];
var iterator = arr.entries(); // undefined
console.log(iterator); // Array Iterator {}
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

1
2
3
4
var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

join() 方法将数组(或一个类数组对象)的所有元素连接到一个字符串中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a = ['Wind', 'Rain', 'Fire'];
a.join();
// 默认为 ","
// 'Wind,Rain,Fire'
a.join("");
// 分隔符 === 空字符串 ""
// "WindRainFire"
a.join("-");
// 分隔符 "-"
// 'Wind-Rain-Fire'
console.log(a);
// ['Wind', 'Rain', 'Fire']

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let numbers = [1, 5, 10, 15];
let roots = numbers.map((x) => {
return x * 2;
});
let roots = numbers.map( x => x * 2);
// roots is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
// let roots = numbers.map(Math.sqrt);
let roots = numbers.map(function(x){
return Math.sqrt(x);
});
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

1
2
3
4
5
6
7
let a = [1, 2, 3];
a.length; // 3
a.pop(); // 3
console.log(a); // [1, 2]
a.length; // 2

push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。

1
2
3
4
5
6
7
8
9
10
var numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);
// [1, 2, 3, 4]
numbers.push(5, 6, 7);
console.log(numbers);
// [1, 2, 3, 4, 5, 6, 7]

reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let sum = [0, 1, 2, 3].reduce(function(acc, val) {
return acc + val;
}, 0);
console.log(sum);
// 6
let list1 = [[0, 1], [2, 3], [4, 5]];
let list2 = [0, [1, [2, [3, [4, [5, [6]]]]]]];
const flatten = (arr) => {
return arr.reduce(
(acc, val) => {
return acc.concat(Array.isArray(val) ? flatten(val) : val)
}, []
);
};
flatten(list1);
// [0, 1, 2, 3, 4, 5]
flatten(list2);
// [ 0, 1, 2, 3, 4, 5, 6 ]

reverse 方法颠倒数组中元素的位置,并返回该数组的引用。

1
2
3
4
var myArray = ['one', 'two', 'three'];
myArray.reverse();
console.log(myArray) // ['three', 'two', 'one']

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

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

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

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

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。

1
2
3
4
let a = [0,1,2,3];
let sliced = a.slice(1,3);
console.log(a); // [0, 1, 2, 3]
console.log(sliced); // [1, 2]

splice() 方法通过删除现有元素和/或添加新元素来更改数组的内容。

1
2
3
4
5
6
7
8
9
10
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
myFish.splice(2, 0, "drum");
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1);
// myFish is ["angel", "clown", "sturgeon"]
myFish.splice(2, 1, "splice", "parrot");
// myFish is ["angel", "clown", "splice", "parrot", "sturgeon"]

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

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

@@iterator 循环迭代

使用 for…of

1
2
3
4
5
6
var arr = ['w', 'y', 'k', 'o', 'p'];
// 您的浏览器必须支持for...of循环
// 以及let —— 将变量作用域限定在 for 循环中
for (let letter of arr) {
console.log(letter);
}

使用迭代器iterator

1
2
3
4
5
6
7
var arr = ['w', 'y', 'k', 'o', 'p'];
var eArr = arr[Symbol.iterator]();
console.log(eArr.next().value); // w
console.log(eArr.next().value); // y
console.log(eArr.next().value); // k
console.log(eArr.next().value); // o
console.log(eArr.next().value); // p