深入理解js数组

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

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种方法局限性

instanceofconstructor判断的变量,必须在当前页面声明的,比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,071评论 0 6
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,387评论 0 2
  • https://nodejs.org/api/documentation.html 工具模块 Assert 测试 ...
    KeKeMars阅读 6,313评论 0 6
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,219评论 0 4
  • 我要提升和关注什么领域。我要提升和关注的是关于商业和公司管理的知识。个人成长的知识。然后每天做反思。提高个人的思考...
    隆震阅读 187评论 0 0