最近欠了太多账了(头秃),趁着周末,总结一波(我实在是太容易混淆了)。
对数组进行增删改的操作,项目中还是比较常见的。奈何脑容量有限,思来想去,还是写写更能加深印象。
先说明一下,方法的定义是参考的MDN上面的。
1、push方法
将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
语法:arr.push(element1, ..., elementN)
- elementN:被添加到数组末尾的元素
let arr = [1,2];
let count = arr.push(3);
console.log(count); // 3
console.log(arr); // [1,2,3]
常见的一种场景是先push,再遍历。
2、pop方法
从数组中删除最后一个元素,并返回该元素的值(当数组为空时返回undefined)。此方法更改数组的长度。
语法:
arr.pop()
let arr = [1,2,3,4];
arr.pop(); // 返回的是4,即被删除的元素
console.log(arr); // [1,2,3]
3、unshift方法
将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
语法:arr.unshift(element1, ..., elementN)
let arr = [4,5,6];
arr.unshift(1,2,3); // 返回数组长度6
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr = [4,5,6]; // 重置数组
arr.unshift(1); // 返回数组长度4
arr.unshift(2); // 返回数组长度5
arr.unshift(3); // 返回数组长度6
console.log(arr); // [3, 2, 1, 4, 5, 6]
4、shift方法
从数组中删除第一个元素,并返回该元素的值(如果数组为空则返回undefined)。此方法更改数组的长度。
语法:
arr.shift()
let arr = [1, 2, 3];
arr.shift(); // 返回结果1,arr为[2,3]
5、splice方法
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
语法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
- start:指定修改的开始位置(从0计数)
- deleteCount(可选):整数,表示要移除的数组元素的个数
- item1, item2, ...(可选):要添加进数组的元素,从start位置开始。如果不指定,则splice将只删除数组元素
let arr = [1,2,3,4];
arr.splice(0, 1);
// 从索引0的位置开始删除1个元素,这里返回的结果(被删除元素)是[1],arr为[2,3,4]
arr.splice(3, 0, 5, 6);
// 从索引3的位置开始删除0个元素并插入两个元素5和6,这里返回的结果是[],因为没有被删除
// 此时arr为[2,3,4,5,6]
arr.splice(2);
// 从索引2的位置开始删除所有的元素,这里的返回结果是[4,5,6]
// 此时的arr为[2,3]
像表格的列需要差异化、新增行等等都可以用到。
6、slice方法
返回一个新的数组对象,这一对象是一个由
begin
和end
决定的原数组的浅拷贝(包括begin
,不包括end
)。原始数组不会被改变。语法:arr.slice([begin[, end]])
- begin(可选) 提取起始处的索引(从
0
开始),从该索引开始提取原数组元素- end(可选) 提取终止处的索引(从
0
开始),在该索引处结束提取原数组元素slice
会提取原数组中索引从begin
到end
的所有元素(包含begin
,但不包含end
)
let arr = [1,2,3,4];
arr.slice(); // 返回[1,2,3,4],arr=[1,2,3,4]
arr.slice(0, 1); // 返回[1],arr=[1,2,3,4]
7、concat方法
用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
语法:var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
- valueN(可选)数组和/或值,将被合并到一个新的数组中
const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = arr1.concat(arr2); // ['a','b','c','d','e','f'],arr1和arr2不变
let arr = [1,2,3,4];
arr.concat(5, [6,7]); // 返回的是[1,2,3,4,5,6,7],原数组arr不受影响
8、fill方法
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回修改后的数组。
语法:arr.fill(value[, start[, end]])
- value: 用来填充数组元素的值
- start(可选):起始索引,默认值为0
- end(可选):终止索引,默认值为 this.length
let arr = [1,2,3,4];
arr.fill(8, 2, 3); // 从索引2到索引3的位置都填充为8,[1,2,8,4]
arr.fill(6, 2); // 从索引2往后的位置都填充为6,[1,2,6,6]
arr.fill(9); // arr里的所有元素都填充为9,[9,9,9,9]
看完上面的几种方法后,总结一下,哪些方法是会改变原数组,哪些方法不会改变原数组?
方法 | 是否改变原数组 |
push | 是 |
pop | 是 |
unshift | 是 |
shift | 是 |
splice | 是 |
slice | 否 |
concat | 否 |
fill | 是 |
OK啦,关于数组的基本操作就到这里啦!希望大家可以一起交流,共同进步!