js數組操作方法小結

April 發布于2019-08-23 14:26 / 1152人閱讀

摘要：操作方法創建數組類數組將類數組轉換真正的數組修改數組合并數組，返回新數組，原數組不變數組轉化為字符串以默認為逗號拼接為字符串。

Array操作方法 創建數組

var arr=[]
var arr = new Array()
var arr1 = ["1", "2", "3"]
var arr2 = ["a", "b", "c"]
var arrLike = [{
    name: "123",
    age: "18"
}, {
    name: "abc",
    age: "12"
}]  //類數組

將類數組轉換真正的數組Array.from(array)

eg:

obj = {"1": "value is 1", length: 2}
a = Array.from(obj)  //[undefined, "value is 1"]

修改數組

合并數組，返回新數組，原數組不變

Array.prototype.concat(arr1, arr2)  //["1", "2", "3", "a", "b", "c"]
arr1.concat(arr2) //["1", "2", "3", "a", "b", "c"]

數組轉化為字符串

Array.prototype.join(separator)  //以separator（默認為逗號）拼接為字符串。
Array.prototype.toString()   //把數組轉換為字符串, 數組中的元素之間用逗號分隔。

eg:

arr1.join() //"1,2,3"
arr1.join("") //"123"
arr1.join("/") //"1/2/3"
arr1.toString() //"1,2,3"

填充

Array.prototype.fill(value,start,end)
//value 為填充值
//start 為填充數組元素起點坐標
//end 為填充數組元素終點坐標

eg:

arr1.fill(0,1,2) // ["1", 0, "3"]

判斷

Array.isArray()
Array.isArray(arr1) //true

篩選

Array.prototype.filter()
Array.prototype.map()

eg:

var words = [
    {
        id: "1",
        name: "123"
    },
    {
        id: "2",
        name: "abc"
    }
]

words.filter(d => d.id === "1") //[{id: "1" , name: "123"}] 返回結果為true的值
arr1.map(x => x * 2)  // [2,4,6] 返回所有項

排序

Array.prototype.reverse()   //位置顛倒
Array.prototype.sort()

eg:

arr1.reverse() //["3", 2, "1"]
arr1.sort()  //["1", "2", "3"]

遞歸

Array.prototype.reduce()

eg:

const reducer = (accumulation,currentValue)=>{
    accumulation + currentValue
}
arr1.reduce(reducer)       // 1+2+3=6
arr1.reduce(reducer,4)     //4+1+2+3=10

查找

Array.prototype.some(callback)    //執行callback函數，直到callback返回true

var even =  function(element){
    return element % 2 === 0
}

arr1.some(even)  //true

Array.prototype.every(callback) //數組的所有元素是否都通過callback函數

function even(currentValue){
    return currentValue < 5
}

arr1.every(even)

Array.prototype.find(callback) //在數組中返回符合callback第一個元素的值

function even(value){
    return even % 2 === 0
}

arr1.find(even) // 2

Array.prototype.findIndex(callback)  //返回數組中滿足callback的第一個元素的索引。否則返回-1

function even(value){
    return value % 2 === 0
}

arr1.findIndex(even)   // 1

Array.prototype.includes(searchElement) //是否包含seachElement

arr1.includes(2)  //true

arr1.includes(0)  //false

增刪

pop()

Array.prototype.pop()  //刪除數組的最后一個元素，并返回改元素的值

arr1.pop() //  3  arr1=[1,2]

push()

Array.prototype.push()  //增加元素到數組末尾，返回增加的元素

arr1.push(4) // 4  ?arr1=[1, 2, 3, 4]

shift()

Array.prototype.shift()  //刪除數組第一個元素，返回這個元素值

arr1.shift()  // 1   arr1=[2,3]

unshift()

Array.prototype.unshift()   //增加元素到數組開頭 ，返回數組長度  

arr1.unshift(0) //4  arr1=[0,1,2,3]

slice()

Array.prototype.slice(start,end) //返回[start,end]淺拷貝到一個新數組，原數組不會被修改

arr1.slice(0,2)  //[1,2]  arr1=[1,2,3]

splice()

Array.prototype.splice()  //通過刪除現有元素或添加新元素來更改一個數組的內容，原數組會被修改

