JavaScript Array對(duì)象使用方法解析

更新時(shí)間：2019年09月24日 09:28:15 作者：---空白---

這篇文章主要介紹了JavaScript Array對(duì)象使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1.數(shù)組的常用方法

push(val)：數(shù)組的末尾添加新的元素,返回操作完成后數(shù)組的長(zhǎng)度

pop()：刪除數(shù)組最后一個(gè)元素，返回被刪除的元素

shift()：刪除數(shù)組的第一個(gè)元素，返回被刪除的元素

unshift(val)：數(shù)組的開(kāi)頭添加新的元素,返回操作完成后數(shù)組的長(zhǎng)度

<script>
  var arr = [1,2,3,4]

  // 在數(shù)組末尾添加元素
  arr.push(5)
  console.log(arr) // [1, 2, 3, 4, 5]

  // 刪除數(shù)組最后一個(gè)元素
  arr.pop()
  console.log(arr) // [1, 2, 3, 4]

  // 在數(shù)組最前面添加元素
  arr.unshift(0)
  console.log(arr) // [0, 1, 2, 3, 4]

  // 刪除數(shù)組的第一個(gè)元素
  arr.shift()
  console.log(arr) // [1, 2, 3, 4]
</script>

2.數(shù)組的遍歷

數(shù)組遍歷可以使用for循環(huán)和foreach

<script>
  var arr = [1,2,3,4]

  // for循環(huán)
  for(var i=0;i<arr.length;i++){
    console.log(arr[i])
  }

  // foreach
  arr.forEach(function(val,index){
    console.log(val,index)
  })
</script>

3.ES6數(shù)組新增方法

<script>
  var arr = [1,2,3,4]
  var newArr = arr.map(function(val){
    return val*2
  })
  console.log(newArr) // [2, 4, 6, 8]
</script>

filter(cb)：過(guò)濾

<script>
  var arr = [1,2,3,4]

  var newArr = arr.filter(function(val){
    // 只保留 >2 的元素
    return val>2
  })

  console.log(newArr) // [3, 4]
</script>

some(cb) ：檢測(cè)數(shù)組中是否有元素滿足條件，只要有一個(gè)滿足就返回true，否則返回false

<script>
  var arr = [1,2,3,4]

  var flag = arr.some(function(val){
    return val>2
  })
  console.log(flag) // true

  var flag2 = arr.some(function(val){
    return val>5
  })
  console.log(flag2) // false
</script>

every(cb)：所有元素都滿足才會(huì)返回true，否則返回false

<script>
  var arr = [1,2,3,4]

  var flag = arr.every(function(val){
    return val>2
  })
  console.log(flag) // false

  var flag2 = arr.every(function(val){
    return val>0
  })
  console.log(flag2) // true
</script>

reduce(cb)：累加器

reduce()對(duì)數(shù)組元素進(jìn)行遍歷，每次遍歷就進(jìn)行依次累加計(jì)算，遍歷結(jié)束后返回累加的最終值

語(yǔ)法：arr.reduce((要累加并返回的數(shù)，數(shù)組元素) => {},初始值)

var list = [
  {name:'西瓜',price:2,num:2},
  {name:'香蕉',price:4,num:1},
  {name:'玉米',price:2,num:5},
  {name:'蘋(píng)果',price:8,num:1}
]
var totalPrice = list.reduce((total,item) => {
  return total + item.price * item.num
},0)
console.log(totalPrice) // 26

4.查找數(shù)組的子元素

查找數(shù)組元素的下標(biāo)

indexOf()：返回具體元素在數(shù)組中的下標(biāo)

findIndex(cb)：查找符合條件的第一個(gè)元素的下標(biāo)

lastIndexOf()和indexOf()的功能一樣，不同的是lastIndexOf()從后往前查找

<script>
  var arr = [1,2,3,4]

  var index = arr.indexOf(1)
  console.log(index) // 0
  var index2 = arr.indexOf(5) // 沒(méi)有這個(gè)元素
  console.log(index2) // -1

  var index3 = arr.findIndex(function(val){
    return val>2
  })
  console.log(index3) // 2
  var index4 = arr.findIndex(function(val){
    // 沒(méi)有一個(gè)元素符合條件
    return val>5
  })
  console.log(index4) //-1
