JavaScript内置构造函数:Array

全篇共 9469 字。按500字/分钟阅读,预计用时 18.9 分钟。总访问 43 次,日访问 1 次。

Array是JavaScript语言核心的内置构造函数。函数和数组的本质都是对象,对象是属性的集合。Array构造函数拥有很多属性和方法,用Array构造函数实例化的数组实例本质也是对象,数组梳理也拥有很多属性和方法。本篇我整理总结Array构造函数及其构造出的实例所拥有的属性和方法,以及这些数组属性和方法在前端开发中如何使用。文章的JS代码片段都是Chrome浏览器自带的开发者工具中执行的。

浏览器是运行JavaScript的宿主环境,window是这个宿主环境的全局变量,它是一个对象,对象是属性的集合,在这个叫做window的集合中,其中有两个对象类型的属性。

window.console.dir
window.Array

首先是上面的第一个console对象,想必开发者在调试代码时会常用到它的log方法。另一个很有用的方法,dir方法,用它在控制台中输出指定JavaScript对象的属性,并通过类似文件树格式的交互列表显示。我们需要借助console的dir方法罗列出Array构造函数本身究竟都有那些属性和方法。

console.log(Array)

// 控制台输出:
// ƒ Array() { [native code] }

如果你直接在Chrome浏览器的控制台输入Array后回车,或者用console的log方法打印Array,就会得到上面的输出结果。这对我们探究Array构造函数究竟都有哪些可用的属性和方法没有多少帮助。这时console的dir方法就派上用场了。

从在控制台打印出的内容可以看出,Array继承自Function,除了作为函数都会有的属性以外,我们可以看到Array构造函数特有的一些方法,比如Array.from(),比如Array.isArray(),比如Array.of():

Array.from()
Array.isArray()
Array.of()

Array.prototype

Array是所有数组实例的构造函数。所有数组,无论它们是通过字面量的方式,还是通过new的方式,或是用JSON.parse解析出的数组,还是其它的什么方式创建的数组,这些数组实例天生就带有一些“用处”,这是Array.prototype赋予它们的,比如arr.push()、arr.pop()、arr.some()等方法。

上方动图展示了所有被Array的实例们所继承的方法。这篇文章,我会整理归纳和总结Array构造函数那些自身独有的,以及Array所构造出的数组实例们的“本事”。为了保证权威性和技术理解的统一性,对于Array技术细节的讲解,我会直接在文章中引用MDN官网上对Array的介绍,大家可以自行跳转。MDN是一个很棒的学习前端开发技术的网站。

编程是一件有趣切有意义的玩具,它比任何玩具都要结实,怎么都玩不坏。对这玩具探索的越深,收获的乐趣和意义就越多。放开了玩吧。

Array的类方法

  • Array.prototype.from

    const els_allDIV = document.querySelectorAll('div');
    const arr_allDIV = Array.from(els_allDIV);
    
    els_allDIV.push // undefined
    arr_allDIV.push // ƒ push() { [native code] }
    

    from意为“从…”,所以Array的from方法就是“从…创建数组”。从一个类数组对象或可迭代对象,创建一个新的、浅拷贝的Array实例。上面的els_allDIV就是NodeList的实例,它虽然也有length属性,但它终究不是真正意义上的数组,而是类数组(类似于数组),它的原型链上不具备只有真正的Array实例才能直接调用的一些方法,比如push方法。但是经过Array.from的处理,arr_allDIV成了真正的Array实例。浅拷贝意味着类数组如果包含对象元素,由于对象是引用值,因此会出现修改这边对象的属性,另一边同一个引用对象的属性也跟着改变,这个不能不知道呀。

  • Array.prototype.of

    let arr1 = Array.of(1, '12', {}, []);
    let arr2 = [1, '12', {}, []];
    

    用上面第一种方式创建arr1数组,和用第二种方式创建的arr2,没看出什么区别来。

  • Array.prototype.isArray

    Array.isArray(document.querySelectorAll('div')) // false
    

    判断传入的值是否是数组。

