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


Posted in Javascript onSeptember 08, 2020

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

总结

到此这篇关于JavaScript数组类型Array相关的属性与方法的文章就介绍到这了,更多相关js数组Array的属性与方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
Vue filter介绍及详细使用
Apr 04 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
ThinkPHP控制器详解
2015/07/27 PHP
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
python添加模块搜索路径方法
2017/09/11 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python模拟事件触发机制详解
2018/01/19 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python频繁写入文件时提速的方法
2019/06/26 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
pycharm永久激活超详细教程
2020/10/29 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
铁路安全事故反思
2014/04/26 职场文书
在职员工证明书
2014/09/19 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
一文搞懂python异常处理、模块与包
2021/06/26 Python
基于Python实现将列表数据生成折线图
2022/03/23 Python