JavaScript中关于创建和使用array数组的探讨
数组是一组按序排列的值,相对地,对象的属性名称是无序的。从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名。javascript没有真正的关联数组,但对象可用于实现关联的功能
Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例。数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的
除了对象之外,数组Array类型可能是javascript中最常用的类型了。而且,javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型
创建数组
有两种创建数组的方法:使用字面量语法和使用Array()构造函数
【字面量】
使用数组字面量是创建数组最简单的方法,在方括号中将数组元素用逗号隔开即可
var empty = []; //没有元素的数组 var primes = [2,3,5,7,11]; //有5个数值的数组
虽然javascript数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,javascript数组的每一项可以保存任何类型的数据
var misc = [1.1,true, "a"]; //3个不同类型的元素
数组字面量中的值不一定要是常量,它们可以是任意的表达式
var base = 1024; var table = [base,base+1,base+2,base+3];
它可以包含对象字面量或其他数组字面量
var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];
如果数组的元素还是数组,就形成了多维数组
var a = [[1, 2], [3, 4]];
[注意]使用数字字面量表示法时,不会调用Array构造函数
【构造函数】
有三种方式调用构造函数
【1】没有参数,创建一个空数组
//该方法创建一个没有任何元素的空数组,等同于数组直接量[] var a = new Array();
【2】有一个数值参数,该参数用于指定数组的长度
var a = new Array(10); console.log(a);//[] console.log(a[0],a.length);//undefined 10
[注意]若存在一个其他类型的参数,则会创建包含那个值的只有一项的数组
var a = new Array('10'); console.log(a);//['10'] console.log(a[0],a.length);//10 1
【3】有多个参数时,参数表示为数组的具体元素
var a = new Array(1,2,3); console.log(a);//[1,2,3] console.log(a[0],a[1],a[2]);//1 2 3
使用Array()构造函数时,可以省略new操作符
var a1 = Array(); var a2 = Array(10); var a3 = Array(1,2,3); console.log(a1,a2,a3);//[] [] [1,2,3]
数组本质
数组是按次序排列的一组值,本质上,数组是一种特殊的对象
typeof [1, 2, 3] // "object"
数组的特殊性体现在,它的键名是按次序排列的一组整数(0,1,2…)。由于数组成员的键名是固定的,因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名
var arr = ['a', 'b', 'c']; console.log(Object.keys(arr));// ["0", "1", "2"] var obj = { name1: 'a', name2: 'b', name3: 'c' };
数组是对象的特殊形式,使用方括号访问数组元素就像用方括号访问对象的属性一样
javascript语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串,然后将其作为属性名来使用
o={}; //创建一个普通的对象 o[1]="one"; //用一个整数来索引它 //数值键名被自动转成字符串 var arr = ['a', 'b', 'c']; arr['0'] // 'a' arr[0] // 'a'
但是,一定要区分数组索引和对象的属性名:所有的索引都是属性名,但只有在0~232-2(4294967294)之间的整数属性名才是索引
var a = []; //索引 a['1000'] = 'abc'; a[1000] // 'abc' //索引 a[1.00] = 6; a[1] // 6
[注意]单独的数值不能作为标识符(identifier)。所以,数组成员只能用方括号法表示
var arr = [1, 2, 3]; arr[0];//1 arr.0;//SyntaxError
可以使用负数或非整数来索引数组。但由于其不在0~2的32次方-2的范围内,所以其只是数组的属性名,而不是数组的索引,明显的特征是不改变数组的长度
var a = [1,2,3]; //属性名 a[-1.23]=true; console.log(a.length);//3 //索引 a[10] = 5; console.log(a.length);//11 //属性名 a['abc']='testing'; console.log(a.length);//11
数组长度
每个数组有一个length属性,就是这个属性使其区别于常规的JavaScript对象。针对稠密(也就是非稀疏)数组,length属性值代表数组中元素的个数,其值比数组中最大的索引大1
[].length //=>0:数组没有元素 ['a','b','c'].length //=>3:最大的索引为2,length为3
当数组是稀疏数组时,length属性值大于元素的个数,同样地,其值比数组中最大的索引大1
[,,,].length; //3 (Array(10)).length;//10 var a = [1,2,3]; console.log(a.length);//3 delete a[1]; console.log(a.length);//3
数组的特殊性主要体现在数组长度是可以动态调整的:
【1】如果为一个数组元素赋值,索引i大于等于现有数组的长度时,length属性的值将设置为i+1
var arr = ['a', 'b']; arr.length // 2 arr[2] = 'c'; arr.length // 3 arr[9] = 'd'; arr.length // 10 arr[1000] = 'e'; arr.length // 1001
【2】设置length属性为小于当前长度的非负整数n时,当前数组索引值大于等于n的元素将从中删除
a=[1,2,3,4,5]; //从5个元素的数组开始 a.length = 3; //现在a为[1,2,3] a.length = 0; //删除所有的元素。a为[] a.length = 5; //长度为5,但是没有元素,就像new
【3】将数组的length属性值设置为大于其当前的长度。实际上这不会向数组中添加新的元素,它只是在数组尾部创建一个空的区域
var a = ['a']; a.length = 3; console.log(a[1]);//undefined console.log(1 in a);//false
如果人为设置length为不合法的值(即0——232-2范围以外的值),javascript会报错
// 设置负值 [].length = -1// RangeError: Invalid array length // 数组元素个数大于等于2的32次方 [].length = Math.pow(2,32)// RangeError: Invalid array length // 设置字符串 [].length = 'abc'// RangeError: Invalid array length
由于数组本质上是对象,所以可以为数组添加属性,但是这不影响length属性的值
var a = []; a['p'] = 'abc'; console.log(a.length);// 0 a[2.1] = 'abc'; console.log(a.length);// 0
数组遍历
使用for循环遍历数组元素最常见的方法
var a = [1, 2, 3]; for(var i = 0; i < a.length; i++) { console.log(a[i]); }
当然,也可以使用while循环
var a = [1, 2, 3]; var i = 0; while (i < a.length) { console.log(a[i]); i++; } var l = a.length; while (l--) { console.log(a[l]); }
但如果数组是稀疏数组时,使用for循环,就需要添加一些条件
//跳过不存在的元素 var a = [1,,,2]; for(var i = 0; i < a.length; i++){ if(!(i in a)) continue; console.log(a[i]); }
还可以使用for/in循环处理稀疏数组。循环每次将一个可枚举的属性名(包括数组索引)赋值给循环变量。不存在的索引将不会遍历到
var a = [1,,,2]; for(var i in a){ console.log(a[i]); }
由于for/in循环能够枚举继承的属性名,如添加到Array.prototype中的方法。由于这个原因,在数组上不应该使用for/in循环,除非使用额外的检测方法来过滤不想要的属性
var a = [1,,,2]; a.b = 'b'; for(var i in a){ console.log(a[i]);//1 2 'b' } //跳过不是非负整数的i var a = [1,,,2]; a.b = 'b'; for(var i in a){ if(String(Math.floor(Math.abs(Number(i)))) !== i) continue; console.log(a[i]);//1 2 }
javascript规范允许for/in循环以不同的顺序遍历对象的属性。通常数组元素的遍历实现是升序的,但不能保证一定是这样的。特别地,如果数组同时拥有对象属性和数组元素,返回的属性名很可能是按照创建的顺序而非数值的大小顺序。如果算法依赖于遍历的顺序,那么最好不要使用for/in而用常规的for循环
有三个常见的类数组对象:
【1】arguments对象
// arguments对象 function args() { return arguments } var arrayLike = args('a', 'b'); arrayLike[0] // 'a' arrayLike.length // 2 arrayLike instanceof Array // false
【2】DOM方法(如document.getElementsByTagName()方法)返回的对象
// DOM元素 var elts = document.getElementsByTagName('h3'); elts.length // 3 elts instanceof Array // false
【3】字符串
// 字符串 'abc'[1] // 'b' 'abc'.length // 3 'abc' instanceof Array // false
[注意]字符串是不可变值,故当把它们作为数组看待时,它们是只读的。如push()、sort()、reverse()、splice()等数组方法会修改数组,它们在字符串上是无效的,且会报错
var str = 'abc'; Array.prototype.forEach.call(str, function(chr) { console.log(chr);//a b c }); Array.prototype.splice.call(str,1); console.log(str);//TypeError: Cannot delete property '2' of [object String]
数组的slice方法将类数组对象变成真正的数组
var arr = Array.prototype.slice.call(arrayLike);
javascript数组方法是特意定义为通用的,因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。在ECMAScript5中,所有的数组方法都是通用的。在ECMAScript3中,除了toString()和toLocaleString()以外的所有方法也是通用的
var a = {'0':'a','1':'b','2':'c',length:3}; Array.prototype.join.call(a,'+');//'a+b+c' Array.prototype.slice.call(a,0);//['a','b','c'] Array.prototype.map.call(a,function(x){return x.toUpperCase();});//['A','B','C']
以上是JavaScript中关于创建和使用array数组的探讨的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest
