深入理解js数组

2023年9月28日 153次阅读 来源: Wendy曹

一、如何判断是否是数组类型

1. typeof
//首先看代码
var arr = [1,2,3];
console.log(typeof arr); //Object

上面的办法并不能实时的检测出是否是数组，只能判断其类型，所以说typeof判断基本类型数据还是挺好的，但是不能准确测试出是否是数组

2.instanceof 判断
var arr = [1,2,3];
console.log(arr instanceof Array); //true

从输出的效果来看，还是挺令人满意的，能准确的检测出数据类型是否是数组吗？不要高兴的太早，大家先想想这个的缺点，我们接着说第三种方法

3.原型链方法
var arr = [1,2,3];
console.log(arr.__proto__.constructor==Array); //true

console.log(Array.prototype.isProtoTypeOf(arr)); //true

利用了原型链的方法，但是，这个是有兼容的，在IE早期版本里面__proto__是没有定义的; 而且，这个仍然有局限性，我们现在就来总结一下第2种方法和第3种方法局限性

4、总结一下第2种方法和第3种方法局限性

instanceof 和constructor判断的变量，必须在当前页面声明的，比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个arr，并将其赋值给父页面的一个变量，这时判断该变量，object.__proto__.constructor==Array或者是object.instanceof Array 会返回false；
原因：
1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的Array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！

5.通用的方法

Array.isArray() 用于确定传递的值是否是一个 Array。
假如不存在Array.isArray()，可以用如下polyfill , 如下所示：

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

具体Object.prototype.toString的用法，请参照 Object.prototype.toString的用法

二、数组的一些常用方法

1、直接操作数组的：

shift( )移除数组中的第一项，返回该项
unshitf( )在数组前端添加任意个项，返回新数组的长度
push( ) 在数组末尾添加任意个项，返回修改后数组的长度
pop( ) 删除数组最后一项，返回该项
reverse( ) 反转数组顺序
splice(start, 要删除的项，要插入的项) 对原数组进行删除、插入、替换操作，返回删除的项（如果没有删除，则返回空数组）
sort([compareFun])根据某种规则排序,默认Unicode位点排序

2、不影响原数组，只返回新数组的：

toString( )、valueOf( ) :都返回数组的以逗号分隔的字符串
join( )返回数组的以指定分隔符分隔的字符串
concat( ) 合并数组，返回合并后的新数组
slice( start, [end]) 截取数组某一段值，slice( )若不传值，则执行浅拷贝,start从0开始
map(callback[,thisArg])让数组通过某种计算,返回新的数组、
filter( callback[, thisArg])筛选出数组中符合条件的项，组成新数组
reduce( callback[, thisArg]) 让数组中前项和后项做某种运算，并累计最终值

3、返回其他值的

forEach(callback[, thisArg])让数组中的每一项做一件事,返回undefined ie9+
every( callback[, thisArg])检验数组中每一项是否符合条件，全部符合返回true
some( callback[, thisArg])检验数组中是否有符合条件的项，存在返回true

三、ES6的一些新特性

1、扩展运算符 …
console.log(…[1,2,3])  //1 2 3

将一个数组转为用逗号分隔的参数序列

2、将类数组转化为数组的方法
  • Array.from
  • Array.of
    ES5下可以使用方法 Array.prototype.slice.call( )

参考资料：
http://es6.ruanyifeng.com/#docs/array
https://www.cnblogs.com/leaf930814/p/6659996.html

在简书上发布专业相关文章是对自己不断学习的激励；如有什么写得不对的地方，欢迎批评指正；给我点赞的都是小可爱^_^

    原文作者：Wendy曹
    原文地址: https://www.jianshu.com/p/3b3123fc20cd
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