JavaScript数组基本操作--增加、删除、截取、替换
方法目录
- 栈、队列操作
- push
- pop
- unshift
- shift
- 截取替换
- slice
- splice
方法特性
对于数组操作的每一个方法我们要关注以下三个特性
- 是否操作原数组
- 返回值
- 传递的参数
栈、队列操作
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"]