js数组的方法如何使用

㈠ Web前端工程师要知道的JavaScript数据方法汇总

今天小编要跟大家分享的文章是关于Web前端工程师要知道的JavaScript数据方法汇总。在JavaScript中，数组是一个特殊的变量，用于存储不同的元素。它具有一些内置属性和方法，可用于根据需要添加，删除，迭代或操作数。并且了解JavaScript数组方法可以提升你的开发技能。

在本文中，我们将介绍15种关于JavaScript的数组方法，这些方法可以帮助你正确地处理数据。


§1.some()


§2.rece()


§3.Every()


§4.map()


§5.flat()


§6.filter()


§7.forEach()


§8.findIndex()


§9.find()


§10.sort()


§11.concat()


§12.fill()


§13.includes()


§14.reverse()


§15.flatMap()


注意，大多数情况下，我们将简化作为参数传递的函数。


//.some(test=>{if(test===
"d"){returntest}})//We'.some(test=>
test==="d")


1、some()


此方法为参数传递的函数测试数组。如果有一个元素与测试元素匹配，则返回true，否则返回false。译者注：some()
不会对空数组进行检测;some()不会改变原始数组。


constmyAwesomeArray=["a","b","c","d","e"]


myAwesomeArray.some(test=>test==="d")


//------->Output:true


2、rece()


此方法接收一个函数作为累加器。它为数组中的每个元素依次执行回调函数，不包括数组中被删除或者从未被赋值的元素。函数应用于累加器，数组中的每个值最后只返回一个值。译者注：rece()
方法接受四个参数：初始值(上一次回调的返回值)，当前元素值，当前索引，原数组。


constmyAwesomeArray=[1,2,3,4,5]


myAwesomeArray.rece((total,value)=>total*value)


//1*2*3*4*5


//------->Output=120


3、Every()


此方法是对数组中每项运行给定函数，如果数组的每个元素都与测试匹配，则返回true，反之则返回false。


constmyAwesomeArray=["a","b","c","d","e"]


myAwesomeArray.every(test=>test==="d")


//------->Output:falseconstmyAwesomeArray2=["a","a","a","a",
"a"]


myAwesomeArray2.every(test=>test==="a")


//------->Output:true


4、map()


该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。它按照原始数组元素顺序依次处理元素。译者注：map()
不会对空数组进行检测;map()不会改变原始数组。


constmyAwesomeArray=[5,4,3,2,1]myAwesomeArray.map(x=>x*x)


//------->Output:25


//16


//9


//4


//1


5、flat()


此方法创建一个新数组，其中包含子数组上的holden元素，并将其平整到新数组中。请注意，此方法只能进行一个级别的深度。


constmyAwesomeArray=[[1,2],[3,4],5]


myAwesomeArray.flat()


//------->Output:[1,2,3,4,5]


6、filter()


该方法接收一个函数作为参数。并返回一个新数组，该数组包含该数组的所有元素，作为参数传递的过滤函数对其返回true。译者注：filter()方法是对数据中的元素进行过滤，也就是说是不能修改原数组中的数据，只能读取原数组中的数据，callback需要返回布尔值;为true的时候，对应的元素留下来;为false的时候，对应的元素过滤掉。


constmyAwesomeArray=[{id:1,name:"john"},


{id:2,name:"Ali"},{id:3,name:"Mass"},


{id:4,name:"Mass"},]


myAwesomeArray.filter(element=>element.name==="Mass")


//------->Output:0:{id:3,name:"Mass"},


//1:{id:4,name:"Mass"}


7、forEach()


此方法用于调用数组的每个元素。并将元素传递给回调函数。译者注:forEach()对于空数组是不会执行回调函数的。


constmyAwesomeArray=[{id:1,name:"john"},


{id:2,name:"Ali"},{id:3,name:"Mass"},]


myAwesomeArray.forEach(element=>console.log(element.name))


//------->Output:john


//Ali


//Mass


8、findIndex()


此方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。它为数组中的每个元素都调用一次函数执行，当数组中的元素在测试条件时返回true时,
findIndex()返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回-1译者注：findIndex()
对于空数组，函数是不会执行的，findIndex()并没有改变数组的原始值。


constmyAwesomeArray=[{id:1,name:"john"},


{id:2,name:"Ali"},{id:3,name:"Mass"
},]myAwesomeArray.findIndex(element=>element.id===3)


//------->Output:2myAwesomeArray.findIndex(element=>element.id
===7)


//------->Output:-1


9、find()


此方法返回通过测试(函数内判断)的数组的第一个元素的值。find()方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时回true
时,find()返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回undefined。译者注:find()
对于空数组，函数是不会执行的;find()并没有改变数组的原始值。


