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: 可选，截取的结束位置

参数与解释

1. 从索引值 start 开始(包括第 start 个元素)，截取到 end 的前一位(不包括第 end 个元素)
2. 如果 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 增添进数组

参数可能性

1. 删除

   • splice(2, 2) => start > 0，有 length，常用方法
   • splice(-3, 2) => start < 0，有 length
   • splice(2) => start > 0，没有 length
   • splice(-2) => start < 0，没有 length

2. 增添

   • splice(2, 0, "jQuery", "Angular") => 在索引值为 2 的位置插入后面的元素

3. 替换

   • 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"]