javascript 數(shù)組的常用方法

denson 發(fā)布于2019-08-26 11:49 / 2107人閱讀

摘要：實(shí)際使用的是這個(gè)注意，是，比數(shù)組的長度大每次迭代時(shí)更新這里可以看到更新后的都是遍歷迭代器結(jié)束才是遍歷完畢，輸出的數(shù)組方法返回一個(gè)新的迭代器，它包含數(shù)組中每個(gè)索引的鍵。方法對累加器和數(shù)組中的每個(gè)元素從左到右應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。

學(xué)習(xí)javascript的過程中，總是容易array忘記方法，把數(shù)組的一些方法全部匯總在一起，方便查看和增加記憶.

創(chuàng)建數(shù)組

let arr = ["apple", "banana"];
console.log(arr, "---------訪問數(shù)組"); //[ "apple","banana" ]

通過索引訪問元素

let arr = ["apple", "banana"];
let first = arr[0];
console.log(first, "----通過索引訪問數(shù)組"); //"apple"
console.log(arr[arr.length - 1], "-------訪問數(shù)組中最后一位元素") //"banana"

遍歷數(shù)組

let arr = ["apple", "banana"];
arr.forEach((item, index, array) => {
    console.log(item, "------item")  //"apple" "banana"
    console.log(index, "------index") // 0,1
    console.log(array, "-----array") //["apple","banana"]
})

push() 添加元素到數(shù)組末尾

let arr = ["apple", "banana"];
arr.push("orange");
console.log(arr, "----添加元素到數(shù)組末尾"); // ["apple", "banana", "orange" ]

pop() 刪除數(shù)組末尾元素

let arr = ["apple", "banana","orange"];
arr.pop();
console.log(arr, "----刪除數(shù)組末尾元素"); //["apple", "banana"]

shift() 刪除數(shù)組最前面的元素

let arr = ["apple", "banana"];
arr.shift();
console.log(arr, "----刪除數(shù)組最前面的元素") //[ "banana" ]

unshift() 添加元素到數(shù)組的頭部

let arr = ["banana"];
arr.unshift("eggs");
console.log(arr, "----添加元素到數(shù)組的頭部")  //[ "eggs", "banana" ]

indexOf() 查看某個(gè)某個(gè)元素在數(shù)組中的位置,存在就是當(dāng)前下標(biāo)，如果不存在就為-1；

let arr = [ "eggs","banana"];
let index = arr.indexOf("banana");
console.log(index, "------查看某個(gè)某個(gè)元素在數(shù)組中的位置；") //1
//--------------------
let index1 = arr.indexOf("watermelon");
console.log(index1, "------查看某個(gè)某個(gè)元素在數(shù)組中的位置；") //-1

splice是數(shù)組中最強(qiáng)大的功能之一，增，刪，改

let arr = [ "eggs","banana"];
splice(start,end,string) start是開始下標(biāo)的位置  end是刪除幾個(gè)元素 string是插入或替換的元素
arr.splice(0, 1, "grapes"); //在0的位置刪除一個(gè)元素，并且加入一個(gè)元素 ，刪除插入
console.log(arr,"------") //[ "grapes", "banana" ] "------"
arr.splice(1, 2, "fruits"); //在下標(biāo)為1的位置插入2個(gè)元素，如果后面只傳了一個(gè)就插入一個(gè)
console.log(arr,"------") //[ "grapes", "fruits" ] "------"
arr.splice(2, 2, "fruits", "fruits"); //在下標(biāo)為2的位置插入2個(gè)元素
console.log(arr,"------") //[ "grapes", "fruits" ] "------"
arr.splice(0, 1);  //刪除元素
console.log(arr, "---通過索引刪除某個(gè)元素")

slice 不會改變原數(shù)組

let arr=[ "fruits", "fruits", "fruits" ];
let copyArr = arr.slice();  //拷貝數(shù)組
console.log(copyArr) //[ "fruits", "fruits", "fruits" ]
let sliceArr = arr.slice(0, 1);  //獲取元素 
console.log(sliceArr)  //[ "fruits" ]