constmyAwesomeArray=[{id:1,name:"john"},


{id:2,name:"Ali"},{id:3,name:"Mass"},]
myAwesomeArray.find(element=>element.id===3)


//------->Output:{id:3,name:"Mass"}


myAwesomeArray.find(element=>element.id===7)


//------->Output:undefined


10、sort()


此方法接收一个函数作为参数。它对数组的元素进行排序并返回它。也可以使用含有参数的sort()方法进行排序。


constmyAwesomeArray=[5,4,3,2,1]


//.sort((a,b)=>a-b)


//------->Output:[1,2,3,4,5]


//.sort((a,b)=>b-a)


//------->Output:[5,4,3,2,1]


11、concat()


此方法用于连接两个或多个数组/值，它不会改变现有的数组。而仅仅返回被连接数组的一个新数组。


constmyAwesomeArray=[1,2,3,4,5]const


myAwesomeArray2=[10,20,30,40,50]


myAwesomeArray.concat(myAwesomeArray2)


//------->Output:[1,2,3,4,5,10,20,30,40,50]


12、fill()


此方法的作用是使用一个固定值来替换数组中的元素。该固定值可以是字母、数字、字符串、数组等等。它还有两个可选参数，表示填充起来的开始位置(默认为0)与结束位置(默认为array.length)。译者注：fill()
方法用于将一个固定值替换数组的元素。


constmyAwesomeArray=[1,2,3,4,5]


//Thefirstargument(0)isthevalue


//Thesecondargument(1)isthestartingindex


//Thethirdargument(3).fill(0,1,
3)


//------->Output:[1,0,0,4,5]


13、includes()


此方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回true，否则返回false。


译者注：includes()方法区分大小写。


constmyAwesomeArray=[1,2,3,4,5]myAwesomeArray.includes(3)


//------->Output:truemyAwesomeArray.includes(8)


//------->Output:false


14、reverse()


此方法用于颠倒数组中元素的顺序。第一个元素成为最后一个，最后一个元素将成为第一个。


constmyAwesomeArray=["e","d","c","b","a"]


myAwesomeArray.reverse()


//------->Output:['a','b','c','d','e']


15、flatMap()


该方法将函数应用于数组的每个元素，然后将结果压缩为一个新数组。它在一个函数中结合了flat()和map()。


constmyAwesomeArray=[[1],[2],[3],[4],[5]]


myAwesomeArray.flatMap(arr=>arr*10)


//------->Output:[10,20,30,40,50]


//With.flat()and.map()myAwesomeArray.flat().map(arr=>arr*10)


//------->Output:[10,20,30,40,50]


以上就是小编今天为大家分享的关于Web前端工程师要知道的JavaScript数据方法汇总的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！


原文|#/blog/15-must-known-javascript-array-methods-in-2020/译文|web前端开发(ID：web_qdkf)译者|web小二

㈡ js数组的sort方法到底怎么使用呢

你可以直接通过定义一个短语指针在数组中重新进行排列就可以了

㈢ js数组的map方法

这样子数据的map方法，这个应该是龙哥更好地进行一些信息的录入，所以我认为这应该是在信息录入，这个还能够更好地进行监察权，这这个应该能够更好的进行查询使用的。

㈣ js数组几种常见的操作方法

关于js数组的用法有很多，下面主要针对一些简单的操作，比如合并，反转，添加删除等简单的操作总结一下。

关于js数组的用法有很多，下面主要针对一些简单的操作，比如合并，反转，添加删除等简单的操作总结一下。

第一：读取数组 for循环

方法如下：

var ay=[1,"sdsd","sdsd"]
for (var i=0;i<ay.length;i++) {

console.log("index:"+i+" "+ay[i]) //index：0 1 index：1 sdsd index：2 sdsd

}

第二：合并数组 concat

方法如下：

var arr1=['w','e','s'];

var arr2=['e','y','u'];
var arr3=arr1.concat(arr2);
console.log(arr3) //['w','e','s''e','y','u'];
第三：数组变为字符串格式 join

方法如下：

var arr1=['w','e','s'];

var arr4=arr1.join()
console.log(arr4) //w,e,s

第四：删除最后一个元素,针对老数组是删除最后一个,针对新数组是返回最后一个 pop

var arr6=["d","s","t"];
var arr7=arr6.pop();
console.log(arr6) //["d","s"];
console.log(arr7);// t

第五：添加最后一个元素，针对老数组最后一个元素后面添加一个元素，新数组返回元素个数 push

var arr8=["i","u","t"];

var arr9=arr8.push("k");

console.log(arr8); //["i","u","t","k"];

console.log(arr9); // 4

第六：shift() 和pop()一样，不同的是操作的是开头删除的元素shift（）；具体操作不在展示
第七：unshiift()和push一样，不同的是操作的是开头添加的元素unshift（）；具体操作不再展示

