Javascript处理数组基础知识(含es6新语法)

46次阅读

共计 8439 个字符,预计需要花费 22 分钟才能阅读完成。

迭代方法
1.every()
对数组中每一项进行给定函数,如果每一项都返回 true,则返回 true。
every(callback(element,index,array), thisArg)

callback: 必需,对数组每一项所要执行的函数。
thisArg: 可选,规定 callback 回调函数 this 所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
return item>2;
});
console.log(everyResult); //false
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var everyResult = numbers.every(function(item,index,array){
return item>this.num;
},obj);
console.log(everyResult); //false
特别说明:第一个参数是回调函数,第二个参数是一个对象,它可以重置回调函数中 this 的指向。那么,上述代码中回调函数的 this 就指向 obj,于是 this.num 值等于 2。
2.some()
对数组中每一项进行给定函数,如果任意一项都返回 true,则返回 true
some(callback(element,index,array), thisArg)

callback: 必需,对数组每一项所要执行的函数。
thisArg: 可选,规定 callback 回调函数 this 所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
return item>2;
});
console.log(someResult); //true

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var someResult = numbers.some(function(item,index,array){
return item>this.num;
},obj);
console.log(someResult); //true
3.filter()
对数组中每一项进行给定函数, 返回该函数会返回 true 的项组成新的数组。
filter(callback(element,index,array), thisArg)

callback: 必需,对数组每一项所要执行的函数。
thisArg: 可选,规定 callback 回调函数 this 所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
return item>2;
});
console.log(filterResult); // [3,4,5,4,3]
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var filterResult = numbers.filter(function(item,index,array){
return item>this.num;
},obj);
console.log(filterResult); // [3,4,5,4,3]
4.map()
对数组中每一项进行给定函数, 返回每次函数调用的结果组成的新数组。
map(callback(element,index,array), thisArg)

callback: 必需,对数组每一项所要执行的函数。
thisArg: 可选,规定 callback 回调函数 this 所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
return item*2;
});
alert(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var mapResult = numbers.map(function(item,index,array){
return item*this.num;
},obj);
alert(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
5.forEach()
对数组中每一项进行给定函数, 没有返回值,和 for 循环类似。
forEach(callback(element,index,array), thisArg)

callback: 必需,对数组每一项所要执行的函数。
thisArg: 可选,规定 callback 回调函数 this 所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
console.log(item*2)
});
//2, 4, 6, 8, 10, 8, 6, 4, 2

console.log(numbers) //1,2,3,4,5,4,3,2,1
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
numbers.forEach(function(item,index,array){
console.log(item*this.num)
},obj);
//2, 4, 6, 8, 10, 8, 6, 4, 2
归并方法
ES5 新增了两个归并数组的方法:reduce(callback(prev,cur,index,array)) 和 reduceRight(callback(prev,cur,index,array))。这两个方法迭代数组所有项,然后构建一个最终返回的值。reduce 从左到右,reduceRight 从右到左。

prev: 前一个值
cur: 当前值
index: 下标
array: 数组对象

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array){
return prev + cur;
});
console.log(sum); //15
这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。
检测数组
1.instanceof
ES3 的方法
var numbers = [1,2,3];
if(numbers instanceof Array){
// 对数组进行某些操作
}
2.Array.isArray
ES5 的方法
var numbers = [1,2,3];
if(Array.isArray(numbers)){
// 对数组进行某些操作
}
数组转化成字符串
1.toLocaleString() toString()
var numbers = [1,2,3];
console.log(numbers.toLocaleString()) //1,2,3
console.log(numbers.toString())//1,2,3
2.join()
将数组转换为字符串,且用分隔符分割
var numbers = [1,2,3];
alert(numbers.join(“|”)); // 1|2|3
栈方法
栈方法是指 Last-In-First-Out 后进先出
push() 从数组末尾添加
pop() 从数组末尾移除
队列方法
队列方法是 First-In-First-Out 先进先出
shift() 从数组前端移除
unshift() 从数组前端添加
重排序方法
1.reverse()
反转数组
var numbers = [1,2,3];
console.log(numbers.reverse()) //3,2,1
2.sort()
var numbers = [0,1,5,10,15];
numbers.sort(function(a,b){
return b-a;
});
console.log(numbers); //[15, 10, 5, 1, 0]
操作方法
1.concat()
用于复制或者从尾部添加,创建新数组。
concat(n1,n2,…,nN)
n1,n2,…,nN: 都可选,既可以是数组,也可以是单个字符。
var numbers = [1,2,3];
var n1 = values.concat(); // 复制
var n2 = values.concat(4); // 尾部添加
var n3 = n1.concat(n2,10,11); // 尾部添加