Array.from() 方法從一個(gè)類似數(shù)組或可迭代對象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

const bar = ["a", "b", "c"];
Array.from(bar);
const foo = Array.from("foo");
console.log(foo); //[ "f", "o", "o" ]

Array.isArray() 用于確定傳遞的值是否是一個(gè) Array。

console.log(Array.isArray([1, 2, 3])) //true
console.log(Array.isArray("str")) //false
console.log(Array.isArray({ "foo": "1" })) //false
console.log(Array.isArray(null)) //false
console.log(Array.isArray(undefined)) //false

Array.of() 方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例

console.log(Array.of(5)) //[5] 創(chuàng)建一個(gè)數(shù)組為[5]
console.log(Array.of(1, 2, 3)) //[1,2,3]
console.log(Array.of(1, [1, 23], 3)) //[ 1, [ 1, 23 ], 3 ]

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組。

let array1 = ["a", "b"];
let array2 = ["1", "2"];
let array3 = [].concat(array1, array2);
console.log(array3) //[ "a", "b", "1", "2" ]

array.copyWithin(target, start, end)

方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置，并返回它，而不修改其大小。

target    必需。復(fù)制到指定目標(biāo)索引位置。
start    必需。元素復(fù)制的起始位置。
end    可選。停止復(fù)制的索引位置 (默認(rèn)為 array.length)
let copyWithinArr = ["alpha", "beta", "copy", "delta"].copyWithin(1, 2, 3);
1=="beta"
2=="copy"
3=="delta"
console.log(copyWithinArr) // [ "alpha", "copy", "copy", "delta" ]
let copyWithinArr1 = ["alpha", "beta", "copy", "delta"].copyWithin(2, 0);
console.log(copyWithinArr1) //[ "alpha", "beta", "alpha", "beta" ]

entries() 方法返回一個(gè)新的Array Iterator對象，該對象包含數(shù)組中每個(gè)索引的鍵/值對。

var entries = ["a", "b", "c"];
var iterator = entries.entries();
console.log(iterator, "---")
console.log(iterator.next().value, "---")
console.log(iterator.next())
var iter = entries.entries();
var a = [];
// for(var i=0; i< arr.length; i++){   // 實(shí)際使用的是這個(gè) 
for (var i = 0; i < arr.length + 1; i++) {    // 注意，是length+1，比數(shù)組的長度大
    var tem = iter.next();             // 每次迭代時(shí)更新next
    console.log(tem.done);             // 這里可以看到更新后的done都是false
    if (tem.done !== true) {             // 遍歷迭代器結(jié)束done才是true
        console.log(tem.value);
        a[i] = tem.value;
    }
}
console.log(a);  // [ [ 0, "a" ], [ 1, "b" ], [ 2, "c" ] ] 遍歷完畢，輸出next.value的數(shù)組

keys()方法返回一個(gè)新的Array迭代器，它包含數(shù)組中每個(gè)索引的鍵。返回的是下標(biāo)

values() 方法返回一個(gè)新的 Array Iterator 對象，該對象包含數(shù)組每個(gè)索引的值。

for (let index of ["a", "b"].keys()) {
    console.log(index);
}
// 0  
// 1

every() 方法測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。