</script>

查找符合條件的第一個(gè)數(shù)組元素 find(cb)

這個(gè)方法跟filter()差不多，只是這個(gè)只查找一個(gè)。而filter()會(huì)查找所有符合條件的數(shù)組元素

<script>
  var arr = [1,2,3,4]

  var result = arr.find(function(val){
    // 查找第一個(gè)大于3.5的子元素
    return val>3.5
  })
  console.log(result) // 4
</script>

判斷一個(gè)數(shù)組是否含有某個(gè)子元素 includes()

<script>
  var arr = [1,2,3,4]

  // 數(shù)組是否含有 1
  var flag = arr.includes(2)
  // 數(shù)組是否含有 5
  var flag2 = arr.includes(5)

  console.log(flag) // true
  console.log(flag2) // false
</script>

5.數(shù)組轉(zhuǎn)換

數(shù)組與字符串間的轉(zhuǎn)換 split()/join()

<script>
  var str = "hello world"
  // 根據(jù)標(biāo)識(shí)將字符串分割成數(shù)組
  var arr = str.split(" ")
  console.log(arr) //["hello", "world"]

  // 將數(shù)組的子元素拼接成字符串
  var str2 = arr.join("-")
  console.log(str2) // "hello-world"
</script>

偽數(shù)組轉(zhuǎn)化為數(shù)組(一個(gè)對(duì)象，如果可以通過(guò)下標(biāo)的形式訪問(wèn)屬性值，那么它就屬于偽數(shù)組)

Array.from() 推薦

Array.prototype.slice()

通過(guò)某些方法獲取到的Dom元素是一個(gè)偽數(shù)組，不能正常使用foreach()，除非先轉(zhuǎn)換成數(shù)組

<script>
  var lis = document.getElementsByTagName('li')

  // 偽數(shù)組，不能使用foreach()
  console.log(lis) // HTMLCollection(4) [li.test, li.test, li.test, li.test]

  // 已經(jīng)轉(zhuǎn)化為數(shù)組，但是是個(gè)空數(shù)組，依然無(wú)法遍歷
  console.log(Array.prototype.slice(lis)) // []

  // 已經(jīng)轉(zhuǎn)化為數(shù)組，且可以遍歷
  console.log(Array.from(lis)) // [li.test, li.test, li.test, li.test]

  Array.from(lis).forEach(function(item){
    console.log(item.innerHTML)
  })
</script>

6.數(shù)組排序

1.插入排序

從第二個(gè)元素開(kāi)始，拿他前面的元素與它比較，如果它比前面的元素小，則這個(gè)對(duì)比元素往后挪一個(gè)位置（實(shí)際上是arr[p + 1] = arr[p]），接著往左邊找對(duì)比元素左比較，直到找到最后一個(gè)或者比它小的元素位置為止，此時(shí)將這個(gè)元素放到這個(gè)相應(yīng)的位置（arr[p + 1] = temp），每輪循環(huán)結(jié)束都能保證前面的數(shù)據(jù)是升序排列的

<script>
  var arr = [6, 3, 4, 7, 5, 19, 2];
  var length = arr.length;
  // 進(jìn)行升序排列，大的元素往右邊擠，小的元素往左邊擠
  for (var i = 1; i < length; i++) {
    // i為當(dāng)前元素的下標(biāo)
    var temp = arr[i];
    // p為比對(duì)元素的下標(biāo)
    p = i - 1;
    // 如果當(dāng)前元素比目標(biāo)元素小
    while (p >= 0 && temp < arr[p]) {
      // 將比對(duì)元素往右挪一個(gè)位置
      arr[p + 1] = arr[p];
      // 往左一個(gè)位置找新的比對(duì)元素
      p--;
    }
    // 將當(dāng)前元素放到合適的位置
    arr[p + 1] = temp;
  }
  console.log(arr) // [2, 3, 4, 5, 6, 7, 19]
</script>

2.快速排序

