伏龙阁资源网

JavaScript数组类型Array相关的属性与方法详解
站长资源 2024/11/25 佚名
2 0

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 前一项乘后一项

总结

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接