Javascript 數(shù)組方法全解析（包含es6,es7）

zxhaaa 發(fā)布于2019-08-22 14:00 / 639人閱讀

摘要：數(shù)組方法全解析包含數(shù)組自帶屬性返回創(chuàng)建數(shù)組對(duì)象的原型函數(shù)返回?cái)?shù)組對(duì)象的長(zhǎng)度這個(gè)是老熟人了，可以增加數(shù)組的原型方法和屬性，這個(gè)放在后面的繼承中講數(shù)組的方法首先讓我們看看數(shù)組的對(duì)象屬性。

Javascript 數(shù)組方法全解析（包含es6）

1. 數(shù)組自帶屬性

 constructor //返回創(chuàng)建數(shù)組對(duì)象的原型函數(shù)
 length //返回?cái)?shù)組對(duì)象的長(zhǎng)度
 prototype //這個(gè)是老熟人了，可以增加數(shù)組的原型方法和屬性，這個(gè)放在后面的繼承中講

2. 數(shù)組的方法

//首先讓我們看看數(shù)組的對(duì)象屬性。
Array.prototype

1. concat

用法：用來連接多個(gè)數(shù)組的方法
有了這個(gè)方法之后我們連接多個(gè)數(shù)組就方便了
array1.concat(array2,array3,...,arrayX) 該參數(shù)可以是一個(gè)具體的值也可以是數(shù)組對(duì)象

let arr = [];
let arr1 = [1,2,3,4,5,6];
let pos = 7;
console.log(arr.concat(arr1,pos)); // =>[1,2,3,4,5,6,7]

//ok 我們?cè)倏匆粋€(gè)厲害的，合并一維數(shù)組和二維數(shù)組
var num1 = [[1]];
var num2 = [2, [3]];

var nums = num1.concat(num2); 

console.log(nums); // =>[[1], 2, [3]] 
console.log(nums[0][0]); // =>1

2. copyWithin()
用法：淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置，并返回它，而不修改其大小
重點(diǎn)是不改變大小

arr.copyWithin(target)

arr.copyWithin(target, start)

arr.copyWithin(target, start, end)

arr.copyWithin(目標(biāo)索引, [源開始索引], [結(jié)束源索引])

target(必須) 0為基底的索引，如果target為負(fù)數(shù)的話那么target為length+target
start(可選) 0為基底的索引，如果start為負(fù)數(shù)的話那么start為length+start 如果省略的話就是0
end(可選) 0為基底的索引，如果end為負(fù)數(shù)的話那么end為length+end 如果省略的話就是arr.length
start=>end 在數(shù)學(xué)中是[) 比如（0,2）表示選下標(biāo)0，1 （1,4）表示選下標(biāo) 1,2,3，同理類推
我們來看幾個(gè)例子

[1, 2, 3, 4, 5].copyWithin(-2); 
//=> [1,2,3,1,2] targer為-2，也可以等于-2+5=3 start和end省略 所以等同于copyWithin(3,0,5)

[1, 2, 3, 4, 5].copyWithin(0, 3); // => [4,5,3,4,5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); //=> [4,2,3,4,5] 

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); 
//=>[1, 2, 3, 3, 4]  -2等同于-2+5=3 -3等同2 -1等同于4 所以等同于copyWithin(3,2,4)

//ok,我們?cè)賮砜匆粋€(gè)特殊的，copyWithin并不單單能對(duì)數(shù)組對(duì)象使用還能對(duì)類數(shù)組對(duì)象使用
[].copyWithin.call({length:5, 3:1},0,3); //=> {0:1,3:1, length:5}
/*為什么會(huì)出這么個(gè)玩意？別急待我一步一步和你說
{length:5, 3:1} => {0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}
[].copyWithin => Array.prototype.copyWithin.call()這一步也就是把類數(shù)組能使用數(shù)組的copyWithin方法.
[].copyWithin.call({length:5, 3:1},0,3)=>[undefined,undefined,undefined,1,undefined].copyWithin(0,3)=>[1,undefined,undefined,1,undefined]=>{0:1,3:1, length:5}
*/

3. entries
用法：array.entries(); 返回一個(gè)新的Array Iterator對(duì)象，該對(duì)象包含數(shù)組中每個(gè)索引的鍵值對(duì)
我們先看一段代碼：

