51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

JavaScript 数组常用操作方法

目录 隐藏
1 创建数组
2 遍历数组
3 查找索引
3.1 找出某个元素在数组中的索引
4 添加元素
4.1 添加元素到数组的末尾
4.2 添加元素到数组的头部
5 删除元素
5.1 删除数组末尾的元素
5.2 删除数组最前面(头部)的元素
5.3 通过索引删除某个元素
5.4 从一个索引位置删除多个元素
6 复制一个数组
7 修改数组
7.1 copyWithin
7.2 fill
7.3 reverse
8 排序
8.1 sort
9 Array.from()
9.1 从 String 生成数组
9.2 从 Set 生成数组
9.3 从 Map 生成数组
9.4 从类数组对象(arguments)生成数组
10 Array.isArray()
11 Array.of()

创建数组 {#chuang_jian_shu_zu}

var fruits = ['Apple', 'Banana'];
console.log(fruits.length);  // 2

遍历数组 {#bian_li_shu_zu}

fruits.forEach(function (item, index, array) {
    console.log(item, index);
});
// Apple 0
// Banana 1

查找索引 {#cha_zhao_suo_yin}

找出某个元素在数组中的索引 {#zhao_chu_mou_ge_yuan_su_zai_shu_zu_zhong_de_suo_yin}

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
`var pos = fruits.indexOf('Banana');
// 1
`

添加元素 {#tian_jia_yuan_su}

添加元素到数组的末尾 {#tian_jia_yuan_su_dao_shu_zu_de_mo_wei}

var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]

添加元素到数组的头部 {#tian_jia_yuan_su_dao_shu_zu_de_tou_bu}

var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];

删除元素 {#shan_chu_yuan_su}

删除数组末尾的元素 {#shan_chu_shu_zu_mo_wei_de_yuan_su}

var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];

删除数组最前面(头部)的元素 {#shan_chu_shu_zu_zui_qian_mian_tou_bu_de_yuan_su}

var first = fruits.shift(); // remove Apple from the front
// first: "Apple"; fruits: ["Banana"];

通过索引删除某个元素 {#tong_guo_suo_yin_shan_chu_mou_ge_yuan_su}

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
var pos = fruits.indexOf('Banana');
var removedItem = fruits.splice(pos, 1);
// ["Strawberry", "Mango"]

从一个索引位置删除多个元素 {#cong_yi_ge_suo_yin_wei_zhi_shan_chu_duo_ge_yuan_su}

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];

var pos = 1, n = 2;


var removedItems = vegetables.splice(pos, n);


console.log(vegetables);
// \["Cabbage", "Carrot"\] (the original array is changed)

`console.log(removedItems);
// ["Turnip", "Radish"]
`

复制一个数组 {#fu_zhi_yi_ge_shu_zu}

var shallowCopy = fruits.slice();
// ["Strawberry", "Mango"]

修改数组 {#xiu_gai_shu_zu}

copyWithin {#copyWithin}

在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。
语法:

arr.copyWithin(target[, start[, end]])

DEMO:

const array1 = ['a', 'b', 'c', 'd', 'e'];
`// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]
`

fill {#fill}

将数组中指定区间的所有元素的值,都替换成某个固定的值。
DEMO:

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: \[1, 2, 0, 0\]


// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: \[1, 5, 5, 5\]

`console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
`

reverse {#reverse}

颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array \["three", "two", "one"\]


// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array \["three", "two", "one"\]

排序 {#pai_xu}

sort {#sort}

对数组元素进行排序,并返回当前数组。

Array.from() {#Arrayfrom}

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

从 String 生成数组 {#cong_String_sheng_cheng_shu_zu}

Array.from('foo');
// [ "f", "o", "o" ]

从 Set 生成数组 {#cong_Set_sheng_cheng_shu_zu}

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

从 Map 生成数组 {#cong_Map_sheng_cheng_shu_zu}

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map(\[\['1', 'a'\], \['2', 'b'\]\]);
Array.from(mapper.values());
// \['a', 'b'\];

`Array.from(mapper.keys());
// ['1', '2'];
`

从类数组对象(arguments)生成数组 {#cong_lei_shu_zu_dui_xiang_arguments_sheng_cheng_shu_zu}

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

`// [ 1, 2, 3 ]
`

Array.isArray() {#ArrayisArray}

用于确定传递的值是否是一个数组。

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

Array.of() {#Arrayof}

根据一组参数来创建新的数组实例,支持任意的参数数量和类型。

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]
赞(0)
未经允许不得转载:工具盒子 » JavaScript 数组常用操作方法