JavaScript 语法:数组的定义及其常用属性与方法

简介: JavaScript 语法 之 数组

作者:WangMin
格言:努力做好自己喜欢的每一件事

当一个程序需要用到多个数据的时候,这时我们就需要用到数组来将这些数据集合起来,以便后期调用。接下来就开始学习吧!!

2.jpg

数组的定义方法

1 、第一种数组声明方式:var 数组名 = [元素1, 元素2, .....],这种定义方式比较常用。例如:

var arr=[1,2,3];
var arr1=['字符串',1,null];

arr -- 变量名

2、第二种数组声明方式:var 数组名 = new Array(元素1, 元素2, 元素3, ........),这种方式是系统内部定义数组的一种方式。例如:

var arr=new Array(1,2,3);
var arr1=new Array('字符串',1,null);

这种方式还可以这样定义,如下:

var arr=new Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;
console.log(arr);//arr=new Array(1,2,3)

3、两种声明方式的区别

当两种定义方式只有一个值时,分别表达的含义如下:

  • var arr=[10];表示数组长度为1, 数组元素为10,也就是说这个数组只有 10这一个数据。
  • var arr = new Array(10);表示的是数组长度为10, 数组元素为空,取值取到的是undefined。

数组的三个要素、取值与赋值

1、数组的三个要素:

  • 下标:用来记录每个元素的位置, 用来取值和赋值
    这里需要 注意:JavaScript中数据的下标从 0 开始

3.png

  • 元素:数组中的数据
  • 长度:数组中元素的个数。获取数组长度可以使用数组的一个属性 length,用法:数组名.length,它返回的是一个number类型的数据,如下:
var arr=[1,2,3];
arr.length;//3

4.png

2、数组的取值:

  • 数组的取值是 数组名[下标]。
var arr=[1,2,3];
arr[0];// 1
arr[1];// 2
arr[2];// 3
  • 如果下标在最大下标范围内, 就取到对应的元素值,如果超过最大下标, 取到的值是undefined。
var arr=[1,2,3];
arr[0];// 1
arr[1];// 2
arr[2];// 3
arr[3];// undefined

这里的数组长度为3,但下标是从 0 开始的,当我们要获取数组中的第4个数据时,它超过了我们定义的数组的长度,程序执行时无法找到第4个数据,会返回 undefined。

  • 取数组第一个值,数组名[0]。取最后一个值,数组名[数组名.length - 1]。
var arr=[1,2,3,4];
arr[0];// 1
arr[arr.length-1];// 3

3、数组的赋值:
数组名[下标] = 值。

  • 如果下标没有超过最大下标,是修改数组中的值。如下:
var arr=[1,2,3,4];
arr[0]=5;
console.log(arr[0]);//5

注意:原本 arr[0]=1 ,但是在下面 arr[0]=5 相当于给 arr[0] 重新赋值,所以 arr[0]就被重新赋值为 5,即arr[0]=5。

  • 如果超过最大下标,向数组中添加元素。如下:
var arr=[1,2,3,4];
arr[4]=5;
console.log(arr);//[1,2,3,4,5]
  • 如果添加的元素下标不是连续的,它就是个不连续数组。如下:
var arr=[1,2,3,4];
arr[5]=5;
console.log(arr);//[1,2,3,,5]

5.png

数组打印出来如下:

6.png

从上面的例子我们只给数组添加了一个arr[5]=5,添加了一个元素获取长度却是6。其实arr[5]=5你是给第6个元素赋了值,前面没有赋值的元素为空,你写了arr[5]=5之后,数组就变成了上图所示:arr=[1,2,3,4,,5]。

数组的常用方法

1、join():将数组的所有元素放入一个字符串,通过分隔符进行隔开,不会改变原来的数组。 如下:

var arr=[1,2,3,4];
var str=arr.join('-');
console.log(str);//"1-2-3-4"
console.log(typeof str);//string

注意:join()可以添加一个参数,这个参数表示自己想用的分隔符,默认为逗号,这里我用的是 '-'。

2、sort(): 对数组中的数据进行排序,默认为升序,也就是数据从小到大排列,并且返回排过序的新数组,会改变原来的数组。这个排序方法是针对字符的排序,所以当数组用到这个排序方法时,需要先将数组中的数据用toString()方法转为字符串,然后在进行比较。

情况一:当数组全部为数字时,需要将数字转换为字符串类型,再逐位比较,3是大于11的,因为首位3>1,所以3与11需要调换位置,以此这样比较下去,不要与Number型的数据排序混淆,例子如下:

