一前言
数组在 JavaScript 中, 是除了 Object 之外, 最常用的类型了与其他语言中的数组相比, JavaScript 中的 Array 有很大的不同, 比如: 它的每一项可以保存任何类型的数据; 而且它也可以根据内容的变化自动调整大小
二 Array 创建
1. 构造函数创建
- var array = new Array(); // 创建一个空数组
- var array = new Array(20);// 创建一个长度为 20 的数组
- var array = Array(3)
- var array = Array("Joshua")
2. 数组字面量创建
- var array = []
- var array = ['Joshua', 'I', "AM"]
建议大家用字面量来创建数组, 简单方便, 代码少
3.length
在其他语言中例如: Objective-C,swift 数组的长度值是只读的, 但是在 JavaScript 中它却不是只读的, 你可以给它设定值, 从而改变数组的长度
- var array = ["1", "2", "3"];
- array.length = 2;
- console.log(array[2])--->undefined
也可以利用 length 去添加数组内容
- var array = ["1","2","3"];
- array[array.length] = '4';
- array[array.length] = '5';
- console.log((array));
- ///array : 1 2 3 4 5
数组也是有容量的, 大约可以容纳 4294967295 个项
4. 检测数组
- var array = [];
- if (Array.isArray(array)) {
- // 是数组
- }
三 Array 方法
1. 转换方法
在 JavaScript 中任何对象都具有 toLocaleString toString valueOf 方法
toString 方法会返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
valueOf 方法会返回数组本身
toLocaleString 返回和 toString 方法一样的值, 只不过数组中每一个值调用的是 toLocaleString 方法
2. 栈方法
所谓的栈方法就是 push() 和 pop() 方法栈的数据结构是后入先出
push() 方法: 参数可以是一个或者多个, 会在数组的最末端添加内容
pop() 方法: 不需要参数会在数组的最末端删除一个项
- var array = ["1","2","3"];
- array.push('4'); -> ["1", "2", "3","4"]
- array.pop(); -> ["1", "2", "3"]
- console.log((array));
3. 队列方法
嘿嘿, 队列方法就是 shift() 和 unshift() 方法队列的数据结构是先进先出
shift() 方法: 移除数组中的第个一项, 并返回该项不需要参数
unshift() 方法: 在数组第一项的前面添加一项
- var array = ["1", "2", "3"];
- array.shift(); // ["2", "3"]
- array.unshift('w'); // ["w","2","3"];
- console.log((array));
4. 重排序方法
reverse() 会把数组倒序输出
- var array = ["1", '0', "2", "3", '15', '10'];
- console.log(array.reverse());
- // 输出
- ["10", "15", "3", "2", "0", "1"]
sort() 方法会更加的灵活
该方法默认是按照升序排列的, 它会调用数组每项的 toString() 方法, 然后比较得到的字符串即使数组的每一项是数字, 它也是进行字符串比较 (皮)
- var array = [0, 1, 5, 10, 15];
- console.log(array.sort());
- // 输出
[0, 1, 10, 15, 5](字符串进行比较)
sort() 方法也会传入一个函数, 进行比较, 主要比较传入函数的俩个参数, 规则是: 如果第一个参数本应该位于第二个参数之前则返回一个负数, 如果第一个参数本应该位于第二个参数之后则返回一个正数, 俩个参数相等返回 0. 其实很简单, 我们就比较数组中的前二个数字就好了, 把数组前俩项当做参数一和参数二, 如果想正序排列, 如下代码:
- var array = [100, 1, 51, 11, 15];
- array.sort(function(param1, param2) {
- if (param1 < param2) {
- return - 1;
- } else if (param1 > param2) {
- return 1;
- } else {
- return 0;
- }
- });
- console.log(array);
倒序排列:
- var array = [100, 1, 51, 11, 15];
- array.sort(function(param1, param2) {
- if (param1 < param2) {
- return 1;
- } else if (param1 > param2) {
- return - 1;
- } else {
- return 0;
- }
- });
- console.log(array);
5. 操作方法
concat()
这个数组的方法, 简单来说其实就是连接的意思, 它会针对当前数组创建一个副本, 然后讲接受到的参数添加到副本末尾, 当无参数的时候, 只是把数组复制, 然后返回当前这个副本当有参数的时候, 会把每一项添加到数组的末尾 concat() 方法不会影响原始数组如下:
- var array = ["I",'AM'];
- var array1 = ['Joshua']
- console.log(array.concat(array1));
输出 : ["I", "AM", "Joshua"]
- var array = ["I", 'AM'];
- var newArray = array.concat('Joshua', ['good', 'boy']);// 副本 把参数拼
接到 数组后,
console.log(newArray) ;
输出 :["I", "AM", "Joshua", "good", "boy"]
console.log(array) ;
输出 : ["I", 'AM'];
slice()
slice 中文意思就是切, 把什么切开的意思
slice(开始索引, 结束索引)
包括左边索引开始的值, 不包括右边索引开始的值. 如果结束位置的索引值小于开始索引值, 会返回空数组,
如果传递一个参数, 表示从索引值开始截取到最后注意: slice() 方法不会影响原数组请看下面的列子
- var array = ["I", 'AM', 'Joshua'];
- var newArr = array.slice(1);
- console.log(newArr); // ["AM", "Joshua"]
- console.log(array); //["I", "AM", "Joshua"]
- var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
var newArr = array.slice(1, 3); (包左, 不包右) console.log(newArr); // ["AM", "Joshua"]
slice 方法也可以传递一个负数, 就是这个负数值 + 数组长度 开始的地方如下:
- var array = ["I", 'AM','Joshua','is','good','man'];
- var newArr = array.slice(-1,-3); // 结束索引值 小于 开始索引值 返回空数组
- console.log(newArr); // []
- var newArr1 = array.slice(-3,-1); // -3+6 = 3 -1+6 = 5
- console.log(newArr1); // ["is", "good"]
下面要放大招了当当当
splice() 方法, 可以算是数组中最强大的方法了能力强的一批 ()
该方法可以做到替换, 删除还以 改变原始数组 (@ο@) 始终返回一个数组, 这个数组就是从原始数组中删除的项, 没有删除, 返回的是一个空数组
splice(开始索引值, 删除几个, 我是替换内容 1, 我是替换内容 2, ........)
删除
可以删除任意数量的项, 只要指定开始索引和要删除的项数
- var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
- var removed = array.splice(0, 2); // 返回被删除的项
- console.log(removed);//["I", "AM"]
- console.log(array);//["Joshua", "is", "good", "man"]
插入
可以向指定位置插入任意数量的项, 指定 3 个参数删除的项数要为 0
- var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
- var removed = array.splice(2, 0,'woman','you');// 返回被删除的项为 0 , 返回空数组
- console.log(removed);//[]
- console.log(array);//["I", "AM", "woman", "you", "Joshua", "is", "good", "man"]
替换
可以向指定位置替换任意数量的项, 同时删除指定的项数, 指定三个参数
- var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
- var removed = array.splice(2, 2,'woman','you');
- console.log(removed);//["Joshua", "is"]
- console.log(array);// ["I", "AM", "woman", "you", "good", "man"]
6. 位置方法
位置方法包括:
indexOf() 和 lastIndexOf()
这俩个方法都是返回要查找的值在数组中的索引值, 只是前者从头开始找到第一个有效的值的索引后者从尾部开始, 找到最后一个有效值索引如果没有找到则返回 -1
- var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
- console.log(array.indexOf('Joshua'));// 2
- console.log(array. lastIndexOf('AM'));// 1
也可以指定从哪个索引开始查找
- var array = ["1", '2', '3', '4', '5', '4','3','2','1'];
- console.log(array.indexOf('4',4));// 5
- console.log(array. lastIndexOf('4',4));// 3
7. 迭代方法
以下方法都不会修改数组中的值
every()
对数组的每一项都运行回调函数, 如果都返回 true,every 返回 true, 有一项为 false, 就停止遍历就像极限运动一样, 有一次失败了, 人生就完蛋了 (原天堂没有极限)
- array.every(function(value, index, array2) {
- value // 每项元素
- index; // 索引
array2;. 数组本身
- return true;
- })
- var array = ["111", '222', '333', '444', '555'];
- var bool = array.every(function(value, index, array2) {
- if (value > 100) {
- return true;
- } else {
- return false;
- }
- }) console.log(bool) // true
- some()
这个方法和 every() 方法正好相反, 只要有一项为 true, 函数就返回 true
- var array = ["111", '99', '33', '444', '555'];
- var bool = array.some(function(value, index, array2) {
- return (value > 100);
- }) console.log(bool); // true
- fliter()
对数组每一项运行回调函数, 该函数返回结果是 true 的项组成的新数组
新数组是有老数组为 true 的项组成的
- var array = ["111", '99', '33', '444', '555'];
- var bool = array.filter(function(value, index, array2) {
- return (value > 100);
- }) console.log(bool); // ["111", "444", "555"]
- map()
对数组每一项运行回调函数, 返回该函数的结果组成的新数组即 return 什么 新数组中就有什么, 不 return 返回 undefined
- var array = ["111", '99', '33', '444', '555'];
- var bool = array.map(function(value, index, array2) {
- if (index == 2) {
- return value;
- }
- return value - 1;
- }) console.log(bool); // [110, 98, "33", 443, 554]
- forEach()
这个其实就是 for 循环嘛! 但是它没有返回值哟!!!
- var array = [111, 1, 0, 2, 3];
- var sum = 0;
- var bool = array.forEach(function(value, index, array2) {
- sum += value;
- }) console.log(sum); //117
- console.log(bool); // undefined
8. 归并方法
reduce()
这个方法回迭代数组的所有项, 然后构建一个最终返回值该方法从第一个项开始 reduce 函数接受四个参数: 前一个值, 当前值, 项的索引, 数组对象这个函数返回的任何值, 都会做为参数传递给下一项第一次迭代, 是在第二个参数上所以第一个参数就是第一项, 第二个参数就是第二项, 如下:
- var array = [111, 2, 0, 2, 3];
- var sum = array.reduce(function(pre, cure, index, array1) {
- return pre + cure;
- }) console.log(sum); //118
- reduceRight()
这个方法除了从哪头开始遍历数组之外, 其他完全相同这里就不再举
9. 清空数组方法
说道这个清空方法 我想大多数人应该会用
- array.length = 0// 伪数组不能清空
- array.splice(0)// 伪数组没有这个方法
提到伪数组 那最应该想到的就是函数的 arguments 这个是每个函数都包含的一个对象除了拥有 length 方法外, 无其他数组属性
所以呢, 推荐大家一个完美解决方法
array = [];
这个方法也可以操作伪数组
四总结
数组的方法就是以上方法了希望大家在平常多家运用, 在有些时候能帮助我们提高开发效率
来源: http://www.jianshu.com/p/8a7bc7703bac