【JavaScript】数组实例方法 (ES5)

已于 2023-07-31 21:26:59 修改
阅读量284 收藏
点赞数
分类专栏： JavaScript 笔记 文章标签： javascript js
于 2021-07-17 18:20:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_H/article/details/118860664
版权

标有 - 表示会改变原数组；标有 * 表示字符串也有同名方法


unshift 头插-

  • 在数组前面添加 1 ~ n 个数据 ( 1 ~ n 个参数 )
  • 返回值：添加数据后的 length
  • 会改变原数组
const arr = [1, 2, 3];
const result = arr.unshift(0);
console.log(result); // 4
console.log(arr); // [0, 1, 2, 3]

push 尾插-

  • 用于在数组末尾追加 1 ~ n 个数据 ( 1 ~ n 个参数 )
  • 返回值：添加数据后的 length
  • 会改变原数组
const arr = [1, 2, 3];
const result = arr.push(0);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 0]

shift 头删-

  • 用于删除数组的第一个数据 ( 无参数 )
  • 返回值：被删除的数据
  • 会改变原数组
const arr = [1, 2, 3];
const result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3]

pop 尾删-

  • 用于删除数组最后一个数据 ( 无参数 )
  • 返回值：被删除的数据
  • 会改变原数组
const arr = [1, 2, 3];
const result = arr.pop();
console.log(result); // 3
console.log(arr); // [1, 2]

splice 移接-

  • 用于移除、拼接数组 ( 0 ~ n 个参数 )
  • 返回值：移除的子数组
  • 会改变原数组，新数组 = 原数组 - 移除的数据 + 拼接的数据
arr.splice(index, count, item, ...)
  1. index：开始修改的下标，默认为 length。可以为负数，负数 → length + 负数
  2. count：移除的数量
  3. item：拼接的数据

移除 ( 0 ~ 2 个参数 )
const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.splice(); // 无参数
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(result); // []

const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.splice(2); // 1 个参数：从下标 2 开始移除
console.log(arr1); // [1, 2]
console.log(result); // [3, 4, 5, 6]

const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.splice(2, 3); // 2 个参数：从下标 2 开始，移除接着的 3 个元素
console.log(result); // [3, 4, 5]
console.log(arr1); // [1, 2, 6]

删除最后三个数据：

const arr1 = [1, 2, 3, 4, 5, 6]; // length = 6
const result = arr1.splice(-3); // -3 → 6 - 3
console.log(result); // [4, 5, 6]
console.log(arr1); // [1, 2, 3]

拼接 ( 3 ~ n 个参数 )

第 3 个及以上的参数：添加的数据

const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.splice(2, 2, 100); // 从下标 2 开始，移除接着的 2 个元素，拼接数据 100
console.log(result); // [3, 4]
console.log(arr1); // [1, 2, 100, 5, 6]

如果不移除数据，就相当于插入

const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.splice(2, 0, 100, 200); // 在下标 2 的位置插入数据 100、200
console.log(result); // []
console.log(arr1); // [1, 2, 100, 200, 3, 4, 5, 6]

reverse 倒序-

  • 用于颠倒数组排序 ( 无参数 )
  • 返回值：逆序后的数组
  • 会改变原数组
const arr1 = [1, 2, 3, 4, 5, 6];
const result = arr1.reverse();
console.log(result); // [6, 5, 4, 3, 2, 1]
console.log(arr1); // [6, 5, 4, 3, 2, 1]

sort 排序-

  • 用于对数组进行排序 ( 0 ~ 1 个参数 )
  • 返回值：排序后的数组
  • 会改变原数组

sort 函数默认按照 ASCII 码，从小到大排序，会隐式地将数据转换为 String 后，再进行排序。

const arr1 = [1, 5, 9, 13, 24, 36];
const result = arr1.sort(); // 无参数：默认排序
console.log(result); // [1, 13, 24, 36, 5, 9]
console.log(arr1); // [1, 13, 24, 36, 5, 9]

sort 接收一个回调函数作为参数，以配置排序的方式：

const arr = [2, 3, 57, 10, 12, 34];
console.log(arr); // [2, 3, 57, 10, 12, 34]

// 让数组按照数字从小到大排列
arr.sort((a, b) => a - b);
console.log(arr); // [2, 3, 10, 12, 34, 57]

// 让数组按照数字从大到小排列
arr.sort((a, b) => b - a);
console.log(arr); // [57, 34, 12, 10, 3, 2]

// 数组随机排列
arr.sort((a, b) => Math.random() - 0.5);
console.log(arr); // [57, 34, 10, 12, 3, 2]

concat 合并*

  • 用于 1 ~ n 个数组的合并 ( 1 ~ n 个参数 )
  • 返回值：合并后的数组
  • 不会改变原数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [6, 7];

const newArr = arr1.concat(arr2, arr3);

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5]
console.log(arr3); // [6, 7]

console.log(newArr); // [1, 2, 3, 4, 5, 6, 7]

concat 的参数非常灵活，可以是数组 / 数字：

const arr1 = [1, 2, 3];
console.log(arr1); // [1, 2, 3]

arr1 = arr1.concat([4, 5], 6); // 重新给 arr1 赋值
console.log(arr1); // [1, 2, 3, 4, 5, 6]

slice 切片*

  • slice(start, end) 用于切取指定数组元素 ( 0 ~ 2 个参数 )
    start-开始切取的下标，默认为 0（包括）
    end-结束切取的下标，默认为 length (不包括)
  • 返回值：切取出来的子数组
  • 不会改变原数组
const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = arr1.slice(2); // 1 个参数：从下标 2 开始截取
console.log(arr2); // [3, 4, 5, 6]

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = arr1.slice(2, 5); // 2 个参数：截取下标在 [2, 5) 内的数据
console.log(arr2); // [3, 4, 5]

通过 slice 复制一份数组：

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = arr1.slice(); // 无参数：从 0 开始截取
console.log(arr2); // [1, 2, 3, 4, 5, 6]

如果第 2 个参数 < 第 1 个参数，则返回空数组

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = arr1.slice(4, 2);
console.log(arr2); // []

参数可以为负数，负数 → length + 负数

const arr1 = [1, 2, 3, 4, 5, 6]; // length = 6

const arr2 = arr1.slice(-3, -1);
console.log(arr2); // [4, 5]

const arr2 = arr1.slice(3, 5);
console.log(arr2); // [4, 5]

indexOf 寻址*

  • 从前往后查找指定数据第 1 次出现的位置 ( 1 ~ 2 个参数 )
  • 找到，则返回该数据的 下标；找不到，则返回 -1

第 1 个参数：查找的元素
第 2 个参数：开始查找的下标

const arr = [1, 2, 3, 4, 5, 3];
const result = arr.indexOf(3); // 1 个参数：在数组中查找 3 第一次出现的位置
console.log(result); // 2

const arr = [1, 2, 3, 4, 5];
const result = arr.indexOf(3, 3); // 2 个参数：从索引为 3 的位置，往后查找 3 第一次出现的位置
console.log(result); // -1

lastIndexOf 寻址*

  • 从后向前查找指定数据第 1 次出现的位置 ( 1 ~ 2 个参数 )
  • 找到，则返回该数据的 下标；找不到，则返回 -1

第 1 个参数：查找的元素
第 2 个参数：开始查找的下标

const arr = [1, 2, 3, 4, 5, 3];
const result = arr.lastIndexOf(3); // 1 个参数：在数组中查找 3 第一次出现的位置
console.log(result); // 5

const arr = [1, 2, 4, 5, 3];
const result = arr.lastIndexOf(3, 3); // 2 个参数：从索引为 3 的位置，往前查找 3 第一次出现的位置
console.log(result); // -1

练一练：

// 把所有的 3 改为 6
const arr = [1, 2, 3, 4, 5, 3];
console.log(arr); // [1, 2, 3, 4, 5, 3]
const index = 0;
while (index != -1) {
    index = arr.indexOf(3);
    if (index != -1) {
        arr[index] = 6;
    }
}
console.log(arr); // [1, 2, 6, 4, 5, 6]

