JS 紀錄4 - Array

發表於 | 更新於 | 分類於 | 評論數：

JavaScript Array 紀錄

Array 的方法

判別是否為陣列

  • isArray( ) - 內建 typeof 去檢查陣列得到 “object” 的結果 回傳 true
  • toString.call - 所有情況都可以正確判斷。判斷陣列以外的其他特別物件，缺點是效率最差

Properties (屬性)

  • length - 回傳 Array 元素長度(成員個數)

Search(搜尋)

  • includes( ) - 判斷元素有沒有在 Array 裡面 回傳 true | false
  • indexof( ) - 回傳第一個被找到的元素 index；若不存在則回傳 -1
  • lastIndexof( ) - 回傳最後一個被找到的元素 index；若不存在則回傳 -1

Operation(操作)

  • pop( ) - 移除陣列最後面的值，回傳 被移除掉的值
  • push( ) - 增加一個 或 多個元素至陣列尾端 ，回傳 陣列的新 length
  • shift( ) - 移除陣列最前面的值，回傳 被移除掉的值
  • unshift( ) - 增加陣列最前面的值，回傳 陣列的新 length
  • slice( ) - 用淺拷貝(shallow copy)的方式分割元素出子陣列，回傳一個新 Array (舊 Array 不變動)
  • splice( ) - 藉由刪除並／或增加新元素來改變陣列內容，回傳一個改變後的 Array
  • concat( ) - 合併兩個或多個陣列。回傳一個新 Array (舊 Array 不變動)
  • join( ) - 把所有陣列裡的值加上 separator(符號)，回傳一個字串

Iteration (迭代 callback)

  • forEatch( ) - 不會return任何東西 & 中斷，單純執行 function 改變原本陣列裡的事
  • find( ) - 回傳一個值，且是 第一個 抓到條件為 true 的值，否則回傳 undefined
    • 搜尋陣列中符合條件的物件
  • findIndex( ) - 尋找符合的元素回傳其 index，若沒有符合的對象則回傳 -1
  • filter( ) - 回傳一個 Array，只要條件為 true 的所有值 or Array，適合拿來搜尋
  • map( ) - return 後方為 true 運算後的值 or 新 Array，用在判斷回傳 true | false
  • some( ) - 回傳一個值 false | true，只要部分符合就回傳 true，只要一找到相符的值就跳出
  • every( ) - 回傳一個值 false | true，需要全部符合才回傳 true

Iteration (迭代 callback) - Special

  • reduce( ) - 由 callback function 前後值兩相運算，然後縮減陣列中的元素，最終回傳一個值
    • 收到前一個回傳的值供下一個物件使用，很適合用在累加與比對上
  • rightReduce( ) - 陣列中每一個值（由右至左）傳入 callback function，最終回傳一個值

Order(排序)

  • sort( ) - 將 Array 排序，排序順序是根據字串的 Unicode 編碼位置（code points）而定
    • 排序過的陣列，不是原陣列的 copy，而是直接更改原陣列
    • localeCompare - 判斷在目前地區設定中兩個字串是否相等
  • reverse( ) - 反轉後的 Array

Array 方法的效果

判別是否為陣列

  • 初始值
1
const ary = ['red','green','blue']
  • Array.isArray(obj)
    • Obj - 要檢查的物件
1
2
3
4
Array.isArray(ary)        // true
Array.isArray('foobar')   // false
Array.isArray(undefined)  // false
Object.prototype.toString.call(variable) === '[object Array]'

Properties (屬性)

  • Array.isArray
    • 回傳 Array 元素長度
1
ary.length  // 6

Method (方法)

Search(搜尋)

  • 初始值
1
const ary = [9,2,5,3,7,6,1]
  • Array.prototype.includes()(searchElement[, fromIndex]) -> (搜索元素,[元素的索引])
    • 判斷陣列是否包含特定的元素 回傳 true | false
1
2
3
4
5
let a = ary.includes(9)
let b = ary.includes(0)

console.log(a) // true
console.log(b) // false
  • Array.prototype.indexOf()(searchElement[, fromIndex]) -> (搜索元素,[元素的索引])
    • 回傳第一個被找到的元素 index；若不存在則回傳 -1
1
2
3
4
5
6
const indexArray = ary.indexOf(3)
const notArray = ary.indexOf(8)

