十七 数组方法

91 阅读4分钟

1. 转字符串的方法:toString 和 join

 console.log([1,[[2,3]]].toString()) // 1,2,3
 console.log([1,[[2,3]]].join())// 1,2,3
 console.log([1,[[2,3]]].join('-'))// 1-2,3
 
console.log('123'.split()) //['123']
console.log('123'.split(''))// ['1', '2', '3']

2 堆栈方法:push pop unshift shift(改变原数组)

  • push: 在最后一位增加,返回增加后数据的长度
  • pop:在最后一位删除,返回被删除的元素
  • unshift: 在第一位增加,返回增加后数据的长度
  • shift: 在第一位删除,返回被删除的元素
  const arr = [1,2,3]
       arr.push(10)
       console.log(arr) // [1,2,3,10]
       arr.pop()
       console.log(arr) // [1,2,3]
       arr.unshift(0)
       console.log(arr) // [0,1,2,3]
       arr.shift()
       console.log(arr) // [1,2,3]

3. 排序相关:reverse 和 sort(改变原数组)

const arr = [1,2,3,4]
console.log(arr.reverse(), arr) // [4,3,2,1][4,3,2,1]
console.log(arr.sort((a,b) => b - a), arr)// [4,3,2,1][4,3,2,1]
// 用sort实现随机排序
       arr.sort(() => {
            return Math.random() - 0.5
        })
        console.log(arr) // [2,4,1,3]

4 拼接: concat(不会改变原数组)

 const arr = [1, 0, 3, 2, 9]
 console.log(arr.concat(18, 19),arr) // [1, 0, 3, 2, 9, 18, 19], [1, 0, 3, 2, 9]
console.log(arr.concat([18, 19]),arr) // 同上
console.log(arr.concat([18, [19]]),arr)[1, 0, 3, 2, 9, 18, [19]]

console.log([...arr, 19,18])

5 删改 slice(不会改变原数组) splice(会改变原数组)

const arr = [1,2,3,4,5]
 console.log(arr.slice(2), arr) // [3,4,5] [1,2,3,4,5]
     console.log(arr.slice(2,4)) // [3,4]
     console.log(arr.slice(4,2)) // []
     console.log(arr.slice(-2)) // [4,5]
     console.log(arr.slice(-2, -1)) // [4]
     
// 应用场景:
const arr = [1, 2, 3]
console.log(arr.slice()) // [1,2,3]
const str = '123' 
console.log(Array.prototype.slice.call(str)) // ['1', '2', '3'], 参照上面split
// 将类数组转化为数组
function test() {
         console.log(Array.prototype.slice.call(arguments))  // [1,2,3]
     }
     test(1,2,3)

对比

  var arr1 = [1,2,3,4,5,6,7,8]
  //    console.log(arr1, arr1.splice()) // [1,2,3,4,5,6,7,8] [] 返回的是被删除的元素
  //    console.log(arr1, arr1.splice(4)) // [1,2,3,4] [5,6,7,8] 返回的是被删除的元素
  //    console.log(arr1, arr1.splice(-2)) // [1,2,3,4,5,6] [7,8]
  // 参数: 1 增加或删除的位置 2 指定删除的个数 3 需要插入的值
  // console.log(arr1, arr1.splice(0, 6)) // [7,8] [1,2,3,4,5,6]
  // console.log(arr1, arr1.splice(0, -1)) // [1,2,3,4,5,6,7,8] []
      console.log(arr1, arr1.splice(0, 0, ['a','b']))  [['a', 'b'],1,2,3,4,5,6,7,8]

     var arr2 = [1,2,3,4,5,6,7,8]
  //    console.log(arr2, arr2.slice()) //  [1,2,3,4,5,6,7,8]  [1,2,3,4,5,6,7,8] 不会改变原数组
  //    console.log(arr2, arr2.slice(4)) // [1,2,3,4,5,6,7,8]  [5,6,7,8] 返回的是被删除的元素
  //    console.log(arr2, arr2.slice(-2)) // [1,2,3,4,5,6,7,8] [7,8]
  // console.log(arr2, arr2.slice(0, 6)) // [1,2,3,4,5,6,7,8] [1,2,3,4,5,6]

6 找索引(indexOf lastIndexOf)( includes find findIndex)

   const arr = [1,2,3,4,5]
   console.log(arr.indexOf(4)) // 3
   console.log(arr.lastIndexOf(4)) // 3

image.png

7 创建数组的方法: Array 和 Array.of 以及fill

image.png

image.png

8 Array.from

image.png

9 获取数组或对象的键值对

 const ary = [1,2,3]
        for(let k of ary.keys()) {
            console.log(k) // 0 1 2
        }
        for(let v of ary.values()) {
            console.log(v) // 1 2 3
        }
        for(let e of ary.entries()) {
            console.log(e) // [0,1] [1,2] [2,3]
        }

const obj = {
            a: 1,
            b: 2,
            c: 3
        }
        console.log(Object.keys(obj))
        console.log(Object.values(obj))
        console.log(Object.entries(obj))

image.png

10 for in 和 for of

