Array

284 阅读7分钟

如何判断一个变量是不是数组

Array.isArray()

var arr = [1,2,3]
Array.isArray(arr) // true

instanceof

var arr = [1,2,3]
arr instanceof Array  // true

Object.prototype.toString.call()

var arr = [1,2,3]
Object.prototype.toString.call(arr) //'[object Array]'

arr.constructor === Array

  • 缺点:对象的constructor属性是可以被改写的
var arr = [1,2,3]
arr.constructor === Array // true

Array.prototype.isPrototypeOf(arr)

var arr = [1,2,3]
Array.prototype.isPrototypeOf(arr) //true

创建数组的方法

构造函数

let arr = new Array()

字面量

  • 使用数组字面量创建数组不会调用Array构造函数
let arr = [1,2,3,4,5]

Array.of

let arr = Array.of(1,2,3,4,5)

Array.fill

let arr = Array(5).fill(7)

Array.from()

类数组(伪数组)

具有length属性的对象

类数组的特点

  1. 对象是按照索引的方式存储数组
  2. 这个对象有一个length属性

如何将一个类数组转化为数组:arguements NodeList

ES5中的方法

  1. Array.prototype.slice.call(arrayLike, start);
  2. [].slice.call(arrayLike)
  • tips:为什么使用[].slice.call()将类数组转换为数组,为什么是slice方法,而不是其他方法

ES6中的方法

  1. Array.from(arrayLike);

Array.from(arrayLike,mapFn,thisArg) thisArg是mapFn中的this

  1. [...arrayLike];

初始化一个长度为5的数组,并且给每个值设置为1

  • 方法一
let array1 = Array(5)
for (let i = 0 ;i <array1.length; i ++){
  array1[i] = 1
}

  • 方法二
let array1 = Array(5)
array1.forEach(item=>{
  item = 2
})

  • 方法三
let array2 = Array.from({
  length: 5
}, () => {
  return 1;
})

  • 方法四
let array = Array.from({length:5}).fill(1)

  • 方法五
let arr = Array(5).fill(7)

数组的浅拷贝

利用concat()方法

var arr = [1,2,3]
var newArr = arr.concat()
arr.push(4)
newArr // [1,2,3]

利用数组扩展运算

var arr = [1,2,3]
var newArr = [...arr]
arr.push(4)
newArr //[1,2,3]

利用Array.from()

Array.from([1, 2, 3])

数组的深拷贝

数组中哪些方法会改变原数组,哪些方法不会改变原数组

会改变原数组的方法

不会改变原数组的方法

  1. concat() 返回值是新的数组
var arr = [1,2,3]
var newArr = arr.concat(4,5)
//newArr [1, 2, 3, 4, 5]
// arr [1, 2, 3]

ES5中数组的遍历方法

for循环

  • 可以使用break终止循环,也不可以使用continue结束本次循环
  • 不可以使用return终止循环
    const arr = [1, 2, 3, 4, 5]
    for (let i = 0; i < arr.length; i++) {
      if (i === 2) {
        break
      }
      console.log(arr[i])
    }

for...in...

本身是为对象设计的,但是也可以遍历数组

  • 可以使用continue结束本次循环,可以使用break终止循环
  • 不能使用return终止循环
    for (let index in arr) {
      if (index === '2') { //index是字符串
        continue
      }
      console.log(i, arr[i])
    }

Array的遍历(迭代)方法

相同点:

  • 不会对原数组进行改变
  • 接收的参数相同
  • 不可以使用break终止循环,也不可以使用continue结束本次循环,会报语法错误。

不同点:

  • 返回值不同

没有返回值

forEach

对数组每一项运行传入函数,没有返回值。

  • 没有返回值,循环不能终止
  • 不支持使用break终止循环,也不能用continue跳出本次循环。
  • 可以使用retrun false,return true, return跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item,index,arr){
    //做一些操作
})

  • 使用return false跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
    if(item === 2){
        return false
    }
    console.log(item)
})

  • 使用return true跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
    if(item === 2){
        return true
    }
    console.log(item)
})

  • 使用return 跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
    if(item === 2){
        return
    }
    console.log(item)
})

  • 不能使用break终止循环,也不能用continue结束本次循环

返回值是true或false

some()

对数组的每一项运行指定函数,如果有一项返回true则返回true,遇到返回true的项就终止。

  • 可以使用return true终止循环
  • 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnValue = arr.some(item=>item>2)
console.log(returnValue) //true

every()

对数组的每一项运行指定函数,如果每一项都返回true则返回true,遇到返回fasle的项就终止。

  • 可以使用return false、return终止循环
  • 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnValue = arr.every(item=>item>2)

