es6怎么判断一个变量是否为数组

判断方法:1、利用Array对象的isArray()函数来判断变量是不是数组,语法“Array.isArray(obj)”,如果是数组返回true,否则返回false。2、通过“Object.prototype.toString()”来判断,语法“Object.prototype.toString.apply(a) === ‘[object Array]’”。

es6怎么判断一个变量是否为数组

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

JS的弱类型机制导致判断变量类型是初级前端开发者面试时的必考题,一般我都会将其作为考察候选人第一题,然后基于此展开。

在ES5中判断变量是否为数组

在ES5中,我们至少有如下5种方式去判断一个值是否数组:

var a = []; // 1.基于instanceof a instanceof Array; // 2.基于constructor a.constructor === Array; // 3.基于Object.prototype.isPrototypeOf Array.prototype.isPrototypeOf(a); // 4.基于getPrototypeOf Object.getPrototypeOf(a) === Array.prototype; // 5.基于Object.prototype.toString Object.prototype.toString.apply(a) === '[object Array]';

登录后复制

以上,除了Object.prototype.toString外,其它方法都不能正确判断变量的类型。

要知道,代码的运行环境十分复杂,一个变量可能使用浑身解数去迷惑它的创造者。且看:

var a = {    __proto__: Array.prototype}; // 分别在控制台试运行以下代码 // 1.基于instanceof a instanceof Array; // => true // 2.基于constructor a.constructor === Array; // => true // 3.基于Object.prototype.isPrototypeOf Array.prototype.isPrototypeOf(a); // => true // 4.基于getPrototypeOf Object.getPrototypeOf(a) === Array.prototype; // => true

登录后复制

以上,4种方法将全部返回true,为什么呢?我们只是手动指定了某个对象的__proto__属性为Array.prototype,便导致了该对象继承了Array对象,这种毫不负责任的继承方式,使得基于继承的判断方案瞬间土崩瓦解。

不仅如此,我们还知道,Array是堆数据,变量指向的只是它的引用地址,因此每个页面的Array对象引用的地址都是不一样的。iframe中声明的数组,它的构造函数是iframe中的Array对象。如果在iframe声明了一个数组x,将其赋值给父页面的变量y,那么在父页面使用y instanceof Array ,结果一定是false的。而最后一种返回的是字符串,不会存在引用问题。实际上,多页面或系统之间的交互只有字符串能够畅行无阻。

ES6中判断变量是否为数组

鉴于数组的常用性,在ES6中新增了Array.isArray方法,使用此方法判断变量是否为数组,则非常简单,如下:

Array.isArray([]); // => true Array.isArray({0: 'a', length: 1}); // => false

登录后复制

实际上,通过Object.prototype.toString去判断一个值的类型,也是各大主流库的标准。因此Array.isArray的polyfill通常长这样:

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

登录后复制

【相关推荐:javascript学习教程

以上就是es6怎么判断一个变量是否为数组的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2921655.html

(0)
上一篇 2025年3月11日 18:30:56
下一篇 2025年2月26日 23:56:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • es6新增运算符有哪些

    es6新增运算符有:1、可选链运算符“?.”,可以判断操作符之前属性是否有效,从而链式读取对象的属性或返回undefined;2、指数运算符“**”,用于指数操作的中缀运算符,语法“x ** y”;3、空值合并运算符“??”;4、逻辑赋值运…

    2025年3月11日
    200
  • webpack支持es6吗

    webpack支持es6。webpack 2支持原生的ES6模块语法,意味着开发者无须额外引入babel这样的工具,就可以使用import和export。但如果使用其他的ES6+特性,仍然需要引入babel工具。 本教程操作环境:windo…

    2025年3月11日
    200
  • es6怎么判断数组里总共有多少项

    在es6中,可以利用array对象的length属性来判断数组里总共有多少项,即获取数组中元素的个数;该属性可返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。 本教程操作环…

    2025年3月11日 编程技术
    200
  • es6 import会变量提升吗

    ES6 import会产生变量提升的现象。变量提升是将变量声明提升到它所在作用域的最开始的部分。js要经历编译跟执行阶段,在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一…

    2025年3月11日
    200
  • jquery怎么移除z-index样式

    jquery移除z-index样式的方法:1、利用css()移除,只需将z-index属性的值设置为默认值“auto”即可,语法“$(“选择器”).css(“z-index”,”a…

    2025年3月11日 编程技术
    200
  • jquery怎么设置元素多个属性值

    jquery设置元素多个属性值的方法:1、使用attr()设置,语法“$(selector).attr({属性名:属性值;属性值:属性值…})”;2、使用prop()设置,语法“$(selector).prop({属性名:属性值…

    2025年3月11日 编程技术
    200
  • jquery中的$有啥作用

    作用有:1、作为jQuery包装器,利用选择器来选择DOM元素,语法“$(“选择器”)”;2、功能函数前缀,作为通用实用工具函数的命名空间的前缀,例“$.trim(sString);”;3、解决window.onlo…

    2025年3月11日
    200
  • jquery load方法有什么缺陷

    jquery load方法的缺陷:1、load方法会自动忽略掉head、body、script标签;2、动态加载后会出现滚动条偏移的问题,只需在load方法的回调函数里面加入“$(document).scrollTop(0);”即可解决;3…

    2025年3月11日
    200
  • jquery的toggle()方法有什么用

    toggle()方法可用于切换被选元素的hide()与show()方法,进而控制元素的显示和隐藏,语法“$(selector).toggle(speed,callback)”;也可用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的cl…

    2025年3月11日
    200
  • jquery怎么修改tr属性值

    jquery修改tr属性值的方法:1、利用jquery选择器获取指定tr元素,语法“$(“选择器”)”,会返回包含指定tr元素的jquery对象;2、使用attr()函数修改指定tr元素对象的属性值,语法“tr元素对…

    2025年3月11日
    200

发表回复

登录后才能评论