for in 通用的,用来找键值; for of只能用于数组,找每一项

  const obj = {
            a: 1,
            b: 2,
            c: 3
        }
        const arr = [1,2,3]
        // for(let k in obj) {
        //     console.log(k) // abc
        // }
        // for(let k in arr) {
        //     console.log(k) // 012
        // }
        // for(let k of obj) {
        //     console.log(k) // 报错
        // }
        for(let k of arr) {
            console.log(k) // 123
        }

11 遍历 map forEach filter some every

forEach

forEach 没有返回值

 const arr = [1,2,3,4]
        const obj = {
            a: 1
        }
        arr.forEach(function(item, index, arr) {
            console.log(item, index, arr) // 1 0 (4) [1, 2, 3, 4]
            console.log(this) // 默认是window ,传了第二个参数后,this指向第二个参数
        }, obj)

forEach 不会遍历空值

 //    const a = []
    //    const a = [1,,3,4]
     const a = [1,2,3,4]
     delete a[1]
     console.log(a) // [1,empty, 3,4]
     a.forEach(i =>console.log(i)) // 不会遍历空数组 // 134 // 134
     for(let i = 0; i< a.length;i++) {
         console.log(a[i]) // 1 undefinded 3 4
     }
     

forEach 没有break和continue

 const arr = [1,2,3]
        // for(let i = 0; i < arr.length; i++) {
        //     if (i === 1) {
        //         // continue // [1,3]
        //         break // [1]
        //     }
        //     console.log(arr[i])
        // }
        arr.forEach(item =>{
            if (item === 2) {
                // continue // 报错
                // break // 报错
                return false // 或return ,打印出1, 3
            }
            console.log(item)
        })

map

map有返回值

 const arr = ['a', 'b', 'c']
      console.log([1,2].map(function(item) {
        return this[item]
      }, arr)) // ['b', 'c']
      
   // 找出每一项的最大值
     function test(ary) {
        return ary.map(item => Math.max.apply(null, item))
        // return  ary.map(item => Math.max(...item))
        //  return ary.map(item => item.sort((a,b) => a-b).pop())
 // return ary.map(item => item.reduce((acc, cur) => acc > cur ? acc : cur))
//  return ary.map(Function.prototype.apply.bind(Math.max, null))

     }
     const res = test([
         [4,5,6,7],
         [12,33,45,63],
         [123,432,423,234],
         [1234,23,4256,323]
     ])
     console.log(res) // [7, 63, 432, 4256]
       

filter

// 筛选出数字
 var arr = [1,2,3, undefined, 4, null, 5, 0]
 console.log(arr.filter(item => item == undefined)) // undefinde null
 console.log(arr.filter(item => item != undefined)) // [1,2,3,4,5,0]

some every

    const arr = [1,2,3,4]
console.log(arr.some(item => item % 2 === 0)) // true, 只要有一个success,就是true
console.log(arr.every(item => item % 2 === 0)) // false, 每一个同succes,才是true

数组去重

set ,双重for循环, 对象的键名,reduce,filter+indexOf

   const arr = [9,1,2,3,4,1,2,3,4,3,4,5,6,7,8,5,6,7]
        function uniqueArr(ary) {
            // -----------------------------------
            // return Array.from(new Set(ary))
            // return [...new Set(ary)]
            // --------------------------------------
            // const container = []
            // for(var i = 0; i < ary.length; i++) {
            //     let isRepeat = false
            //     for (j = i + 1; j < ary.length; j++) {
            //         if (ary[i] === ary[j]) {
            //             isRepeat = true
            //             break
            //         }
            //     }
            //     if (!isRepeat) {
            //         container.push(ary[i])
            //     }
            // }
            // return container
            // -----------------------------------
            //  const obj = {}
            //  const container = []
            //  for(let i = 0; i < ary.length; i++) {
            //      if (!obj[ary[i]]) {
            //         obj[ary[i]] = 1
            //         container.push(ary[i])
            //      } else {
            //         obj[ary[i]]++
            //      }
            //  }
            //  return container
             //------------------------------------------
            //  return ary.reduce((acc,cur) => {
            //     if (!acc.includes(cur)) {
            //         acc.push(cur)
            //     }
            //     return acc
            //  }, [])
            // -------------------------------------
            return ary.filter((item, index) => ary.indexOf(item) === index)
        }
        console.log(uniqueArr(arr))

数组检测

instanceof , Object.prototype.toString.call, Array.isArray

image.png

  • typeof 的缺陷: 无法判断出null或者数组 image.png

  • Array.isArray()

  • instanceof用来判断对象是否是构造函数的实例,但无法判断出原始值

image.png

Object.prototype.toString.call

  function getType(target) {
         const str = Object.prototype.toString.call(target)
         return str.slice(8, str.length-1).toLowerCase()
     }
     // 基本数据类型
     console.log(getType(1)) // number
     console.log(getType('a')) // string
     console.log(getType(false)) // boolean
     console.log(getType(null)) // null
     console.log(getType(undefined)) // undefined
     // 引用数据类型
     console.log(getType({})) // object
     console.log(getType([])) // array
     console.log(getType(new Number(1))) //number
     // 函数
     console.log(getType(() =>{})) //function