var arr= ["a","b","c"];

var Iterator = arr.entries(); //返回一個(gè)Array Iterator對(duì)象
console.log(Iterator.next().value); //=>[0:"a"]
console.log(Iterator.next().value); //=>[1:"b"]
console.log(Iterator.next().value); //=>[2:"c"]

ok,介紹完基本用法之后我們來看一下具體應(yīng)用

//二維數(shù)組排序
var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];

function sortArr(arr){

    var pos = true;
    var Iteartor = arr.entries();

    while(pos){

        var result = Iteartor.next();
        if(result.done !== true){ //當(dāng)循環(huán)到最后一個(gè)的時(shí)候result.done會(huì)變成true
             
             result.value[1].sort((a,b)=>a-b);

        }else{
             
             pos = false;
        }

    }

}

sortArr(arr);

我們?cè)賮砜匆粋€(gè)

var arr = ["a","b","c"];
var iteartor = arr.entries();

for(let i of iteartor){
    console.log(i);
}

//[0, "a"]
//[1, "b"]
//[2, "c"]

for .. of循環(huán)能遍歷迭代器對(duì)象 //具體我放在以后的文章好好講講

4.Array.from
用法：可以將一個(gè)類似數(shù)組或者可迭代對(duì)象創(chuàng)建一個(gè)新的數(shù)組（不會(huì)改變?cè)瓟?shù)組）
先舉一個(gè)小例子

Array.from("abc"); //=>["a","b","c"]
Array.from({0:"a",1:"b",length:2}) //=> ["a","b"]

接下來我們?cè)賮砜匆粋€(gè)神奇的例子，一行代碼將數(shù)組中的元素去重

Array.from(new Set([4,2,4,2,6,6,7,8])); //=>[4,2,6,7,8]

5.every
every(callback[,thisArg])
用法：用來測(cè)試數(shù)組中是否每個(gè)元素都滿足某種規(guī)則
測(cè)試函數(shù)參數(shù)：(value, index, arr) 分別是該數(shù)組的值，該數(shù)組的索引還有該數(shù)組
返回值：Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.every(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>false

6.some
some(callback[,thisArg])
用法：用來測(cè)試數(shù)組中是否有元素都滿足某種規(guī)則
測(cè)試函數(shù)參數(shù)：(value, index, arr) 分別是該數(shù)組的值，該數(shù)組的索引還有該數(shù)組
返回值：Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.some(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>true

7.filter
filter(callback[,thisArg])
用法：用于創(chuàng)建一個(gè)新數(shù)組，滿足通過參數(shù)函數(shù)測(cè)試的所有函數(shù)
測(cè)試函數(shù)參數(shù)：(value, index, arr) 分別是該數(shù)組的值，該數(shù)組的索引還有該數(shù)組
返回值：返回一個(gè)新數(shù)組
先看一個(gè)小例子

const checkIsBigEnough = (value) => value >= 10
let arr = [6,12,50,77,95];
console.log(arr.filter(checkIsBigEnough)); //=> [12,50,77,95]

ok,我再給大家舉一個(gè)我經(jīng)常用的例子，有的時(shí)候我們通過ajax獲取后臺(tái)穿過來的json數(shù)據(jù)，但是其實(shí)不是所有數(shù)據(jù)我們都能用的，這個(gè)時(shí)候filter的就顯得比較重要了，還是看例子

//我從后臺(tái)獲取了一個(gè)數(shù)組，數(shù)組中包含多個(gè)對(duì)象如下：
let json = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"}
]
//這個(gè)時(shí)候我只需要獲取FromStation值為北京的對(duì)象，這個(gè)時(shí)候filter就派上用場(chǎng)了
let filterMethod = (value) => value.FromStation == "北京"
let finallyData = json.filter(filterMethod);
console.log(finallyData);
//=> [{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"}]

8.find
find(callback[,thisArg])
用法：和上面幾個(gè)是幾兄弟，用法和filter相似，不過find返回值是符合測(cè)試函數(shù)的第一個(gè)值
測(cè)試函數(shù)參數(shù)：(value, index, arr) 分別是該數(shù)組的值，該數(shù)組的索引還有該數(shù)組
返回值：符合測(cè)試函數(shù)的第一個(gè)數(shù)組的值，如果沒有符合條件的返回Undefined

    let json = [
    {"CostTime": "310", "FromStation": "上海"},
    {"CostTime": "336", "FromStation": "北京"},
    {"CostTime": "340", "FromStation": "杭州"},
    ]
    
    let checkMethod = (value) => value.CostTime == "340"
    
    console.log(json.find(checkMethod)); //=>{"CostTime": "340", "FromStation": "杭州"}

9.findIndex
用法：和上面幾個(gè)是幾兄弟，用法和find相似，不過findIndex返回值是符合測(cè)試函數(shù)的第一個(gè)值的索引
測(cè)試函數(shù)參數(shù)：(value, index, arr) 分別是該數(shù)組的值，該數(shù)組的索引還有該數(shù)組
返回值：符合測(cè)試函數(shù)的第一個(gè)數(shù)組的值，如果沒有符合條件的返回-1

let json = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "340", "FromStation": "杭州"},
]

