前言
金鱼脑记不起这么多,只好写写文章速查用
JS30 Array Cardio
基础操作
尽量不要去操作原始资料,先複製一份做操作更佳
Array.isArray(arr) 判断是否为阵列
unshift(0) 加入首项
shift() 移除首项
push(4) 加入末项
pop() 移除末项
let arr = [1, 2, 3] let obj = {} console.log(Array.isArray(arr)) //true console.log(Array.isArray(obj)) //false arr.unshift(0) console.log(arr) // 加入首相[0, 1, 2, 3] arr.shift() console.log(arr) // 移除首项[1, 2, 3] arr.push(4) console.log(arr) // 加入末项[1, 2, 3, 4] arr.pop() console.log(arr) // 移除末项[1, 2, 3]
阵列插入 & 删除 & 修改元素 splice
参数: 从哪里开始删除、删除几个、要加入的新元素(可多个)插入元素删除元素修改元素 (删除该位置元素,再从该位置新增元素)split 为字串方法 用于切割字串,不可用于阵列!! (老是搞混这两个家伙..)splice 整理文章才发现 可以用来插入元素 Orz....
const testArr = [0, 1, 2, 3] // 可用参数: index,count,newElemA,newElemB // splice 纯粹加入元素 // 在 index0位置 删除0个元素=不删 插入 'HEAD' testArr.splice(0, 0, 'Head') console.log(testArr) // ['Head', 0, 1, 2, 3] // splice 纯粹删除元素 // 于 index 4 删除一个元素 即3 testArr.splice(4, 1) console.log(testArr) // ['Head', 0, 1, 2] // splice 删除既有元素,在该位置新增元素 testArr.splice(0, 1, 'newElemA', 'newElemB') console.log(testArr) // ["newElem", ,'newElemB', 0, 1, 2] // split 字串方法 const str = 'hey yo' str.split(' ') // 以空白为切割点
阵列切割 & 拷贝 slice
slice 用来複製阵列、切割产出新阵列,不影响原始资料copyWithin 浅拷贝一部分阵列丢回原阵列某位置,阵列长度不变copyWithin 会影响原始资料!! // slice // 传入参数:始、末 (切割结果不含末元素) // 浅拷贝、原始阵列不会被修改 const sliceArr = [1, 2, 3, 4, 5] // 用来複製阵列并产生出新阵列 const copyArr = sliceArr.slice(0) console.log(copyArr) // [1, 2, 3, 4, 5] // 产生子阵列,省略末即切到底 const partArr1 = sliceArr.slice(2) console.log(partArr1) // [3, 4, 5] // 始为 0 切至 index 1 const partArr2 = sliceArr.slice(0, 2) console.log(partArr2) // [1, 2] // copyWithin // 参数: 搬迁位置、开始複製点、结束複製点 const arr1 = [1, 2, 3, 4, 5, 6] const arr2 = [1, 2, 3, 4, 5, 6] // 複製456 贴至 index 0 的位置,因为长度不改变,覆盖元素 arr1.copyWithin(0, 3, 6) console.log(arr1) // [4, 5, 6, 4, 5, 6] // 预设始为0、末为阵列长度 // 将 整个阵列从 index 3的位置开始複盖 arr2.copyWithin(3) console.log(arr2) // [1, 2, 3, 1, 2, 3]
splice slice比较
splice 用于 插入 & 删除 & 更改元素slice 用于 切割 & 複製以下为 slice 实现 splice 功能 (手痒写着练练) // 修改 slice 即可做到 splice效果,但就没那么漂亮 const arr = [1, 2, 3, 4, 5, 6] const arrHead = arr.slice(0, 3) const arrFoot = arr.slice(3, 7) const newArr = [...arrHead, 'newStuff', ...arrFoot] console.log(arr) // 原始阵列不被更改 console.log(newArr) // splice const spliceArr = [...arr] spliceArr.splice(3, 0, 'newStuff') console.log(spliceArr)
阵列合併
concat 合併 "多个" 阵列 (亦可用于字串串接)利用 rest parameter 合併阵列 const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const arr3 = [7, 8, 9] // concat [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr1.concat(arr2,arr3)) // rest parameter [1, 2, 3, 4, 5, 6] console.log([...arr1, ...arr2])
阵列 找值
includes() 回传Boolean (IE不支援)find() 回传第一个满足的值,无则undefined const arr = ['a', 'a', 'b', 'c', 'd'] // includes console.log(arr.includes('a'))// true console.log(arr.includes('z'))// false // find console.log(arr.find(elem => elem === 'a')) // 'a' console.log(arr.find(elem => elem === 'z')) // undefined
阵列 找Index
indexOf() 回传第一个满足的Index,无则-1findIndex() 回传第一个满足的Index,无则-1jQuery $.inArray() 回传Index,无则-1 const arr = ['a', 'a', 'b', 'c', 'd'] // indexOf console.log(arr.indexOf('a')) // 0 // findIndex console.log(arr.findIndex(elem => elem === 'a')) // 0 console.log(arr.findIndex(elem => elem === 'z')) // -1 // jQuery $.inArray方法 $.inArray('a', arr) // 0 $.inArray('z', arr) // -1 不存在
jQ $in.Array方法原始码
inArray: function( elem, array, i ) { var len; if ( array ) { if ( indexOf ) { return indexOf.call( array, elem, i ); } len = array.length; i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; for ( ; i < len; i++ ) { // Skip accessing in sparse arrays if ( i in array && array[ i ] === elem ) { return i; } } } return -1; }
JSON资料找值
先做找到Index位置,在抓出该笔资料 // 找John并喷出该资料 const people = [ { name: 'Peter', age: 10 }, { name: 'John', age: 3 }, { name: 'Nina', age: 15 }, ] const targetIndex = people.findIndex(elem => elem.name === 'John') const target = people[targetIndex] console.log(target)
画饼环节..
阵列去重 写一篇文Set / Map 写一篇文整理Array文章超连结参考资料
MDN
andyyou
Summer。桑莫。夏天
StackOverFlow产数字阵列
copyWithin用法