第一百一十二篇: JS数组Array(一)数组基本用法

第一,百一,十二篇,js,数组,array,基本,用法 · 浏览次数 : 211

小编点评

**1.数组在ECMAScript中是首要的数据类型** * 与其他编程语言的数组不同,ECMAScript数组可以存储任意类型的数据。 * 动态大小,自动增长。 **2.创建数组有几种方式** * 使用 `Array()` 构造函数直接创建。 * 使用数组字面量创建数组。 * 使用 `from()` 和 `of()` 方法创建数组。 **3.数组空位使用数组字面量初始化** * 使用逗号创建空位。 * ES6规范重新定义了如何处理这些空位。 **4.数组索引** * 从“0”开始算起。 * 可使用 `length` 属性不断向数组末尾添加元素。 **5.数组检测** * 使用 `instanceof` 操作符测试值是否为数组。 **6.迭代器方法** * `keys()`: 返回数组索引的迭代器。 * `values()`: 返回数组元素的选代器。 * `entries()`: 返回索引/值对的迭代器。

正文

好家伙,

 

1.数组

Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。

跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据,

但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。

这意味着可以创建一个数组,它的第一个元素是字符串,第二个元素是数值,第三个是对象。

ECMAScript数组也是动态大小的,会随着数据添加而自动增长。

 

2.创建数组

有几种基本的方式可以创建数组。第一种是使用Array 构造函数,第二种是使用数组字面量

 

2.1.使用Array 构造函数创建数组

可以直接使用new字符创建,可以传参,也可以直接传入要保存的数

 

let Array_1 = new Array();

//创建length为20的数组 let Array_2
= new Array(20);
Array_3
= new Array("red","blue", "green"); console.log(Array_1,Array_2,Array_3);

 

 

 

2.2.使用数组字面量创建数组

let Array_1 = []; 

let Array_2 = [1,2,];

Array_3 = ["red","blue", "green"];

console.log(Array_1,Array_2,Array_3);

 

 

此处Array_2仍然是空数组

 

2.3.Array构造函数好友两个ES6新增的用于创建数组的静态方法:from()和of().

from()用于将类数组结构转换为数组实例,

而of()用于将一组参数转换为数组实例

 

console.log(Array.from("Array"));

console.log(Array.of(1,2,3,4,5));

 

 

 

3.数组空位

使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。

ECMcript会将逗号之相应索引位置的值当成空位,ES6规范重新定义了该如何处理这些空位。

const options = [1, , , , 5];
for (const option of options) {
    console.log(option === undefined);
}

 

 

 

4.数组索引

 跟大部分语言相同,JS的数组索引也是从"0"开始算起的

let colors = ["red", "blue", "green"]; //定义一个字符串数组
console.log(colors[0]);
//显示第一项
colors[2] = "black";
//修改第三项
colors[3] = "brown";
//添加第四项
console.log(colors);

 

 

 

 

有意思的是,我们可以使用length属性不停的向数组末尾添加元素

let colors = ["red", "blue", "green"]; //定义一个字符串数组
for (let i = 2; i <= 10; i++) {
    colors[colors.length] = "nocolors";
}
console.log(colors);

 

 

 

(实用小技巧+1) 

 

 

5.数组检测

一个经典的ECMAScript问题是判断一个对象是不是数组。

在只有一个网页(因而只有一个全局作用域)的情况下,使用instanceof 操作符就足矣:

 使用instanceof的问题是假定只有一个全局执行上下文。

如果网页里有多个框架,则可能涉及两个不同的全局执行上下文,因此就会有两个不同版本的Array 构造函数。

如果要把数组从一个框架传给另一个框架,则这个数组的构造函数将有别于在第二个框架内本地创建的数组。

为解决这个问题,ECMAScript提供了Array.isArray()方法.这个方法的目的就是确定一个值是否为数组,

而不用管它是在哪个全局执行上下文中创建的

let colors = ["red", "blue", "green"]; //定义一个字符串数组
console.log(Array.isArray(colors))

 

 

 

 

6.迭代器方法

 在ES6中,Array的原型上暴露了3个用于检索数组内容的方法:keys(),values()和entries()。

方法一:  keys()返回数组索引的迭代器,

方法二:  values()返回数组元素的选代器,

方法三:  entries()返回索引/值对的迭代器:

 

 

let colors = ["red", "blue", "green"]; //定义一个字符串数组

let colorskeys= Array.from(colors.keys());
let colorsvalues =Array.from(colors.values());
let colorsentries= Array.from(colors.entries());

console.log(colorskeys);
console.log(colorsvalues);
console.log(colorsentries);

 

 

 

 

(好用直观)

 

 

 

与第一百一十二篇: JS数组Array(一)数组基本用法相似的内容:

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十八篇: JavaScript 原型链式继承

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。 重温一下构造函数、原型和实例的关系:每个构造函数

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定

第一百一十六篇: JavaScript理解对象

好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特定顺序的值。 对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值。正因为如此(以及其他还未讨论的原因),可以把 EC

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型