let checkMethod = (value) => value.CostTime == "340"
let checkMethod2 = (value) => value.FromStation == "深圳"

console.log(json.findIndex(checkMethod)); //=>2

console.log(json.findIndex(checkMethod2)); //=> -1

10.fill
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

用法：用一個(gè)固定的值去填充數(shù)組中從其實(shí)索引到終止索引內(nèi)的全部元素
參數(shù)：
value（必填）用來填充數(shù)組的值
start（選填）起始索引，默認(rèn)值為0 如果為負(fù)數(shù)的話start = start+arr.length
end （選填）終止索引，默認(rèn)值為arr.length 如果為負(fù)數(shù)的話 end = end+arr.length
start=>end 在數(shù)學(xué)中是[)，選擇大于等于start，小于end的值
返回值：修改之后的數(shù)組

[1,2,3].fill(5) //=> [5,5,5] 不傳start默認(rèn)為0，不傳end默認(rèn)為arr.length
[1,2,3].fill(5,1) //=>[1,5,5] 
[1,2,3].fill(5,1,2) //=>[1,5,3]
[1,2,3].fill(5,1,1) //=>[1,2,3] 不變因?yàn)榇笥诘扔?小于1的值沒有
[1,2,3].fill(5,-3,-2) //=>[5,2,3] start = -3 => -3+3 = 0  end = -2 =>-2 + 3 = 1 =>fill(5,0,1)
Array(3).fill(5) //=> [5,5,5] 這個(gè)方法比較有用，可以初始化數(shù)組（將所有值初始化為一個(gè)值）

11.indexOf
arr.indexOf(searchElement,formIndex)
參數(shù)：
searchElement要查找的元素
formIndex從哪開始查找（formIndex為一個(gè)整數(shù)，可以為負(fù)數(shù)，當(dāng)formIndex為負(fù)數(shù)的時(shí)候formIndex可以轉(zhuǎn)化成formIndex+arr.length 如果還為負(fù)數(shù)的話表示查找整個(gè)元素）
返回值：-1（沒有找到元素）或者元素的下標(biāo)（找到元素）

// 找出指定元素在數(shù)組中出現(xiàn)的位置
var positionIndex = [];
var arr = [1,5,6,1,7,8,1,6,6,6];
var pos = arr.indexOf(1);
while(pos!=-1){
   positionIndex.push(pos);
   pos = arr.indexOf(1,pos+1);
}
console.log(positionIndex); // => [0,3,6]

12.reduce
用法：方法對(duì)累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。（這個(gè)是mdn文檔上寫的,看起來感覺特別難懂，其實(shí)他就是一個(gè)將數(shù)組元素不斷遞歸執(zhí)行一個(gè)函數(shù)之后返回的值）
我們還是先看例子：

//數(shù)組累加
var arr = [3,6,5,1];
arr.reduce((pre,cur)=>pre+cur,10) //10+3+6+5+1 => 25

//數(shù)組累乘
var arr = [3,6,5,1];
arr.reduce((pre,cur) => pre*cur) //3*6*5*1 =>90

