Array slice() 和splice()

183 阅读2分钟

一、slice()方法

1、定义和语法

slice()方法可从已有的数组中返回选定的元素,可提取字符串的某个部分,并以新的字符串返回被提取的部分。 note:该方法不会改变原始数组。

image.png

2、用法

(1)使用负值从数组中读取元素

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 
var myBest = fruits.slice(-3,-1); // 截取倒数第三个(包含)到倒数第一个(不包含)的两个元素
var myBest = fruits.slice(-3); // 截取最后三个元素
结果输出: Lemon,Apple

(2) 截取字符串

var str="www.runoob.com!"; 
document.write(str.slice(4)+"<br>"); // 从第 5 个字符开始截取到末尾 
document.write(str.slice(4,10)); // 从第 5 个字符开始截取到第10个字符
结果输出:
runoob.com!  
runoob

(3)复制数组

第一个示例是 slice() 函数的基本功能,没有参数的数组复制原始数组。有时,可能想要更新数组中的某些元素。但是,可能需要保护原始数组中的元素,可以使用 slice()创建原始数组的浅复制

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice();
console.log(copyNumbers); // [ 1, 2, 3, 4, 5, 6 ]
copyNumbers[1] = 0;
console.log(copyNumbers); // [ 1, 0, 3, 4, 5, 6 ]
console.log(arrNumbers); // [ 1, 2, 3, 4, 5, 6 ]

(4) 类数组对象转换为数组

可以使用 slice() 方法将看起来像数组的对象转换为数组。例如,如下代码

function transformToArray() {
    return Array.prototype.slice.call(arguments);
}
const newArray = transformToArray("1", "2", "3", "4");
console.log(newArray); // [ '1', '2', '3', '4' ]

以上代码片段可以用来定义可变参数的函数。

(5) 将 NodeList 转换为数组

NodeList 对象是从文档中提取的节点集合,可以使用方法 querySelectorAll() 方法返回节点列表对象。例如,可以选择HTML文档中的所有<p>节点,可以使用 slice() 将选定的节点列表转换为数组。

const elemP = document.querySelectorAll("p");
const elemNodes = Array.prototype.slice.call(elemP);
console.log(elemNodes);

(6)替换字符串中的特定索引

可以使用 slice() 函数创建替换函数。

String.prototype.append = function (index, value) {
    return `${this.slice(0, index)}${value}${this.slice(index)}`;
};

const testString = "新年";
console.log(testString.append(2, "快乐")); // 新年快乐

二、splice()方法

splice 是一个专门用于 数组操作 的方法,堪称最强大的数组操作方法。它可以对数组中的元素进行删除、插入和替换。替换原数组,返回删除的元素数组。

语法: arr.splice(start,num,arg1,arg2...)

注意:splice 操作的是原数组!

image.png