第八：反转数组 reverse

方法如下：

var arr1=['w','e','s'];

var arr10=arr1.reverse()

console.log(arr10) //['s','e','w'];

第九：数组排序 sort a-b正向 b-a 反向

正向

var arr11=[3,1,5,8,28]
var arr12=arr11.sort(function (a,b) {
return a-b;
})
console.log(arr12) //[1,3,5,8,28];

反向

var arr13=arr11.sort(function (a,b) {
return b-a;
})
console.log(arr13) //[28,8,5,3,1]

第十：数组截取 数组截取的方法主要有slice 和splice，另外说到截取我这里随便也把字符串截取带上，字符串截取的方法主要有substr 和substring

（1）slice 使用方法arr.slice(m,n);其中arr为数组，m，n为两个参数，意思是从已有数组中返回选定的元素，截取位置均为下标，其中m必须，为起始位置，可以为负值，n为结束位置（截取位置并不包含）。

示例如下：

①只有起起始值，并且为正，默认的从起始位置一直到整个数组结束，起始下标从0开始

var arr=[2,3,5,6,8,9]
var arr1=arr.slice(1)
console.log(arr) //[2,3,5,6,8,9] 老数组是没有变化的，下面不在列举，都是一样的
console.log(arr1) //[3,5,6,8,9] 只有起始参数，并且为正值，返回新数组从下标1开始截取

②只有起始值，并且为负，默认的是从起始位置一直到整个数组结束，此处没有起始值，数组的最后一个下标是-1，比如此例，如果从-6开始取，必定是整个数组

var arr=[2,3,5,6,8,9]
var arr1=arr.slice(-1)
console.log(arr1) //[9] 只有起始参数，并且为负值，从数组尾部截取元素

③有起始值和结束值，并且为正，此处需注意下标是从小到大，比如你（3，1）肯定是取不到值的，另外截取的下标个数并不包含最后一个下标

var arr=[2,3,5,6,8,9]
var arr1=arr.slice(1,4)
console.log(arr1) //[3,5,6] 此时是从下标1开始到下标4，但是需要注意的是并不包含下标4，准确的说是1-3的下标

④有起始值和结束值，并且为负，此处需注意下秒也是从小到大，同理，比如（-1，-6）也是肯定取不到值的，另外截取的下标个数也并不包含最后一个下标

var arr=[2,3,5,6,8,9]
var arr1=arr.slice(-6,-1)
console.log(arr1) //[2,3,5,6,8]

⑤有起始值和结束值，并且正负都有

负值到0

var arr=[2,3,5,6,8,9]
var arr1=arr.slice(-1,0)

//刚刚都看到了，数组下标都是从小到大的，所以说如果正负都有的情况下，理论上应该可以取值的，比如这个例子，-1为9的小标，0为2的下标，所以取值应该为 [9]，但是结果并不是这样的
console.log(arr1) //[ ] 从这里可以看出他的结果是为空的，所以从负值到0结果是取不到的

负值到正直

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(-1,2)

//那从负值到正值呢，同样也是取不到值的

console.log(arr1) //[ ]

正直到负值

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(2,-1)

//那从正直到负值，这个理论上是取不到的，但是看下结果

console.log(arr1) //[ 5，6，8] 从结果可以看出是可以取的 原理是2的下标为5，-1的下标为9，不包含结束位置下标

总结：这个方法看着可能会麻烦些（也可能被我写的麻烦啦），比如正到负等，不知道大家都是怎么操作，我一般用这个取值都是只截取正的，所以这个实际操作还是非常简单的。

（2）splice 像数组中添加或者删除元素
arr.splice(m,n,index,index1,...,indexx)
m是起始位置，n是删除元素的个数，index是要添加的元素，在不添加元素的前提下，只有第一个参数是必须的，后面两个都不是必须的，在需要添加元素的情况下，三个元素都是必须的，此方法和slice是不一样的，这个返回的是被删除的元素

示例如下：

只删除不添加

注意看此例，是（1，2）删除两个，如果是（1，0），则表示删除零个，也就是不删除的意思，如果只有一个参数则表示从这里开始删除，比如是（1）则为[2]，当然这个也是可以取负值，但是这个和slice是不一样的，只能起始位置取负值，因为删除的个数不可能为负值，slice可以取（2，-1），这个就截然不同啦，但是刚刚也说啦，slice是不可以起始位置取负值，结束位置取正的，但是这个是可以的，比如（-1，0）则表示从-1开始删除零个，结果为[2,3,5,6,8,9]，（-6，2),结果为[5,6,8,9]，另外这个删除的第二个值如果写的过大，也只是删除从本下标到最后一个，比如（2，78）为[2,3]

