[Day 23] JS - 阵列 (Array) 常用方法介绍

前言

JS的基础观念介绍告一段落，接下来将会有一些JS的基础语法介绍、还会有过去线上学习实作专案分享，今天来介绍JS 阵列的基础与使用方式，以呼应明天的实作专案～

学习资源

1. MDN - Array，从 MDN 可以查阅到很多阵列的基础用法。

阵列

• 阵列用 => 中括号 [ ]
• 阵列的计算是从零开始（取阵列的索引）
  • 呼应for 回圈，从0开始，从索引第一个

const arr = [111, 222, 333]
    console.log(arr);
    console.log(arr[1]); //222
    //呼应for 回圈，从0开始，从索引第一个

阵列基本操作

1. push():添加一个或多个元素至阵列的末端

const score = [1, 3, 4, 5, 100];
  score.push(1000) ;
console.log(score); //[1, 3, 4, 5, 100,1000]

2. unshift(): 加入阵列最前面

  score.unshift(88) ;
console.log(score); //[88, 1, 3, 4, 5, 100,1000]

既然有加入阵列，就也会有去除阵列内的资料

3. pop():从最末端抽走阵列值

 score.pop() ; 
console.log(score); //[88, 1, 3, 4, 5, 100]
console.log(score.pop()); //1000

4. shift: 移除第一个阵列值

  score.shift() ; 
console.log(score); //[ 1, 3, 4, 5, 100]
console.log(score.shift()); //88

5. slice:切完後，原本的阵列将不会被修改，会回传新阵列

• 复制开始与末点（最後一个不包含）中的内容

const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    //用索引
    console.log(arr.slice(2, 4));//不包含最後一个
    console.log(arr.slice(2, 5));

• 也可使用slice()来复制原本的阵列

const arr2 = arr.slice();
const arr3 = arr.slice(0);

console.log(arr2); //['a', 'b', 'c', 'd', 'e', 'f', 'g']
console.log(arr3); //['a', 'b', 'c', 'd', 'e', 'f', 'g']

6. splice():可以加入、删除阵列中的元素

• 注意此方法，会更改到原本的阵列
• splice(索引位置, 数量, 要加入到阵列的元素)

const arr=['Ben', 'Kyle', 'May', 'Shin', 'Mikle'];
arr.splice(1, 0, 'Fan'); //从索引值1後面，插入
console.log(arr); //['Ben', 'Fan', 'Kyle', 'May', 'Shin', 'Mikle']

• 索引值3 'May' 的後面1个值 'Shin'，被取代为 'Eson'

arr.splice(3, 1, 'Eson'); 
console.log(arr); ['Ben', 'Fan', 'Kyle', 'May', 'Eson', 'Mikle']

• 删除索引位置为 2（'Kyle'），并且删除数量 2 的阵列值，因此结果就删除了 'May', 'Eson'

array.splice(2, 2);
console.log(array); // ['Ben', 'Fan', 'Kyle', 'Mikle']

介绍阵列处理方法

6. filter(): 用於搜寻符合条件的资料

const Name=['Ben', 'Patricia', 'May', 'Shin', 'Mikle'];

const result = words.filter( function(item, index, array){
  return item.length > 4;       // 取得长度大於4
});

console.log(result); // ['Patricia',  'Mikle']

7. map(): 让阵列中每个元素执行该函式的任务，最後将执行结果回传新阵列

const array1 = [1, 4, 9, 16];
const map1 = array1.map(function (item, index, array){
  return item * 2
});

console.log(map1);
//  [2, 8, 18, 32]

8. forEach()

let data=[30, 40, 100];
let total=0;
data.forEach(function(item,index,arry){
    total+=item;
})

console.log(total); //170

注意：let宣告位置

• let total=0;，放在回圈内会造成没有累加的效果

forEach()和 map() 差异

forEach() 会修改原本的阵列，而map() 方法可以回传一个新的阵列，并保有原本的旧阵列，另外 forEach() 并不会回传任何东西，所以写在 return 里的东西不会有作用

参考资料
JavaScript 阵列处理方法