导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

push / unshift

push 向数组末尾添加一个或多个元素

• 定义：
  • 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
• 语法：
  • arr.push(item1, item2, ..., itemX)
• 参数：
  • item1, item2, ..., itemX
• 返回值：
  • 返回该数组的新长度

var arr = [1, 2, 3];
arr.push(1);
var result = arr.push(1, 2, 3);
console.log(arr, result);

unshift 向数组开头添加一个或多个元素

• 定义：
  • 将一个或多个元素添加到数组的开头，并返回该数组的新长度。
• 语法：
  • arr.unshift(item1, item2, ..., itemX)
• 参数：
  • item1, item2, ..., itemX
• 返回值：
  • 返回该数组的新长度

var arr = [1, 2, 3];
arr.unshift(1);
var result = arr.unshift(2, 3);
console.log(arr, result);

自定义 push 方法

var arr = [1, 2, 3];

Array.prototype.selfPush = function() {
	var args = arguments;
  for (var i = 0; i < args.length; i++) {
  	this[this.length] = args[i];
  }
  
  return this.length;
}

var result = arr.selfPush(4, 5, 6);

console.log(arr, result);

pop / shift

⭐️ pop 删除数组中最后一个元素

• 定义：
  • 从数组中删除最后一个元素，并返回该元素的值。如果没有可删的，返回 undefined
• 语法：
  • arr.pop()
• 参数：
  • 无
• 返回值：
  • 返回被删除的元素，如果没有可删的，返回 undefined

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

shift 删除数组中第一个元素

• 定义：
  • 从数组中删除第一个元素，并返回该元素的值。如果没有可删的，返回 undefined
• 语法：
  • arr.shift()
• 参数：
  • 无
• 返回值：
  • 返回被删除的元素，如果没有可删的，返回 undefined

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

reverse 颠倒数组元素的顺序

• 定义：
  • 将数组中元素的位置颠倒，并返回该数组。
• 语法：
  • arr.reverse()
• 参数：
  • 无
• 返回值：
  • 颠倒后的当前数组

var arr = [1, 2, 3];
let res = arr.reverse(); // [ 3, 2, 1 ]
res.splice(3, 0, 0);
console.log(arr, res); // [ 3, 2, 1, 0 ] [ 3, 2, 1, 0 ]

splice 添加、删除数组元素

• 定义：
  • 通过删除或替换现有元素或者原地添加新的元素来修改数组，并返回被删除元素组成的数组。此方法会改变原数组。
• 参数：
  1. index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  2. deleteCount：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
  3. item1, ..., itemX： 可选。向数组添加的新项目。
• 返回值：
  • 如果有元素被删除,返回包含被删除项目的新数组。
  • 没有则返回新的空数组。

⭐️ 注意：要把 start 这一位当做目标修改位，而不是从 start 这一位的下一位开始修改

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

删除元素

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var res = arr.splice(1, 2); // 从下标 1 这个位置开始，删除两个元素
console.log({
	res,
  arr
});

新增元素（也是从 startIndex 处开始新增）

var arr = ['a', 'b'];
var res = arr.splice(2, 0, 'c', 'd');
// 在下标 2 这个元素开始，删除 0 个元素，再从下标 2 开始新增两个元素 'c', 'd'
console.log({
	res,
  arr
});

var arr = [1,2,3]
arr.splice(1,0,4)
console.log(arr) // [1,4,2,3]

删除的同时新增

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var res = arr.splice(1, 2, 3);
console.log({
	res,
  arr
});

• 无视 start 超出 arr 多少，都从最后往后加

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

索引为负值的情况

var arr = ['a', 'b', 'c', 'd', 'f'];
var res = arr.splice(-1, 0, 'e');
console.log({
	res,
  arr
});

实现传递负值获取实际下标

• 负值的正向索引计算：负值 + 数组长度
• e.g. [1, 2, 3, 4, 5] 找 -2 是哪个 -2 + 5 = 3

function splice(arr, index) {
	return index += index >= 0 ? 0 : arr.length;
}
var arr = ['a', 'b', 'c', 'd', 'f'];
var idx = splice(arr, -2);
console.log(arr[idx]);

sort 数组排序

• 定义：
  • 对数组的元素进行排序，并返回排序后的数组。
• 语法：
  • arr.sort((a, b) => a - b)
• 参数（可选）：
• 返回值：
• 注意：

var arr = [9, 4, 6, 0, 3, -2];
console.log(arr.sort());
var arr2 = ['r', 'v', 'g', 's', 't', 'a', 'c'];
console.log(arr2.sort());

⭐️ 注意：默认排序是把元素转字符串再根据 ACSII 码顺序排序

var arr = [29, 30, 20, 25, 9, 6];
console.log(arr.sort())