ok,我們先來看看reduce函數(shù)
reduce((preValue,curValue,index,array)=>{},initialValue)
我們先看回調(diào)函數(shù)中的值：
preValue: 上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）著作權(quán)歸作者所有。
curValue: 數(shù)組中當(dāng)前被處理的數(shù)組項(xiàng)
index: 當(dāng)前數(shù)組項(xiàng)在數(shù)組中的索引值
array: 調(diào)用 reduce()方法的數(shù)組
我們寫一個(gè)demo來看看這個(gè)方法是如果實(shí)行的

let arr = [1,2,3,4,5,6,7];
arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
})
/*
1,2
3,3
6,4
10,5
15,6
21,7
28
*/

arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
},10)
/*
10,1
11,2
13,3
16,4
20,5
25,6
31,7
38
*/

由此可以看出：

在initialValue沒有傳入的時(shí)候
pre在第一次循環(huán)的時(shí)候?yàn)閿?shù)組第一個(gè)數(shù)
cur為數(shù)組第二個(gè)值

在initialValue有值的時(shí)候
在第一次循環(huán)pre初始為initialValue
cur為數(shù)組第一個(gè)值

其實(shí)reduce以遞歸的思想可以理解為：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
再舉一個(gè)reduce的常用例子吧，二維數(shù)組的合并

var twoArr = [["a","b"],["c","d"],["e","f"]];
twoArr.reduce((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> a,b,c,d,e,f

13.reduceRight
用法其實(shí)和reduce基本沒有區(qū)別，唯一的區(qū)別是他是從右到左執(zhí)行回調(diào)函數(shù)

var twoArr = [["a","b"],["c","d"],["e","f"]];
twoArr.reduceRight((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> f,e,d,c,b,a

let arr = [1,2,3,4,5,6];
arr.slice(0,2); // =>[1,2]
arr.slice(-1) // =>[6]
arr.slice(0) // => [1,2,3,4,5,6]
arr.slice(-7) //=> [1,2,3,4,5,6]
arr.slice(2,-3) // => [3]

字符串方法和數(shù)組方法相似
let str = "I am Bob";
str.slice(-5); //=> m Bob
str.slice(0,6); //=> I am B

數(shù)組方法之splice
splice(start,deleteCount,item...)
用法:萬精油方法，可以對(duì)數(shù)組進(jìn)行增加，刪除，插入,可以從數(shù)組中移除一個(gè)或者多個(gè)元素，并且用后面的item來替換它，返回值為刪除的元素的數(shù)組，并且改方法會(huì)改變?cè)瓟?shù)組
let arr = [1,2,3,4,5,6];
arr.splice(0,5); [1,2,3,4,5]返回一個(gè)唄刪除的數(shù)組
console.log(arr); // =>[6]
arr.splice(0,0,7,8,9); //返回一個(gè)空數(shù)組[]
arr // =>[7,8,9,6]

數(shù)組的遍歷

let arr = [1,2,3,4];
//普通for循環(huán)
for(var i = 0,length=arr.length;i < length;i++){
    //do someThing
}

//forEach循環(huán)
arr.forEach((value, index)=>{
   //do someThing
})

//map循環(huán)
arr.map((value, index)=>{
   //do someThing
})

//其實(shí)還有兩個(gè)循環(huán)一個(gè)for in ，還有一個(gè)是for of，不過強(qiáng)烈介意不要用for in，一個(gè)是效率比普通for循環(huán)差好多，因?yàn)樗鼤?huì)遍歷整個(gè)數(shù)組的原型對(duì)象，我們來看一個(gè)例子
//我們給數(shù)組原型添加一個(gè)haha的方法
Array.prototype.haha = function(){
    //do somthing
}
//然后我們?cè)儆胒or in來輸出數(shù)組
for(let i in arr){
    console.log(arr[i]);
}
//=> 1,2,3,4 haha
最后竟然輸出了haha，這是因?yàn)閒or in這個(gè)循環(huán)會(huì)遍歷數(shù)組的原型對(duì)象，所以會(huì)輸出haha，那么要解決這個(gè)有方法么？其實(shí)也有:
for(let i in arr){
    if(arr.hasOwnProperty(i))
    console.log(arr[i]);
}
//可以看到遍歷輸出了正確的值，但是還是不建議大家使用for in去循環(huán)數(shù)組，不單單是效率低，而且容易出問題，特別是當(dāng)項(xiàng)目引用了許多第三方類庫的時(shí)候。
有大牛做過一個(gè)測(cè)速,遍歷數(shù)組的時(shí)間對(duì)比 for in > map > forEach > for

數(shù)組元素的添加和刪除

push 將一個(gè)或者多個(gè)數(shù)組添加到數(shù)組的末尾,并且返回?cái)?shù)組的長(zhǎng)度
Array.prototype.push(ele1,ele2,ele3,ele4)

