接下来介绍处理阵列的方法
这些方法对於资料处理很重要
那就一起来看下去吧
.forEach() 内放入的function 可以回传三个值 item, index, array
item 为阵列内的值
index 为阵列内的索引
array 为阵列本身
// 此程序码会跑阵列的长度的次数
const array = ['a', 'b', 'c', 'd', 'e']
array.forEach(function (item, index, array){
console.log(item, index, array)})
名词解释匿名函式与箭头函式
const array = ['a', 'b', 'c', 'd', 'e']
//没给function 名字称为匿名函式
array.forEach(function (item, index, array){
console.log(item, index, array)})
// 把function 拿掉加入 => 称为箭头函式
arr1.forEach((item, index, array) => {
console.log(item, index, array)
})
若使用.forEach() 想更改阵列内的值该如何修改
直接将item (阵列内的值)进行修改
console 出来後发现阵列内的值并未修改
const array = ['a', 'b', 'c', 'd', 'e']
array.forEach((item, index, array) => {
console.log(item, index, array)
item = '1'
})
需要指定阵列的索引值才能将阵列内的值逐一更改(写code 的时候需要注意一下)
const array = ['a', 'b', 'c', 'd', 'e']
array.forEach((item, index, array) => {
console.log(item, index, array)
array[index] = '1'
})
这个感觉有点像for of, for in 的感觉
补充：.forEach() 只能对一般阵列跑，有些资料回传资料型态看似阵列而非阵列则不可使用此方法(可能要踩几次雷才会知道其中的奥义)
这个在资料处理上会搭配其他的方法一起使用
const array = ['John', 'Cena', 'Good']
console.log(array.join(' ')); // John Cena Good
console.log(array.join('.')); // John.Cena.Good
console.log(array.join('')); // JohnCenaGood
.push() 可以用来新增一笔资料，可以用到的地方太多(什麽都可以忘.push()不能忘！)
const array = [1, 2, 3, 4, 5]
array.push(9)
console.log(array); // 回传新增的阵列 [1, 2, 3, 4, 5, 9]
console.log(array.push(9)); // 回传长度 7
有新增到最後面的资料就有新增到最前面的资料，可以把他跟.push() 一起记起来
const array = [1, 2, 3, 4, 5]
array.unshift(6)
console.log(array); // 回传新增的阵列 [6, 1, 2, 3, 4, 5]
有增加资料就有删除资料，这个跟 .push() 一样重要
const array = [1, 2, 3, 4, 5]
array.pop()
console.log(array); // 回传删除的阵列 [ 1, 2, 3, 4]
.shift() 跟 .unshift 可以一起记
顺便查一下单字的意思，应该是转移的意思，稍微想像一下把资料转移变成删除（？）
应该会好记一点
const array = [1, 2, 3, 4, 5]
array.shift()
console.log(array); // 回传删除的阵列 [ 2, 3, 4, 5]
写了一堆看起来头更晕的注解，到底是什麽意思呢，直接看范例比较快
// splice(起始位置,删除数量[新增值1,值2,值3])
const array = [1, 2, 3, 4, 5]
// 删除第 3 个位置 1 个数字再新增值 1, 1, 1
// 删掉阵列的 4 再新增值
array.splice(3,1,1,1,1)
console.log(array); // 回传阵列 [1, 2, 3, 1, 1, 1, 5]
看范例好像有一点点看懂了
再多看几个范例吧
const array = [1, 2, 3, 4, 5]
// 在 0 的位置删除 0 个阵列在加入 0
array.splice(0, 0, 0)
console.log(array); // 回传阵列 [0, 1, 2, 3, 4, 5]
.splice(0, 0, 0) 换言之就是在最前面新增一笔资料 0，跟刚刚提到的 .unshift()功能一样
所以 .splice() 也可以在最後加一笔资料跟.push()一样
当然也可以删除指定位置的资料也俱有.pop() .shift() 功能，只能说.splice() 使用弹性大
到这先歇一会儿
前面有提到字串的处理.split(), slice() 现在到了阵列处理多了.splice()
这三个东西真的长得很像加上英文普普，常常搞混到底要用哪一个
我们先来翻译一下这三个东西
.split() 分裂, .slice() 切片, .splice() 拼接
.split() 使用指定的字串切割文字
.slice(开始[,结束]) 切割文字，可以放入开始位置与结束位置(但不包含结束位置)
const array = "1, 2, 3, 4, 5"
const arrsplit = array.split(",")
console.log(arrsplit); // ['1', '2', '3', '4', '5']
const arrslice = arrsplit.slice(2,4)
console.log(arrslice); // ['3', '4']
好了感觉有清楚一点点了(吧？！)
继续介绍其他方法
放置array.concat(array1) 前後摆放会有差异，使用时要注意
const array = [1, 2, 3]
const array1 = [7, 8, 9]
const array2 = array.concat(array1)
console.log(array2); // [1, 2, 3, 7, 8, 9]
const array = [1, 2, 3, 4, 5]
array.reverse()
console.log(array); // [5, 4, 3, 2, 1]
字串处理也有.indexOf()
这个方法常用寻找是否有符合的资料
const array = [1, 2, 3, 4, 5]
const indexOf = array.indexOf(3)
console.log(indexOf); // 2 找到数值 3 在位置 2
const indexOf1 = array.indexOf(8)
console.log(indexOf1); // -1 找不到值
字串处理也有.includes()
可用来验证是否有相同的会员资料
const array = [1, 2, 3, 4, 5]
const includes = array.includes(3)
console.log(includes); // true
const includes1 = array.includes(8)
console.log(includes1); // false
.some() 内放入的function 可以回传三个值 item, index, array
item 为阵列内的值
index 为阵列内的索引
array 为阵列本身
只要有一个值相符合就会回传true, 若都无相符则回传false
array = [
{ name: 'class A', student: 22 },
{ name: 'class B', student: 25 },
{ name: 'class C', student: 30 },
{ name: 'class D', student: 35 },
]
const has26student = array.some(item => {
return item.student >= 26
})
console.log(has26student); // true
array = [
{ name: 'class A', student: 22 },
{ name: 'class B', student: 25 },
{ name: 'class C', student: 30 },
{ name: 'class D', student: 35 },
]
const has30student = array.findIndex(item => {
return item.student >= 30
})
console.log(has30student); // 2
array = [
{ name: 'class A', student: 22 },
{ name: 'class B', student: 25 },
{ name: 'class C', student: 30 },
{ name: 'class D', student: 35 },
]
const filtered = array.filter(item => {
return item.student >= 30
})
console.log(filtered); // [{name:'class C',student:30},{name:'class D',student:35}]
const array = [1, 2, 3, 4, 5]
const array1 = array.map(item => {
return item * 2
})
console.log(array1); // [2, 4, 6, 8, 10]
再看另外一个范例
将阵列的学生数目 * 2 并将所有阵列加入地址 New Taipei City
array = [
{ name: 'class A', student: 22 },
{ name: 'class B', student: 25 },
{ name: 'class C', student: 30 },
{ name: 'class D', student: 35 },
]
const array1 = array.map(item => {
item.student *= 2
item.address = 'New Taipei City'
return item
})
console.log(array1);
/* array = [
{ name: 'class A', student: 44, address: 'New Taipei City' },
{ name: 'class B', student: 50, address: 'New Taipei City' },
{ name: 'class C', student: 60, address: 'New Taipei City' },
{ name: 'class D', student: 70, address: 'New Taipei City' },
] */
做个加法的范例，function 内的运算式可依照自己需求运算
const array = [1, 2, 3, 4, 5]
const plus = (a, b) => {
return a + b
}
const sum = array.reduce(plus)
console.log(sum); // 15
const sum1 = array.reduce(plus,5)
console.log(sum1); // 20
function 内需传入两个值比大小并回转值
若 a - b < 0, a 会排在 b 前面
a - b > 0 则反之
详细验证可以youtube 搜寻相关影片
const array = [1, 100, 20, 30, 15, 5]
const array1 = array.sort((a,b) => {
return a - b
}
console.log(array1); // [1, 5, 15, 20, 30, 100]
const array2 = array.sort((a,b) => {
return b - a
}
console.log(array2); // [100, 30, 20, 15, 5, 1]
分了好几次终於打完了，现在看到很多javascript 内建函式与方法，分开都听得懂(很模糊)，但实际演练应用需要做相关程序逻辑的题目才会更了解使用方式，後续会再新增相关演练题目
拖了一阵子终於打完了，开心～
<<: Re: 新手让网页 act 起来: Day30 - React hooks 之 useDebugValue
立体空间 ( 三度空间 ) 教学原文参考：立体空间 ( 三度空间 ) 这篇文章会介绍，如何在 Scr...
网站上线後，开始接触网站经营相关的资讯时，才发现经营网站没那麽简单？ 网站最重要的工作就是招揽潜在客...
【文字分析】3-4 TF-IDF文字概念 说明 一种分析某单词在文章中重要程度公式 TF-IDF值与...
合并排序法(Merge Sort)原理是会先将原始资料分割成两个资料列，接着再将两个资料继续分割成两...
找救援 意识到有问题时，首先寻找有没有专案遇到同样的问题——有使用 Ruby on Rails 的大...