前言:
定义:数组是值的有序集合。
JS
的数组是无类型的,数组元素可以是任意类型,并且同一个数组的不同元素也可能有不同的类型,每一个值叫做元素(数组元素),每个元素在数组中有一个位置。数组在平常的coding
中是比较常用的数据格式,尤其式在解析后台数据时。之所以叫“教科书式的数组方法”,是因为每个方法我都配有示例,希望能通过示例的解析,让大家对方法能有更清晰对理解。除此之外,字符串和对象的方法也会在过两天分享,希望能对您有些许帮助,这将是我莫大的荣幸!
一、创建数组 x=[ ]
var a=["333","999"]; // 直接写在[ ]中
var aa=new Array(4,8,9); // 通过实例传入Array中
var aaa=new Array(5); // 传入的5为array的个数
aaa[0]=6; // 给aaa的第0个赋值为6
console.log(aaa); // [6,,,,,]
console.log(aa); // [4,8,9]
二、 访问数组元素 x.[index]
var a=["333","999"];
var b=a[0]; // 访问数组的第一个元素
var c=a[a.length-1]; // 访问数组的最后一个元素
var f=a["1"]===a[1]; // a["1"]会自动转为数字1
console.log(f); // true
当然,如果我们通过以下方式去访问时,会被解析成连续运算返回最后一个值
console.log([2,3,4,5][1,2]) // 4
数组也是一种特殊的对象,因此我们也可以通过键值对的形式去访问
var arr9 = [];
arr9.say = 'Hello';
console.log(arr9.say) // Hello
三、遍历数组 x.forEach(function(item,index,array){})
es6写法 forEach((item,index)=>{dosomething.....})
var a=["333","999"];
a.forEach(function (item,index,array) {
console.log(item,index)
});
//333 0 999 1
四、添加元素到数组的末尾 x.push(...)
var a=["333","999"];
a.push("我是新元素","666");
console.log(a); //["333","999","我是新元素","666"]
console.log(a.push("我","690"),a.length,a); //6,["333","666","我是新元素","666","我","690"]
//返回新数组长度6,会执行一次a.push
五、在末尾删除数组(只能删除 1 个) x.pop()
var a=["333","999"];
a.pop();
console.log(a); // ["333"]; 返回新数组
console.log( a.pop(),a); //333 []
//会执行一次a.pop(),返回本次被删除元素
六、删除数组最前面元素 x.shift()
var a=["333","999"];
a.shift();
console.log(a); // ["999"]
console.log( a.shift()); // "999"
//返回被删除元素,不会执行a.shift()
七、添加到数组的前面(头部)x.unshift("...")
var a=["333","999"];
a.unshift("000","888","777");
console.log(a);
// ["000","888","777","333","999"]
console.log(a.unshift("111"),a.length,a);
//["111","000","888","777","333","999"]
//会执行一次a.unshift,返回数组长度,
八、找到某个元素在数组中的索引 indexOf
var a=["333","999"];
var d=a.indexOf("333"); // 通过元素查找在当前数组的索引值
console.log(d); // 0
var e=a.indexOf("654"); // 如果查不到返回-1
console.log(e); // -1
九、复制数组 slice()
, Array.from()
[…]
var a=[1,2,8];
var newArray=a.slice();
console.log(newArray); //第一种方法 [1,2,8]
-----------------------------------
var newArray2=Array.from(a);
console.log(newArray2); //第二种方法 [1,2,8]
------------------------------------
var newArray3=[...a];
console.log(newArray3); //第三种方法 [1,2,8]
十、清空数组
// 两种方法都可以实现,但第二种比较优雅
var arr=[1,2,3,3,4,5];
arr=[];
console.log(arr) // []
------------------------------------
var arr=[888,99];
arr.length=0;
console.log(arr) // []
十一、合并数组
var arr=[1];
var arr2=[2];
var arr3=[3];
var arr4=arr.concat(arr2,arr3)
console.log(arr4) // [1,2,3]
---------------------------------------
// 下面这个方法也可以实现,但只能合并两个数组
var arr1=[1,2,3];
var arr2=[4,5,6];
arr1.push.apply(arr1,arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]
十二、在数组中找到最大值和最小值
//方法1
var array1 = [1,2,3,4];
var array2 = Math.max.apply(null,array1); // 最大值
var array3 = Math.min.apply(null,array1); // 最小值
console.log(array2,array3); // 4 ,1
--------------------------------------------------
//方法2
var array4 =Math.max(...array1); // 最大值
var array5 =Math.min(...array1); // 最小值
console.log(array4,array5); // 4 ,1
十三、判断是不是数组
// 在javascript中,如何判断一个变量是否是数组
(1)Array.isArray()方法
var a = [0, 1, 2];
console.log(Array.isArray(a)); // true
(2)typeof toString 方法
由于低版本的IE
不支持ES5
,如需要兼容,用typeof
,我们都知道,数组是特殊的对象,所以数组的typeof
结果也是object
,而因为null
的结果也是object
,所以需要加判断是 object
同时排除null
、排除纯对象,先判断a
是不是object
,并且a!==null
, 并且toString.call
判断a
等于 [object Array]
var a = [0, 1, 2];
console.log( typeof a ==='object' && a !==null && Object.prototype.toString.call(a) ==='[object Array]'); // true
十四、数组与其他值的运算(使用”+”会自动转为string
,”-“会自动转为number
)
// 数组和任何值相加都会将数组转换成字符串再进行拼接
console.log([1,2,3] + 6) ; // "1,2,36"
console.log([1,2,3] + {}) ; // "1,2,3[object Object]"
console.log([1,2,3] + [1,2,3]); // "1,2,31,2,3"
如果数组只有一个值,那么当这个数组和其他值相减相乘等时会被转换为数字,如果为空会被转换为0
console.log([5] - 2) // 3
十五、数组去重
// ES6新增的Set数据结构,类似于数组,但是里面的元素都是唯一的,其构造函数可以接受一个数组作为参数
let arr1=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]
let set = new Set(arr1);
console.log(set) // {1,2,6,3,5,69,66,7,4,8,9663,8]
// ES6中Array新增了一个静态方法from,可以把类似数组的对象转换为数组
var arr=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]
console.log(Array.from( new Set(arr))) // {1,2,6,3,5,69,66,7,4,8,9663,8]
//函数去重:
function removeRepeatArray(arr){
return Array.from(new Set(arr))
}
console.log(removeRepeatArray([1,5,9,8,6,2,5,1,2,5,8,65,3,5,5,2,2,5]))
// [1, 5, 9, 8, 6, 2, 65, 3]
十六、将数组顺序打乱
function upsetArr(arr){
return arr.sort(function(){ return Math.random() - 0.5});
}
解析:沿用原
sort
的 a-b 的方法,先生成一个随机数,然后将其与随机数进行 比较,如果 Math.random() - 0.5 是 true,则返回前者,否则比较下一个
十七 实现将数组中数字求和,字母忽略。
var arr=["a",3,4,5,9,"d"];
function sum(arr){
var a=0;
for(var i=0;iif(typeof arr[i]==="number"){
a+=arr[i]
}
}
return a;
}
sum(arr) //21
通过循环遍历判断数组中的每个值是否是数字,如果是的赋值到变量上进行加法计算
十八、delete
,splice
删除数组内指定的某个值。
使用
delete
删除数组内的制定索引的值后,直接改的是原数组,而且删除值的位置仍然保留,为undefined
。
var arr=[1,2,3,45,5,2];
delete arr[0]
console.log(arr,arr[0]). // [empty,2,3,45,5],undefined
如果要彻底删除,可以使用
splice()
方法splice(开始位置,删除个数,添加的值)
,如果没有第三个值,可以只传前两个值
两个值的示例:
var arr=[1,2,3,45,5,2];
arr.splice(0,1)
console.log(arr) // [2, 3, 45, 5, 2]
三个值的示例:
var arr=[1,2,3,45,5,2];
arr.splice(0,1,100)
console.log(arr) // [100 ,2, 3, 45, 5, 2]
十九、slice()
截取数组,可选择开始位置和结束位置
slice()
接收两个参数,第一个是开始位置,第二个是结束位置
var arr=[1,2,3,45,5,2];
arr.slice(0,4)
console.log(arr). // [1, 2, 3, 45]
如果slice()
括号中不传参数,将会全部截取
var arr=[1,2,3,45,5,2];
arr.slice()
console.log(arr). // [1, 2, 3, 45, 5, 2]
二十、颠倒数组的顺序,也称数组的反转
var arr=[1,2,3,45,5,2];
arr.reverse()
console.log(arr) // [2, 5, 45, 3, 2, 1]
二十一、join()
将数组以括号中的值分割成字符串(不会改变原数组)
var arr=[1,2,3,45,5,2];
console.log(arr.join("_”)); // "1_2_3_45_5_2"
console.log(arr); // [1, 2, 3, 45, 5, 2]
二十二、sort()
排序,将数组中的值进行排序,从大到小或从小到大(会改变原本的数组)
sort
原本的排序功能只能识别到个位数做比较,所以扩展使用以下方法:(排序方法有很多,这是最传统,也是使用频率较多的,其他的方法不再赘述)
var arr=[1,2,3,45,5,2];
arr.sort(function(a,b){
return a-b
})
// [1, 2, 2, 3, 5, 45]
查看此时的arr数组:
console.log(arr) // [1, 2, 2, 3, 5, 45]
arr.sort(function(a,b){
return b-a
})
// [45, 5, 3, 2, 2, 1]
查看此时的arr数组:
console.log(arr) // [45, 5, 3, 2, 2, 1]
当然我们有时是不可以改变原数组的,那么可以试试下面的方法将需要的内容拷贝出来即可:
var arr=[1,3,6,8,45,34,90,122,9,0];
var array=arr.slice();
array.push(34)
console.log(arr,array)
// [1,3,6,8,45,34,90,122,9,0],[1,3,6,8,45,34,90,122,9,0,34]
数组中的迭代方法filter()
, every()
,forEach()
,map()
,some()
filter()
:对数组中的每一项运行给定函数,返回该函数会返回true
的项组成的数组。
every()
:对数组中的每一项运行给定函数,如果该函数对每一项都返回true
,则返回true
。
forEach()
:对数组中的每一项运行给定函数。这个方法没有返回值。
map()
:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
some()
:对数组中的每一项运行给定函数,如果该函数对任一项返回true
,则返回 true.
一、数组迭代方法之filter()
(filter
返回的是一个符合某种条件的数组,并返回,不会更改原数组)
var arr=[1,3,6,8,45,34,90,122,9,0];
var array = arr.filter(function(element){
return element>10
})
console.log(array)
//筛选数组中大于10的值, [45, 34, 90, 122]
//查看原数组,并没有改变
console.log(arr) // [1,3,6,8,45,34,90,122,9,0]
二、数组迭代方法之every()
(主要是用于判断一个素组中的值是否符合某个标准。必须是每个值都符合才会返回true
。否则返回false
)
var arr = [1,2,3,4,5,4,3,2,1];
var everyResult = arr.every(function(item, index, array){
return (item > 2);
});
//判断数组中所有的值是否都大于2,如果都大于2,返回true,反之返回false.
console.log(everyResult) //false
三、数组迭代方法之forEach()
(数组的循环遍历,对数组中的每一项运行给定函数。这个方法没有返回值。)
var arr=[1,3,6,8,45,34,90,122,9,0];
arr.forEach(function(item,index,array){
console.log(item,index,array)
})
/*
0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
*/
四、数组迭代方法之map()
(数组的循环遍历,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。)
var arr=[1,3,6,8,45,34,90,122,9,0];
arr.map(function(item,index,array){
console.log(index,item,array)
})
/*
0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
*/
五、数组迭代方法之some()
(对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true)
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
//只要有一个返回true,则返回true
console.log(someResult); // true
归并:迭代数组中的所有值,返回一个按条件计算的最终值。
reduce:
var values = [1,2,3,4,5];
var sum = reduce(function(prev, cur, index, array){
return prev + cur;
});
//第一次执行回调函数,prev 是1,cur 是2。第二次,prev 是3(1 加2 的结果),cur 是3(数组的第三项)。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。
//通过循环遍历,返回数组中所有值的总和 15
reduceRight:
var values = [1,2,3,4,5];
var sum = reduceRight(function(prev, cur, index, array){
return prev + cur;
});
//第一次执行回调函数,prev 是5,cur 是4。第二次,prev 是9(5加4 的结果),cur 是3(数组的第三项)。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。
//通过循环遍历,返回数组中所有值的总和 15