// 去重
const arr = [1, 2, 3, 5, 4, 5, 3];
console.log(arr); // [1, 2, 3, 5, 4, 5, 3]
for (let index = 0; index < arr.length; index++) {
    const element = arr[index];
    const lastIndex = arr.lastIndexOf(element);
    if (index != lastIndex) {
        arr.splice(lastIndex, 1); // 删除重复项
    }
}
console.log(arr); // [1, 2, 4, 5, 3]

join 拼接

  • 指定连接符，把数组的各项拼接成字符串 ( 0 ~ 1 个参数 )
  • 返回值：拼接后的字符串
  • 不会改变原数组
const arr = [1, 2, 3, 4, 5];
const str = arr.join('-');
console.log(arr); // [1, 2, 3, 4, 5]
console.log(str); // 1-2-3-4-5

  • join 方法的连接符默认为 ,
  • 无参数的 join 方法，等效于 toString 方法：
const arr = [1, 2, 3, 4, 5];
const str1 = arr.join(); // 无参数：默认使用 , 拼接
const str2 = arr.toString();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(str1); // 1,2,3,4,5
console.log(str2); // 1,2,3,4,5



相关知识：

  1. 【JavaScript】数组简介
  2. 【JavaScript】高阶数组实例方法 (ES5)
  3. 【JavaScript】数组方法 (ES6)