console.log(numbers); //[1,2,3]
console.log(n1); //[1,2,3]
console.log(n2); //[1,2,3,4]
console.log(n3); //[1, 2, 3, 1, 2, 3, 4,10,11]
2.slice()
用于复制或截取数组,创建新数组。
slice(start,end)

strat: 可选,数组其实位置,截取的时候包括其实位置
end: 可选,结束位置,截取的时候不包括结束位置

var numbers = [1,2,3];
var n1 = numbers.slice(); // 复制
var n2 = numbers.slice(1); // 截取
var n3 = numbers.slice(1,3); // 截取

console.log(numbers); //[1,2,3]
console.log(n1); //[1,2,3]
console.log(n2); //[2,3]
console.log(n3); //[2,3]
3.splice()
用于删除、插入、替换,号称最强大的数组方法
删除:可以删除任意数量的项,需要两个参数,要删除的第一项的位置和要删除的项数
splice(start,num)

var values = [1,2,3,4,5,6];
var v = values.splice(0,2);
console.log(values); //[3,4,5,6]
console.log(v); //[1,2]
插入和替换:至少三个参数,第一个是起始位置,第二个是要删除的项数,第三个及以后是要插入或替换的值。
splice(start,num,n1,n2,…,nN)

// 插入 demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,0,1,1,1);
console.log(values); //[1,1,1,1,2,3,4,5,6]
console.log(v1); //[]

// 替换 demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,2,1,1,1);
console.log(values); //[1,1,1,1,4,5,6]
console.log(v1); //[2,3]
位置方法
indexOf(value,start)
lastIndexOf(value,start)
都接受两个参数:查找的值、查找起始位置。不存在,返回 -1;存在,返回位置。indexOf 是从前往后查找,lastIndexOf 是从后往前查找。
var numbers = [1,2,3,4,5,6,7,8,9,5,3];
console.log(numbers.indexOf(5)) //4
console.log(numbers.lastIndexOf(5)) //9
ES6 新增新操作数组的方法
1.find()
传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。
find(callback(element,index,array), thisArg)

callback:必需,回调函数,它制定了对数组元素的检索规则。
thisArg:可选,用来规定回调函数中 this 所指向的对象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.find(function (ele) {
if (ele > 4) {
return true
}
})
console.log(elem); //5
let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.find(function (ele) {
if (ele > this.num) {
return true
}
},obj)
console.log(elem); //5
2.findIndex()
传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。
findIndex(callback(element,index,array), thisArg)

callback:必需,回调函数,它制定了对数组元素的检索规则。
thisArg:可选,用来规定回调函数中 this 所指向的对象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.findIndex(function (ele) {
if (ele > 4) {
return true
}
})
console.log(elem); //3
let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.findIndex(function (ele) {
if (ele > this.num) {
return true
}
},obj)
console.log(elem); //3
3.fill()
用新元素替换掉数组内的元素,可以指定替换下标范围。
fill(value,start,end)

value:必需,用来进行填充的值。
start:可选,规定填充开始位置,默认从索引 0 处开始。
end:可选,规定填充结束位置,默认填充到数组结尾。

const arr = [‘a’, ‘b’, ‘c’, ‘d’]
console.log(arr.fill(‘ss’, 1, 3)) // [“a”, “ss”, “ss”, “d”]

const arr2 = [‘a’, ‘b’, ‘c’, ‘d’]
console.log(arr.fill(‘ss’)) // [“ss”, “ss”, “ss”, “ss”]
4.includes()
判断数组中是否存在该元素,可以替换 ES5 时代的 indexOf 判断方式。
includes(value,start)

value:必需,要检测的元素。
start:可选,规定填充开始位置,默认从索引 0 处开始。

let arr = [‘a’, ‘b’,’c’, ‘d’, NaN]
arr.includes(‘a’) //true
arr.includes(NaN) //true
arr.indexOf(NaN) //-1
5.Array.from()
方法可以将指定的参数转换为真正的数组。当然并不是任意参数都是可以被转换为数组,可以转换的参数如下:类数组对象、具有遍历器接口的对象。
Array.from(arrayLike, mapFn, thisArg)

arrayLike:必需,将要被转换为真正数组的类数组或者具有遍历器接口的对象。
mapFn:可选,对参数 arrayLike 中的数据进行处理并返回,作为新数组的元素。
thisArg:可选,规定 mapFn 的调用对象,那么 mapFn 中的 this 将会指向此调用对象。

