JS数组的方法

keys() —ES6规范

数组的 keys() 方法返回一个数组索引的迭代器。

//索引迭代器会包含那些没有对应元素的索引
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);

//ES6语法
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // [0, 2]
console.log(denseKeys);  // [0, 1, 2]
entries() —ES6规范

方法返回一个数组迭代器对象,该对象包含数组中每一个索引的键值对。

var arr = ["a", "b", "c"];
var eArr = arr.entries();
eArr.next().value;//[0,'a']
eArr.next().value;//[1,'b']
eArr.next().value;//[2,'c']
eArr.next().value;//'undefined'
concat()

将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.

(1)连接多个数组

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
arr1.concat(arr2,arr3);//[1,2,3,4,5,6,7,8,9]

(2) 将非数组值合并到数组里

var arr1 = [1,2,3];
arr1.concat(4,[5,6]);//[1,2,3,4,5,6]
copyWithin(target,start,end)

会浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的大小,返回该数组。

参数:
(1)target:0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。
如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。
(2)start:0 为基底的索引,开始复制元素的起始位置(包括该位置)。如果是负数,start 将从末尾开始计算。
如果 start 被忽略,copyWithin 将会从0开始复制。
(3)end:0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。
如果 end 被忽略,copyWithin 将会复制到 arr.length。

var arr = [1,2,3,4,5]
//省略start,默认从0开始复制;target是负数,所以从末尾开始计算,往前推两个位置
arr.copyWithin(-2);//[1,2,3,1,2]
//从数组的index=2处开始拷贝,省略end,默认拷贝到最后一个元素
arr.copyWithin(0,2);//[3,4,5,4,5]
//从数组的index=1处开始拷贝,拷贝到index=3处但不包括该位置的元素
arr.copyWithin(0,1,3);//[2,3,3,4,5]
fill(value,start,end)

可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。

参数:
(1)value:用来填充数组元素的值,具体要填充的元素区间是 [start, end) , 一个半开半闭区间.

(2)start:可选,开始索引。默认值0

(3)end:可选,结束索引。默认值this.length

var arr = [1,2,3];
arr.fill(4);//[4,4,4]
arr.fill(4,2);//[1,2,4]
arr.fill(4,0,2);//[4,4,4]
every()

方法测试数组的所有元素是否都通过了指定函数的测试,直有所有项都返回true则该方法返回true

//检测数组中的所有元素是否都大于10
[12,23,565,74,2].every(function(element,index,array){
    return element > 10
})//false
some()

方法测试数组中的某些元素是否通过了指定函数的测试.只要数组中有一项返回true,则该方法返回true

function isBigEnough(element, index, array) {
      return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);//false
filter()

方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

//返回数组中所有包含'a'的元素
var arr = ['linda','lisa','tom','lee'];
arr.filter(function(element,index,array){
    return /a/.test(element);
})//['linda','lisa']
map()

方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

//求数组中每个元素的平方根
[1,4,9].map(Math.sqrt)//[1,2,3]
//在一个 String上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组
Array.prototype.map.call('hello world',function(element){
    return element.charCodeAt(0)
})
//[104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
slice(start,end)

方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。

//基本用法
[1,2,3,4,5].slice(2);//[3,4,5]
//slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个数组
function test(){
    return Array.prototype.slice.call(arguments)
}
test(1,2,3);//[1,2,3]
splice(start, deleteCount,itemN)

方法用新元素替换旧元素,以此修改数组的内容。

参数:
(1)start:从数组的哪一位开始修改内容。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位
(2)deleteCount:整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)
(3)itemN:要添加进数组的元素。如果不指定,则 splice() 只删除数组元素。

var myFish = ["angel", "clown", "mandarin", "surgeon"];

//从第 2 位开始删除 0 个元素,插入 "drum"
var removed = myFish.splice(2, 0, "drum");
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组:[],没有元素被删除

//从第 3 位开始删除 1 个元素
removed = myFish.splice(3, 1);
//运算后的myFish:["angel", "clown", "drum", "surgeon"]
//被删除元素数组:["mandarin"]

//从第 2 位开始删除 1 个元素,然后插入 "trumpet"
removed = myFish.splice(2, 1, "trumpet");
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]
//被删除元素数组:["drum"]

//从第 0 位开始删除 2 个元素,然后插入 "parrot", "anemone" 和 "blue"
removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
//运算后的myFish:["parrot", "anemone", "blue", "trumpet", "surgeon"]
//被删除元素的数组:["angel", "clown"]