將一個(gè)數(shù)組的中間元素取出（splice，這個(gè)方法會(huì)改變?cè)瓟?shù)組，同時(shí)將將截取的元素以數(shù)字的形式返回），然后定義兩個(gè)左右空數(shù)據(jù)，遍歷這個(gè)原數(shù)組，將小于被取出元素值的元素放入左邊的數(shù)組，反之放入右邊的數(shù)組，一輪循環(huán)之后將這左右兩個(gè)數(shù)組和中間元素拼接起來(lái)，同時(shí)對(duì)左右數(shù)組進(jìn)行遞歸調(diào)用

var arr = [4, 3, 6, 7, 5, 19, 2];
var newArr = quickSort(arr);
console.log(newArr);
function quickSort(arr) {
  if (arr.length <= 1) return arr;
  else {
    var center = parseInt((arr.length - 1) / 2);
    var centerValue = arr.splice(center, 1)[0];
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] <= centerValue) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }
    return quickSort(left).concat(centerValue, quickSort(right));
  }
}

3.sort排序

<script>
  var arr = [
    {name:"張三",age:18},
    {name:"李四",age:16},
    {name:"王五",age:10},
    {name:"趙六",age:22}
  ]
  arr.sort(function(p1,p2){
    //p1.age-p2.age就是升序
    //p2.age-p1.age就是降序
    return p1.age-p2.age
  })
  console.log(arr)
  // [{name: "王五", age: 10}
  // {name: "李四", age: 16}
  // {name: "張三", age: 18}
  // {name: "趙六", age: 22}]
</script>

7.其他方法

數(shù)組反轉(zhuǎn) reverse() 將當(dāng)前數(shù)組反轉(zhuǎn)，會(huì)改變當(dāng)前數(shù)組

<script>
  var arr = [1,2,3,4]
  arr.reverse()
  console.log(arr) // [4, 3, 2, 1]
</script>

剪接數(shù)組 splice() 會(huì)改變當(dāng)前數(shù)組

可以刪除任意數(shù)組元素，還可以向數(shù)組添加元素

語(yǔ)法：arr.splice(index,num,item1,item2...)

index：規(guī)定從何處添加/刪除元素

num：刪除多少元素

后面的參數(shù)可以是0個(gè)也可以是多個(gè)，表示要添加的數(shù)組元素

<script>
  var arr = [1,2,3,4]
  // 在下標(biāo)3的位置添加數(shù)組元素
  arr.splice(3,0,5)
  console.log(arr) // [1, 2, 3, 5, 4]
  // 刪除下標(biāo)為1的數(shù)組元素
  arr.splice(1,1)
  console.log(arr) // [1, 3, 5, 4]
  // 從下標(biāo)1的位置開(kāi)始刪除3個(gè)元素，并添加2個(gè)元素
  arr.splice(1,3,"life","good")
  console.log(arr) // [1, "life", "good"]
</script>

數(shù)組剪切 slice() 根據(jù)給定的下標(biāo)，將兩個(gè)下標(biāo)之間的元素以數(shù)組形式返回，不會(huì)改變?cè)瓟?shù)組

語(yǔ)法：arr.slice(n,m) 將arr[n]到arr[m-1]之間的元素以數(shù)組形式返回

<script>
  var arr = [1,2,3,4]
  // 不包含參數(shù)二對(duì)象的下標(biāo)元素
  var newArr = arr.slice(1,3)
  console.log(newArr) // [2, 3]
  // 默認(rèn)剪切到最后一個(gè)元素
  var newArr2 = arr.slice(1)
  console.log(newArr2) //[2, 3, 4]
  // 可接受負(fù)數(shù)
  var newArr3 = arr.slice(0,-1)
  console.log(newArr3) //[1, 2, 3]
</script>

拼接2個(gè)數(shù)組 concat()

不會(huì)改變?cè)瓟?shù)組，而是將拼接后的新數(shù)組返回

<script>
  var arr = [1,2,3,4]
  var arr2 = [5,6,7,8]
  var newArr = arr.concat(arr2)
  console.log(arr) // [1,2,3,4]
  console.log(arr2) // [5,6,7,8]
  console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8]
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: