JavaScript数组类型Array相关的属性与方法详解

网络编程 2024/11/16 佚名

3 1 2

Array数组类型详解

在ECMAScript中除了object类型之外，Array数组用的是最常用的类型。ECMAScript数组可以在每一项存储任何类型的值，无需指定数组的长度，还可以随着数据的增长来增加数组长度，这些是和其他语言的数组不同的。

1.数组的创建方法

数组字面量方式

var arr = [1,2,3,4,5];// 简单直接用中括号包裹构建数组

数组构造函数

var arr = new Array(1,2,3,4,5);// 通过内置Array对象构建数组

2.检测数组

instanceof操作符，在全局环境下可以检测对象是否为数组，但是如果页面上存在多个框架时就会存在两种以上的全局环境，这时候这种方法就有些问题。console.log(arr instanceof Array); // true

Array.isArray()方法就解决了上面的问题，可以快速的检测对象是否为数组。console.log(Array.isArray(arr)); // true

3.转换方法

使用toString()方法可以使数组返回字符串。

var arr = [1,2,3,4];
console.log(arr.toString()); // 1,2,3,4

toLocaleString()方法也可以实现

var arr = [1,2,3,4];
console.log(arr.toLocaleString()); // 1,2,3,4

4.栈方法

ECMAScript为数组提供了一种类似于其他语言数组的方法（栈方法），栈是一种数据结构，主要讲究先进后出；

push()方法向数组末尾添加元素(可以添加多项)
pop()方法向末尾删除最后一项(一次只能删除一项)

 var arr = [1,2,3,4];
 arr.push(5,6,7); // 向末尾添加5,6,7
 console.log(arr); //输出[1,2,3,4,5,6,7]
 arr.pop(); // 删除最后一项
 console.log(arr); //输出[1,2,3,4,5,6]

5.队列方法

队列方法讲究先进先出，在列表的末尾添加项，开头删除项。

push()方法上面讲到了末尾添加一项或多项
shift()方法开头删除

 var arr = [1,2,3,4];
 arr.push(5,6,7); // 向末尾添加5,6,7
 console.log(arr); //输出[1,2,3,4,5,6,7]
 arr.shift(); // 删除第一项
 console.log(arr); //输出[2,3,4,5,6,7]

pop()方法删除末尾最后一项
unshift()方法向开头添加一项或多项元素

var arr = [1,2,3,4];
arr.unshift(5,6,7); // 向开头添加5,6,7
console.log(arr); //输出[1,2,3,4,5,6,7]
arr.pop(); // 删除最后一项
console.log(arr); //输出[5,6,7,1,2,3]

6.重排序方法

reverse()反转数组改变顺序

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); //输出[5,4,3,2,1]

sort()方法比较的是字符串，一个一个的字符串进行比较，数值小的在前面，

var arr = [1,6,13,40,15];
arr.sort();
console.log(arr); //输出[1, 13, 15, 40, 6]

7.操作方法

concat()方法基于当前数组创建一个副本，向后面添加新的对象，然后返回新的数组concat()方法不会影响原数组。

 var arr = [1,6,13,40,15];
 var arr2 = arr.concat(2,2,2);
 console.log(arr); //输出[1, 6, 13, 40, 15]
 console.log(arr2); //输出[1, 6, 13, 40, 15,2,2,2]

slice()方法可以接受一个或者两个参数，第一个参数表示起始位置，第二个表示结束位置，slice()方法返回起始位置到结束位置的数组slice()方法不会影响原数组。

 var arr = [1,6,13,40,15];
 var arr2 = arr.slice(2);
 var arr3 = arr.slice(1,3);
 console.log(arr); //输出[1,6,13,40,15]
 console.log(arr2); //输出[13, 40, 15]
 console.log(arr3); //输出[6, 13]

splice()方法，这个方法在我认为算是数组里面最强大的方法啦！他可以传入三个参数，第一个参数起始位置，第二个参数要删除的项，第三个参数添加或者替换的对象。可以利用splice()方法对数组进行删除、添加、替换等操作splice()方法会影响原数组。

