类数组和数组的区别和转化

204 阅读4分钟

这是面试被问到的题目,对于这个问题,我们要先解释一下什么是类数组。

类数组

类数组的定义在《JavaScript标准》上面说的很复杂,简单的理解一下,就是它有以下特点就是类数组:

  1. 它能够用索引值访问当前元素,并且能知道当前数组的长度
  2. 它不能够使用数组的其他的方法,诸如map,filter等等 类数组一般在函数参数上使用较多,arguments就是一个类数组

数组和对象的常用方法

按照说区别的老套路,我们首先要认真地解释一下这两者的各自对应的方法,这样区别就一目了然了。
那么开始,首先是对象的常用方法:

Object的方法: obj = {a1b:"1",c:true,d:{}}
for ... in ...   --- 数组常用的遍历方法,作用是把整个数组都遍历一遍
hasOwnProperty --- 返回一个布尔值,判断是否有该属性
toString --- 判断数值变量时候的万能方法
defineProperty --- Vue中实现数据双向绑定的核心算法
valueOf --- 返回这个对象的原始值 // {a1b:"1",c:true,d:{...}}
for...of... --- 可以对具有迭代器的对象进行遍历,比如map,set,array等
keys,values --- 分别返回由这个对象的属性和属性值组成的数组 // keys:{"a","b","c","d"}  values:{1,"1",true,{...}}

然后是数组的常用方法

首先是常用的数组本身的操作方法
shift --- 从头部删除元素 返回值为删去的元素
unshift --- 从头部增加元素 没有返回值
pop --- 从尾部删去元素 返回值为删去的元素
push --- 从尾部增加元素 没有返回值
concat --- 将多个数组合并为一个数组  返回值为合并的数组
splice --- 可传入多个参数。 返回值为被改变的数组,比如说删掉了1,2项,那就返回1,2项的值,如果改变了1,2项,就返回1,2项的被改变前的值
第一个参数为删除元素的起始位置,后面如果没有参数就是删光
第二个参数为删除元素的个数,如果超出删除的个数也就是全删光
第三个参数以上是在删除的位置开始加上要加的值,比如说[1,2].splice(0,1,2,2)的变化后的数组就是[2,2,2]
reverse --- 将数组改变一下排列顺序 返回值为改变顺序后的数组
sort --- 将数组按照升序排序 不过可以通过传函数变成降序 返回值是改变了的数组,同时这个方法会导致原数组也发生变化
slice --- 将原来的数组中的一部分进行切分出来并作为返回值返回,比如说[1,2,4,5,6].slice(1,3) 得到的值就是 [2,4],由这个也可以看出第一个参数是起始位置,第二个参数是截止的位置,也可以直接算成后面的值减去前面的值得到的数就是要截取的长度
join --- 将数组根据加入的值进行拼接 返回值是拼接完成后的返回值
然后是数组的遍历方法
filter --- 根据给出的回调函数遍历整个数组条件相符的元素 返回值为经过筛选之后的数组
forEach --- 对整个数组进行遍历 返回值为undefined
map --- 对整个数组根据回调函数进行遍 并返回经过调用的元素组成的数组
every,some --- 对整个数组进行条件判断是否符合某个条件,every是对整个数组的元素比较,一个不符合就是false,some时一个符合就全部符合 返回值是一个boolean值
reduce --- 对整个数组进行累计操作,需要至少一个累计值一个当前值,还能传当前的索引值和整个源数组,返回一个累计值
find --- 寻找整个数组是否含有某个值,如果有返回这个值所在的索引值,如果没有返回undefind
valueOf --- 寻找数组是否含有某个值,如果有返回这个值所在的索引值,如果没有返回-1
for...of... --- 同object
for...in... --- 同Object
keys,values --- 同Object

类数组和数组的互相转化

讲完了类数组和数组分别是什么之后,两者的区别也就不言而喻了,现在讲讲这两个的互相转化: 数组本身就是个对象,他有类数组所有的方法,所以数组转类数组不用思考,这边只讲一下类数组的转化方式:

ES6
1.const newArr = [...arguments]
2.Array.from
ES5
function toArray(s){
    var arr = [];
    try{
        arr = Array.prototype.slice.call(s)
    }catch{
        for(var i=0;i < s.length;i++){
            arr.push(s[i])
        }
    }
    return arr
}