JAVASCRIPT 筆記 - array

J
J JAVASCRIPT

這篇記錄一下目前用到array的語法，還有可能會搞混的地方，順便複習一下python!

目錄

array建立的方式
  1. 直接建立
  2. 先建一個空array，逐步賦值
  3. 建立空array同時給值
  4. Array.from(arrayLike, mapFn)

arrayLike:例如字串, array, 等可迭代的物件

//1
let arrname = [ 'apple', 'banana', 'cake', 'fish', 'pineapplle', 'orange']


//2
let arrname = newArray()
arrname[0] = 'apple'
arrname[1] = 'banana'

//3
let arrname = newArray('apple', 'banana', 'cake', 'fish', 'pineapplle', 'orange')

//4
const newArray = Array.from(arrayLike, mapFn)
const newArray = Array.from({ length: 5 }, (_, i) => i + 1)
//第一個參數 _ 代表每個元素的值，但在這裡沒有使用（所以用 _ 命名，表示忽略這個參數）。
//第二個參數 i 是索引值（從 0 開始）。
//箭頭函數的結果是 i + 1，生成一個從 1 開始的數字序列。
console.log(newArray)
//[1,2,3,4,5]

 

取出array中特定位置的值

 

let arrname = [ 'apple', 'banana', 'cake', 'fish', 'pineapplle', 'orange']
console.log(arrname[1])
//banana
//i從0開始數
array的型別

 

let arrname = [ 'apple', 'banana', 'cake', 'fish', 'pineapplle', 'orange']
typeof(arrayname)
//object

note: python的話是使用type(arrayname)會傳回list, array,...

arr.pop()

移除最後一個值

const nums = [0, 1, 2, 3, 4]
nums.pop()
console.log(nums)
// [0, 1, 2, 3]
const lastNum = nums.pop console.log(lastNum)
//回傳拿掉的值 4

 

arr.push()

從最後面加入數值

const nums = [0, 1, 2, 3, 4]
nums.push(5)
console.log(nums)
// [0, 1, 2, 3, 4,5]
arr.shift()

拿掉第一個值

const nums = [0, 1, 2, 3, 4]
nums.shift() 
console.log(nums)
// [1, 2, 3, 4]

const firstNum= nums.shift
console.log(firstNum)
//回傳拿掉的值 0
arr.unshift()

加入成為第一個值

const nums = [0, 1, 2, 3, 4]
nums.unshift(0.5)
console.log(nums)
// [0.5, 1, 2, 3, 5]
arr.slice(start,end)
nums = [0,1,2,3,4]
nums.slice(2)
//[2,3,4]
//從第2個開始且直接到最後
nums.slice(1,3)
//[1,2]
nums.slice(-3)
//[2,3,4]

 

arr.splice(start,deleteCount,items)

指定刪除的位置與數目，並且插入值
deleteCount小於/等於0，沒有元素刪除

nums = [0,1,2,3,4]
nums.splice(2,0,99)
//[0,1,99,2,3,4]
//在第2個位置插入99

nums.splice(2,2)
//nums = [0,1,4]

nums.splice(2,2,99)
//nums = [0,1,99,4]

 

arr.concat()

合併兩個array

let arr1 = [ 'apple', 'banana', 'cake', 'fish']

let arr2 =['pineapplle', 'banana','orange']

arr1.concat(arr2)

//[ 'apple', 'banana', 'cake', 'fish', 'pineapplle','banana', 'orange']
 
let arr1 = [ 'apple', 'banana', 'cake', 'fish']

let arr2 =['pineapplle', 'banana','orange']

arr1.concat(arr2)

//[ 'apple', 'banana', 'cake', 'fish', 'pineapplle','banana', 'orange']
各種查找方式

 

[ 'apple', 'banana', 'cake', 'fish', 'pineapplle','banana', 'orange']
arr1.includes('cake')
//True

arr1.indexOf('cake')
//2

arr1.lastindexOf('banana')
//5

arr1.join('-')
//apple-banana-cake-fish-pineapplle-banana-orange

arr1.toString()
//apple,banana,cake,fish,pineapplle,banana,orange
Array.filter(callbackFn)
arr.filter((word) => word.length > 6);
["pineapplle"]

function isBigEnough(word) {
  return word.length > 6;
}
const newArr = arr.filter( isBigEnough);
//["pineapplle"]
Array.map

會建立新的陣列

const array1 = [1, 4, 9, 16];

//對array中的每個值處理
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

Array.reduce()

將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。

用途：移除重複項、列出object某個key的所有值、計算相同元素數量、contact多維度Array、加總數值

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
  • accumulator:用來累積回呼函式回傳值的累加器（accumulator）或 initialValue。上一次呼叫後，所回傳的累加數值。
  • currentValue:原陣列目前所迭代處理中的元素。
  • currentIndex(option): 原陣列目前所迭代處理中的元素之索引。若有傳入 initialValue，則由索引 0 之元素開始，若無則自索引 1 之元素開始。
  • array(option): 呼叫 reduce() 方法的陣列。
  • initialValue(option) : 於第一次呼叫 callback 時要傳入的累加器初始值。若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。假如於一個空陣列呼叫 reduce() 方法且沒有提供累加器初始值，將會發生錯誤(TypeError)。

範例

var sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b;
}, 0);
// sum is 6

var total = [0, 1, 2, 3].reduce((acc, cur) => acc + cur, 0);
//簡化成箭頭函式，結果一樣

var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce(function (a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((acc, cur) => acc.concat(cur), []);

assign產生物件指向新的reference

let a = { foo: 1 }
let clone = {}
Object.assign(clone, a)

 

 

 

 

 

Comments

Authors

Tags