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 相关文章推荐
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JS简单计算器实例
2015/01/20 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
WebPack基础知识详解
2017/01/16 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python爬取天气数据的实例详解
2020/11/20 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
临床医学大学生求职信
2013/09/28 职场文书
远程教育心得体会
2014/01/03 职场文书
幼儿园开学寄语
2014/04/03 职场文书
党员承诺书范文
2014/05/19 职场文书
六五普法宣传标语
2014/10/06 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python