function isBigEnough(element, index, array) {
    return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

some() 方法測試數(shù)組中的某些元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測試。

console.log([1,2,3,4,5].some(isBigEnough),"----some"); //一個(gè)都沒有通過false 
// passed is false
console.log([12, 54, 18, 1,2].some(isBigEnough),"--------some"); //只要有一個(gè)通過即為true
// passed is true

fill() 方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。

arr.fill(value，start，end)
let fillArr = [1, 2, 3, 4, 5];
console.log(fillArr.fill(3)) //[ 3, 3, 3, 3, 3 ]
console.log(fillArr.fill(2, 0, 2)) //[ 2, 2, 3, 3, 3 ]
console.log(fillArr.fill(5, 1)) // 2, 5, 5, 5, 5 ]

filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。

let filter = (value) => {
    return value > 10
}
console.log([15, 13, 2, 16, 3].filter(filter))  // 15, 13, 16 ]

find() 方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值。否則返回 undefined。

console.log([15, 13, 2, 16, 3].find(filter))  // 15 返回第一個(gè)滿足條件的值  否則undefined

findIndex()方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引。否則返回-1。

console.log([15, 13, 2, 16, 3].findIndex(filter))  // 0 返回第一個(gè)滿足條件的下表  否則-1

forEach() 方法對數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。 //item是值,index下標(biāo),array是原數(shù)組

fillArr.forEach((item, index, array) => console.log(item))

includes() 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況，如果包含則返回

console.log(fillArr.includes(2)) //true 檢查數(shù)組中是否有該值有為true，否則false
console.log(fillArr.includes(4)) //false

indexOf()方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1。

console.log(fillArr.indexOf(2))  //0
console.log(fillArr.indexOf(4))  //-1

join() 方法將一個(gè)數(shù)組（或一個(gè)類數(shù)組對象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。

let joinArr = ["Wind", "Rain", "Fire"];
console.log(joinArr.join());  //Wind,Rain,Fire

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變量）在數(shù)組中的最后一個(gè)的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找，從 fromIndex 處開始。

console.log(["a","b"].lastIndexOf("a"));   //0  從后面往前面找

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。

let numbers=[1,2,3,45,7,8,9];
let doubles=numbers.map(x=>x+1);
console.log(doubles,"------map") //[ 2, 3, 4, 46, 8, 9, 10 ] "------map"

reduce() 方法對累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。

const reduceArr=[1,2,3,4,5,6];
const reduce=(accumulator,currentValue)=>{
    console.log(accumulator,"-------accumulator"); //累加的值
    console.log(currentValue,"-------currentValue"); //當(dāng)前元素
    return accumulator+currentValue
};
console.log(reduceArr.reduce(reduce))  //21 從左往右

reduceRight() 方法接受一個(gè)函數(shù)作為累加器（accumulator）和數(shù)組的每個(gè)值（從右到左）將其減少為單個(gè)值。

console.log(reduceArr.reduceRight(reduce))  //21 從右往左

reverse() 方法將數(shù)組中元素的位置顛倒。

console.log(reduceArr.reverse()) //[ 6, 5, 4, 3, 2, 1 ] 數(shù)組順序顛倒

sort() 數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組

let items = [
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic" ,value :0},
    { name: "Zeros", value: 37 }
  ];
  items.sort((a,b)=>{
      return a.value-b.value
  })

  console.log(items)

  items.sort((a,b)=>{
    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
    // names must be equal
    
      return 0;
    // return   nameA-nameB  轉(zhuǎn)成NAN
  })
  console.log(items)

toLocaleString()返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串，

  let str=[1,2,3,4,5];
  console.log(str.toLocaleString())  //1,2,3,4,5

希望大家喜歡，也希望大家指點(diǎn)錯(cuò)誤，也可以加入qq群439667347，大家一起討論，一起進(jìn)步，后續(xù)更新中...

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107624.html

發(fā)表評論

登陸后可評論

0條評論

denson

男|高級講師

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

TA的文章

pacificrack黑五優(yōu)惠：混合服務(wù)器3折，低至$30/月，E5-2650v2/16G/240G

閱讀 2555·2021-11-22 12:05
學(xué)stm32有機(jī)會進(jìn)大公司嗎？如何選擇？

閱讀 3440·2021-10-14 09:42
舍利云：日本vps電信聯(lián)通CN2移動(dòng)直連2核2G內(nèi)存5M帶寬28.8元起

閱讀 1675·2021-07-28 00:15
自適應(yīng)和響應(yīng)式

閱讀 1981·2019-08-30 11:08
【學(xué)習(xí)筆記】CSS深入理解之float

閱讀 1475·2019-08-29 17:31
snippet,讓你編碼效率翻倍

閱讀 918·2019-08-29 16:42
JS 1-數(shù)據(jù)類型

閱讀 2327·2019-08-26 11:55
javascript 數(shù)組的常用方法

閱讀 2108·2019-08-26 11:49

資訊專欄INFORMATION COLUMN

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