var arr=[2,3,5,6,8,9]
var arr1=arr.splice(1,2)
console.log(arr) // [2,6,8,9] 注意看此处才是我们要的数组，从下标1开始删除删除两个
console.log(arr1) //[3,5] 此处是我们删除掉的数组

删除加添加 具体的和上面的差不多，主要添加了添加元素的效果，这个也可以添加多个元素

var arr=[2,3,5,6,8,9]
var arr1=arr.splice(1,2,"il")
console.log(arr) //[2,"li",6,8,9]
console.log(arr1) //[3,5]

总结：此方法用的时候，一般也都是只取正值

（3）substr 这个是字符串的用法 用法arr.substr(m,n) m必选也可以负值 n选填，注意看这个并不是结束为止而是截取的个数

示例如下：

只有一个参数 默认从此下标开始，取后面所有的

正值

var arr="sdhgfhf"
var arr1=arr.substr(1)
console.log(arr)// "sdhgfhf"这个是不变的，下面不再列举
console.log(arr1)//"dhgfhf" 从下标1开始取后面所有的

负值

var arr="sdhgfhf"
var arr1=arr.substr(-2)
console.log(arr1)//"hf" 从下标-2开始取后面所有的

两个参数，从第一个下标开始，截取到下标2的长度

var arr="sdhgfhf"
var arr1=arr.substr(1，3)
console.log(arr1)//"dhg" 从下标1开始取后面所有的 同理如果为负值，比如（-6，3）则为"hjf";后面的始终为长度

总结：此方法需注意不要和数组的混淆，这个是截取长度的

（4）substring 用法arr.substring(m,n) 两个参数，m必须，起始位置 ，n选填，截取下标的结束位置，此用法和上面slice有点类似，但是需要注意的是此方法是不支持负值的

示例如下：

只有一个参数

var arr="sdhgfhf"
var arr1=arr.substring(1)
console.log(arr1)//"dhgfhf"从下标1开始取后面所有的

两个参数

var arr="sdhgfhf"
var arr1=arr.substring(1,3)
console.log(arr1)// "dh"从下标1开始截取到下标3，但是不包含3

总结：此方法不支持负值，只针对下标来截取的

最后，以上主要是总结的数组的一些简单的操作方法，学无止境，继续努力。

㈤ js数组排序的几种方法

一、 冒泡排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：稳定
步骤： 1、比较相邻的元素。如果第一个比第二个大，就交换他们两个；
2、对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样，最后的元素应该会是最大的数；
3、针对所有的元素重复以上的步骤，除了最后一个；
4、持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
二、选择排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：不稳定
步骤： 1、每一次循环，找到最小的那个数，并用变量记住它的索引
2、然后将最小值放在它该在的位置上
3、持续对越来越少的元素重复上面的步骤
三、插入排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：稳定
（1）直接插入排序：将第一个数和第二个数排序，然后构成一个有序序列；将第三个数插入进去，构成一个新的有序序列；对第四个数、第五个数......直到最后一个数，重复第二步
（2）二分插入排序：将寻找每个数插入位置的方法改为折半比较即可
四、Shell排序（插入排序的一种，又称为缩小增量排序）
平均复杂度：o(nlogn) 空间复杂度：o(1) 稳定性：不稳定
步骤：把数组按下标的一定增量分组，然后对每组使用直接插入排序
想学习更多前端开发的知识，就来北京尚学堂！

㈥ Javascript中数组的常用方法有哪些

concat()连接两个或更多的数组，并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素，并向数组添加新元素。
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果。
toLocaleString()把数组转换为本地数组，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()返回数组对象的原始值

㈦ js中操作数组的几个常用方法

1.
Array.shift()------删除并返回第一个元素
作用：从数组中删除第一个元素（即下标为0的元素），并返回该元素。
注意：1）删除元素之后，数组的长度-1。2）如果数组是空的，那么
shift()
方法将不进行任何操作，返回
undefined
值。

㈧ Js中数组有哪些方法

你是想列举一下看看：

数组有length属性（取长度），toString()方法（转换为字符串），join()方法（用指定字符连接数组元素）
其他还有：
•栈方法 push( ) pop( )
•队列方法 shift( ) unshift( )
•排序方法 reverse( ) sort( )
•操作方法 concat( ) slice( ) splice( )
•位置方法 indexOf( ) lastIndexOf( )
•迭代方法 every( ) filter( ) forEach( ) map( ) some( )
•归并方法 rece() receRight( )

你可以看一看这本书《JavaScript高级程序设计（第3版）》，介绍的比较系统，不要被名字吓到，其实是针对初学者。

或者你看看网络文库的这篇：
http://wenku..com/view/b9ca918884868762caaed5b1.html

㈨ js中怎么把值放入数组中

方法解析如下：

1、push：将参数添加到原数组末尾，并返回数组的长度。

测试代码如下：