JS数组常用的方法总结

已于 2022-07-07 21:29:28 修改
阅读量2.6k 收藏 3
点赞数 2
分类专栏： JS 文章标签： javascript 前端 开发语言
于 2022-03-31 21:02:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45740510/article/details/123577145
版权

文章目录

对象继承方法

数组是一种特殊的对象，继承了对象的Object的toString()和valueOf() 方法

toString( )

toString() 方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
[注意]该方法的返回值与不使用任何参数调用join()方法返回的字符串相同

[1,2,3].toString();//'1,2,3'
['a','b','c'].toString();//'a,b,c'
[1,[2,'c']].toString();//'1,2,c'

valueOf()

valueOf()方法返回数组对象本身

var a = [1, 2, 3];
console.log(a.valueOf());// [1, 2, 3]
console.log(a.valueOf() instanceof Array);//true

数组转换方法

join()

join()方法可以使用不同的分隔符来构建这个字符串，join()方法只接收一个参数，用作分隔符的字符串，然后返回包含所有数组项的字符串，如果不给join()方法传入任何值，则使用逗号作为分隔符。

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'
var b = new Array(10);
b.join('-');//'---------'，9个连字符组成的字符串

栈和队列方法

push

push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。所以，该数组会改变原数组

var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

pop

pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。所以，该数组会改变原数组

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'

对空数组使用pop()方法，不会报错，而是返回undefined

var a = [];
console.log(a,a.pop()); // [] undefined

shift

shift()方法移除数组中的第一个项并返回该项，同时数组的长度减1。所以，该数组会改变原数组

var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'

对空数组使用shift()方法，不会报错，而是返回undefined

var a = [];
console.log(a,a.shift());// [] undefined

unshift

unshift()方法在数组前端添加任意个项并返回新数组长度。所以，该数组会改变原数组

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

当使用多个参数调用unshift()时，参数是一次性插入的而非一次一个地插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6

数组排序方法

sort()

默认 情况下，sort()方法按字符串升序排列数组项，sort方法会调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组，而原数组顺序也发生改变

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]

如果数组包含undefined元素，它们会被排到数组尾部

var array = ['3',3,undefined,2,'2'];
console.log(array.sort())  //[2, '2', '3', 3, undefined]

sort( )方法可以接受一个比较函数作为参数，以便指定哪个值在哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数。(存在疑问❓)

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var array = [100,50,1,10];
console.log(array.sort(compare));//[1, 10, 50, 100]

reverse()

reverse()方法用于反转数组的顺序，返回经过排序之后的数组；而原数组顺序也发生改变

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

如果对一个字符串数组执行不区分大小写的字母表排序，比较函数首先将参数转化为小写字符串再开始比较

a = ['ant','Bug','cat','Dog'];
a.sort();//['Bug','Dog','ant','cat'];
a.sort(function(s,t){
    var a = s.toLowerCase();
    var b = t.toLowerCase();
    if(a < b)return -1;
    if(a > b)return 1;
    return 0;
});//['ant','bug','cat','dog']

数组拼接方法

concat()

cancat方法基于当前数组中的所有项创建一个新数组，先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，所以concat()不影响原数组。
如果不给concat()方法传递参数时，它只是复制当前的数组；如果参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中；如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。

var numbers = [1,2];
console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]

如果不提供参数，concat()方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是如果数组成员包括复合类型的值（比如对象），则新数组拷贝的是该值的引用

var numbers = [1,{msg:"hahaha",age:11}];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers)
newNumbers[1].msg = "我来啦";  //因为拷贝的引用数据类型的引用，然后新拷贝后的数组中进行改变，也会影响原有的改变。

因为拷贝的引用数据类型的引用，然后新拷贝后的数组中进行改变，也会影响原有的改变。
在这里插入图片描述
concat()方法也可以用于将对象合并为数组，但是必须借助call()方法

var newArray = Array.prototype.concat.call({ a: 1 }, { b: 2 })
console.log(newArray);// [{ a: 1 }, { b: 2 }]
console.log(newArray[0].a);//1

创建子数组方法

slice

slice()方法基于当前数组中的一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组，所以slice()不影响原数组
　slice(start,end)方法需要两个参数start和end，返回这个数组中从start位置到(但不包含)end位置的一个子数组；

  1. 如果end为undefined或不存在，则返回从start位置到数组结尾的所有项
  2. 如果start是负数，则start = max(length + start,0)
  3. 如果end是负数，则end = max(length + end,0)
  4. start和end无法交换位置
  5. 如果没有参数，则返回原数组
var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]
console.log(numbers.slice()); //[1,2,3,4,5]

如果不提供参数，slice()方法返回当前数组的一个浅拷贝

var numbers = [1,{msg:"hahaha",age:11}];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers)
newNumbers[1].msg = "我来啦";

在这里插入图片描述

数组删改方法

splice

