JS 阵列整理

前言

金鱼脑记不起这么多,只好写写文章速查用

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

splice 整理文章才发现 可以用来插入元素 Orz....

参数: 从哪里开始删除、删除几个、要加入的新元素(可多个)插入元素删除元素修改元素 (删除该位置元素,再从该位置新增元素)split 为字串方法 用于切割字串,不可用于阵列!! (老是搞混这两个家伙..)
    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用法


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章