//从第 3 位开始删除 2 个元素
removed = myFish.splice(3, Number.MAX_VALUE);
//运算后的myFish: ["parrot", "anemone", "blue"]
//被删除元素的数组:["trumpet", "surgeon"]
<think>我们参考了多个引用中关于JavaScript数组方法的内容,现在需要给用户提供一份详细的JavaScript数组方法详解和使用指南。我们将按照常见数组方法分类,并给出说明、语法、参数、返回值、是否改变原数组以及示例。注意:根据引用内容,我们会特别关注slice、join、forEach、sort、splice等方法,同时补充其他常用方法。内容结构:1.数组方法分类(根据是否改变原数组)2.每个方法的详细说明(包括方法的功能、语法、参数、返回值、是否改变原数组、示例代码)注意:在回答中,行内代码用`code`表示,但根据要求,行内数学表达式才用$...$,这里我们不需要数学表达式,所以全部用代码块或行内代码块。由于用户要求独立公式单独用$$...$$,但这里没有,所以不用。我们将分为两部分:第一部分:不改变原数组方法(例如:slice,join,concat等)第二部分:改变原数组方法(例如:splice,push,pop,sort,reverse等)同时,我们也会提到一些ES6新增的方法(如map,filter,reduce等),尽管引用中没有详细提到,但为了完整性,我们会简要说明。但是要注意:用户引用的内容中提到了slice,join,forEach,sort,splice,因此这些是重点。开始组织内容:</think> 根据提供的引用内容,以下是 JavaScript 数组方法的详细解析与使用指南,涵盖核心方法的使用场景和注意事项: ### 一、核心数组方法详解 1. **`slice(start, end)`** - **功能**:截取数组中指定区间的元素生成新数组 - **参数**: `start`:起始索引(包含) `end`:结束索引(不包含) - **返回值**:新数组 - **是否改变原数组**:❌ ```javascript const arr = ["a", "b", "c", "d", "e"]; const res = arr.slice(1, 4); // ["b", "c", "d"] ``` 2. **`splice(index, howmany, item1, ...)`** - **功能**:删除/插入元素 - **参数**: `index`:起始位置 `howmany`:删除数量(0表示不删除) `item1...`:插入的新元素 - **返回值**:被删除元素组成的数组 - **是否改变原数组**:✅ ```javascript const arr = [1, 2, 3, 4]; arr.splice(1, 2, "x", "y"); // 删除2个元素后插入 // arr变为 [1, "x", "y", 4] ``` 3. **`forEach(callback)`** - **功能**:遍历数组元素 - **参数**:回调函数 `(value, index, array) => {}` - **返回值**:undefined - **是否改变原数组**:取决于回调操作 ```javascript const arr = [1, 2, 3]; arr.forEach((val, idx) => console.log(val * idx)); // 输出: 0, 2, 6 ``` 4. **`sort([compareFunction])`** - **功能**:数组排序(默认按字符编码排序) - **参数**:可选比较函数 `(a,b) => a-b`(升序) - **返回值**:排序后的数组 - **是否改变原数组**:✅ ```javascript const nums = [23, 65, 13]; nums.sort((a,b) => a - b); // [13, 23, 65] ``` 5. **`join(separator)`** - **功能**:将数组连接为字符串 - **参数**:分隔符(默认逗号) - **返回值**:字符串 - **是否改变原数组**:❌ ```javascript ["a", "b", "c"].join("-"); // "a-b-c" ``` ### 二、特殊技巧应用 1. **类数组转换(arguments→数组)** ```javascript function convert() { return [].slice.call(arguments); } convert(1, 2, 3); // [1, 2, 3] ``` 2. **ES6简化版数组转换** ```javascript const slice = Function.call.bind(Array.prototype.slice); slice(arguments); // 直接转换类数组对象 ``` ### 三、方法特性对比表 | 方法 | 改变原数组 | 返回值类型 | 时间复杂度 | |------------|------------|----------------|------------| | `slice()` | ❌ | 新数组 | O(n) | | `splice()` | ✅ | 被删除元素数组 | O(n) | | `sort()` | ✅ | 排序后数组 | O(n log n) | | `join()` | ❌ | 字符串 | O(n) | ### 四、最佳实践建议 1. **纯函数优先**:优先使用不改变原数组方法(如 `slice`/`map`/`filter`) 2. **性能敏感场景**:避免在循环中连续调用 `splice` 3. **复杂排序**:始终为 `sort()` 提供比较函数,避免字符编码排序问题[^3] 4. **大数据处理**:`forEach` 比传统 `for` 循环更易维护但性能略低[^2] --- ### 相关问题 1. `Array.prototype.map()` 和 `forEach()` 的主要区别是什么? 2. 如何实现数组合并去重操作? 3. `reduce()` 方法的高级应用场景有哪些? 4. ES6 新增的数组扩展方法有哪些优势? 5. 如何用数组方法实现浅拷贝与深拷贝? [^1]: 引用JS数组方法大全 [^2]: 引用JS数组方法(全且详细) [^3]: 引用JS数组数组方法的使用 [^4]: 引用Array.splice详解
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值