let obj = {
“0”: “ 蚂蚁部落 ”,
“1”: “www.softwhy.com”,
“2”: 6,
“3”:”ES2015″,
length:4
};
console.log(Array.from(obj)); // [“ 蚂蚁部落 ”, “www.softwhy.com”, 6, “ES2015”]

obj = {
“a”: “ 蚂蚁部落 ”,
“b”: “www.softwhy.com”,
“c”: 6,
“d”:”ES2015″,
length:4
};
console.log(Array.from(obj)); //[undefined, undefined, undefined, undefined]

obj = {
length:3
};
console.log(Array.from(obj)); //[undefined, undefined, undefined]
上述代码将类数组对象转换为真正的数组,什么是类数组对象:很多材料上对类数组的描述比较严苛,其实很简单,只要一个对象具有 length 属性就是类数组。当然一个类数组对象,如果属性恰好类似于数组递增式索引,那就更好了,比如上面代码中的对象。上面对象只有一个 length 属性,他也是一个类数组对象,只不过生成的数组元素都是 undefined。
let str = “ 蚂蚁部落 ”;
console.log(Array.from(str)); // [“ 蚂 ”, “ 蚁 ”, “ 部 ”, “ 落 ”]
因为字符串具有遍历器接口,那么字符串也可以生成数组,数组的每一个元素,就是构成字符串的字符。
let obj = {
“0”: 1,
“1”: 2,
“2”: 3,
“3”: 4,
length:4
};
let thisObj = {
num:2
}
console.log(Array.from(obj, function (elem, index) {
return elem * this.num
}, thisObj)); //[2, 4, 6, 8]
扩展: 展开运算符生成数组
let str=” 蚂蚁部落 ”;
console.log([…str]); //[“ 蚂 ”, “ 蚁 ”, “ 部 ”, “ 落 ”]
6.Array.of()
Array.of(element0,element1,…,elementN)
此方法可以接受任意类型的参数,参数之间用逗号分隔,并且能够将参数转换为数组。
console.log(Array.of(2)); //[2]
console.log(Array.of(2,3,4)); //[2,3,4]
扩展:Array() 与 Array.of() 方法区别
console.log(Array(2)) // [undefined, undefined]
console.log(Array.of(2)) // [2]

console.log(Array(2,3,4)) // [2,3,4]
console.log(Array.of(2,3,4)) // [2,3,4]
这个方法的主要目的,是弥补数组构造函数 Array() 的不足。
7.entries()
返回迭代器:返回一个遍历器对象【键值对】
// 数组
const arr = [‘a’, ‘b’, ‘c’];
for(let v of arr.entries()) {
console.log(v)
}
// [0, ‘a’] [1, ‘b’] [2, ‘c’]
for(let [key, value] of arr.entries()) {
console.log(key+’–‘+value)
}
//0–a 1–b 2–c

//Set
const arr = new Set([‘a’, ‘b’, ‘c’]);
for(let v of arr.entries()) {
console.log(v)
}
// [‘a’, ‘a’] [‘b’, ‘b’] [‘c’, ‘c’]

//Map
const arr = new Map();
arr.set(‘a’, ‘a’);
arr.set(‘b’, ‘b’);
for(let v of arr.entries()) {
console.log(v)
}
// [‘a’, ‘a’] [‘b’, ‘b’]
8.keys()
返回迭代器:返回键值对的 key
// 数组
const arr = [‘a’, ‘b’, ‘c’];
for(let v of arr.values()) {
console.log(v)
}
//’a’ ‘b’ ‘c’

//Set
const arr = new Set([‘a’, ‘b’, ‘c’]);
for(let v of arr.values()) {
console.log(v)
}
// ‘a’ ‘b’ ‘c’

//Map
const arr = new Map();
arr.set(‘a’, ‘a’);
arr.set(‘b’, ‘b’);
for(let v of arr.values()) {
console.log(v)
}
9.values()
返回迭代器:返回键值对的 value
// 数组
const arr = [‘a’, ‘b’, ‘c’];
for(let v of arr.keys()) {
console.log(v)
}
// 0 1 2

//Set
const arr = new Set([‘a’, ‘b’, ‘c’]);
for(let v of arr.keys()) {
console.log(v)
}
// ‘a’ ‘b’ ‘c’

//Map
const arr = new Map();
arr.set(‘a’, ‘a’);
arr.set(‘b’, ‘b’);
for(let v of arr.keys()) {
console.log(v)
}
// ‘a’ ‘b’

正文完
 0