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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
纯JS实现五子棋游戏
May 28 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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 strtotime函数详解
2009/12/18 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
xtree.js 代码
2007/03/13 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jquery中radio checked问题
2015/03/16 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
使用python远程操作linux过程解析
2019/12/04 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Django缓存Cache使用详解
2020/11/30 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
UML设计模式笔试题
2014/06/07 面试题
元旦联欢晚会主持词
2015/07/01 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电