介绍：本文章整理常用的（包含Es6的map、forEach、every、some、filter、find、from、of等）数组操作方法
| 会改变原始阵列 | push()、pop()、shift()、unshift()、reverse()、splice()、sort()、copyWithin()、fill() |
| 回传阵列元素咨询或索引值 | length、indexOf()、lastIndexOf()、find()、findIndex()、filter() |
| 针对每一个元素处理 | forEache |
| 产生新的阵列或新的值 | join()、concat()、slice()、map()、reduce()、reduceRight()、flat()、flatMap()、Array.from()、Array.of()、toString() |
| 判断并回转布尔值 | every()、some()、includes()、Array.isArray() |
| 其他用法 | keys()、valueOf() |
-
push()
-
可以将某些值加入到阵列的最后一个位置，不限制添加数量，欲添加的内容使用逗号隔开即可，加入阵列长度会增加
-
使用 push() 后会改变原本的阵列内容
let pushArray = [1,2,3]; pushArray.push(4,5,6,7); console.log(pushArray); // array(1,2,3,4,5,6,7) -
-
pop()
-
pop 会移除（取出）阵列的最后一个元素
-
使用 pop() 后会改变原本的阵列内容
let popArray = [1,2,3,4]; let result = popArray.pop(); console.log(popArray) // array(1,2,3) console.log(result) // 4 -
-
shift()、unshift()
- shift()会移除（取出）阵列的第一个元素
-
使用shift() 后会改变原本的阵列内容
let shiftArray = [1,2,3,4]; let result = shiftArray.shift(); console.log(shiftArray) // array(2,3,4) console.log(result) // 1-
unshift() 会将指定的元素添加到第一个位置
-
使用nushift() 后会改变原本的阵列内容
let unshiftArray = [1,2,3,4,5]; unshiftArray.unshift(100,200); console.log(unshiftArray) // [100, 200, 1, 2, 3, 4, 5] -
reverse()
- reverse 会将阵列反转
-
使用push 后会改变原本的阵列内容
let reverseArray = [1,2,3,4]; reverseArray.reverse(); console.log(reverseArray) // [4, 3, 2, 1] -
splice()
- splice() 可以转移或新增阵列的元素，它包含了三个参数，第一个是要移除或要添加的序列号（必填），第二个是要移除的长度（选填，若不填则第一个号码位置后方所有袁术都会被移除，若设定为0，则不会元素被移除），第三个是要添加内容（选填）
-
使用splice() 后会改变原本的阵列内容，注意第一个参数是取下标（如：取第一个，则是0）
let spliceArray = [1,2,3,4,5,6,7,8]; spliceArray.splice(2,1); console.log(spliceArray) // [1,2,4] // 设定第三个参数就能够添加或取代元素 spliceArray.splice(2,1,100); console.log(spliceArray) // [1,2,100] //设定第三个参数就能添加或取代元素 spliceArray.splice(3,2,100,200); console.log(spliceArray) // [1, 2, 100, 100, 200, 7, 8] spliceArray.splice(4,0,400); console.log(spliceArray) // [1, 2, 100, 100, 400, 200, 7, 8] -
sort()
- sort() 可以针对阵列的元素进行排序，里头包含了一个排序用的判断函式，函式内必须包含两个参数，这两个参数分别代表阵列里第n个和第n+1个元素，透过比较第n和第n+1个元素的大小来进行排序
-
使用 sort() 后会改变原本的阵列内容
let sortArray = [1,3,8,4,5,7,6,2,9,10,11]; sortArray.sort((x,y)=>y-x); console.log(sortArray) // [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1] sortArray.sort((x,y)=>x-y); console.log(sortArray) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] // 如果不使用判断函式，预设会将元素转换成字符串。 // 并采用unicode 来判断，这也会造成某些数字的排序错误 sortArray.sort(); console.log(sortArray) // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9] -
copyWithin()
- copyWithin() 能复制阵列中的某些元素，并将它们放到并取同一个阵列指定的位置，copyWithin() 有三个参数，第一个是要置换的位置（必须），第二给是从什么位置开始复制（选填，预设0），第三给是停止复制的元素的前一个位置（选填，预设等于阵列长度）
-
使用 copyWithin（） 后会改变原本的阵列内容
let copyWithinArray = [1,2,3,4,5,6,7,8]; copyWithinArray.copyWithin(3,1,5); console.log(copyWithinArray) // [1, 2, 3, 2, 3, 4, 5, 8] -
fill()
- fill() 会把阵列中所有元素，置换为指定的值，fill() 有三个参数，第一个是准备要置换的内容（必填），第二个是从什么位置置换（选填，不设定就全部置换），第三个是停止置换的元素的前一个位置（选填，预设等于阵列长度）。
-
使用 fill() 会改变原本的阵列内容
let fillArray = [1,2,3,4,5,6,7]; fillArray.fill('z'); console.log(fillArray); // ["z", "z", "z", "z", "z", "z", "z"] fillArray.fill('b',3,5); console.log(fillArray) // ["z", "z", "z", "b", "b", "z", "z"] -
lenght
length() 可以取得阵列的长度（所有元素的数量）
let lenghtArray = [1,2,3,4,5,6,7]; console.log(lenghtArray.length) // 7 -
indexOf()
indexOf() 会判断阵列中是否包含某个值，判断的方式为【由左而右】，如果有包含就回传这个值在阵列中的索引值，如果没有就回传-1，有两个参数，第一个参数表示要判断的值（必填），第二个参数表示从阵列的哪个位置开始判断（选填，预设为0）；
let indexOfArray = [1,2,3,4,5,6,7]; console.log(indexOfArray.indexOf(4)); // 3 console.log(indexOfArray.indexOf(4,5)); // -1 搜索到5，6，7，8；没有4 -
lastIndexOf()
lastIndexOf() 会判断阵列中是否包含某个值，判断的方式为「由右而左」，如果有包含就回传这个值在阵列中的索引值，如果没有就回传-1，有两个参数，第一个参数表示要判断的值( 必填)，第二个参数表示判断到阵列的哪个位置( 选填，预设为整个阵列长度- 1 )。
let lastIndexOfArray = [1,2,3,4,5,6,7]; console.log(lastIndexOfArray.lastIndexOf(3)) // 2 console.log(lastIndexOfArray.lastIndexOf(3,1)) // -1 只判断1，2；所以没有3 -
find()
find() 会将阵列中的【每一个】元素带入指定的函式内做判断，并会回传一个符合判断条件的元素，如果没有元素符号则会回传undefiend
let findArray = [1,2,3,4,5,6,7,8]; console.log(findArray.find(e=>e > 3)); // 4 console.log(findArray.find(e=>e < 0)); // undefined -
finIndex()
findIndex() 会将阵列中的【每一个】袁术带入指定的函式内做判断，并会回传第一个符合判断条件元素的位置号码，如果没有元素符号则会回传 -1
let findIndexArray = [1,2,3,4,5,6,7]; console.log(findIndexArray.findIndex(e=>e > 3)); // 3 console.log(findIndexArray.findIndex(e =>e < 0)); // -1 -
filter()
filter() 会将阵列中的每一个元素带入指定的函式内做判断，如果元素符号判断条件则会传出，成为一个新的阵列元素
let filterArray = [1,2,3,4,5,6,7]; console.log(filterArray.filter(e=>e > 3)); // [4, 5, 6, 7] console.log(filterArray.filter(e=>e%2 == 0)); // [2, 4, 6] -
forEach()
forEach() 会将阵列中每一个元素套用到指定的函式里进行运算，函式有三个参数，第一个参数表示每个元素的值（必填），第二个参数为该元素的索引值（选填），第二个参数则表示原本的阵列（选填）；
let forEachArray = [1,2,3,4,5]; let index = 0; forEachArray.forEach(item=>{ index += item }) console.log(index) // 15 // 如果透过第二和第三给参数搭配，就能做到改变原本阵列的效果 forEachArray.forEach((item,index,arr)=>[ arr[index] = item * 10 ]); console.log(forEachArray) // [10, 20, 30, 40, 50] -
join()
join()可以将阵列中所有的元素，由指定的字符合并在一起变成字符串呈现，若没有指定字符预设会用【逗号】合并
let joinArray = [1, 2, 3, 4, 5, 6, 7]; console.log(joinArray.join()) // 1,2,3,4,5,6,7 console.log(joinArray.join('')) // 1234567 console.log(joinArray.join('@')) // 1@2@3@4@5@6@7 -
concat()
可以将两个阵列合并在一起，如果是使用es6 语法也可以用扩展运算符...来代替
let joinConcatOne = [1, 2, 3, 4, 5, 6]; let joinConcatTwo = [6, 7, 8, 9]; let joinConcatThree = joinConcatOne.concat(joinConcatTwo); let joinConcatFour = [...joinConcatOne, ...joinConcatTwo]; console.log(joinConcatThree) // [1, 2, 3, 4, 5, 6, 6, 7, 8, 9] console.log(joinConcatFour) // [1, 2, 3, 4, 5, 6, 6, 7, 8, 9] -
slice()
slice() 可以截取出阵列某部份的元素为一个新的阵列，有两个必填的参数，第一个是起始位置，第二个是结束位置（操作时数字减1）
let sliceArray = [1, 2, 3, 4, 5, 6, 7]; console.log(sliceArray.slice(2, 4)) // [3,4] -
map()
会处理阵列中每个元素，最后回传出一个新的阵列，里头有一个函式（必填）和一个回传函式里的this参数（选填），函式内又包含三个参数，第一个是每一个元素的值（必填），第二个是当前元素的索引值（选填），第三个是前的阵列（选填)
let mapArray = [1, 2, 3, 4, 5, 6, 7]; console.log(mapArray.map(e => { return e + 10 })) // [11, 12, 13, 14, 15, 16, 17] // 套用第二个和第三个参数变化 console.log(mapArray.map((e, i, arr) => { return `${e}${i}${mapArray.find(t => t % 5 == 1)}` })) // ["101", "211", "321", "431", "541", "651", "761"] // 如果要使用回传函式里this的参数，则【不能使用】箭头函式，因为箭头函数的this指向和函数的this指向不同，所以要用一般的函数处理 console.log(mapArray.map(function(e){ return e + this; },10)) //[11, 12, 13, 14, 15, 16, 17] -
reduce()
可以将阵列中的每一个元素进行计算，每次计算的结果会再与下个元素作计算，直到结束为止，里头包含一个函数（必填）和初始计算的数值
console.log(reduceArray.reduce(function(total,e){ console.log(total , e) return total + e; })) // 36 // reduceRight() 和 reduce() 大同小异，只是其计算方式是由右到左，对于加法来说没什么影响，但对于减法而言就有差异 console.log(reduceArray.reduce(function(total,e){ return total - e })) // -34 console.log(reduceArray.reduceRight(function(total,e){ return total - e })) // -20 -
flat()
let flatArray = [1,2,[3],[4,[5,[6]]]]; console.log(flatArray.flat()) // [1,2,[3],[4,[5,[6]]]] console.log(flatArray.flat(2)) // [1, 2, 3, 4, 5, [6]] console.log(flatArray.flat(Infinity)) // [1, 2, 3, 4, 5, 6]flat() 可以将一个多维阵列的深度传成一维（扁平化），它有一个选填的参数，代表要转换的深度数字，预设为1，如果深度有多层，可以使用infinity来全部展开成一维阵列
-
flatMap()
flatMap() 的方法等于map() 和 flat() 的组合，在运算直接将阵列扁平化处理
let flatMapArray = [1,2,[3],[4,5]]; console.log(flatMapArray.flatMap(e=>e + 1)); // [2, 3, "31", "4,51"] console.log(flatMapArray.map(e=>e + 1).flat()); // [2, 3, "31", "4,51"] -
array.isArray()
array.isArray() 能判断一个物件是否为阵列，如果是就回传true，不然就回传false
let a = [1, 2, 3, 45], b = 1234, c = 'hello', d = { d1: 1, d2: 2 }; console.log(Array.isArray(a)) // true console.log(Array.isArray(b)) // false console.log(Array.isArray(c)) // false console.log(Array.isArray(d)) // false -
Array.from()
Array.from() 会将【类阵列物件】或是【可迭代的物件】转换成阵列。Array.from() 有两个参数，第一个参数为【类阵列物件】或【可迭代的物件】（必填），第二个参数则是改变转换成阵列元素的函数（选填）
let fromArray = 'abcdef'; console.log(Array.from(fromArray)); // ["a", "b", "c", "d", "e", "f"] console.log(Array.from(fromArray, e => e + e)) // ["aa", "bb", "cc", "dd", "ee", "ff"] // 类阵列物件写法必须包含length属性，且物件key 须为0开始的数字，对应转换后的元素索引 let from = { '0': 14, '2': 12, '5': 34, '3': 3, '1': 1, '4': 4, length: 5 }; console.log(Array.from(from)) // [14, 1, 12, 3, 4] -
array.of
array.of 可以快速将数字、字符串内容，转换成阵列
console.log(Array.of(1, 'a', 2, 'b', 3)) // [1, "a", 2, "b", 3] -
toString()
toString() 会把整个阵列转换成为文字
let stringData = [1, 2, 3, 4, 5, 6, 7]; console.log(stringData.toString()) -
every()
every() 会将阵列中的每一个元素带入指定的函数内做判断，只要有任何一个元素不符合判断条件，会回false，如果全部符号，就会回传true
let everyArray = [1, 2, 3, 4, 5, 6]; console.log(everyArray.every(e => e > 3)); //false (因为1、2小于3，3等于3) console.log(everyArray.every(e => e > 0)); //true -
some()
会将阵列中的每一个元素带入指定的函数内做判断，只要有任何一个元素符号判断条件，就会回传true，如果全都不符合，就会传false
let someArray = [1, 2, 3, 4, 5, 6]; console.log(someArray.some(e => e > 3)); // true console.log(someArray.some(e => e > 6)); // false -
includes()
includes() 会判断阵列中是否包含某一个值，如果有包含就辉传true，否则回传false，有两个参数，第一个参数表示要判断的值（必填），第二个参数表示阵列的哪个位置开始判断（选填）
let icArray = [1, 2, 3, 4, 5, 6, 7]; console.log(icArray.includes(2)) //true console.log(icArray.includes(2, 2)) // false (搜索 3，4，5，6，7没有2) -
valueOf()
valueOf() 会回传阵列的原始值，如何原本的阵列有修改，那么回传的原始值也会跟着改变
let one = [1, 2, 3, 4, 5, 6, 7, 8]; let two = one.valueOf(); console.log(one) // [1, 2, 3, 4, 5, 6, 7, 8] let three = one.valueOf(); one.shift(); console.log(one); // [2, 3, 4, 5, 6, 7, 8] console.log(two); // [2, 3, 4, 5, 6, 7, 8] console.log(three); // [2, 3, 4, 5, 6, 7, 8] -
keys()
keys() 会回传阵列中的每一个索引值（key）成为一个新的array lterator 物件，因为是array lterator 物件，可以透过for...of来取得
let keysArray = ['a', 'b', 'c', 'd', 'e'];
let result = keysArray.keys();
for (let key of result ) {
console.log(key) // 依次出现1、2、3、4、5
}
扫一扫
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
