Menu

Subscribe

[ JavaScript ] 陣列方法簡介

on JavaScript, JSON, array, ES6, Arrow functions, mapreduce, filter

學習目標

  • 了解 ES6 的箭頭函數（ Arrow functions ) 使用方式
  • 了解 Template literals 使用方式
  • 了解【 for-in 】、【 for-of 】、【 forEach 】、【 filter 】、【 find 】、【 map 】、【 reduce 】、【 every 】、【 some 】、【 slice 】 的使用方式

內容

  • 初始化陣列
  • 新增元素到陣列尾端
  • 從陣列尾端取出元素
  • 新增元素到陣列頭端
  • 從陣列頭端取出元素
  • 判斷元素是否在陣列中
  • 兩陣列結合
  • 取值
    • 陣列
    • 物件陣列
  • 元素檢查
    • filter
    • find
    • every
    • some
    • map / reduce
    • map
    • reduce
  • 擷取 slice

陣列方法

Array Methods

初始化陣列

  • 【 功能 】
    • 初始化陣列
  • 【 Console 】
   [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
   let people = ["Jack", "Archer", "Festum", "David"]
   console.log(people)

新增元素到陣列尾端

  • 【 Methods 】
    • Array.prototype.push()
  • 【 特性 】
    • 新增元素到陣列尾端
    • 會改變陣列的長度
  • 【 Console 1 】
   [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
   [ 'Jack', 'Archer', 'Festum', 'David', 'Mike' ]
  • 【 程式 】
   let people = ["Jack", "Archer", "Festum", "David"]
   console.log(people)
   people.push("Mike")
   console.log(people)

從陣列尾端取出元素

  • 【 Methods 】
    • Array.prototype.pop()
  • 【 特性 】
    • 從陣列尾端取出元素
    • 會改變陣列的長度
  • 【 Console 1 】
   [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
   David
  • 【 Console 3 】
   [ 'Jack', 'Archer', 'Festum' ]
  • 【 程式 】
   let people = ["Jack", "Archer", "Festum", "David"]
   console.log(people)
   console.log(people.pop())
   console.log(people)

新增元素到陣列頭端

  • 【 Methods 】
    • Array.prototype.unshift()
  • 【 特性 】
    • 新增元素到陣列頭端
    • 會改變陣列的長度
  • 【 Console 1 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
  [ 'Jeremy', 'Harvey', 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
   let people = ["Jack", "Archer", "Festum", "David"]
   console.log(people)
   people.unshift("Jeremy", "Harvey")
   console.log(people)

從陣列頭端取出元素

  • 【 Methods 】
    • Array.prototype.shift()
  • 【 特性 】
    • 從陣列頭端取出元素
    • 會改變陣列的長度
  • 【 Console 1 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
  [ 'Archer', 'Festum', 'David' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  console.log(people)
  people.shift()
  console.log(people)

判斷元素是否在陣列中

  • 【 Methods 】
    • Array.prototype.includes()
  • 【 特性 】
    • 判斷元素是否在陣列中，存在的話回傳 true ，否則回傳 false
  • 【 Console 1 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
  true
  • 【 Console 3 】
  false
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  console.log(people)
  console.log(people.includes('Archer'))
  console.log(people.includes('QQ'))

兩陣列結合

  • 【 Methods 】
    • Array.prototype.concat()
  • 【 特性 】
    • 兩陣列結合
  • 【 Console 1 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 Console 2 】
  [ 'Jack', 'Archer', 'Festum', 'David', 'Java', 'Script', 'Good' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  console.log(people)
  let array2 = ['Java', 'Script', 'Good']
  console.log(people.concat(array2))

陣列取值 for

  • 【 Methods 】
    • for
  • 【 特性 】
    • 依序取出陣列值
  • 【 Console 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  for (let i = 0; i < people.length; i++) {
    console.log(people[i])
  }

陣列取值 for-in

  • 【 Methods 】
    • for-in
  • 【 特性 】
    • 依序取出陣列值
  • 【 Console 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  for (let index in people) {
    console.log(people[index])
  }

陣列取值 for-of

  • 【 Methods 】
    • for-of
  • 【 特性 】
    • 依序取出陣列值
  • 【 Console 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  for (let value of people) {
    console.log(value)
  }

陣列取值 forEach

  • 【 Methods 】
    • Array.prototype.forEach()
  • 【 功能 】
    • 透過 forEach 取得 family 資料
  • 【 Console 】
  [ 'Jack', 'Archer', 'Festum', 'David' ]
  • 【 程式 】
  let people = ["Jack", "Archer", "Festum", "David"]
  let forEachPeopleItem1 = people.forEach((item, index, array) => {
    console.log(item)
  })

物件陣列取值 for

  • 【 功能 】
    • 透過 for 取得 family 資料
  • 【 Console 】
  { 
    name: 'John',
    age: 32,
    employed: true
  }
  {
    name: 'Morris',
    age: 65,
    employed: false
  }
  {
    name: 'Alex',
    age: 55,
    employed: true
  }
  • 【 程式 】
  let family = [
    {
      name: 'John',
      age: 32,
      employed: true
    },
    {
      name: 'Morris',
      age: 65,
      employed: false
    },
    {
       name: 'Alex',
       age: 55,
       employed: true
     }
  ]
  for (let i = 0; i < family.length; i++) {
    console.log(family[i])
  }

物件陣列取值 for-in

  • 【 功能 】
    • 透過 for in 取得 family 資料
  • 【 Console 】
   { 
     name: 'John',
     age: 32,
     employed: true
   }
   {
     name: 'Morris',
     age: 65,
     employed: false
   }
   {
     name: 'Alex',
     age: 55,
     employed: true
   }
  • 【 程式 】
  let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   for (let key in family) {
     console.log(family[key])
   }

物件陣列取值 for-of

  • 【 功能 】
    • 透過 for of 取得 family 資料
  • 【 Console 】
  { 
    name: 'John',
    age: 32,
    employed: true 
  }
  {
    name: 'Morris',
    age: 65,
    employed: false
  }
  {
    name: 'Alex',
    age: 55,
    employed: true
  }
  • 【 程式 】
   let family = [
     {
          name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   for (let value of family) {
     console.log(value)
   }

物件陣列取值 forEach (1)

  • 【 Methods 】
    • Array.prototype.forEach()
  • 【 功能 】
    • 透過 forEach 取得 family 資料
  • 【 Console 】
  { 
    name: 'John',
    age: 32,
    employed: true
  }
  {
    name: 'Morris',
    age: 65,
    employed: false
  }
  {
    name: 'Alex',
    age: 55,
    employed: true
  }
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let forEachFamilyItem1 = family.forEach((item, index, array) => {
     console.log(item)
   })

物件陣列取值 forEach (2)

  • 【 Methods 】
    • Array.prototype.forEach()
  • 【 功能 】
    • 透過 forEach 取得 family 資料
    • 取出一家之主的名字、年齡
  • 【 Console 】
  姓名: John, 年齡: 32
  姓名: Morris, 年齡: 65
  姓名: Alex, 年齡: 55
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let forEachFamilyItem2 = family.forEach((item, index, array) => {
     let str = ''
     str += `姓名: ${item.name}, 年齡: ${item.age}`
     console.log(str)
   })

物件陣列取值 forEach (3)

  • 【 Methods 】
    • Array.prototype.forEach()
  • 【 功能 】
    • 透過 forEach 取得 family 資料
    • 取出一家之主的名字、年齡與幾個小孩及姓名
  • 【 Console 】
  姓名: John, 年齡: 32, 共有 2 小孩 ( Richard Susan )
  姓名: Morris, 年齡: 65, 共有 1 小孩( Eason )
  姓名: Alex, 年齡: 55, 共有 3 小孩( Tom Jeremy Sam )
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true,
       children: [
         {
           name: 'Richard',
           age: 7
         },
         {
           name: 'Susan',
           age: 5
         }
       ]
     },
     {
       name: 'Morris',
       age: 65,
       employed: false,
       children: [
         {
           name: 'Eason',
           age: 35
         }
       ]
     },
     {
       name: 'Alex',
       age: 55,
       employed: true,
       children: [
         {
           name: 'Tom',
           age: 27
         },
         {
           name: 'Jeremy',
           age: 25
         },
         {
           name: 'Sam',
           age: 22
         }
       ]
     }
   ]
   let forEachFamilyItem2 = family.forEach((item, index, array) => {
     let str = ''
     str += `姓名: ${item.name}, 年齡: ${item.age}, 共有 ${item.children.length} 小孩 ( `
     let items = item.children
     items.forEach(key => {
       str += key.name + ' '
     })
     str += ')'
     console.log(str)
   })

元素檢查 filter

  • 【 Methods 】
    • Array.prototype.filter()
  • 【 特性 】
    • 回傳條件為 true 的陣列
  • 【 Console 1 】
  [ 
    { 
      name: 'John',
      age: 32,
      employed: true
    },
    {
      name: 'Alex',
      age: 55,
      employed: true
    } 
  ]
  • 【 Console 2 】
  [
    {
      name: 'Morris',
      age: 65,
      employed: false
    },
    {
      name: 'Alex',
      age: 55,
      employed: true
    }
  ]
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let employedItems = family.filter((item, index, array) => {
     return item.employed === true
   })
   console.log(employedItems)

   let ageItems1 = family.filter((item, index, array) => {
     return item.age > 50
   })
   console.log(ageItems1)

元素檢查 find

  • 【 Methods 】
    • Array.prototype.find()
  • 【 特性 】
    • 如果檢測元素中有 1 個元素滿足條件，則回傳 true, 剩餘的元素不會再進行檢測
    • 如果没有符合條件的元素，則回傳 undefined
  • 【 Console 】
  { 
    name: 'Morris',
    age: 65,
    employed: false
  }
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let ageItems2 = family.find((item, index, array) => {
     return item.age > 50
   })
   console.log(ageItems2)

map

  • 【 Methods 】
    • Array.prototype.map()
  • 【 特性 】
    • 產生新陣列以存放回傳值，且新陣列長度等於原始陣列長度
    • 如不回傳，則回傳 undefined
  • 【 Console 1 】
  [ false, true, true ]

* 【 Console 2 】

  [ 'John 未滿 50 歲', 'Morris 滿 50 歲', 'Alex 滿 50 歲' ]
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let ageItems3 = family.map((item, index, array) => {
     return item.age > 50
   })
   console.log(ageItems3)

   let ageItems4 = family.map((item, index, array) => {
     if (item.age > 50) {
       return `${item.name} 滿 50 歲`
     } else {
       return `${item.name} 未滿 50 歲`
     }
   })
   console.log(ageItems4)

reduce

  • 【 Methods 】
    • Array.prototype.reduce()
  • 【 特性 】
    • 若在呼叫 reduce() 時
    • 有提供 initialValue，則 accumulator 將會等於 initialValue
    • 且 currentValue 會等於陣列中的第一個元素值
    • 若沒有提供 initialValue，則 accumulator 會等於陣列的第一個元素值
    • 且 currentValue 將會等於陣列的第二個元素值
  • 【 功能 】
    • 取出一家之主之最大年紀
  • 【 Console 】
  65
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let mapReduceItems = family.map(item => item.age)
      reduce((accumulator, currentValue, currentIndex, array) => {
       return Math.max(accumulator, currentValue)
   })
   console.log(mapReduceItems)

元素檢查 every

  • 【 Methods 】
    • Array.prototype.every()
  • 【 特性 】
    • 如果檢測元素中有 1 個元素不滿足條件，則回傳 false, 剩餘的元素不會再進行檢測
    • 如果所有元素都滿足條件，則回傳 true
  • 【 Console 】
  false
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let ageItems5 = family.every((item, index, array) => {
     return item.age < 35
   })
   console.log(ageItems5)

元素檢查 some

  • 【 Methods 】
    • Array.prototype.some()
  • 【 特性 】
    • 如果有 1 個元素滿足條件，则回傳 true, 剩餘的元素不會再進行檢測
    • 如果没有滿足條件的元素，则回傳 false
  • 【 Console 】
  true
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let ageItems6 = family.some((item, index, array) => {
     return item.age < 35
   })
   console.log(ageItems6)

擷取 slice

  • 【 Methods 】
    • Array.prototype.slice()
  • 【 特性 】
    • 第一個參數是要擷取的位置索引，第二參數表示要擷取到的結束位置，但是不包括結束位置
    • 當參數為負數時，將參數和陣列長度相加得到的正數作為實際的數值
    • 不會改變原始數值
  • 【 Console 1 】
  [ 
    { 
      name: 'Morris',
      age: 65,
      employed: false
    } 
  ]
  • 【 Console 2 】
  [ 
    { 
      name: 'Morris',
      age: 65,
      employed: false
    } 
  ]
  • 【 程式 】
   let family = [
     {
       name: 'John',
       age: 32,
       employed: true
     },
     {
       name: 'Morris',
       age: 65,
       employed: false
     },
     {
       name: 'Alex',
       age: 55,
       employed: true
     }
   ]
   let sliceItems1 = family.slice(1, 2)
   console.log(sliceItems1)

   let sliceItems2 = family.slice(-2, -1)
   console.log(sliceItems2)
Reference
GitHub
List of blogs
ALL RIGHTS RESERVED. COPYRIGHT © 2018. Designed and Coded by Makee.io