この記事では、javascript に関する関連知識を提供します。主に、要素の削除、スプライス、スライス、連結など、配列操作関数に関連する問題を整理します。以下は、見てみましょう。みんなを助けます。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
前の記事では、配列の基本概念といくつかの単純な配列要素操作関数を紹介しましたが、実際には、配列はさらに多くの関数を提供します。
push
、pop
、shift
、unshift
は、前述したように、配列の両端で動作する関数です。上記のとおり、この記事では詳しく説明しません。
前の記事で簡単に紹介したように、配列は特別なオブジェクトであるため、オブジェクトの属性削除メソッドを使用してみることができます: delete
。
例:
let arr = [1,2,3,4,5];delete arr[2];console.log(arr);
コードの実行結果は次のとおりです:
図の黄色の位置に注目してください。要素は削除されましたが、配列の長さは依然として 5
であり、削除された位置に余分な empty
があります。添字 2
を持つ要素にアクセスすると、次の結果が得られます。
この現象の理由は、delete obj です。 .key
は、key
を通じて対応する値を削除します。つまり、delete arr[2]
は、配列内の 2:3
キー値を削除します。 、添え字 2
にアクセスすると、unknown
になります。
配列では、要素を削除した後、その要素の位置が後続の要素によって埋められ、配列の長さが短くなることがよくあります。
現時点では、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
を削除します。
複数の要素の削除は、1 つの要素を削除するのと同じです。 2 番目のパラメータを変更します。例:
let arr = [1,2,3,4,5];arr.splice(0,3);//删除前三个元素console.log(arr);//[4,5]
コードの実行結果は次のとおりです。
#配列を切り詰めます を 1 つだけ指定すると、配列の位置 start
以降のすべての要素が削除されます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let arr = [1,2,3,4,5]arr.splice(2);//删除从下标为2以及后面的所有元素console.log(arr);//[1,2]</pre><div class="contentsignin">ログイン後にコピー</div></div>
コードの実行結果:
要素の置換
let arr = [1,2,3,4,5];arr.splice(0,2,'itm1','itm2','itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]
Theコードの実行結果は次のとおりです。
上記のコードは実際には 2 段階の操作を実行し、最初に
0# から始まる2 要素を削除します。 ##、その後
0 の位置に 3 つの新しい要素を挿入します。
要素の挿入
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]
戻り値
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]
コードの実行結果:
負のインデックス
負の数値を使用して、操作を開始する要素の位置を示すことができます。例:let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y','z')console.log(arr)//[1,2,3,4,'x','y','z']
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]
代码执行结果:
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]
代码执行结果如下:
如果只为slice()
方法提供一个参数,就会和splice()
一样截断到数组末尾。
concat()
函数可以将多个数组或者其他类型的值拼接称一个长数组,语法如下:
arr.concat(e1, e2, e3)
以上代码将返回一个新的数组,新数组由arr
拼接e1
、e2
、e3
而成。
举例:
let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))
代码执行结果如下:
普通的对象,即使它们看起来和对象一样,仍然会被作为一个整体插入到数组中,例如:
let arr = [1,2]let obj = {1:'1',2:2}console.log(arr.concat(obj))
代码执行结果:
但是,如果对象具有Symbol.isConcatSpreadable
属性,就会被当作数组处理:
let arr = [1,2]let obj = {0:'x', 1:'y', [Symbol.isConcatSpreadable]:true, length:2 }console.log(arr.concat(obj))
代码执行结果:
遍历整个数组,为每个数组元素提供一个操作函数,语法:
let arr = [1,2]arr.forEach((itm,idx,array)=>{ ...})
应用举例:
let arr = [1,2,3,4,5]arr.forEach((itm)=>{ console.log(itm)})
代码执行结果:
let arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{ console.log(`arr[${idx}] in [${array}] is ${itm}`)})
代码执行结果:
类似于字符串,indexOf
、lastIndexOf
、includes
可与查询数组中指定元素的下标:
arr.indexOf(itm,start)
:从start
位置开始搜索itm
,如果找到返回下标,否则返回-1
;arr.lastIndexOf(itm,start)
:倒序查找整个数组,直至start
处,返回第一个查到的下标(也就是数组最后一个匹配项),找不到返回-1
;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
这些方法在比较数组元素的时候使用的是===
,所以false
和0
是不一样的。
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
方法,语法如下:
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)
代码执行结果:
如果没有符合条件的对象,就会返回undefined
。
以上代码还可以简化为:
let xiaoming = arr.find((itm)=> itm.name == 'xiaoming')
执行效果是完全相同的。
arr.findIndex(func)
的用途和arr.find(func)
几乎相同,唯一不同的地方在于,arr.findIndex
返回符合条件对象的下标而不对象本身,找不到返回-1
。
find
和findIndex
只能查找一个满足要求的对象,如果一个数组中存在多个满足要求的对象,就需要使用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)
代码执行结果:
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]
代码执行结果:
arr.sort
对数组进行原地排序,并返回排序后的数组,但是,由于原数组已经发生了改变,返回值实际上没有什么意义。
所谓原地排序,就是在原数组空间内排序,而不是新建一个数组
let arr = ['a','c','b']arr.sort()console.log(arr)
代码执行结果:
注意,默认情况下
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)
如果想要逆序排列只需要交换一下a
和b
的位置既可以了:
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))
代码执行结果:
arr.reverse
用于逆序数组
let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]
这个没啥好说的。
还记得字符串分割函数吗?字符串分割函数可以将字符串分割成一个字符数组:
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)
代码执行结果:
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
代码执行过程如下图:
arr.reduceRight
和arr.reduce
用途相同,只不过从右往左对元素调用方法。
数组是对象的一种特例,使用typeof
无法准确的分辨二者的区别:
console.log(typeof {})//objectconsole.log(typeof [])//object
二者都是对象,我们需要使用Array.isArray()
方法进一步做判断:
console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true
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
在所有的数组方法中,除了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)
代码执行结果:
这里我们可以看到,func
中输出的this
就是我们传入的thisArg
值。
如果我们使用对象成员方法,同时不指定thisArg
的值,就会造成this
为undefined
,从而导致程序错误。
【相关推荐:javascript视频教程、web前端】
以上がJavaScriptの配列操作関数のまとめと共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。