pop 刪除數(shù)組的最后一個(gè)值，并且返回刪除元素的值
Array.prototype.pop()

shift刪除數(shù)組第一個(gè)值，并且返回刪除元素的值，用法和pop相似
Array.prototype.shift()

unshift 用法和push相似，將一個(gè)或者多個(gè)元素添加到數(shù)組的開頭，并且返回?cái)?shù)組的長(zhǎng)度

Array.prototype.unshift(ele1,ele2,ele3,ele4)

數(shù)組和字符串之間的相互轉(zhuǎn)化

數(shù)組轉(zhuǎn)化成字符串
join：首先join方法不會(huì)改變?cè)瓟?shù)組，只會(huì)返回一個(gè)生成的新字符串

let a = ["a","b","c"];

console.log(a.join()) //=> "a,b,c"
console.log(a.join("")) //=> "abc"
console.log(a.join("-")) //=> "a-b-c"

ok，這個(gè)比較簡(jiǎn)單，我們?cè)趤砜匆粋€(gè)復(fù)雜點(diǎn)的，類數(shù)組轉(zhuǎn)化成字符串

function f(a,b,c){
   let e = Array.prototype.join.call(arguments,"");
   console.log(e);
}
f("Hello"," ","World"); //=> Hello World

字符串轉(zhuǎn)化成數(shù)組

用字符串的split方法，具體先不多說，等寫字符串方法全解析的時(shí)候再進(jìn)行具體說明

后記

以上都是個(gè)人開發(fā)經(jīng)驗(yàn)總結(jié)而成，如有錯(cuò)誤，歡迎各位大佬指正
轉(zhuǎn)載請(qǐng)注明出處

GPU云服務(wù)器云服務(wù)器 javascript數(shù)組方法 javascript包含包含方法java javascript包含哪些

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92756.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zxhaaa

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

UCan技術(shù)開放日 | 科技創(chuàng)新的大灣區(qū)，怎能不談云原生？

閱讀 2979·2021-10-19 10:09
基于javaweb+jsp的校園快遞管理系統(tǒng)

閱讀 3193·2021-10-09 09:41
基于藍(lán)牙的超聲波無線測(cè)距系統(tǒng)

閱讀 3459·2021-09-26 09:47
web前端開發(fā)中遇到的問題整理(一)

閱讀 2783·2019-08-30 15:56
微信小程序去掉滾動(dòng)條

閱讀 652·2019-08-29 17:04
ES6學(xué)習(xí)筆記

閱讀 1043·2019-08-26 11:58
深入挖掘js之繼承

閱讀 2566·2019-08-26 11:51
構(gòu)建Vue.js組件:slider

閱讀 3430·2019-08-26 11:29

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Javascript 數(shù)組方法全解析（包含es6,es7）

相關(guān)文章

Javascript內(nèi)置對(duì)象新增接口列表

ES6、ES7、ES8、ES9、ES10新特性一覽

**細(xì)解JavaScript ES7 ES8 ES9 新特性**

【重溫基礎(chǔ)】8.字符串

**實(shí)例感受-es6的常用語法和優(yōu)越性**

發(fā)表評(píng)論

0條評(píng)論

zxhaaa

男|高級(jí)講師

TA的文章

UCan技術(shù)開放日 | 科技創(chuàng)新的大灣區(qū)，怎能不談云原生？

基于javaweb+jsp的校園快遞管理系統(tǒng)

基于藍(lán)牙的超聲波無線測(cè)距系統(tǒng)

web前端開發(fā)中遇到的問題整理(一)

微信小程序去掉滾動(dòng)條

ES6學(xué)習(xí)筆記

深入挖掘js之繼承

構(gòu)建Vue.js組件:slider

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Javascript 數(shù)組方法全解析（包含es6,es7）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！