var arr=[3,11,8,2,29];
console.log(arr.sort()); // [11, 2, 29, 3, 8]

注意:这里的比较是逐位比较,把字符串中的第一位依次比较,第一位较小的排在前面,较大的排在后面;当字符串中的第一位相同时,就比较字符串的第二位,第二位较小的排在前面,较大的排在后面,依次类推。

情况二:当数组中有字符串时,比较的时候,因为首位的英文字母通过 ASCII码 可以转为相应的数值,再根据数值比较。例子如下:

var arr=["hello","a","e",2,29];
console.log(arr.sort());//[2, 29, "a", "e", "hello"]

这里提到的 ASCII码 可以点击链接进去了解一下,以后再详细解释。

情况三:当数组中的值要进行真正数值的比较时,需要传参,sort(callback),callback为回调函数,这个函数应该具有两个参数,比较这两个参数,然后返回一个用于说明这两个值的相对顺序的数字(a-b),例子如下:

var arr=[6,2,45,829];
function fn (a,b){
   
   
    return a-b;
 }
console.log(arr.sort(fn));//[2, 6, 45, 829]

注意:比较函数可以按照自己的排序方式来自定义函数。

3、push():向数组末尾添加一个或多个元素,返回的是数组新的长度,会改变原来的数组。例子如下:

var arr=[6,2,45,829];
console.log(arr.push(8));// 5
console.log(arr.push(63,25));// 7

4、shift():删除数组中的第一元素,并返回删除的数据,会改变原来的数组。例子如下:

var arr=[6,2,45,829];
console.log(arr.shift());// 6

5、unshift():在数组的首位新增一个或多数据,并且返回新数组的长度,会改变原来的数组。例子如下:

var arr=[6,2,45,829];
console.log(arr.unshift(36));// 5

6、pop():删除数组的最后一位,并且返回删除的数据,会改变原来的数组,例子如下:

var arr=[6,2,45,829];
console.log(arr.pop()); //829

7、slice():截取指定位置的数组,并且返回截取的数组,不会改变原数组,这个方法接收两个参数slice(start,end),strat为必选,表示从第几位开始;end为可选,表示到第几位结束(不包含end位),省略表示到最后一位;start和end都可以为负数,负数时表示从最后一位开始算起,如-1表示最后一位。例子如下:

var arr=[6,2,45,829,56,48];
console.log(arr.slice(0,2)); //[6, 2]
console.log(arr.slice(3));//[829, 56, 48]
console.log(arr.slice(-4,-2));// [45, 829]
console.log(arr.slice(-3));//  [829, 56, 48]
console.log(arr.slice(1,-3));//   [2, 45]

8、splice():向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。这个方法接收多个参数splice(start,num,data1,data2,...),strat表示从第几位开始;num表示删除的数量,如果后面还跟有删除数量相同的参数时,表示替换删除元素,例子如下:

var arr=[6,2,45,829,56,48];
console.log(arr.splice(3,3,"1","2","3"));// [829, 56, 48] 
console.log(arr);//[6, 2, 45, "1", "2", "3"]

9、concat():合并数组,可以合并一个或多个数组,会返回合并数组之后的数据,不会改变原来的数组。例子如下:

var arr=[6,2,45,829,56,48];
var arr1=["1","2","3"];
console.log(arr.concat(arr1));//[6, 2, 45, 829, 56, 48, "1", "2", "3"]

更多数组方法可查阅:JavaScrpt Array对象参考手册


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
9天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
37 13
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
182 52
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
66 5
|
2月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
34 1
|
前端开发 JavaScript
第60天:js常用访问CSS属性的方法
一、 js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种:     1. 利用点语法        box.style.width      box.style.top          点语法可以得到 width  属性  和 top属性  带有单位的。
1179 0
|
JavaScript 前端开发
JS 数据属性 & 访问器属性
JS 数据属性 & 访问器属性 一个js对象(Object、Function)可以定义两种类型的属性:数据属性 或 访问器属性。
947 0
|
JavaScript 前端开发
JS中访问对象的属性
方式一: 对象名.属性名;   方式二: 对象名["属性名"];   注意:方式二中,属性名以字符串的形式出现在方括号中,这意味着通过方式二访问属性的话,可以实现“动态访问对象的属性”。
617 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
38 1
JavaScript中的原型 保姆级文章一文搞懂