ES5 - 数组
javascript - 数组
ES5、
2017-11-30
资料整理
前言
本篇主要整理数组的基本用法、数组的常用方法以及 Array 原型上的一些方法，以及数组如何去重。并且会不定期进行补充~
基本用法
数组的创建：
var a = [];
var b = new Array(7); // [,,,,,,]
var c = Array.of(7); // [7]
数组的读：
var a = [1,2];
a[0]; // 1
数组的写：
var a = [];
a[0] = 1;
稀疏数组
稀疏数组就是数组的 length 属性大于数组的元素的个数或者说是从0开始的不连续索引的数组。
数组的添加和删除
数组的添加：
var a = []
a[0] = 1;
// 在数组的尾部添加一个 等价于 a[a.length] = 3;
a.push(2)
// 在数组的首部添加一个
a.unshift(4)
数组的删除：
var a = [1,2,3]
// 删除数组的最后一个元素
a.pop() // [1,2]
// 删除数组的第一个元素
a.shift() // [2]
var b = [1,2,3,4];
//
b.splice(1,1); // [1,3,4]
b.length // 3;
// delete 删除数组不会改变数组的长度
delete b[0]
b.length // 3
数组的方法
1 - join()
var a = [1,2,3];
a.join(); // "1,2,3"
var b = [1,2,3];
b.join(" "); // "1 2 3"
2 - reserve()
Array.reserve() 是将数组颠倒顺序，返回逆序的数组。
var a = [1,2,3];
a.reserve(); // [3,2,1];
3 - sort()
Array.sort() 将数组排序，并返回排序后的数组。
当不带参数调用 sort() 时，默认按照字母表的顺序排序。
也可以传递一个比较函数：
var a = [2,3,1];
a.sort(function(a,b){
return a-b;
}) // [1,2,3]
a.sort(function(a,b){
return b-a;
}) // [3,2,1]
如果第一个数应该在前，返回一个小于0的数。如果第一个数在后，返回一个大于0的数。如果两个数相等。返回一个等于0的数。
4 - concat()
Array.concat() 创建并返回一个新的数组。
var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5]
a.concat([4,5]) // [1,2,3,4,5]
a.concat([4,5],[6,7]) // [1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]) // [1,2,3,4,5,[6,7]]
5 - slice()
Array.slice() 返回指定数组的片段或子数组。
var a = [1,2,3,4,5];
a.slice(1,3) // [2,3]
a.slice(3) // [4,5]
a.slice(1,-1) // [2,3,4]
a.slice(-3,-2) // [3]
6 - splice()
7 - push()和pop()
8 - unshift()和shift()
9 - toString()和toLocalString()
10 - forEach()
forEach()是从头到尾遍历数组，并为每个元素调用指定的函数。
/* v是元素的值，i是元素的索引，a是数组本身 */
var d = [1,2,3,4,5]
d.forEach(function(v,i,a){
console.log(v);
console.log(i);
console.log(a);
})
11 - map()
map()是调用数组的每个元素传给指定的函数，并且返回一个数组。
var a = [1,2,3];
var b = a.map(function(v){
return v*v
}) // [1,4,9]
12 - filter()
filter()返回的是调用的数组的一个子集。
var a = [1,2,3,4,5,6]
a.filter(function(v){
return v <= 3
}); // 1,2,3
13 - every() 和 some()
every() 和 some() 是对数组的逻辑判断，返回 true 或 false。
其中 every() 是所有的元素都满足条件的时候返回 true。而 some() 是有元素满足条件的时候返回 true。
var a = [1,2,3,4,5]
a.every(function(v){
return v < 10
}) // true
a.some(function(v){
return v % 2 === 0;
}) // true
14 - reduce() 和 reduceRight()
是将数组根据指定的函数进行整合。
reduceRight() 是从右到左。
var a = [1,2,3,4,5]
a.reduce(function(){
return x+y;
}) // 15
a.reduce(function(){
return x+y
},1) // 16
15 - indexOf()和lastIndexOf()
Array方法
1 - Array.from()
Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
2 - Array.isArray(obj)
Array.isArray()用于确定传递的值是否是一个数组
Polyfill：
/*
* 假设isArray不存在
*/
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
3 - Array.prototype.fill()
Array.prototype.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
arr.fill(value[, start[, end]])：
- value - 值
- start - 起始位置
- end - 结束位置
var array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
数组去重
方案一：遍历数组使用indexOf方法，代码如下：
/*
* javascript数组去重方案一
* @param {arrs} 原数组
* @method 新建一个新数组，遍历原数组，在新数组内使用indexOf查找原数组内的每一项，如果没有找到，就把当前的项存入新数组里面去，这样就过滤掉
* 重复项 indexOf方法在IE8及IE8以下不支持，因此有必要封装一个
* @return {newArrays} 返回新数组
*/
function arrayUnique(arrs) {
var newArrays = [];
for(var i = 0,ilen = arrs.length; i < ilen; i++) {
if(newArrays.indexOf) {
if(newArrays.indexOf(arrs[i]) == -1) {
newArrays.push(arrs[i]);
}
}else {
if(indexOf(arrs[i],newArrays) == -1) {
newArrays.push(arrs[i]);
}
}
}
return newArrays;
}
/*
* 为了支持IE8及以下浏览器需要封装一个indexOf方法
* @param {arr,arrs} 某一项 原数组
* @return 返回数组某一项
*/
function indexOf(arr,arrs){
if(arrs.length > 0) {
for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
if(arrs[i] == arr) {
return i;
}
}
}
return -1;
}
var arrs = [1,2,3,1,2,3];
console.log(arrayUnique(arrs)); // [1,2,3]
方案二：数组下标判断法
/*
* 数组下标判断法
* 思路：先定义一个新数组，循环当前数组，使用indexOf方法，如果在当前的数组的第i项在当前数组中的位置是i项的话，说明该项在数组中并未出现过，存入新数组，否则的话，在原数组中出现过，因此需要过滤掉。性能和第一种方案差不多。
* @return {newArrars} 返回新数组
*/
function arrayUnique(arrs) {
var newArrays = [];
if(arrs.length > 0) {
for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
if(arrs.indexOf) {
if(arrs.indexOf(arrs[i]) == i) {
newArrays.push(arrs[i]);
}
}else {
if(indexOf(arrs[i],arrs) == i) {
newArrays.push(arrs[i]);
}
}
}
}
return newArrays;
}
/*
* 为了支持IE8及以下浏览器需要封装一个indexOf方法
* @param {arr,arrs} 某一项 原数组
* @return 返回数组某一项
*/
function indexOf(arr,arrs){
if(arrs.length > 0) {
for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
if(arrs[i] == arr) {
return i;
}
}
}
return -1;
}
var arrs = [1,2,1,3,1];
console.log(arrayUnique(arrs)); // [1,2,3]
方案三：排序后相邻去除法
/*
* 排序后相邻去除法
* @method 新建一个新数组，遍历当前的数组，如果当前的数组某一项不等于新数组的最后一项的话，就把当前的项存入新数组中，最后返回新数组
*/
function arrayUnique(arrs) {
var newArrays = [];
if(arrs.length > 0) {
arrs.sort();
for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
if(arrs[i] !== newArrays[newArrays.length - 1]) {
newArrays.push(arrs[i]);
}
}
}
return newArrays;
}
var arrs = [1,2,1,3,1];
console.log(arrayUnique(arrs)); // [1,2,3]
方案四：对象键值对法
/*
* 对象键值法(该方法性能最优)
* @method 定义一个空对象和空新数组，遍历当前的数组，判断该对象是否存在数组的某一项，如果不存在
* 就当当前的某一项存入新数组去，且当前的项置为-1 目的过滤掉重复的项
*/
function arrayUnique(arrs) {
var newArrays = [];
var hash = {};
if(arrs.length > 0) {
for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
if(!hash[arrs[i]]) {
hash[arrs[i]] = 1;
newArrays.push(arrs[i]);
}
}
}
return newArrays;
}
var arrs = [4,5,2,1,2,1,3,1];
console.log(arrayUnique(arrs)); // [4,5,2,1,3]
方案五：巧用 Set
function combine(){
let arr = [].concat.apply([], arguments); //没有去重复的新数组
return Array.from(new Set(arr));
}
var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n)); // [1, 2, 3]