基本陣列操作

介紹一下陣列基本操作的幾個方法

建立陣列

javascript

const arr = [1,2,3,4,5];    
const arr = new Array(1, 2, 3, 4, 5);  
const arr = Array(1,2,3,4,5);

陣列長度

javascript

console.log(arr.length);  // 5

設定長度

javascript

const arr = new Array(5);

空陣列

javascript

const arr = [];

讀取其中一個元素，索引從零開始，對應第一個元素

javascript

console.log(arr[0]);  // 1

設定陣列長度可以操作陣列內元素，長度若為零。則輸入空陣列

javascript

arr.length = 0;
console.log(arr);  // []

Array.from() 可建立一個新的 Array 實體

1.從字串

javascript

Array.from('Hi');  // ["h", "i"]

2.從集合：集合會將集合內重複的元素剔除，可作分類使用

javascript

var s = new Set(['hi', 1, 1, 2]); 
Array.from(s);
console.log(s);  //["hi", 1, 2]

3.使用箭頭函式及 Array.from

Code

// 使用箭頭函式作為 map 函式來操作元素
Array.from([1, 2, 3], x => x + x);      
// [2, 4, 6]

其它用法可參考：Array.from()

迭代(讀取每一個值，然後用同樣的方式處理每一個值)

for 迴圈取陣列元素

javascript

const arr = [1,2,3,4,5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 依序輸出 1 2 3 4 5 
}
// 另一種寫法
let arr = [1, 2, 3, 4, 5];
for (let index in arr) { 
    console.log(arr[index]); 依序輸出 1 2 3 4 5
}

foreach：將陣列內每個元素，都傳入並執行指定函式一次。

javascript

// 取陣列中大於 3 的數字
const arr = [1, 2, 3, 4, 5];
let arr1 = [];
arr.forEach((value) => {
if (value > 3){
  arr1.push(value);
}
});
console.log(arr3);    // [4,5]

方法

push()：新增元素

javascript

const arr = [1,2,3,4,5]  
arr.push(6); // [1, 2, 3, 4, 5, 6]

pop()：取出陣列最後一個元素並從陣列移除

javascript

const arr = [1,2,3,4,5];
let el = arr.pop(); // el = 5
console.log(arr); //  [1,2,3,4]

concat()：合併兩個陣列，並把新的陣列返回

javascript

var a1 = [1, 2];
var a2 = a1.concat(['a', 'b']);
console.log(a2); // 1,2,a,b

join()：把所有的陣列元素合併成字串

javascript

var a = ['Hello', 'world'];
console.log(a.join('-')); // "Hello-world"
console.log(a.join('')); // "Helloworld"

reverse()：反轉陣列元素的順序至適當的位置

javascript

const arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);  // [5, 4, 3, 2, 1]

ps.反轉字串應用

javascript

const str = 'Hello';
// split 將字串以指定的分隔符號來分割 
str1 = str.split('').reverse().join('');
console.log(str1);     // olleH

shift()：取回陣列的第一個元素並移除

javascript

const arr = [1,2,3,4,5];
let a = arr.shift();
console.log(a)    // 1
console.log(arr); // [2, 3, 4, 5]

unshift()：在陣列的開頭處加入一個以上的元素

javascript

const arr = [1,2,3,4,5];
arr.unshift(6)    
console.log(arr); // [6, 1, 2, 3, 4, 5]

slice(start_index, upto_index)：回傳部分陣列

javascript

const arr = [1,2,3,4,5];
arr.slice(1,4)  // arr[1] 到 arr[3] 之間的元素
console.log(arr); // [2, 3, 4]

splice(start, deleteCount, item1, … )：刪除既有元素／或加入新元素來改變一個陣列的內容

start：開始位置
deleteCount：刪除幾個元素(0 就是不刪除)
item1：要加入的元素

javascript

const arr = [1,2,3,4,5];
let removed = arr.splice(1, 0, 3)
console.log(removed);  // []
console.log(arr);      // [1, 3, 2, 3, 4, 5]

let removed2 = arr.splice(1, 2, 3)
console.log(removed2); // [3, 2]
console.log(arr);      // [1, 3, 3, 4, 5]

sort()：排序陣列的元素，預設的排序順序是根據字串的 Unicode 編碼位置

javascript

const arr = ['bob', 'alice', 'jack'];
arr.sort();  
console.log(arr); // ["alice", "bob", "jack"]

ps.也可以用函式來決定如何排序(陣列數字排列要用這種方式)

javascript

const arra = [2,6,1,8,10,32];
// 數字排列小到大
  arra.sort(function(a, b){
  return a - b;
  });
console.log(arra);     // [1, 2, 6, 8, 10, 32]
// 數字排列大到小
  arra.sort(function(a, b){
  return b - a;
  });
console.log(arra);     //  [32, 10, 8, 6, 2, 1]

ps.陣列數字找大小：用展開運算子將陣列展開成個別值就可以用函式快速找出

javascript

// 陣列數字找大小
const arra = [2,6,1,8,10,32];
let max = Math.max(...arra);
let min = Math.min(...arra);
console.log(max, min);   // 32, 1

indexOf()：尋找陣列中是否有符合的元素，回傳 -1，表示沒有，回傳正整數表示在那個位置

