方法目录
方法特性
对于数组操作的每一个方法我们要关注以下三个特性
- 是否操作原数组
- 返回值
- 传递的参数
栈、队列操作
push()
在数组的末尾添加一个元素
- 直接操作原数组
- 返回值:执行添加后数组的长度
- 参数:el (要添加的元素)
// 原数组
var arr = [132, 645, 561];
// 执行pop()方法, value <== 返回值
var value = arr.push(789);
// 执行后打印 -- 原数组
console.log(arr); // [132, 645, 561, 789]
// 执行后打印 -- 返回值
console.log(value); // 4
pop()
在数组的末尾删除一个元素
- 直接操作原数组
- 返回值:被删除的元素
- 参数:无
// 原数组
var arr = [132, 645, 561];
// 执行pop()方法, value <== 返回值
var value = arr.pop();
// 执行后打印 -- 原数组
console.log(arr); // [132, 645]
// 执行后打印 -- 返回值
console.log(value); // 561
unshift()
在数组的首部添加一个元素
- 直接操作原数组
- 返回值:执行添加后数组的长度
- 参数:el (要添加的元素)
// 原数组
var arr = [132, 645, 561];
// 执行unshift()方法, value <== 返回值
var value = arr.unshift(789);
// 执行后打印 -- 原数组
console.log(arr); // [789, 132, 645, 561]
// 执行后打印 -- 返回值
console.log(value); // 4
console.log(value === arr.length); // true
shift()
在数组的首部删除一个元素
- 直接操作原数组
- 返回值:被删除的元素
- 参数:无
// 原数组
var arr = [132, 645, 561];
// 执行push()方法, value <== 返回值
var value = arr.push(789);
// 执行后打印 -- 原数组
console.log(arr); // [561, 789]
// 执行后打印 -- 返回值
console.log(value); // 132
截取替换
slice()
截取数组的元素
- 不会改变原数组
- 返回值:被截取元素组成的新数组
-
参数:start、end
- start: 必需,截取的起始位置(索引值)
- end: 可选,截取的结束位置
参数与解释
- 从索引值 start 开始(包括第 start 个元素),截取到 end 的前一位(不包括第 end 个元素)
- 如果 start 或 end 为负值,那么将从倒数第 start 个元素开始(结束)
参数可能性
- slice(2, 4) => start < end,常用方法
- slice(2, 1) => start > end
- slice(2, -2) => end 为负值
- slice(-3, -1) => start 和 end 都为负值
- slice(3) => 只有一个正值参数(start)
- slice(-3) => 只有一个负值参数(start)
// 原数组
var arr = ["CSS", "JavaScript", "Vue", "React", "Nodejs"];
// 1. start < end
console.log(arr.slice(2, 4)); // 新数组 -- ["Vue", "React"]
// 2. start > end
console.log(arr.slice(2, 1)); // []
// 3. end 为负值
console.log(arr.slice(2, -2)); // 新数组 -- ["Vue"]
// 4. start 和 end 都为负值
console.log(arr.slice(-3, -1)); // 新数组 -- ["Vue", "React"]
// 5. 只有一个 正值 参数(start)
console.log(arr.slice(3)); // 新数组 -- ["React", "Nodejs"]
// 6. 只有一个 负值 参数(start)
console.log(arr.slice(-3)); // 新数组 -- ["Vue", "React", "Nodejs"]
// 执行所有截取操作后,打印 -- 原数组
console.log(arr); // 原数组 -- ["CSS", "JavaScript", "Vue", "React", "Nodejs"]
splice()
截取、删除、替换、增加数组元素
- 直接操作原数组
- 返回值:被删除元素组成的新数组
-
参数:start、length、elements
- start: 必需,删除的起始位置(索引值)
- length: 可选,删除元素的长度
- elements: 可选,要替换的元素,数量不限
参数解释
- 从索引值 start 开始(包括 start),删除 length 个长度的元素
- 如果 start 为负值,则从倒数第 start 个元素开始删除
- length >= 0,如果不传 length,则会一直删除到末尾
- 如果是增添,则 length 必须传递,且 length = 0
- 如果是替换,则 length 必须传递,且 length >= 0
- 如果有 elements 则从 start 开始依次将 elements 增添进数组
参数可能性
-
删除
- splice(2, 2) => start > 0,有 length,常用方法
- splice(-3, 2) => start < 0,有 length
- splice(2) => start > 0,没有 length
- splice(-2) => start < 0,没有 length
-
增添
- splice(2, 0, "jQuery", "Angular") => 在索引值为 2 的位置插入后面的元素
-
替换
- splice(2, 1, "TypeScripy", "Electron") => 从索引值 2 开始,删除 1 个元素,然后在这个位置插入后面的元素
// 原数组
var arr = ["CSS", "JavaScript", "Vue", "React", "Nodejs"];
// 删除、截取
// 打印返回值
console.log(arr.splice(2, 2)); // ["Vue", "React"]
// 打印被删除后的原数组
console.log(arr); // ["CSS", "JavaScript", "Nodejs"]
console.log(arr.splice(-3, 2)); // ["Vue", "React"]
console.log(arr); // ["CSS", "JavaScript", "Nodejs"]
console.log(arr.splice(2)); // ["Vue", "React", "Nodejs"]
console.log(arr); // ["CSS", "JavaScript"]
console.log(arr.splice(-2)); // ["React", "Nodejs"]
console.log(arr); // ["CSS", "JavaScript", "Vue"]
// 增添
console.log(arr.splice(2, 0, "jQuery", "Angular")); // []
console.log(arr); // ["CSS", "JavaScript", "jQuery", "Angular", "Vue", "React", "Nodejs"]
// 删除
console.log(arr.splice(2, 1, "TypeScripy", "Electron")); // ["Vue"]
console.log(arr); // ["CSS", "JavaScript", "TypeScripy", "Electron", "React", "Nodejs"]