Array的实例方法

  • Array.prototype.concat

    let a = [{ a: 1 }];
    let b = [{ b: 1 }];
    let c = a.concat(b, a, b, b);
    console.log(c[0].a); // 1
    a[0].a = 2;
    console.log(c[0].a); //2
    

    用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。依然是浅拷贝。

  • Array.prototype.copyWithin

    let a = [1, 2, { a: 0 }, 1, 1];
    let b = a.copyWithin(2, 0);
    console.log(a === b); // true
    

    将数组的一部分复制到同一数组中的另一个位置,并返回这个数组,但不会改变这个数组的长度。

  • Array.prototype.includes

    let obj = { a: 0 };
    let a = [1, 2, obj, 1, 1];
    console.log(a.includes(obj)); // true
    

    用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false。

  • Array.prototype.entries

    let arr = [1, 2, 3];
    let iterator = arr.entries();
    iterator.next(); // { value: [0, 1], done: true }
    iterator.next(); // { value: [1, 2], done: true }
    iterator.next(); // { value: [2, 3], done: true }
    iterator.next(); // { value: undefined, done: true }
    

    返回一个包含数组中每个索引的键/值对的Array迭代器对象。

  • Array.prototype.keys

    let arr = [1, 2, 3];
    let iterator = arr.entries();
    iterator.next(); // { value: 0, done: true }
    iterator.next(); // { value: 1, done: true }
    iterator.next(); // { value: 2, done: true }
    iterator.next(); // { value: undefined, done: true }
    

    返回一个包含数组中每个索引键的Array迭代器对象。

  • Array.prototype.values

    let arr = [1, 2, 3];
    let iterator = arr.entries();
    iterator.next(); // { value: 1, done: true }
    iterator.next(); // { value: 2, done: true }
    iterator.next(); // { value: 3, done: true }
    iterator.next(); // { value: undefined, done: true }
    

    返回一个包含数组中每个索引值的Array迭代器对象。

  • Array.prototype.every

    let a = [12,1,56,23,54,123,432];
    a.every(element => element > 10); // false
    

    测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

  • Array.prototype.some

    let a = [12,1,56,23,54,123,432];
    a.some(element => element < 1); // false
    

    测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

  • Array.prototype.filter

    let a = [12,1,56,23,54,123,432];
    a.filter(element => element <= 20); // [12, 1]
    

    创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

  • Array.prototype.sort
    对数组的元素进行排序,并返回数组。

  • Array.prototype.find
    返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

  • Array.prototype.findIndex
    返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

  • Array.prototype.indexOf
    返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

  • Array.prototype.lastIndexOf
    返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

  • Array.prototype.fill

    const array1 = [1, 2, 3, 4];
    array1.fill('shuaihua', 2, 10); // [1, 2, "shuaihua", "shuaihua"]
    

    用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

  • Array.prototype.flat

    let arr = [1, 2, [3, [4]]];
    arr.flat(); // [1, 2, 3, [4]]
    arr.flat(2); // [1, 2, 3, 4]
    

    按照指定深度将所有数组元素与遍历到的子数组中的元素合并为一个新数组返回。就是将数组中扁平化,和《三体》中提到的降维有点类似。

  • Array.prototype.flatMap

    let arr = [1, 2, 3, 4];
    arr.flatMap(x => [x * 2]); // [2, 4, 6, 8]
    

    让开发者能自定义地扁平化映射结果。扁平深度为1。

  • Array.prototype.forEach
    对数组的每个元素执行一次给定的函数。

  • Array.prototype.join
    将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

  • String.prototype.split
    使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

  • Array.prototype.map
    创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。

  • Array.prototype.pop
    从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

  • Array.prototype.push
    将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

  • Array.prototype.shift
    从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

  • Array.prototype.unshift
    将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

  • Array.prototype.reduce
    对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

  • Array.prototype.reduceRight
    接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

  • Array.prototype.reverse
    将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

  • Array.prototype.slice
    返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

  • Array.prototype.splice
    通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

  • Array.prototype.toLocaleString
    返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。

  • Array.prototype.toString
    返回一个字符串,表示指定的数组及其元素。


原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2020年6月11日 周四
更新日期 » 2020年6月26日 周五
上一篇 » 我读《三体》
下一篇 » [译] Introduction to GoJS Diagramming Components
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录