var arr = [1,2,3,4]
arr.every((item,index,arr)={
    if(item === 2){
        return true
    }else{
        console.log(item)
        return true
    }
}) 
等价于
arr.every((item,index,arr)={
    if(item === 2){
     
    }else{
        console.log(item)
    }
    retun true
}) 

返回一个新数组

filter()

返回一个符合条件的数组,循环不可以终止

  • 不可以使用return false、return、return true终止循环
  • 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnArr = arr.filter(item=>item>2)
console.log(returnValue) //[3,4]
map()

返回一个每一项都是在原始数组的基础上做了对应操作的数组

  • 不可以使用return false、return、return true终止循环
  • 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnArr = arr.map(itme=>item*2)
console.log(returnArr) //[2,4,6,8]

ES6中数组遍历的方法

for of

  • 可以使用break终止循环,也可以使用continue跳出本次循环
let arr = [1,3,4,5,3,2]
for (let i of arr) {
      if (i === 2) {
        continue
      }
      console.log(i)
    }
const Price = {
    A : [1.5,2.3,4.5],
    B : [3,4,5],
    C : [0.5, 0.8,1.2]
}

for of 和for in的区别

  1. for of是为了遍历可迭代的对象
  2. for in只能遍历数组和对象

扩展运算符,只能将具有iterator接口的类数组转换为真正的数组:扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

Aarry.from() 可以将没有iterator接口的类数组转换为真正的数组:Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

遍历数组的优点

遍历数组的缺点

var arr = [1,3,4,5]
arr.a = 9
for(item in arr){
    console.log(item)
}

var arr = [1,3,4,5]
arr.a = 9
for(item in arr){
    if(item === '2'){
        break;
    }
    console.log(item)
}

var arr = [1,3,4,5]
arr.a = 9

for(item in arr){
    if(item === '2'){
    // if(item * 1=== 2){
        continue
    }
    console.log(item)
}

批量复制和填充方法

fill()

批量复制方法,可以向一个数组中插入全部或者部分相同的值

let arr = [0,0,0,0,0]
arr.fill(1) 

let arr = [0,0,0,0,0,0]
arr.fill(8,1)

let arr = [0,0,0,0,0,0]
arr.fill(9,2,4)

copyWithin()

按照指定范围浅复制数组中的部分内容,然后将他们插入到指定索引开始的位置

let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(5)

let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(0,5)

let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(2,0,6)

let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(2,8,16)

转换方法

toString()

返回由数组中的每个值的等效字符串拼接而成的一个逗号分隔的字符串

let colors = ['red','blue','yellow','gray']
colors.toString()

toLocalString()

返回由数组中的每个值的等效字符串拼接而成的一个逗号分隔的字符串

let colors = ['red','blue','yellow','gray']
colors.toLocaleString()

valueOf()

返回数组本身

let colors = ['red','blue','yellow','gray']
colors.valueOf()

join()

let colors = ['red','blue','yellow','gray']
colors.join('--')
colors.join('')
colors.join()
colors.join(undefined)

  • tips

如果数组中的某一项是null或undefined,则在join()、toString()、toLocalString()、valueOf()返回的结果中会以空字符串表示

栈方法

pop()

用于删除数组的最后一项,同时减少数组的length,返回被删除的项

push()

接受任意的参数,并将它添加数组末尾返回数组的最新长度

队列方法

shift()

删除数组的第一项返回数组的第一项,数组长度减一

unshift()

在数组开头添加任意多个值,返回新数组的长度

查找的方法

find((item,index,array)=>{},this)

返回第一个匹配的元素

findIndex()

返回第一个匹配元素的索引

indexOf(target,start)

返回要查到的元素在数组中的位置,找到就结束,不再继续查找,没找到返回-1

lastIndexOf(target,start)

返回要查到的元素在数组中的位置,找到就结束,不再继续查找,没找到返回-1

includes(target,start)

返回布尔值表示是否至少找到一个与指定元素匹配的项

tips

1.使用delete运算符可以将元素从数组中删除,但是数组的length不会发生变化

归并方法

reduce

  1. 获取元素中的最大值
 let arr = [1,2,3,4,5]
 function arrayMax(array){
   return array.reduce(function(pre, cur){
     return pre>cur ? pre : cur
   })
 }
 arrayMax(arr) //
  1. 获取数组中重复出现数字的次数
 let arr = [1,2,3,2,3,4,2,2,3,4,3,]
 function arrayCount(array,item){
   return array.reduce((total,cur)=>{
     total += item === cur ? 1 : 0
     return total
   },0)
 }
 arrayCount(arr,3)