JavaScript Array(数组) 对象

简介: JavaScript Array(数组) 对象

JavaScript Array(数组) 对象

在 JavaScript 中,数组不是基本类型,而是具有以下核心特征的 Array 对象:

JavaScript 数组是可调整大小的,并且可以包含不同的数据类型。(当不需要这些特征时,可以使用类型化数组。)
JavaScript 数组不是关联数组,因此,不能使用任意字符串作为索引访问数组元素,但必须使用非负整数(或它们各自的字符串形式)作为索引访问。
JavaScript 数组的索引从 0 开始:数组的第一个元素在索引 0 处,第二个在索引 1 处,以此类推,最后一个元素是数组的 length 属性减去 1 的值。
JavaScript 数组复制操作创建浅拷贝。(所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝,而不是深拷贝)。

数组下标

Array 对象不能使用任意字符串作为元素索引(如关联数组),必须使用非负整数(或它们的字符串形式)。通过非整数设置或访问不会设置或从数组列表本身检索元素, 但会设置或访问与该数组的对象属性集合相关的变量。数组的对象属性和数组元素列表是分开的,数组的遍历和修改操作不能应用于这些命名属性。

数组元素是对象属性,就像 toString 是属性一样(具体来说,toString() 是一种方法)。然而,尝试按以下方式访问数组的元素会抛出语法错误,因为属性名无效:

console.log(arr.0); // a syntax error

JavaScript 语法要求使用方括号表示法而不是点号表示法来访问以数字开头的属性。也可以用引号包裹数组下标(例如,years['2'] 而不是 years[2]),尽管通常没有必要。

JavaScript 引擎通过隐式的 toString,将 years[2] 中的 2 强制转换为字符串。因此,'2' 和 '02' 将指向 years 对象上的两个不同的槽位,下面的例子可能是 true:

console.log(years['2'] !== years['02']);

只有 years['2'] 是一个实际的数组索引。years['02'] 是一个在数组迭代中不会被访问的任意字符串属性。

长度与数值属性的关系

JavaScript 数组的 length 属性和数值属性是连接的。

一些内置数组方法(例如 join()、slice()、indexOf() 等)在被调用时会考虑到数组的 length 属性的值。

其他方法(例如,push()、splice() 等)也会更新数组的 length 属性。

const fruits = [];
fruits.push('banana', 'apple', 'peach');
console.log(fruits.length); // 3

当在 JavaScript 数组上设置一个属性时,如果该属性是一个有效的数组索引并且该索引在数组的当前边界之外,引擎将相应地更新数组的 length 属性:

fruits[5] = 'mango';
console.log(fruits[5]);            // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length);        // 6

增加 length。

fruits.length = 10;
console.log(fruits);              // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length);       // 10
console.log(fruits[8]);           // undefined

但是,减少 length 属性会删除元素。

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length);       // 2

这将在 Array/length 页中进一步解释。

Array的对象方法

说明:部分是ECMAScript5的新特性(IE678不支持)

方法 作用
concat() 连接两个或者更多的数组,并返回结果
join() 将数组的元素组起一个字符串
pop() 删除并返回数组的最后一个元素
push() 数组末尾添加一个或者多个元素,返回新的长度
reverse 颠倒数组中元素的顺序
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组元素排序
splice() 删除元素,并向数组添加新元素
toSource() 返回该对象的源代码
toString() 把数组转化为字符串并返回结果
toLocalString() 把数组转化为本地元素并返回结果
unshift 向数组开头添加一个或者更多的元素,并返回新的长度
valueof() 返回数组对象的原始值
forEach() 遍历数组对象
map() 对数组做一些映射
filter() 过滤
every() 检查判断
some() 检查判断
reduce() 两两执行一定的操作
reduceRight() 从右到左执行操作
indexOf() 数组检索查找某个元素
Array.isArray([]) 判断是否是数组

主要对一些新特性进行讲解

concat

concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]
slice

slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]
splice

splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];
foreach

foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例2。

例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21
map

map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]
filter

filter 过滤掉某些元素,和map有点类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
相关文章
|
XML Java 数据格式
Spring系列(三)之Bean的生命周期以及Bean的单例与多例模式
Spring系列(三)之Bean的生命周期以及Bean的单例与多例模式
|
消息中间件 存储 缓存
十万订单每秒热点数据架构优化实践深度解析
【11月更文挑战第20天】随着互联网技术的飞速发展,电子商务平台在高峰时段需要处理海量订单,这对系统的性能、稳定性和扩展性提出了极高的要求。尤其是在“双十一”、“618”等大型促销活动中,每秒需要处理数万甚至数十万笔订单,这对系统的热点数据处理能力构成了严峻挑战。本文将深入探讨如何优化架构以应对每秒十万订单级别的热点数据处理,从历史背景、功能点、业务场景、底层原理以及使用Java模拟示例等多个维度进行剖析。
382 8
|
网络协议 Ubuntu Linux
在IPad Pro上怎么实现代码自由,如何让IPad Pro变成你的生产力工具?
如何让IPad Pro变成你的生产力工具?在IPad上用Vscode写代码搞开发
665 1
在IPad Pro上怎么实现代码自由,如何让IPad Pro变成你的生产力工具?
|
XML 存储 网络协议
/etc/netplan/network-manager-all.yaml 配置服务器ip
/etc/netplan/network-manager-all.yaml 配置服务器ip
576 0
|
前端开发 JavaScript 中间件
React中使用​​useReducer​​​高阶钩子来管理状态
通过本文的介绍,您可以在React中使用 `useReducer`高阶钩子来管理复杂的状态逻辑。`useReducer`不仅提供了清晰的状态管理方式,还可以通过与 `useContext`结合,实现全局状态管理。此外,通过自定义中间件,可以进一步扩展其功能。希望本文对您理解和应用 `useReducer`有所帮助。
241 0
|
监控 JavaScript 前端开发
Web Vitals:提升网页用户体验的关键技术
【7月更文挑战第18天】Web Vitals 为开发者提供了一套全面而具体的性能优化指南,帮助开发者从多个维度提升网页的用户体验。通过关注 LCP、FID 和 CLS 等核心指标,并采取有效的优化策略,我们可以让网页加载更快、交互更流畅、视觉更稳定,从而赢得用户的青睐和信任。在未来的发展中,持续关注并优化 Web Vitals 指标将是提升网页用户体验的重要方向。
|
运维 Devops 持续交付
现代运维的转型:从传统模式到DevOps的演进
本文将探讨现代IT运维领域正在经历的一场深刻变革:从传统的运维模式向DevOps文化和实践的转型。通过分析传统运维的挑战、新兴技术的推动力以及DevOps的核心理念,本文旨在为读者提供一个全面的视角,理解如何通过这一转型实现效率提升、风险降低和更高的业务价值。
467 33
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
1188 0
VUE element-ui之table表格内容样式(颜色)修改
|
应用服务中间件 Linux nginx
蓝易云 - linux查看正在运行的nginx在哪个文件夹当中
请注意,这些步骤可能需要root权限才能执行。如果你没有root权限,你可能需要使用 `sudo`命令。
414 0
|
人工智能 数据可视化 数据挖掘
【python】Python航空公司客户价值数据分析(代码+论文)【独一无二】
【python】Python航空公司客户价值数据分析(代码+论文)【独一无二】