Array.prototype.slice(replace-index,replace-num,replace-value)

//replace-num = 0 => inserts
arr1.splice(1,0,0)  //arr1=[1,0,2,3]

//replace-num !== 0 => replace
arr1.splice(1,1,4)  //返回被替換的元素 =>2  arr1=[1,4,3]

循環遍歷

map()

Array.prototype.map(callback)

arr1.map(val=>val*2)  // [2, 4, 6]

forEach()

Array.prototype.forEach(callback)

arr1.forEach(elem =>{
    console.log(elem)
})

// 1
// 2
// 3

entries()

Array.prototype.entries()   //返回一個新的Array Iterator對象，該對象包含數組中每個索引的鍵/值對

arr1 = ["a", "b", "c"]

for( let [index,elem] of (arr1).entries()){
    console.log(index,elem)
}

// 0 "a"
// 1 "b"
// 2 "c"

keys()

Array.prototype.keys()  //返回一個新的Array迭代器，它包含數組中每個索引的鍵

for(let index of(arr1).keys()){
    console.log(index)
}

// 0
// 1
// 2

values()

Array.prototype.values()  //返回一個新的Array迭代對象，包含數組每個索引值

for(let elem of(arr1).values()){
    console.log(elem)
}

// a
// b
// c

GPU云服務器云服務器 js數組操作方法數組操作方法 java數組知識小結 js數組方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100613.html

JS數組去重方法小結

摘要：數組去重看了網上很多數組去重方法，用的比較常見的大概就幾種，今天想自己來做一個總結。還有就是方法返回的數組也是排序后的數組，某些情況下可能不符合要求。 JS數組去重看了網上很多數組去重方法，用的比較常見的大概就幾種，今天想自己來做一個總結。部分內容參考該博客 1 . 在原數組上操作（基本方法）思路：利用循環嵌套，判斷數組中每個元素與其后面的元素是否相等，如果相等，就使用spli...

PascalXie 2019-08-22 15:42 評論0 收藏0
【讀書筆記】《高性能JavaScript》

摘要：性能訪問字面量和局部變量的速度是最快的，訪問數組和對象成員相對較慢變量標識符解析過程搜索執行環境的作用域鏈，查找同名標識符。建議將全局變量存儲到局部變量，加快讀寫速度。優化建議將常用的跨作用域變量存儲到局部變量，然后直接訪問局部變量。缺陷這本書是2010年出版的，這本書談性能是有時效性的，現在馬上就2018年了，這幾年前端發展的速度是飛快的，書里面還有一些內容考慮IE6、7、8的東...

chengjianhua 2019-08-22 13:51 評論0 收藏0
高性能JavaScript（文檔）

摘要：最近在全力整理高性能的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。最近在全力整理《高性能JavaScript》的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。前端開發文檔高性能JavaScript 第1章：加載和執行腳本位置阻止腳本無阻塞的腳本延遲的腳本動態腳本元素 XMLHTTPRequest腳本注入推薦的無阻塞模式...

RayKr 2019-08-22 18:32 評論0 收藏0
關于promise的小結

摘要：則是把類似的異步處理對象和處理規則進行規范化，并按照采用統一的接口來編寫，而采取規定方法之外的寫法都會出錯。這個對象有一個方法，指定回調函數，用于在異步操作執行完后執行回調函數處理。到目前為止，已經學習了創建對象和用，方法來注冊回調函數。 Promise 本文從js的異步處理出發，引入Promise的概念，并且介紹Promise對象以及其API方法。 js里的異步處理可以參考這篇文章...

Tony_Zby 2019-08-20 17:44 評論0 收藏0
面試小結（二）

摘要：的用法，申明構造函數，返回。構造函數可以調用來獲取下一個值，可以構造類似于隨機數生成器。在構造器函數中，可以暫停然后返回當前表達式的值。總結是為了更好的消滅這些不知道，希望對大家也有所幫助。 1、function*的用法； function*，申明構造函數，返回{value:v,done:true_or_false}。構造函數可以調用next來獲取下一個值，可以構造類似于隨機數生成器。...

lanffy 2019-08-29 15:35 評論0 收藏0