JS.Huang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JavaScript数组去重的3种方法和代码实例
12-04
数组去重的方法有很多，到底哪种是最理想的，自己不清楚。于是自己测试了下数组去重的效果和性能。测试十万个数据，代码和所耗大概时间如下。 　到底采用哪种方法，根据实际情况而定吧。 /*方法一： 1,'1' 会被认为...
JavaScript类数组对象转换为数组对象的方法实例分析
10-18
在JavaScript中，类数组对象（Array-like object）是一种拥有`length`属性且可以通过索引访问其元素的对象，但它们并不具备数组所具有的内置方法，...对于JavaScript数组的更多操作技巧，可以参考相关教程进一步学习。
js对数组的常用操作
xiaozhen0610的博客
06-25 177
在js中对数组的操作是经常遇到的，我呢在这就列一下经常用到的方法 删除数组中的元素： 1.delete方法：delete删除的只是数组元素的值，所占的空间是并没有删除的 代码： var arr=[12,23,44,5,6,23,43,34]; console.log(arr.length); console.log(arr); delete arr[1]; console.log(arr); console.log(arr[1]); console.log(arr.length); 运行结果在这里：.
数组增删改查
weixin_43285391的博客
10-15 172
js 数组 arr =[1,2,3] 一.增加 arr.push(0) 向数组末尾添加元素，返回新数组的长度，原有数组改变 arr = [1,2,3,0]; arr.unshift(0) 向数组的开头添加元素，返回新数组的长度，原有数组改变 arr = [0,1,2,3] arr.splice(0,0,0) 0：下标，0:增加 0:添加的对象 arr = [0,1,2,3] 二、删...
JavaScript数组方法ES5
XXMM_XXMM的博客
06-20 198
JavaScript数组方法 数组中可调用方法 栈方法： push() ：增加数组最后的元素 pop() ：删除数组最后的元素 队列方法： shift()对push() ：push增加数组最后元素，shift删除数组最前元素 unshift()对pop()：unshift增加数组最前元素，pop删除数组最后元素 重排序方法： reverse()：对数组进行降序排序。（不够灵活） sort() ：对数组转化成字符串再对字符串进行升序排序。 PS：若想sort方法进行数字的升序排序，需要给sort()加入自定义
JavaScript中push() 方法
qq_41623635的博客
05-12 6896
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 返回值 把指定的值添加到数组后的新长度。 说明 push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。 提示和注释 注释：该方法会改变数组的长度。 提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。 实例 <script type="text
arr的push,pop,slice.....各种使用方法详细介绍
weixin_44207938的博客
10-24 5845
arr的push,pop,slice…各种使用方法 arr.push(); 向数组的末尾追加元素 会修改原数组 返回值：修改后的length值 可以追加多个 arr[1,2,3]; arr1[4,5,6]; arr2[...arr,...arr1]; // ...扩展运算符，将数组展开 arr.unshift(); 向数组的开头添加元素 会修改原数组 返回值：修改后的length值 可以追加多个 arr.pop(); 删除末尾的元素 会修改原数组 返回值：被
Javascript中数组去重与拍平的方法示例
01-19
数组的判断 在说如何进行数组的去重和拍平之前，先说一下怎么...instanceof是ES5提供的一个方法，它可以用来判断实例是否是某个类的实例，例如: [] instenceof Array //返回结果是true 这种方法的不好之处就是兼容性不
ES6函数和数组用法实例分析
10-15
ES6引入了多种遍历数组的方法，每种都有其特定的应用场景： - `forEach`：遍历数组并执行回调函数，自动忽略空值。 ```javascript let arr = ['a', 'b', 'c']; arr.forEach((val, index) => console.log(index,...
JS的数组的扩展实例代码
10-30
在提供的代码实例中，可以看到一些自定义方法，这些方法虽然不是JavaScript原生提供的，但它们很好地展示了如何利用JavaScript的原型链扩展数组功能。下面将详细介绍这些自定义方法以及与之相关的数组扩展知识。 1....
JS数组操作
weixin_42062766的博客
08-16 3639
join()：就是把数组转换成字符串，然后给他规定个连接字符。 push()：把里面的内容添加到数组末尾，并返回修改后的长度。 pop()：移除数组最后一项，返回移除的那个值，减少数组的length。 shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 unshift()：将参数添加到原数组开头，并返回数组的长度 。 sort()：将数组里的项从小到大排序。 reverse()：反转数组项的顺序。会改变原数组 concat()：将参数添加到原数组中.
push（）——深入理解
热门推荐
菜鸟少年的博客
12-07 1万+
数组和类数组 数组是一种特殊的对象，两者本质上没有太大的区别。 类数组是一种长得像数组的对象，数组上的方法他不全都有。
Array对象常用方法
anmiebiao5988的博客
02-21 179
不改变原数组：1、concat() 连接两个或多个数组 不改变原数组 返回被连接数组的一个副本 2、join()把数组中所有元素放入一个字符串 不改变原数组 返回字符串 3、slice()从已有的数组中返回选定的元素 不改变原数组 返回一个新数组 4、toString()把数组转为字符串 不改变原数组 返回数组的字符串形式 改变原数组：5、pop()...
JS中push()的作用简单说明
iteye_13195的博客
01-22 2138
1.push()；方法可以向数组的末尾添加一个或多个元素，并返回新的长度。 2.语法：arrayObject.push(newelement1,newelement2,,,)。 3.返回值：把指定的值添加到数组后的新长度。 4.说明：push()方法可以把他的参数顺序添加到arrayObject的尾部。它可以直接修改 arrayObject，而不是创建一个新的数组。push...
js_arr.unshift().shift().html
weixin_42193179的博客
03-12 307
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>arr_unshift_shift</title> </head> <body> <script> // shift定义和用法...
arr.push('')
weixin_30739595的博客
08-02 2027
arr.push('')向数组传入空值，起占位的作用，元素渲染时，渲染出空白区域，以维持整体效果不被破坏。 转载于:https://www.cnblogs.com/embrace-ly/p/11289852.html...
push、unshift、pop、shift的用法
youlinhuanyan的博客
02-08 226
push将元素添加到数组尾部 unshift将元素添加到数组头部 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); // output => Lemon,Pineapple,Banana,Orange,Apple,Mango pop 移除最后一个元素 shift...
javascript数组遍历的几种常用方法性能分析对比
最新发布
09-07
其次是forEach方法，它是ES5中引入的数组方法之一。它提供了一种简洁易懂的遍历方式，可以通过回调函数来处理每个元素。然而，forEach方法不能中途跳出循环，也不能直接修改原数组的值。因此，如果需要在循环中进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JS.Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值