
2024-12-27 日报 Day48

今日的鸡汤
人生的淡定和从容,都是从学到的本领修炼来的气定神闲。
今日学习内容
1、JS红皮书P139-142 第六章:集合引用类型
今日笔记
1、除了 Object,Array 应该就是 ECMAScript 中最常用的类型了。跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。这意味着可以创建一个数组,它的第一个元素是字符串,第二个元素是数值,第三个是对象。ECMAScript 数组也是动态大小的,会随着数据添加而自动增长。
2、创建数组的方式有两种。第一种是使用 Array 构造函数,如下所示:
1 | let colors = new Array(); |
第二种方式是使用数组字面量表示法,如下所示:
1 | let colors = ["red", "blue", "green"]; |
数组字面量表示法是数组创建方式中最常用的一种,因为它更简洁。数组字面量表示法中的数组项不必是常量,可以是任意表达式。数组项可以是任意类型的数据,也可以是对象或其他数组。注意 与对象一样,在使用数组字面量表示法创建数组不会调用 Array 构造函数。
Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法:from()和 of()。from()用于将类数组结构转换为数组实例,而 of()用于将一组参数转换为数组实例。
Array.from()的第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个 length 属性和可索引元素的结构。这种方式可用于很多场合:
1 | // 字符串会被拆分为单字符数组 |
Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值,而无须像
调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数,用于指定映射函
数中 this 的值。但这个重写的 this 值在箭头函数中不适用。
1 | const a1 = [1, 2, 3, 4]; |
Array.of()可以把一组参数转换为数组。这个方法用于替代在 ES6之前常用的 Array.prototype. slice.call(arguments),一种异常笨拙的将 arguments 对象转换为数组的写法:
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
console.log(Array.of(undefined)); // [undefined]
3、要取得或设置数组的值,需要使用中括号并提供相应值的数字索引,如果把一个值设置给超过数组最大索引的索引,就像示例中的 colors[3],则数组长度会自动扩展到该索引值加 1
数组 length 属性的独特之处在于,它不是只读的。通过修改 length 属性,可以从数组末尾删除或添加元素。来看下面的例子:
1 | let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组 |
注意 数组最多可以包含 4 294 967 295 个元素,这对于大多数编程任务应该足够了。如果尝试添加更多项,则会导致抛出错误。以这个最大值作为初始值创建数组,可能导致脚本运行时间过长的错误。
4、检测数组:一个经典的 ECMAScript 问题是判断一个对象是不是数组。在只有一个网页(因而只有一个全局作用域)的情况下,使用 instanceof 操作符就足矣:
1 | if (value instanceof Array){ |
使用 instanceof 的问题是假定只有一个全局执行上下文。如果网页里有多个框架,则可能涉及两个不同的全局执行上下文,因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架,则这个数组的构造函数将有别于在第二个框架内本地创建的数组。
为解决这个问题,ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。来看下面的例子:
1 | if (Array.isArray(value)){ |
5、迭代器方法:在 ES6 中,Array 的原型上暴露了 3 个用于检索数组内容的方法:keys()、values()和entries()。keys()返回数组索引的迭代器,values()返回数组元素的迭代器,而 entries()返回索引/值对的迭代器:
1 | const a = ["foo", "bar", "baz", "qux"]; |