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: 后续继续更新!!

目录
相关文章
|
3天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
1天前
|
JavaScript
Vue.js 中父组件调用子组件的方法
Vue.js 中父组件调用子组件的方法
11 2
|
1天前
|
JavaScript 前端开发 API
Vue.js 中子组件向父组件传值的方法
Vue.js 中子组件向父组件传值的方法
12 2
|
1天前
|
JavaScript 前端开发
JavaScript语法(2)
【5月更文挑战第2天】JavaScript语法(2)。
9 3
|
1天前
|
存储 JavaScript 前端开发
JavaScript语法
JavaScript语法。
6 1
|
4天前
|
存储 JavaScript 前端开发
javascript中字符串处理,常用的方法汇总
javascript中字符串处理,常用的方法汇总
|
4天前
|
JavaScript 前端开发 开发者
Vue.js 模板语法
Vue.js 模板语法
|
4天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
3月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
30 0
|
4月前
|
JavaScript 前端开发
js中数组对象去重的方法
js中数组对象去重的方法