splice()和slice()拥有非常相似的名字，但它们的功能却有本质的区别。
splice()方法用于删除原数组的一部分成员，并可以在被删除的位置添加新的数组成员， 该方法会改变原数组。
splice()返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组。
1、splice()的第一个参数start指定了插入或删除的起始位置。如果start是负数，则start = max(length + start,0)；如果start是NaN，则相当于start = 0。
2、如果只提供一个元素，相当于将原数组在指定位置拆分成两个数组
3、第二个参数number指定了应该从数组中删除的元素的个数。如果省略第二个参数，从起始点开始到数组结尾的所有元素都将被删除。如果number是负数或NaN或undefined，则number=0，因此不删除元素

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-4+8=4; [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-9+8,0)=0 [] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0));//[] [1,2,3,4,5,6,7,8]

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(2,3));// [1,2,6,7,8] [3,4,5]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(2,100));// [1,2] [3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []

如果后面还有更多的参数，则表示这些就是要被插入数组的新元素

var a = [1,2,3,4,5];
console.log(a,a.splice(2,2,'a','b'));//[1, 2, 'a', 'b', 5]  [3, 4]
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] ['a','b']

数组位置方法

indexOf()

indexOf(search,start)方法接收search和start两个参数，返回search首次出现的位置，如果没有找到则返回-1
search参数表示要搜索的项；使用严格相等运算符（===）进行比较

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1

start参数表示该搜索的开始位置，该方法会隐式调用Number()转型函数，将start非数字值(undefined除外)转换为数字。若忽略该参数或该参数为undefined或NaN时，start = 0。

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0

数组归并方法

reduce()

let arr = [];
arr.reduce(callback,[])

callback(previousValue, currentValue, index, arr)

其中回调函数接受四个参数：
1、previousValue // reduce()方法提供的初始值（initialValue），或者是上一次调用返回的值
2、currentValue // 数组中的当前元素值
3、index // 当前元素值在数组中的索引
4、arr // 被调用的原数组arr

1、简单求数组内数组的和

