1. 程式人生 > >js 陣列中方法總結

js 陣列中方法總結

都是基礎 必須掌握! 網上找找資料認認真真敲一邊,算是有了個大概的認識!

改變原陣列的方法(9個):

pop()  a.shift()  push()  unshift()  reverse()  splice()   sort()

ES6:  copyWithin() fill

不改變原陣列的方法(8個):

ES5:
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、
ES7:
includes


原陣列不變的方法

  • slice()       從原陣列中指定開始下標到結束下標之間的項   返回新陣列 

  • concat()    合併陣列 返回新陣列

  • join()         指定的分隔符進行分隔  返回分割後的字串

原陣列改變的方法

  • push()新增元素到陣列尾部  返回新陣列長度 

  • splice()  刪除元素,並向陣列新增新元素    返回刪除元素

  • pop()   尾部刪除  返回新陣列

  • reverse()陣列反序  返回反序的陣列

  • sort() 

  • es6  Array.of() 返回由所有引數值組成的陣列
var numbers = [1,2,3,4,5,4,3,2,1];
var result = Array.of(numbers);
console.log(result) //[1,2,3,4,5,4,3,2,1];
  • es6 Array.from() 將類轉化為陣列
1. 物件擁有length屬性
var obj = {0:'zj', 1:'27', 2:'female', length: 3};
var result = Array.from(obj);
console.log(result);///["zj", "27", "female"]

//部署了 Iterator介面的資料結構 比如:字串、Set、NodeList物件
// let arr = Array.from('hello'); 
// console.log(arr)// ['h','e','l','l']

// let arr = Array.from(new Set(['a','b']));
// console.log(arr);// ["a", "b"]

 

  • forEach 和for 迴圈類似 
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    if (item !=2 ) {
        numbers.splice(index,1,2)
    }
})
console.log(numbers)// [2, 2, 2, 2, 2, 2, 2, 2, 2]
  • es5  every對陣列中每一項進行給定函式,如果每一項都返回true,則返回true
var numbers = [1,2,3,4,5,4,3,2,1];
var temparr = numbers.every(function(item,index,numbers){
    return item<3;
})
console.log(temparr)//false
  • some 對陣列每一項給定函式,如果任意一項都返回true,則返回true
var numbers = [1,2,3,4,5,4,3,2,1];
var temparr = numbers.some(function(item,index, array){
    return item >3;
})
console.log(temparr);//true
  • filter 對陣列中每一項給定函式,返回true 組成的陣列
var numbers = [1,2,3,4,5,4,3,2,1];
var temparr = numbers.filter(function(item,index,array) {
    return item>3;
});
console.log(temparr);//[4,5,4]
  • map 對陣列中每一項給定函式,返回每次呼叫結果組成的陣列
var numbers = [1,2,3,4,5,4,3,2,1];
var temparr = numbers.map(function(item,index,array) {
    return item + 1;
})
console.log(temparr);//[4,5,4]
  • 兩個歸併陣列的方法:reduce()和reduceRight()。這兩個方法迭代陣列所有項,然後構建一個最終返回的值。reduce從左到右,reduceRight從右到左。

reduce()函式接受四個引數;前一個值、當前值、index和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在第二項上,因此第一個引數是陣列的第一項,第二個引數是陣列的第二項。

var numbers = [1,2,3,4];
var result = numbers.reduce(function(prev,cur,index,array){
    return prev * cur;
})
console.log(result) //10

find():返回通過測試的陣列的第一個元素的值  原陣列不變

語法:

array.find(function(value, index, arr),thisValue)

value:必須,代表當前元素,其他四個引數都是可選,index代表當前索引值,arr代表當前的陣列,thisValue代表傳遞給函式的值,一般用this值,如果這個引數為空,undefined會傳遞給this值

返回值:返回符合測試條件的第一個陣列元素的值,如果沒有符合條件的則返回undefined。

  let arr= [1,3,4,5,6,9]
    let temp = arr.find(value => {
       return value >3;
    })

    console.log(temp) //4
    console.log(arr) // [1, 3, 4, 5, 6, 9]


  • ES7 includes() 查詢陣列是否包含某個元素 返回布林

定義: 返回一個布林值,表示某個陣列是否包含給定的值

語法:

array.includes(searchElement,fromIndex=0)
引數:

searchElement(必須):被查詢的元素

fromIndex(可選):預設值為0,引數表示搜尋的起始位置,接受負值。正值超過陣列長度,陣列不會被搜尋,返回false。負值絕對值超過長陣列度,重置從0開始搜尋。

includes方法是為了彌補indexOf方法的缺陷而出現的:

  1. indexOf方法不能識別NaN
  2. indexOf方法檢查是否包含某個值不夠語義化,需要判斷是否不等於-1,表達不夠直觀
let a = [NaN,'a','zhu',1];
let b = a.includes('zhu') // true
console.log(b)
let c = a.includes('a',100)
console.log(c)// false  超過陣列長度 不搜素
let d = a.includes('a',-3)
console.log(d)//true
let e = a.includes(NaN, -100)
console.log(e)//true 負值絕對值超過陣列長度,搜尋整個陣列

 

  • for...of 允許你遍歷 Arrays(陣列), Strings(字串), Maps(對映), Sets(集合)等可迭代的資料結構等。

語法

for (variable of iterable) {
    statement
}

variable:每個迭代的屬性值被分配給該變數。

iterable:一個具有可列舉屬性並且可以迭代的物件。

    1.Arrays(陣列)

let iterable = ['a', 'b', 'c'];
for(let value of iterable) {
    console.log(value) // a b c
}

 2. maps(對映) Map 物件就是儲存 key-value(鍵值) 對。物件和原始值可以用作 key(鍵)或 value(值)。Map 物件根據其插入方式迭代元素。

 let iterable = new Map([['one',1],['two',2]]);
 for( let [key,value] of iterable)
 {
    console.log(`Key:${key} and Value:${value}`) //Key:one and Value:1 //Key:two and Value:2
 }

3. Set(集合) 物件允許你儲存任何型別的唯一值,這些值可以是原始值或物件。 Set(集合) 物件只是值的集合。 Set(集合) 元素的迭代基於其插入順序。 Set(集合) 中的值只能發生一次。如果您建立一個具有多個相同元素的 Set(集合) ,那麼它仍然被認為是單個元素。

let iterable = new Set([1,4,4,1,3,2,1]);
for(let value of iterable){
    console.log(value) //1 //4 //3 //2
}

4. String(字串)

let iterable = 'hello'
for(var value of iterable){
    console.log(value) //h //e //l //l //o 對字串執行迭代,並打印出每個索引上的字元。
}

5.Arguments Object(引數物件) 把引數看成一個類陣列物件 並且對應於傳遞給函式的引數

arguments 會接收傳入 args() 函式的任何引數
function args(){
    for(let arg of arguments){
        console.log(arg); // 1 //2 //3
    }
}
args(1,2,3)

6.Generators(生成器) 通過迭代器控制生成器乘車物件

function* generator(){
    yield 1;
    yield 2;
    yield 3;
}

for(let g of generator()){
    console.log(g);//1 //2 //3
}

7.退出迭代 break、continue、return 和 throw

let iterable = ['a','b','c'];
for(let value of iterable){
    console.log(value);
    break;//a break 關鍵字在一次執行後終止迴圈,所以只有 a 被打印出來
}

8.普通物件不可迭代

let obj= {name:'zz', age:28};
for(let value of obj)
{
    console.log(value) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}

通過Array.from物件轉化為陣列進行迭代