详解JavaScript数组(一)
一. 定义方法
有两种方式可以定义一个数组,
构造函数法
使用Array构造函数创建数组,在使用Array构造函数时可以省略new操作符。
var arr = Array();var arr = new Array(); // 创建一个空数组var arr = Array(20);var arr = new Array(10); // 创建一个 length 长为 10 的数组var arr = Array('1', '2', '3');var arr = new Array('1', '2', '3'); // 创建一个包含该三项的数组
对象字面量表示法
var arr=['1', '2', '3'];
注意:数组最多能够包含4294967295
个项
二. 数组检测
这篇文章有很详细的说明。《在JavaScript中,如何判断数组是数组?》
三. 数组方法
1.转换方法
所有对象都具有toString()
、 toLocaleString()
、 valueOf()
方法;要注意它们之间的区别
var a=[1,2];
console.log(a.toString());
console.log(a.toLocaleString());//1,2
console.log(a.valueOf()); //[1, 2]
valueOf:返回数组本身
toString():把数组转换为字符串,并返回结果,每一项以逗号分割
toLocalString():结果与toString()返回的结果相同,但是调用的是toLocalString方法。
LocaleString()会根据你机器的本地环境来返回字符串,而toString()保持着统一的值。
var number = 1337;
var date = new Date();
var myArr = [number, date, 'foo'];
var str = myArr.toLocaleString();
console.log(str); //1337,2016/8/25 下午3:06:46,foovar number = 1337;
var date = new Date();
var myArr = [number, date, 'foo'];
var str = myArr.LocaleString()会根据你机器的本地环境来返回字符串;
console.log(str); //1337,Thu Aug 25 2016 15:07:43 GMT+0800 (中国标准时间),foo
使用join()
方法,可以设置分隔符
String.join("|");
备注:需要说明一下alert()方法接收字符串参数,在后台调用toString()方法,但对于LocaleString()会调用LocaleString()方法。
2.栈方法
栈(LIFO,后进先出)
a.push()
接受任意数量的参数,逐个推入数组末尾,并返回修改后数组的长度。
var a=[1,2];
var b=a.push(3,4);
console.log(b); //4 数组[1,2,3,4]
b.pop()
不接受参数,从数组末尾移除最后一项,返回数组最后一项。
var a=[1,2];
var b=a.pop();
console.log(b); //2
3.队列方法
LIFO(先进先出)
a.shift()
移除数组中的第一个项,并返回该项。
var a=[1,2];
var b=a.shift();
console.log(b); //1
b.unshift()
unshift() 接收任意个参数,在数组前添加任意个项并返回新数组的长度。备注:IE7及以下返回undefined。
var a=[1,2];
var b=a.unshift(3,4);
console.log(b); //4, 数组为[3,4,1,2]
4.重排序方法
a. sort()
使用时每个数组项调用自身toString()方法转为字符串,再按字符编码升序(非数值大小)排列数组项,因此会出现一种尴尬的事情:
var a=[1,2,3,10,5];
a.sort(); //[1, 10, 2, 3, 5],字符编码排序,10排在1后面
这时我们可以传入一个比较函数。
function compare(a,b){if(a<b){return -1;}else if(a>b){return 1;}else{return 0;}
}
var a=[1,2,3,10,5];
a.sort(compare); //[1, 2, 3, 5, 10]
对于数值类型或通过valueOf()方法返回数值类型的对象数组项,可以使用下面这个函数:
function compare(a,b){return a-b;
}
b.reverse()
反转数组。
var a=[1,2,3,10,5];
a.reverse(); //[5, 10, 3, 2, 1]
5.操作方法
a.concat()
合并数组,传入数组或者参数,不会影响原来的数组。
var a=[1,2,3,4,5];
var a1=[6,7]
var b=a.concat();
var c=a.concat(a1);
var d=a.concat(a1,8,9);
console.log(a);//[1,2,3,4,5]
console.log(b);//[1,2,3,4,5]
console.log(c);//[1,2,3,4,5,6,7]
console.log(d);//[1,2,3,4,5,6,7,8,9]
b.slice()
基于当前数组中的一或多个项创建新数组,不会影响原来数组。
无参数:返回原数组
一个参数:返回从该参数指定位置开始到数组末尾的所有项
两个参数:返回起始和结束之间的项
var a=[1,2,3,4,5];
var b=a.slice();
var c=a.slice(1);
var d=d.slice(1,4);
console.log(a);//[1,2,3,4,5]
console.log(b);//[1,2,3,4,5]
console.log(c);//[2,3,4,5]
console.log(d);//[2,3,4]
c.splice()
可以删除、插入、替换;返回删除的项组成的数组,对原数组造成影响
删除:指定2个参数,要删除的第一项的位置和要删除的项数
var a=[1,2,3,4,5];
var b=a.splice(3,2); //a变为[1, 2, 3]
插入:提供3个参数,起始位置、0、要插入的项
var a=[1,2,3,4,5];
var b=a.splice(3,0,2); //a变为[1, 2, 3, 2, 4, 5]
替换:指定3个参数,起始位置、要删除的项数、要插入的项数(可多项)
var a=[1,2,3,4,5];
var b=a.splice(3,1,2); //a变为[1, 2, 3, 2, 5]
6.位置查找
indexOf()
和lastIndexOf()
,接收两个参数:要查找的项和(可选的)表示起点位置的索引,都返回要查找的项在数组中的位置。
7.迭代方法
every():对数组的每一项运行给定的函数,如果该函数对每一项运行都返回 true,则返回 true,对原函数无影响
some():对数组中的每一项运行给定的函数,如果该函数对任一项返回 true,则返回 true,对原函数无影响
filter():对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组
forEach():对数组中的每一项运行给定函数,无返回值
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
8.缩小方法
reduce()和reduceRight()
传入四个参数:前一个值、当前值、项的索引、数组对象本身。这个函数返回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项上。
var numbers = [1, 2, 3, 4, 5];
var sum= numbers.reduce(function (pre, cur, index, arr) {return pre + cur;
})
alert(sum); // 15
四.参考资料
《JavaScript高级程序设计》
《JavaScript权威指南》
在JavaScript中,如何判断数组是数组?
Object.prototype.toLocaleString()
详解JavaScript数组(一)相关推荐
- 详解JavaScript数组过滤相同元素的5种方法
详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm 转载于:https://www.cnblogs.com/bydzha ...
- 详解JavaScript变量类型判断及domReady原理 写得很好
原文:详解JavaScript变量类型判断及domReady原理 我们知道,在开发JavaScript时候,经常要判断JavaScript变量类型,此 JavaScript教程 详细介绍JS变量的判断 ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串,在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
- 详解JavaScript对象深拷贝
详解JavaScript对象深拷贝 在几乎所有编程语言中,对象都以引用形式保存给变量.复制给其他变量.JavaScript语言也是如此.因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个 ...
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- php数组元素的赋值方式,详解PHP数组赋值方法
这篇文章主要介绍了详解PHP数组赋值方法,文章就怎样创建数组.怎样给PHP数组赋值,文章都做了详细的介绍和讲解,希望对大家有帮助. PHP数组还是比较常用的,于是我研究了一下PHP数组赋值,在这里拿出 ...
- 详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
最新文章
- SAP MM 采购附加费计入物料成本之二
- 一周一论文(翻译)——[SIGMOD 2015] Congestion Control for Large-Scale RDMA
- the blocks problem(uva 101 or poj 1208)
- 【JEECG TBSchedule】详解应对平台高并发的分布式调度框架TBSchedule
- Playing with Permutations(CF-252D)
- 俄罗斯、乌克兰程序员薪资大曝光:年薪普遍 15w+,女程序员比男程序员收入高?
- bzoj 4293: [PA2015]Siano(线段树)
- python 复制列表内容_python 复制列表的六种方法
- SoftICE使用(2)-网络远程调试zz xfocus
- Tibco Designer -- 循环遍历
- 一只青蛙一次可以跳上1级台阶也可以跳上2级求该青蛙跳上一个n级的台阶总共有多少种跳法
- YOLOV2 YOLO9000
- WebSocket 原理 1
- IBM期望通过牺牲连通性以完成量子计算的规模化; QQCI宣布成立QUBT大学 | 全球量子科技与工业快讯第三十二期
- 节日EDM系列:圣诞节如何进行EDM数据营销
- CentOS7配置sendmail发送QQ邮件
- 动态规划(Dynamic Programming)
- 第5章分数的位置及标准化分布
- You have installed a lot of useless repos and Yum is not working properly becaus
- Unity性能优化---音频