var arr = [1,2,3,4,5];// 删除操作
var arr2 = arr.splice(1,3); // 从下标为1开始删除3项
console.log(arr); //输出[1,5] 原数组只剩下第一位和最后一位
console.log(arr2); //输出[2,3,4] 被删除的对象生成数组

var arr = [1,2,3,4,5]; // 插入
var arr2 = arr.splice(1,0,2,2);// 从下标1开始插入2,2两个对象
console.log(arr); //输出[1,2,2,2,3,4,5]
console.log(arr2); //输出[] 因为没有删除对象所以返回空数组

var arr = [1,2,3,4,5]; // 替换
var arr2 = arr.splice(1,2,2,2); // 从下标1开始先删除两项然后替换为2,2
console.log(arr); //输出[1,2,2,4,5]
console.log(arr2); //输出[2,3] 被删除的元素

8.位置方法

查找数组位置方法有两种，indexOf()和lastIndexOf()方法都可以接收两个参数，要查找的项和（可选）查找起始项位置的索引。indexOf()是从前往后找，lastIndexOf()是从后往前找。

 var arr = [1,2,3,4,5];
 console.log(arr.indexOf(2)); //1 返回下标的位置
 console.log(arr.indexOf(2,3)); //-1 从下标3位置开始往后找，没有找到2返回-1
 console.log(arr.lastIndexOf(2,3)); //1 从下标3位置开始往前找

9.迭代方法

ECMAScript5为数组提供了五种迭代方法，每种方法都有两个参数，要在每一项上运行的函数和（可选）运行该函数的作用域对象——影响this的值。传入这些方法的函数会接受三个形参（item,index,array）：数组项的值、数组对象在数组中的位置、数组对象本身。

every()给定函数后，如果该函数对每一项都返回true，则返回true。

var arr = [1,2,3,4,5];
var arr2 = arr.every(function(item,index,array){
  return item > 3;
});
console.log(arr2); // false 必需每项都满足条件才可以

filter()给定函数后，返回true的项组成的数组。

 var arr = [1,2,3,4,5];
 var arr2 = arr.filter(function(item,index,array){
  return item > 3;
 });
 console.log(arr2); // 4,5 只有4,5满足条件

forEach() 给定函数后，这个方法没有返回值。本质上和for循环一样

var arr = [1,2,3,4,5];
arr.forEach(function(item,index,array){
  console.log(item); // 1,2,3,4,5
});
console.log(arr); // [1,2,3,4,5] 不会改变原数组也没有返回值

map()给定函数后，返回每次函数调用的结果组成的数组。

var arr = [1,2,3,4,5];
var arr2 = arr.map(function(item,index,array){
  return item * 2;
});
console.log(arr2); // [2,4,6,8,10]

some()给定函数后，如果该函数任一项返回true，则返回true。

 var arr = [1,2,3,4,5];
 var arr2 = arr.some(function(item,index,array){
   return item > 4;
 });
 console.log(arr2); // true 5>4返回true

10.缩小方法

ECMAScript5新增了2两个缩小数组的方法，reduce()和reduceRight()。这两个方法都会迭代数组所有的项，reduce()是从第一项到最后一项迭代，reduceRight()则是相反的。这两个方法可以接收两个参数，要执行的函数和（可选）做为缩小基础的初始值。执行函数可以传入四个参数（prev,cur,index,array）：前一个值、当前值、数组对象索引、数组对象本身。

var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(prev,cur,index,array){
  return prev * cur;
});
console.log(arr2); // 120 前一项乘后一项

总结

js数组类型array,js,array的属性, js定义数组

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript数组类型Array相关的属性与方法详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JavaScript数组类型Array相关的属性与方法详解

vue axios请求成功却进入catch的原因分析

vue中后端做Excel导出功能返回数据流前端的处理操作

评论“JavaScript数组类型Array相关的属性与方法详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JavaScript数组类型Array相关的属性与方法详解

vue axios请求成功却进入catch的原因分析

vue中后端做Excel导出功能返回数据流前端的处理操作

评论“JavaScript数组类型Array相关的属性与方法详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存