>  기사  >  웹 프론트엔드  >  JavaScript 배열 연산 기능 요약 및 공유

JavaScript 배열 연산 기능 요약 및 공유

WBOY
WBOY앞으로
2022-07-04 13:47:431516검색

이 글은 javascript에 대한 관련 지식을 제공합니다. 요소 삭제, 스플라이스, 슬라이스, 연결 등 배열 연산 기능과 관련된 문제를 주로 정리했습니다. 여러분에게 도움이 되기를 바랍니다. . 모두가 도움이 됩니다.

JavaScript 배열 연산 기능 요약 및 공유

【관련 권장사항: javascript 비디오 튜토리얼, web front-end

Advanced Array

이전 글에서는 배열의 기본 개념과 몇 가지 간단한 배열 요소 연산 기능을 소개했습니다. 실제로 배열이 제공하는 것은 다음과 같습니다. 더 많은 기능이 있습니다.

push, pop, shiftunshift는 앞서 언급한 것처럼 배열의 양쪽 끝에서 작동하는 함수입니다. 위의 내용에 대해서는 이 기사에서 자세히 다루지 않습니다. pushpopshiftunshift是操作数组首尾两端的函数,上文已经讲过,本文不再赘述。

元素删除(对象方式)

上篇已经简单介绍过,数组就是一个特殊的对象,因此我们可以尝试使用对象的属性删除方法:delete

举个例子:

let arr = [1,2,3,4,5];delete arr[2];console.log(arr);

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

注意观察图中标黄的位置,虽然元素被删除了,但是数组的长度仍然是5,而且删除掉的位置多了一个。如果我们访问下标为2的元素,会得到如下的结果:

JavaScript 배열 연산 기능 요약 및 공유

造成这种现象的原因是,delete obj.key是通过key移除对应值的,也就是说delete arr[2]删除了数组中的2:3键值对,当我们访问下标2时,就是undefined了。

而在数组中,我们常常希望删除元素后,元素的位置会被后继的元素填补,数组的长度变短。

这个时候,我们就需要splice()方法。

splice()

需要提前说明的是,splice()方法的功能相当丰富,并非只能删除元素,以下是语法:

arr.splice(start[,deleteCount,e1,e2,...,eN])

splice方法从start位置开始,删除deleteCount个元素,然后原地插入e1,e2,e3等元素。

删除一个元素

以下实例可以从数组中删除一个元素:

let arr = [1,2,3,4,5]arr.splice(0,1);//删除掉第一个元素1console.log(arr)

以上代码删除数组中第一个位置的1个元素,执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

删除多个元素

删除多个元素和删除一个元素用法相同,只需要将第二个参数改为指定数量就可以了,举例如下:

let arr = [1,2,3,4,5];arr.splice(0,3);//删除前三个元素console.log(arr);//[4,5]

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

截断数组

如果我们只提供一个参数start,那么就会删除数组start位置后面的所有元素,举个例子:

let arr = [1,2,3,4,5]arr.splice(2);//删除从下标为2以及后面的所有元素console.log(arr);//[1,2]

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

元素替换

如果我们提供了超过两个参数,那么就可以替换数组元素,举个例子:

let arr = [1,2,3,4,5];arr.splice(0,2,'itm1','itm2','itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

以上代码实际上执行了两步操作,首先删除从0开始的2个元素,然后在0位置插入三个新的元素。

元素插入

如果我们把第二个参数(删除数量)改为0,那么就可以只插入元素,不删除元素,举个栗子:

let arr = [1,2,3,4,5]arr.splice(0,0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

JavaScript 배열 연산 기능 요약 및 공유

返回值

splice()函数会返回被删除的元素数组,举个例子:

let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y')console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

负索引

我们可以使用负数指示开始操作元素的位置,举个例子:

let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y','z')console.log(arr)//[1,2,3,4,'x','y','z']

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

slice()

slice()

요소 삭제(객체 방식)🎜🎜이전 글에서 간략하게 소개한 것처럼 배열은 특수 객체이므로 객체의 속성 삭제 방식인 delete를 사용해 볼 수 있습니다. 🎜🎜예: 🎜
arr.slice([start],[end])
🎜코드 실행 결과는 다음과 같습니다. 🎜🎜 JavaScript 배열 연산 기능 요약 및 공유🎜🎜그림의 노란색 위치에 주의하세요. 요소가 삭제되었음에도 불구하고 배열의 길이는 여전히 5이고 삭제된 위치에는 추가 항목이 있습니다. 비어있습니다. 아래 첨자 <code>2가 있는 요소에 액세스하면 다음과 같은 결과를 얻게 됩니다: 🎜🎜JavaScript 배열 연산 기능 요약 및 공유🎜🎜이 현상이 나타나는 이유는 delete obj.keykey를 통해 해당 값을 제거하기 때문입니다, 즉, delete arr[2]는 아래 첨자 2에 액세스할 때 배열의 2:3 키-값 쌍을 삭제합니다. , 정의되지 않음입니다. 🎜🎜배열에서는 요소를 삭제한 후 해당 요소의 위치가 후속 요소로 채워지고 배열의 길이가 짧아지길 바라는 경우가 많습니다. 🎜🎜이때 splice() 메소드가 필요합니다. 🎜🎜splice()🎜🎜splice() 메서드는 요소를 삭제할 수 있을 뿐만 아니라 기능도 풍부하다는 점을 미리 알아두어야 합니다. 다음은 구문입니다. splice 이 메서드는 start 위치에서 시작하여 deleteCount 요소를 삭제한 다음 e1, e2, e3 및 다른 요소가 제자리에 있습니다. 🎜

요소 삭제

🎜다음 예에서는 배열에서 요소를 삭제할 수 있습니다. 🎜
let arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3))//[2,3]
🎜위 코드는 배열의 첫 번째 위치에서 1 요소를 삭제합니다. 결과는 다음과 같습니다: 🎜🎜JavaScript 배열 연산 기능 요약 및 공유🎜

여러 요소 삭제

🎜여러 요소를 삭제하는 것은 요소 하나를 삭제하는 것과 같습니다. 두 번째 매개변수만 지정된 숫자로 변경하면 됩니다. 예: 🎜
let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr.slice(-5,-1))//[1,2,3,4]
🎜코드 실행 결과는 다음과 같습니다. 🎜🎜🎜

배열 자르기

🎜 하나의 매개변수 start만 제공하면 배열의 start 위치 뒤의 모든 요소가 삭제됩니다. 예: 🎜
arr.concat(e1, e2, e3)
🎜코드 실행 결과: 🎜🎜JavaScript 배열 연산 기능 요약 및 공유🎜

요소 교체

🎜If 두 개 이상의 매개변수를 제공하면 배열 요소를 바꿀 수 있습니다. 예: 🎜
let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))
🎜코드 실행 결과는 다음과 같습니다. 🎜🎜JavaScript 배열 연산 기능 요약 및 공유🎜🎜위 코드는 실제로 2단계 작업을 수행합니다. 먼저 2 요소를 삭제합니다. code>0을 선택한 다음 0 위치에 세 개의 새 요소를 삽입합니다. 🎜

요소 삽입

🎜두 번째 매개변수(삭제 횟수)를 0으로 변경하면 요소를 삭제하지 않고 삽입만 할 수 있습니다. 예: 🎜
let arr = [1,2]let obj = {1:'1',2:2}console.log(arr.concat(obj))
🎜🎜

반환 값

🎜 splice() 함수는 삭제된 요소 배열을 반환합니다. 예: 🎜
let arr = [1,2]let obj = {0:'x',
           1:'y',
           [Symbol.isConcatSpreadable]:true,
           length:2      }console.log(arr.concat(obj))
🎜코드 실행 결과: 🎜🎜JavaScript 배열 연산 기능 요약 및 공유🎜

음수 인덱스

🎜음수를 사용하여 조작 요소를 시작할 위치를 나타낼 수 있습니다. 예: 🎜
let arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})
🎜코드 실행 결과는 다음과 같습니다. 🎜🎜JavaScript 배열 연산 기능 요약 및 공유 🎜🎜slice()🎜🎜slice() 메서드는 지정된 범위의 배열을 가로챌 수 있습니다. 구문은 다음과 같습니다.
arr.slice([start],[end])

返回一个新数组,新数组从start开始,到end结束,但是不包括end

举例:

let arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3))//[2,3]

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

slice()同样可以使用负数下标:

