详解JavaScript系列之数组(二)| 8月更文挑战

645 阅读2分钟

image.png


前言

接上一篇文章,我们来详细解读js数组的内容,本篇幅讲述“涉及数组类型和真伪的转换 ”,上一篇传送门


isArray():判断是否为数组

语法:布尔值 = Array.isArray(被检测的数组);

以前,我们会通过 A instanceof B来判断 A 是否属于 B 类型。但是instanceof是基于原型链查找来判断的,而Array也是Object的一种实例,所以遇到数组和其他object时,就没办法区分是不是Array。所以JavaScript给我们提供了isArray()方法。


toString():数组转换为字符串

字符串 = 数组.toString();

解释:把数组转换成字符串,每一项用,分割。

备注:大多数的数据类型都可以使用.toString()方法,将其转换为字符串。

知识点扩展:将数组转换为字符串,有哪些方式

方式 1:

字符串 = 数组.toString();

方式 2:

字符串 = String(数组);

方式 3:

字符串 = 数组.join(','); // 将数组转为字符串,每一项用 英文逗号 分隔

Array.from():将伪数组转换为真数组

array = Array.from(arrayLike);

作用:将伪数组或可遍历对象转换为真数组

示例

const name = 'qianguyihao';
console.log(Array.from(name)); // 打印结果是数组:["q","i","a","n","g","u","y","i","h","a","o"]
伪数组与真数组的区别

伪数组:包含 length 属性的对象或可迭代的对象。

另外,伪数组的原型链中没有 Array.prototype,而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法,比如 pop()、join() 等方法。

伪数组举例
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
​
    <script>
        let btnArray = document.getElementsByTagName('button');
        console.log(btnArray);
        console.log(btnArray[0]);
    </script>
</body>

上面的布局中,有三个 button 标签,我们通过getElementsByTagName获取到的btnArray实际上是伪数组,并不是真实的数组:

既然btnArray是伪数组,它就不能使用数组的一般方法,否则会报错,那么如何解决呢?

解决办法:采用Array.from方法将btnArray这个伪数组转换为真数组即可

Array.from(btnArray);

这个数组一下就发生了质的改变,然后就可以使用数组的一般方法了

注:比如function自带的arguments也是伪数组,平时应用较多


Array.of():创建数组

Array.of(value1, value2, value3,...);

作用:根据参数里的内容,创建数组。

示例

const arr = Array.of(1, 'abc', true);
console.log(arr); // 打印结果是数组:[1, "abc", true]

补充:new Array()Array.of()的区别在于:当参数只有一个时,前者表示数组的长度,后者表示数组中的内容。