[1, 2, 3, 4, 5].reduce(function(prev, cur){
    console.log(prev, cur)
    return prev+ cur;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

2、利用reduce()方法，可以写一个数组求和的sum方法

Array.prototype.sum = function (){
    return this.reduce(function (prev, cur){
        return prev + cur;
    })
};
[3,4,5,6,10].sum();// 28

3、使用reduce实现二维数组的扁平化

let arr = [[0,1],[2,3],[4,5]]
let newArr = arr.reduce((prev,cur)=>{
	return prev.concat(cur)
},[])
console.log(newArr) //[0, 1, 2, 3, 4, 5]

使用reduce实现多维数组的扁平化

let arr = [0,1,[2,3,4],[5,[6,7,8]]];
function fn(arr){
	return arr.reduce((prev,cur)=>{
		//判断一下进行递归
		return prev.concat(Array.isArray(cur) ? fn(cur) : cur)
	},[])
}
console.log(fn(arr)) //[0, 1, 2, 3, 4, 5, 6, 7, 8]

总结：

可以改变原数组的方法总共有7种：包括unshift()、shift()、push()、pop()这4种栈和队列方法，reverse()和sort()这2种数组排列方法，数组删改方法splice()

与宇宙对视
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS数组中常用的方法总结
没有感情的代码机器的博客
05-04 1149
我经常会混淆JS数组中常用的方法，然后每次做题每次错（泪的教训啊呜呜呜），终于我下定决心来好好整理一下！下面是JS数组中常用的方法： push()、unshift()、pop()、shift()、reverse()、slice(startIndex,endIndex)、splice(index,num,item1,item2,…)、concat()、join(str)、indexOf(item)、...
JS数组常用方法
qq_45684708的博客
08-12 168
1、Array.push()------在数组后面增加元素。 var array = [1, 2, 3 ] //push里面的参数被加到数组array的后面了（参数可以有多个） array.push(4,5,6,7,8); console.log(array); -------[1,2,3,4,5,6,7,8] 2、Array.pop()------取出数组中的最后一项，修改length属性。 var array = [1,2,3,4,5,6,7]; var last = array.p
js数组常用方法
热门推荐
夏天的博客
03-27 9万+
js数组常用方法还挺多的，如果面试官问你这道题可不要只回答几个哟，那是会扣分的！下面是一篇详细的js数组教程文章
js数组所有方法(超级详细，超细总结)
qq_51986661的博客
09-26 5486
/ }, thisArg) element：元素的值 index：元素的索引 array：被遍历的数组本身。这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名。方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变。遍历数组，返回符合条件的第一个元素，js数组归纳总结，超级详细，数组遍历，数组方法，map,foreach
js数组常用方法（19种）|你会的到底有多少呢？
weixin_51338875的博客
11-12 1万+
语法: 数组名.push(数据)；作用: 就是往数组末尾添加数据；返回值: 就是这个数组的长度；语法:数组名.pop()；作用: 就是从数组的末尾删除一个数据；返回值: 就是你删除的那个数据；语法: 数组名.unshift(数据)；作用: 就是在数组的头部添加数据；返回值: 就是数组的长度；语法: 数组名.shift()；作用: 头部删除一个数据；返回值: 就是删除掉的那个数据
JS数组常用方法整理（14种常用方法）
No_Bug_Please的博客
02-25 4856
从push()到sort()，一共14种常用方法， 干货满满的数组常用方法介绍。
js数组常用19种方法（建议收藏）
最新发布
L2636504548的博客
04-07 877
6.find（）用来获取数组中满足条件的第一个数据。1、forEach（）用来循环遍历的for。3.slice（）截取数组的一部分数据。5.some（）数组中有没有满足条件的。3.unshift（）头部添加数据。7.reduce（）叠加后的效果。1.push（）末尾添加数据。4.shifr（）头部删除数据。5.reverse（）翻转数组。2.pop（）末尾处删除数据。7.splice（）截取数组。1.concat（）合并数组。2.join（）数组转字符串。2、map 映射数组的。6.sort（）排序。
谈谈JavaScript数组常用方法总结
10-20
本文将深入探讨JavaScript数组的一些常用方法，帮助开发者更好地理解和应用这些方法。 1. **增加数据** - `push()` 方法用于向数组末尾添加一个或多个元素，并返回新的数组长度。例如： ```javascript var arr =...
js中数组常用方法总结（推荐）
10-17
主要介绍了js中数组常用方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js数组操作常用方法
12-07
在jquery中处理JSON数组的情况中遍历用到的比较多，但是用添加移除这些好像不是太多。 今天试过json[i].remove(),json.remove(i)之后都不行，看网页的DOM对象中好像JSON数据是以数组的形式出现的，查阅了下相关JS中数组的操作一试果然很爽。 记录下来。 1、数组的创建 代码如下:var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, …
js常用数组操作方法简明总结
10-25
主要介绍了js常用数组操作方法简明总结,直接上代码,代码中有详细的注释,需要的朋友可以参考下
JS数组方法总结
weixin_52703987的博客
12-06 1260
JavaScript数组方法总结 一.JavaScript中创建数组的方式 1.使用Array构造函数 var color=new Array(); 注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。 2.使用数组字面量 var color=[]; 二.JavaScript中常见数组方法 1.join() （数组转字符串） 数组转字符串，方法只接收一个参数：即默认为逗号分隔符（）。 <script> v
JavaScript数组方法整理
mlxgzz的博客
12-13 1038
JavaScript数组方法整理 1.join() join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，) var arr = [1,2,3]; console.log(arr.join()); 　　　　// 1,2,3 console.log(arr.join("-")); 　　// 1-2-3 console.log(arr); 　　　　　　　　// [1, 2...
js中数组常用简单方法
XIAO_A_fighting的博客
04-29 640
学了这么久js觉得有必要好好总结一下常用的一些数组方法。 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、Array.isArray()二、Array.of()三、pop()四、shift()五、push()六、unshift()七、reverse()八、sort()九、splice()十、slice()二、使用步骤1.引入库2.读入数据总结
js中常用数组的方法--梅花前端
08-24 567
1、push() 可以向数组的末尾添加一个或多个元素 返回数组新的长度 2、pop() 可以删除数组中的最后一个元素，并将删除的元素作为返回值返回 3、unshift() 像数组开头添加一个或多个元素 返回新数组的长度 向前边插入元素后 其他元素的索引将会重新排列 4、shift() 可以删除数组中的第一个元素，并将被删除的元素作为返回值返回 5、slice() 可以用来截取指定的元素 该方法不会改变原数组 将截取到的元素封装到一个新的数组中返回 1(必需)开始位置的索引 包含开始
JS数组常用的操作方法
简廉的博客
11-04 2万+
1. push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法修改原有数组。 var arr = ['a','b','c']; var ele = arr.push('d'); // ele结果为: 4; // arr数组被修改: ['a','b','c','d']; 2. pop()，从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined。此方法修改原有数组。 var arr = ['a','b','c','d']; var ele = arr.pop()
总结JS中常用的数组的方法大全
weixin_51749544的博客
05-24 4032
总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型，它属于Object(对象)类型，用来将一组数组合在一起，通过一个变量就可以访问一组数据。在使用数组时，经常会搭配循环语句使用，从而很方便地对一组数据进行处理。 文章目录总结JS中常用的数组方法一，JS中创建数组的方式：二，数组的长度三，数组的方法有数组原型方法，也有从Object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有：1.join（）2.push（）和pop（）3.shift（）和un
js一维数组、多维数组和对象的混合使用方法.docx
01-20
本文主要介绍了 JavaScript 数组和对象的混合使用方法，以及如何创建一维数组、多维数组和对象。 在 JavaScript 中，一维数组可以包含不同类型的数据，比如数字、字符串、字符、对象等。如下所示，我们可以创建一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值