javascript

const arr = [1,2,3,4,5];
console.log(arr.indexOf(3));  // 2

ps.jQuery 用法

javascript

const arr = [1,2,3,4,5];
console.log($.inArray(2, arr));  // 1

includes：陣列中尋找指定元素，回傳 true(找到)或 false(沒找到)

javascript

const arr = [1,2,3,4,5];
console.log(arr.includes(2));  // true

filter()：回傳符合條件的元素，得到一個新陣列

javascript

const arr = [1,2,3,4,5];
let arr1 = arr.filter((value) => {
  return value > 3;
  });
console.log(arr1);   // [4,5]

indexOf 與 $.map 使用，尋找是否有符合的物件

javascript

const people = [
  { name: 'Peter', age: 10 },
  { name: 'John', age: 3 },
  { name: 'Nina', age: 15 }
];
//find object in list
let result = $.map(people, function(item, index) {
  return item.name
}).indexOf('Nina');
console.log(result); //2

map()：原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合成為一個新陣列，常用對陣列元素做加工

javascript

const arr = ['a', 'b', 'c'];
let arr1 = arr.map((value) => {
    return value.toUpperCase() ;
  });
console.log(arr1);   // ["A", "B", "C"]

every()：檢查陣列是否全部符合條件，僅會回傳一個值 true or false

javascript

const arr = [1,2,3,4,5];
let arr1 = arr.every((value) => {
  return value >= 1;
  });
console.log(arr1);   // true

some()：檢查陣列元素其中是否有符合條件，僅會回傳一個值 true or false

javascript

const arr = [1,2,3,4,5];
let arr1 = arr.some((value) => {
  return value === 3;
  });
console.log(arr1);   // true

reduce()：陣列變成個別值，傳入函式內處理。數值加總是常見做法

javascript

const arr = [1,2,3,4,5];
// 處理每個元素後等待回傳結果，第一次處理時代入初始值 0
let result = arr.reduce((prev, value) => {
// 與之前的數值加總，回傳後代入下一輪的處理
  return prev + value;
  }, 0);  // 初始值為零
console.log(result);   // 15

ps.陣列扁平化，將複雜的陣列變成一維

javascript

const myArr = [
    [ 1, 2 ],
    [ 3, 4, 5 ],
    [ 6, 7, 8 ]
];
// 將所有元素都與之前代入的陣列相接起來，第一次處理時代入初始值空陣列
let newArr = myArr.reduce(function(arr, element) {
    // ex: [ 1, 2 ].concat([ 3, 4, 5 ])
    return arr.concat(element);
}, []);
console.log(newArr); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

// 1.將空陣列與 [ 1, 2 ] 相接起來後回傳
// 2.將被代入的 [ 1, 2 ] 與 [ 3, 4, 5 ] 相接起來後回傳
// 3.將被代入的 [ 1, 2, 3, 4, 5 ] 與 [ 6, 7, 8 ] 相接起來後回傳

ps.對陣列的內容進行統計

javascript

const myArr = [
    'C/C++',
    'JavaScript',
    'Ruby',
    'Java',
    'Objective-C',
    'JavaScript',
    'PHP'
];

// 計算出每種語言出現過幾次
let langStatistics = myArr.reduce(function(langs, langName) {
    // hasOwnProperty() 回傳物件是否有該屬性的布林值。
    if (langs.hasOwnProperty(langName)) { 
        langs[langName]++
    } else {
        langs[langName] = 1;
    }
    
    return langs;
}, {});
console.log(langStatistics);
// { 'C/C++': 1, 'JavaScript': 2, 'Ruby': 1, 'Java': 1, 'Objective-C': 1, 'PHP': 1 }

另一種寫法

Code

countNum(arr) {
      const temp = arr.reduce((obj, item) => {
        // in 檢查物件內是否有指定屬性
        if (item in obj) {
          // 若有此屬性，則值加 1
          obj[item]++
        } else {
          // 新增 item 屬性並賦值 1
          obj[item] = 1
        }
        return obj
      }, {})
      console.log(temp)
    }

ps. Object 的形式的處理

javascript

const data = {
    'Fred': 1,
    'Leon': 2,
    'Wesley': 3,
    'Chuck': 4,
    'Denny': 5
};

// 使用 Object.keys() 取得包含所有 key 的陣列
let result = Object.keys(data).reduce(function(prev, name) {
    // 利用 key 取得原始物件中的值，然後加總
    return data[name] + prev;
}, 0);

console.log(result); // 15

// Object.keys()：回傳一個由指定物件所有可列舉之屬性(key)組成的陣列
Object.keys(data) // ["Fred", "Leon", "Wesley", "Chuck", "Denny"]
data[Fred] // 1

map() 和 reduce() 結合使用

javascript

const arr = [1,2,3,4,5,6,7,8,9,10];
let result = arr.map((value) => {
  if (value > 5) {
    return 5;
  }
    return value;
 })
.reduce((prev, value) => {
  return prev + value;
  }, 0);  // 初始值為零
console.log(result);   // 40

參考資料
https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/
http://fred-zone.blogspot.com/2017/01/javascript-mapreduce.html
https://cythilya.github.io/2017/05/08/javascript-find-item-in-an-array/
https://developer.mozilla.org/zh-TW/