console.log(indexArray) // 3
console.log(notArray)   // -1
console.log(ary)        // [9,2,5,3,7,6,1]
  • Array.prototype.lastIndexOf()(searchElement[, fromIndex]) -> (搜索元素,[元素的索引])
    • 回傳最後一個被找到的元素 index；若不存在則回傳 -1
1
2
3
4
5
6
const indexArray = ary.lastIndexOf(7)
const notArray = ary.lastIndexOf(8)

console.log(indexArray) // 4
console.log(notArray)   // -1
console.log(ary)        // [9,2,5,3,7,6,1]

Operation(操作)

  • 初始值
1
const color = ['red','blue','yellow','green']
  • Array.prototype.pop()
    • 移除陣列最後一個元素 
1
2
3
const newColor = color.pop()
console.log(newColor)  // "green"
console.log(color)     // ["red", "blue", "yellow"]
  • Array.prototype.push()
    • 增加一個 或 多個元素至陣列尾端
1
2
3
const newColor = color.push('black’)
console.log(newColor)  // 5
console.log(color)     // ["red", "blue", "yellow", "green", "black"]
  • Array.prototype.shift( )
    • 移除陣列最前面的值
1
2
3
const newColor = color.shift()
console.log(newColor) // "red"
console.log(color)    // ["blue", "yellow", "green"]
  • Array.prototype.unshift(element1[, …[, elementN]]) -> (元素1,[元素N])
    • 增加陣列最前面的值
1
2
3
const newColor = color.unshift('black','white’)
console.log(newColor)  // 6
console.log(color)     // ["black", "white", "red", "blue", "yellow", "green"]
  • Array.prototype.slice([begin[, end]]) -> (元素開始位置,[元素結束位置])
    • 用淺拷貝(shallow copy)的方式分割出元素值陣列，回傳一個新 array (舊 array 不變動)

title

1
2
3
4
5
const newColor = color.slice(-1)
const newColor2 = color.slice(1,3)
console.log(newColor)   // ["green"]
console.log(newColor2)  // ["blue", "yellow”]
console.log(color)      // ["red", "blue", "yellow", "green"]
  • Array.prototype.splice(start[, deleteCount[, item1[, item2[, …]]]]) -> (元素開始位置,[刪除元素數量],[增加的元素])
    • 藉由刪除並｜增加新元素來改變陣列內容，回傳一個改變後的 array
    • return 分割出元素值陣列
1
2
3
4
5
6
7
8
9
const newColor = color.splice(-1)
const newColor2 = color.splice(0,2)
const newColor3 = color.splice(0,3,'c’) // 刪除後增加元素
console.log(newColor)  // ["green”]
console.log(color)     // ["red", "blue", "yellow"]
console.log(newColor2) // ["red", "blue"]
console.log(color)     // ["yellow", "green"]
console.log(newColor3) // ["red", "blue", "yellow"]
console.log(color)     // ["c", "green"]
  • Array.prototype.concat(value1[, value2[, …[, valueN]]]) -> (元素1[, 元素2[, …[, 元素N]]])
    • 合併兩個或多個陣列，回傳一個新 array (舊 array 不變動)
1
2
3
const newArray = color.concat(['1','4','5','3'])
console.log(newArray) // ["red", "blue", "yellow", "green", "1", "4", "5", "3"]
console.log(color)    // ["red", "blue", "yellow", "green"]
  • Array.prototype.join([separator]) -> (符號)
    • 把所有陣列裡的值加上 separator(符號)，回傳一個字串
1
2
3
const newArray = color.join("-")
console.log(newArray) // "red-blue-yellow-green"
console.log(color)    // ["red", "blue", "yellow", "green"]

Iteration (迭代 callback)

  • (function callback(currentValue[, index[, array]]) { // your iterator }[, thisAge])
    • 項目屬姓名可不同 順序要相同
  • callback 函式將會把 Array 中的每個元素作為參數，帶進 callback 函式裡，每個元素各執行一次，接收三個參數:
    • currentValue(必須) - 原陣列目前所迭代的元素(當前變數) - 元素屬性值
    • index(選用) - 原陣列目前所迭代的元素 index(當前變數的index) - 元素index
    • array(選用) - 呼叫 forEach() 方法的陣列，也就是上面語法中的 array - 元素array
    • thisAge(選用) - 執行 callback function 時被當作 this 的物件
  • 初始值
1
2
3
4
5
6
7
8
9
const airport = [
  {go:'japan',back:'taiwan',goTime:'1200',backTime:'1429'},
  {go:'Italy',back:'New Zealand',goTime:'1260',backTime:'2349'},
  {go:'Rome',back:'Austria',goTime:'0534',backTime:'1229'},
  {go:'Germany',back:'taiwan',goTime:'1670',backTime:'1529'},
  {go:'Singapore',back:'Singapore',goTime:'1980',backTime:'2429'},
  {go:'Canada',back:'japan',goTime:'1230',backTime:'2349'},
  {go:'United States',back:'Rome',goTime:'1748',backTime:'2158'}
]
  • Array.prototype.forEach(currentValue, currentIndex, array[, thisArg])
    • 不會return任何東西，單純執行 function 改變原本陣列裡的事
    • forEach( ) 不會為沒有值的數組元素執行函數
    • forEach 這類型的方法無法中斷，如果想要中斷迴圈的執行會建議使用傳統的 for…loop
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let air = airport.forEach(function(i){
  return i.go
})
console.log(air) // undefined, 不會 return 東西

/*----------------------------------
airport.forEach(function(i){
  i.goTime = 100
})
console.log(airport) // goTime 都變為 100

/*----------------------------------
function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 空值沒用到會跳過
[2, 5, , 9].forEach(logArrayElements);
/* 
"a[0] = 2"
"a[1] = 5"
"a[3] = 9"
*/
  • Array.prototype.find(currentValue, currentIndex, array[, thisArg])
    • 回傳一個值，且是 第一個 抓到條件為 true 的值，否則回傳 undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const go = airport.find(function(item){
  return item.backTime > 1400
})
console.log(go)
//[object Object] {
  back: "taiwan",
  backTime: "1429",
  go: "japan",
  goTime: "1200"
}

/*----------------------------------
const j = airport.find(function(item){
})
console.log(j) // undefined
  • Array.prototype.findIndex(currentValue, currentIndex, array[, thisArg])
    • 尋找符合的元素回傳第一個其 index，若沒有符合的對象則回傳 -1
1
2
3
4
5
6
7
8
9
const go = airport.findIndex(function(item){
  return item.backTime > 2400
})
console.log(go) // 4

/*----------------------------------
const j = airport.findIndex(function(item){
})
console.log(j) // -1
  • Array.prototype.filter(currentValue, currentIndex, array[, thisArg])
    • 回傳一個 array，只要條件為 true 的就會包含在此陣列，適合拿來搜尋符合條件的參數
    • 是否滿足特定條件並返回一個新 array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const go = airport.filter(function(item){
  return item.backTime > 1800
})
console.log(go)
/*
[{back: "New Zealand",backTime: "2349",go: "Italy",goTime: "1260"},
 {back: "Singapore",backTime: "2429",go: "Singapore",goTime: "1980"}, 
 {back: "japan",backTime: "2349",go: "Canada",goTime: "1230"},
 {back: "Rome",backTime: "2158",go: "United States",goTime: "1748"}]
*/

/*----------------------------------
const j = airport.filter(function(item){
})
console.log(j) // []
  • Array.prototype.map(currentValue, currentIndex, array[, thisArg])
    • 將原陣列的每一個元素經由 callback function 運算後所回傳的新 array
    • 用 ES6 ‘=>’ 不用加 return
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const go = airport.map(function(item){
  return item.backTime * 3
})
console.log(go) // [4287, 7047, 3687, 4587, 7287, 7047, 6474]

/*----------------------------------
const j = airport.filter(function(item){
})
console.log(j) // []

/*----------------------------------
const mapTime = airport.map(a => a.goTime)
console.log(mapTime) // ["1200", "1260", "0534", "1670", "1980", "1230", "1748”]

/*----------------------------------
const air = airport.map(num => num.goTime*2).filter(num => num > 2100)
console.log(air) // [4287, 7047, 3687, 4587, 7287, 7047, 6474]
  • Array.prototype.some(currentValue, currentIndex, array[, thisArg])
    • 回傳一個值 false | true，只要一找到相符的值就跳出
1
2
3
4
const back = airport.some(function(i){
  return i.back = 'taiwan'
})
console.log(back) // true
  • Array.prototype.every(currentValue, currentIndex, array[, thisArg])
    • 回傳一個值 false | true，需要全部符合才回傳 true
1
2
3
4
const back = airport.every(function(i){
  return i.goTime > 1304
})
console.log(back) // fales

Iteration (迭代 callback) - Special

  • reduce( ) - (function callback([accumlator, currentValue, index, array]),[initialValue])
  • rightReduce( ) - (function callback([previousValue, currentValue, index, array]),[initialValue])
  • callback 函式將會把 Array 中的每個元素作為參數，帶進 callback 函式裡，每個元素各執行一次，接收四個參數:
    • accumlator
      • 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值
      • 暫時存放回呼函式回傳值的累加器(累加器是上一次呼叫後，所回傳的累加數值)
      • 第一個元素從 initialValue 開始，沒有提供 initialValue，則 accumulator 會等於陣列的第一個元素值，且 currentValue 將會等於陣列的第二個元素值
    • currentValue - 原陣列目前所迭代的元素(當前變數) - 項目屬性值
    • index(選用) - 原陣列目前所迭代的元素 index(當前變數的 index) - 項目 index
      • 若有傳入 initialValue，則由索引 0 之元素開始，若無則自索引 1 之元素開始
    • array(選用) - 呼叫 reduce() 方法的陣列 - 項目 array
    • initialValue - 初始值
    • previousValue - 最後一個元素從 initialValue 開始．若沒有提供 initialValue，則 previousValue 會等於陣列的最後一個元素值，且 currentValue 將會等於陣列的倒數第二個元素值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let people = [
  {
    name: '上校薯條',
    money: 500
  },
  {
    name: '巨無霸漢堡',
    money: 3000
  },
  {
    name: '完美薯條',
    money: 60000
  }
];
/*----------------------------------
var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){

// 分別為前一個回傳值, 目前值, 當前索引值
  console.log(accumulator, currentValue, currentIndex);
  return accumulator + currentValue.money;  // 與前一個值相加
}, 0);                                      // 傳入初始化值為 0

console.log(reducePlus);                    // 總和為 63500


// 比較最大值
let max = people.reduce(function(prev,item){
    console.log(prev,item.money)
/*
0    500
500  3000
3000 60000
*/
    return Math.max(prev,item.money) // 與前一個值比較
},0)
console.log('large',max)             // large 60000
  • 初始值
1
let num = [4,2,65]
  • Array.prototype.reduce(accumulator, currentValue, currentIndex, array [, initialValue])
    • 由 callback function 前後值兩相運算，然後縮減陣列中的元素，最終回傳一個值
1
2
3
4
let a = num.reduce(function(accumulator, currentValue, currentIndex){
      return accumulator+currentValue
},0)
console.log(a) // 71
callback accumulator currentValue currentIndex array return value
First call 0 4 0 [4,2,65] 4
Second call 4 2 1 [4,2,65] 6
Third call 6 65 2 [4,2,65] 71
  • initialValue - 初始值變更
1
2
3
4
let a = num.initialValue(function(accumulator, currentValue, currentIndex){
      return accumulator+currentValue
},100)
console.log(a) // 171
callback accumulator currentValue currentIndex array return value
First call 100 4 0 [4,2,65] 104
Second call 104 2 1 [4,2,65] 106
Third call 106 65 2 [4,2,65] 171
  • Array.prototype.reduceRight(accumulator, currentValue, currentIndex, array [, initialValue])
    • 陣列中每一個值（由右至左）傳入callback function，最終回傳一個值
1
2
3
4
let a = num.reduceRight(function(accumulator, currentValue, currentIndex){
      return accumulator+currentValue
},0)
console.log(a) // 71
callback accumulator currentValue currentIndex array return value
First call 0 65 0 [4,2,65] 65
Second call 65 2 1 [4,2,65] 67
Third call 67 4 2 [4,2,65] 71
  • initialValue - 初始值
1
2
3
4
let a = num.initialValue(function(accumulator, currentValue, currentIndex){
      return accumulator+currentValue
},100)
console.log(a) // 171
callback accumulator currentValue currentIndex array return value
First call 100 65 0 [4,2,65] 165
Second call 165 2 1 [4,2,65] 167
Third call 167 4 2 [4,2,65] 171

map filter reduce 差異 (這張好懂)

  • map - 就像每一個基本食物素材加工後輸出我想要的樣子
  • filter - 選我想要吃的
  • reduce - 把這些食物吃完做後的結果
  • 引用 François-Guillaume Ribreau

title

Order(排序)

  • 初始值
1
const num = [40, 1, 5, 200]
  • Array.prototype.sort(compareFunction)
    • 將 array 排序，排序順序是根據字串的 Unicode 編碼位置（code points）而定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const item = num.sort(function(i){
  return i
})
console.log(item) // [200, 5, 1, 40]

// 照數字大小排列
let b = num.sort(CompareForSort);
console.log(b); // [1, 5, 40, 200]

function CompareForSort(first, second)
{
    if (first == second) // 回傳 0，則 a 與 b 不會改變彼此的順序
        return 0;
    if (first < second) // 回傳 -1，則 b 在 a 前面
        return -1;
    else
        return 1;     // 回傳 1，則 a 在 b 前面
}
  • Sort 中文字排序 - 用 string的方法 得到中文排序
  • String.prototype.localeCompare(compareString[, locales[, options]])
    • string(必要) - 要比較的第一個字串
    • gtggtggggtgffddfdlocaleCompare - 判斷在目前地區設定中兩個字串是否相等
    • compareString(必要) - 要比較的第二個字串
    • locales(選用) - 語言環境
1
2
3
4
5
6
7
8
9
10
11
// 初始值
const fruitArray = ['蘋果', '芒果', '櫻桃', '香蕉', '大香蕉', '小香蕉’ ]

let s = fruitArray.sort()
console.log(s) // ["大香蕉", "小香蕉", "櫻桃", "芒果", "蘋果", "香蕉"]

//按筆劃從小到大排序
fruitArray.sort(function(a,b){
  return a.localeCompare(b,'zh-Hans-TW-u-co-stroke')
})
console.log(fruitArray) // ["大香蕉", "小香蕉", "芒果", "香蕉", "蘋果", "櫻桃"]
  • Array.prototype.reverse()
    • 反轉後的陣列
1
2
3
4
var a = ['one', 'two', 'three'];
var reversed = a.reverse(); 
console.log(a);        // ['three', 'two', 'one']
console.log(reversed); // ['three', 'two', 'one']

統整

Method Array data return 作用
Search(搜尋) — — —
includes( ) 不變 true ｜ false 搜尋陣列中有沒有要找的元素值(boolean)
indexof( ) 不變 第一個元素 index / 不存在則回傳 -1 回傳第一個被找到的元素 index
lastIndexof( ) 不變 最後一個元素 index / 不存在則回傳 -1 回傳最後一個被找到的元素 index
Operation(操作) — — —
pop( ) 改變 一個值 移除 Array 尾端的值
push( ) 改變 新 length 增加一個 或 多個元素到 Array 尾端
shift( ) 改變 一個值 移除 Array 最前端的值
unshift( ) 改變 新 length 增加值到 Array 最前端
splice( ) 改變 新 Array 在一定範圍分割出要的 Array 值 or 增加 Array 值
slice() 不變 新 Array 在一定範圍分割出要的 Array 值
concat( ) 不變 新 Array 合併兩個 or 多個 Array
join( ) 不變 string 合併符號產生 String
Iteration (迭代 callback) — — —
forEatch( ) 改變 不會 return 任何東西 無法 break 或者 return false 中斷，會跳過空元素
find( ) 不變 一個值 找到一個符合條件的元素值
findIndex( ) 不變 index 找到一個符合條件的元素值 index
filter( ) 不變 值 or Array return 後方為 true 符合條件的所有值 or Array
map( ) 不變 值 or Array return 後方為 true 運算後的值 or 新 Array，用在判斷回傳 true｜false
some( ) 不變 false｜true 條件部分符合
every( ) 不變 false｜true 條件全部符合
Iteration (迭代 callback) - Special — — —
reduce( ) 不變 一個值 接續上一個 or 尾端初始值與元素值進行計算
rightReduce( ) 不變 一個值 接續上一個 or 尾端初始值與元素值從右邊開始進行計算
Order(排序) — — —
sort( ) 改變 新 Array 將 Array 排序(依照 Unicode 編碼位置)
reverse( ) 改變 新 Array 反轉元素
0%