let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr.slice(-5,-1))//[1,2,3,4]

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

如果只为slice()方法提供一个参数,就会和splice()一样截断到数组末尾。

concat()

concat()函数可以将多个数组或者其他类型的值拼接称一个长数组,语法如下:

arr.concat(e1, e2, e3)

以上代码将返回一个新的数组,新数组由arr拼接e1e2e3而成。

举例:

let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))

代码执行结果如下:

JavaScript 배열 연산 기능 요약 및 공유

普通的对象,即使它们看起来和对象一样,仍然会被作为一个整体插入到数组中,例如:

let arr = [1,2]let obj = {1:'1',2:2}console.log(arr.concat(obj))

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

但是,如果对象具有Symbol.isConcatSpreadable属性,就会被当作数组处理:

let arr = [1,2]let obj = {0:'x',
           1:'y',
           [Symbol.isConcatSpreadable]:true,
           length:2      }console.log(arr.concat(obj))

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

forEach()

遍历整个数组,为每个数组元素提供一个操作函数,语法:

let arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})

应用举例:

let arr = [1,2,3,4,5]arr.forEach((itm)=>{
    console.log(itm)})

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

let arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] in [${array}] is ${itm}`)})

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

indexOf、lastIndexOf、includes

类似于字符串,indexOflastIndexOfincludes可与查询数组中指定元素的下标:

  1. arr.indexOf(itm,start):从start位置开始搜索itm,如果找到返回下标,否则返回-1;
  2. arr.lastIndexOf(itm,start):倒序查找整个数组,直至start处,返回第一个查到的下标(也就是数组最后一个匹配项),找不到返回-1;
  3. arr.includes(itm,start):从start位置开始搜索itm,找到返回true,否则返回false;

举例:

let arr = [1,2,3,4,5,6,"7","8","9",0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console.log(arr.includes(10))//falseconsole.log(arr.includes(9))//false

这些方法在比较数组元素的时候使用的是===,所以false0是不一样的。

NaN的处理

NaN是一个特殊的数字,三者在处理NaN有细微差别:

let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole.log(arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1

产生这种结果的原因和NaN本身的特性有关,即NaN不等于任何数字,包括他自己。

这些内容在前面的章节已经讲过了,遗忘的童鞋记得温故知新呀。

find、findIndex

在编程过程中常常会遇到对象数组,而对象是不能直接使用===比较的,如何从数组中查找到满足条件的对象呢?

这个时候就要使用findfindIndex方法,语法如下:

let result = arr.find(function(itm,idx,array){
    //itm数组元素
    //idx元素下标
    //array数组本身
    //传入一个判断函数,如果该函数返回true,就返回当前对象itm})

举个栗子,我们查找name属性等于xiaoming的对象:

let arr =[
    {id:1,name:'xiaoming'},
    {id:2,name:'xiaohong'},
    {id:3,name:'xiaojunn'},]let xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

如果没有符合条件的对象,就会返回undefined

以上代码还可以简化为:

let xiaoming = arr.find((itm)=> itm.name == 'xiaoming')

执行效果是完全相同的。

arr.findIndex(func)的用途和arr.find(func)几乎相同,唯一不同的地方在于,arr.findIndex返回符合条件对象的下标而不对象本身,找不到返回-1

filter

findfindIndex只能查找一个满足要求的对象,如果一个数组中存在多个满足要求的对象,就需要使用filter方法,语法如下:

let results = arr.filter(function(itm,idx,array){
    //和find的用法相同,不过会返回符合要求的对象数组
    //找不到返回空数组})

举个例子:

let arr =[
    {id:1,name:'xiaoming'},
    {id:2,name:'xiaohong'},
    {id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

map

arr.map方法可以对数组的每个对象都调用一个函数,然后返回处理后的数组,这是数组最有用的、最重要的方法之一。

语法:

let arrNew = arr.map(function(itm,idx,array){
    //返回新的结果})

举例,返回字符串数组对应的长度数组:

let arr = ['I','am','a','student']let arrNew = arr.map((itm)=>itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

sort

arr.sort对数组进行原地排序,并返回排序后的数组,但是,由于原数组已经发生了改变,返回值实际上没有什么意义。

所谓原地排序,就是在原数组空间内排序,而不是新建一个数组

let arr = ['a','c','b']arr.sort()console.log(arr)

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

注意,默认情况下sort方法是以字母序进行排序的,也就是适用于字符串排序,如果要排列其他类型的数组,需要自定义比较方法

数字数组

let arr = [1,3,2]arr.sort(function(a,b){
    if(a > b)return 1;
    if(a <p>代码执行结果:</p><p><img src="https://img.php.cn/upload/article/000/000/067/cc3e9c8ac4f7ab0bca3cb1f3f71220d5-22.png" alt="JavaScript 배열 연산 기능 요약 및 공유"></p><p><code>sort</code>函数内部采用了快速排序算法,也可能是<code>timsort</code>算法,但是这些我们都不需要关心,我们只需要关注比较函数就可以了。</p><p>比较函数可以返回任何数值,正数表示<code>></code>,负数表示<code>,<code>0</code>表示等于,所以我们可以简化数字比较方法:</code></p><pre class="brush:php;toolbar:false">let arr = [1,3,2]arr.sort((a,b)=> a - b)

如果想要逆序排列只需要交换一下ab的位置既可以了:

let arr = [1,3,2]arr.sort((a,b)=> b - a)

字符串排序

别忘了字符串比较要使用str.localeCompare(str1)方法呦

let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare(b))

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

reverse

arr.reverse用于逆序数组

let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

这个没啥好说的。

str.split()和arr.join()

还记得字符串分割函数吗?字符串分割函数可以将字符串分割成一个字符数组:

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

冷门知识,split函数有第二个参数,可以限制生成数组的长度

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming','xiaohong']

arr.join()方法用途和split方法相反,可以将一个数组组合成一个字符串。

举个栗子:

let arr = [1,2,3]let str = arr.join(';')console.log(str)

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

reduce、reduceRight

arr.reduce方法和arr.map方法类似,都是传入一个方法,然后依次对数组元素调用这个方法,不同的地方在于,app.map方法在处理数组元素时,每次元素调用都是独立的,而arr.reduce会把上一个元素的调用结果传到当前元素处理方法中。

语法:

let res = arr.reduce(function(prev,itm,idx,array){
    //prev是上一个元素调用返回的结果
    //init会在第一个元素执行时充当上一个元素调用结果},[init])

试想一下,如何实现一个数字组成的数组元素和呢?map是没有办法实现的,这个时候就需要使用arr.reduce

let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+itm,0)console.log(res)//15

代码执行过程如下图:

JavaScript 배열 연산 기능 요약 및 공유

arr.reduceRightarr.reduce用途相同,只不过从右往左对元素调用方法。

Array.isArray()

数组是对象的一种特例,使用typeof无法准确的分辨二者的区别:

console.log(typeof {})//objectconsole.log(typeof [])//object

二者都是对象,我们需要使用Array.isArray()方法进一步做判断:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true

some、every

arr.some(func)arr.every(func)方法用于检查数字,执行机制和map类似。

some

对每个数组元素执行传入的方法,如果方法返回true,立即返回true,如果所有的元素都不返回true,就返回false

every

对数组的每个元素执行传入的方法,如果所有元素都返回true,则返回true,否则返回false

举个例子:

let arr = [1,2,3,4,5]//判断数组是否存在大于2的元素console.log(arr.some((itm)=>{
    if(itm > 2)return true;}))//true//判断是否所有的元素都大于2console.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

在所有的数组方法中,除了sort,都有一个不常用固定参数thisArg,语法如下:

arr.find(func,thisArg)arr.filter(func,thisArg)arr.map(func,thisArg)

如果我们传入了thisArg,那么它就会在func中变为this

这个参数在常规情况下是没什么用处的,但是如果func是一个成员方法(对象的方法),而且方法中使用了this那么thisArg就会非常有意义。

举个例子:

let obj = {
    num : 3,
    func(itm){
        console.log(this)
        return itm > this.num;//查找大于3的数字
    }}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log(newArr)

代码执行结果:

JavaScript 배열 연산 기능 요약 및 공유

这里我们可以看到,func中输出的this就是我们传入的thisArg值。

如果我们使用对象成员方法,同时不指定thisArg的值,就会造成thisundefined,从而导致程序错误。

【相关推荐:javascript视频教程web前端

위 내용은 JavaScript 배열 연산 기능 요약 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제