新增数组对象方法

1 isArray()

Array.isArray()方法是用来判断某个值是否是数组,如果是,则返回true,否则返回false,用于判断一些类似数组的对象很有用。

因为无论是数组还是对象,对于typeof的操作返回值都为object,所以就有了区分数组类型和对象类型的需要.而有些对象中又存在length属性,
instanceof用来判断内存中实际对象A是不是B类型

2 indexOf(),lastIndexOf() [ES5]

indexOf()方法返回给定元素能找在数组中找到的第一个索引值,否则则返回-1。
lastIndexOf()方法是返回指定元素在数组中的最后一个索引值,如果不存在则返回-1。
注意,lastIndexOf()是从数组的后面向前查找。

var array = [2,4,9,2];
var index = array.indexOf(2);
var lastindex = array.lastIndexOf(2);

3 filter() , map() [ES5]

filter()方法使用制定的函数过滤所有元素,并创建一个包含所有通过过滤的元素的新数组。
指定函数为filter()的回调函数。

var array = [12,5,8,123,42]
var.filtered = array.filter(function(obj){
    
    
	return obj>=10;
})
var stus = [
    {
    
    name:'lily','gender':'女'},
    {
    
    name:'poly','gender':'男'},
    {
    
    name:'hmm','gender':'女'},
    {
    
    name:'white','gender':'男'},
];

// 过滤器,提供一个回调函数,得到一个新数组,
// 新数组由回调返回true的单元组成
var news = stus.filter(function(s) {
    
    
    return s.gender == '男';
});

console.log(news);

map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
map方法会给原数组按照顺序调用一次回调函数进行处理。处理之后的返回值会组合起来形成一个新数组。

var numbers = [1,4,9];
var maped = numbers.map(Math.sqrt);
var score = [34,52,68];
console.log( score.map(function(val) {
    
    
    return val+10;
}));

4 forEach() [ES5]

同上述两个方法一样 forEach()也是用来遍历数组并且对数组的每个元素执行一次回调函数。
该回调函数接受三个参数

  • 当前元素元素的值
  • 当前元素的索引
  • 当前数组

5 reduce() reduceRight() [ES5]

同样是遍历数组,reduce()方法接受一个回调函数作为累加器,数组中的每个值(从左到右)开始合并,最终合成一个值。
回调函数包含四个参数

  • previsousValue 上一次调用的回调值,或者是给定的初始值
  • currentValue 数组中当前被处理的元素
  • index 当前元素在数组中的索引值
  • array 调用reduce的数组
[0,1,2,3,4,5].reduce(function(previsousValue,currentValue,index,array) 
	return previousValue + currentValue;
})
var nums = [1,2,3,4,5,6,7,8,9,10];
for(let i=0 ,sum=0; i<nums.length; i++) {
    
    
    sum += nums[i];
}

console.log( nums.reduce(function(sum,val) {
    
    
    sum += val;
    return sum;
}));

reduceRight()reduce()方法类似,只是执行顺序是从右到左的。

6 entries(),keys()和values()

ES6提供三个新的方法,entries()keys()values(),这三个方法可以用于遍历数组。它们和for···of类似,只是keys()是针对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

for(let index of ['a','b'].keys()){
    
    
	console.log(index);
}
for(let elem of ['a','b'].values()){
    
    
	console.log(elem);
}
//values暂时不支持
for(let [index,elem] of ['a','b'].entries()){
    
    
	console.log(index,elem);
}

如果不使用原来的for···of循环,那么可以手动调用指针,使用next方法,进行遍历。

let letter = ['a','b','c'];
let entries = letter.entries();
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);

7 Array.from()

Array.from()方法用于将两类对象转化成为真正的数组:类似数组的对象(array-likeobject)和可遍历的对象(包括ES6新增的数据结构Set和Map)。

let arrayLike = {
    
    
	'0':'a',
	'1':'b',
	'2':'c',
	length:3

}
let arr = Array.from(arrayLike);

Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。

Array.from(string).length;

8 Array.of()

Array.of()方法将用于将一组值,转换成为数组。

Array.of(3);
Array.of(3,11,9);

9 Array.copyWithin()

数组通过copyWithin方法,在当前数组内部,将指定位置的成员复制到其它位置(会覆盖原有的成员),然后返回当前数组。

Array.copyWithin(target,start,end);

它接受三个参数:

  • target(必须):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0,如果为负值,则表示从末尾开始计数。
  • end(可选):从该位置停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计数。
[1,2,3,4,5].copyWithin(0,3,4);
//[4,2,3,4,5]

10 Array.find() 和 Array.findIndex()

数组实例的find()方法,用于找到第一个符合条件的数组成员。它的参数是一个回调函数。所有数组的成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
回调函数可以接受三个参数

  • value 当前的键值
  • index 当前的索引值
  • array 原数组
[1,5,10,15].find(function(value,index,array){
    
    
	return value > 9;
})
//10

数组的findIndex()方法和find()方法类似,只是返回值是第一个符合条件的数组成员的位置,如果找不到,则返回-1;

[1,5,10,15].findIndex(function(value,index,array){
    
    
	return value > 9;
})
//2

11 Array.fill()

fill()方法使用给定值,填充一个数组。

['a','b','c'].fill(7)
//7,7,7

上面的代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a','b','c'].fill(7,1,2)
//['a','7','c']

12 includes()

Array.includes()方法返回一个布尔值,表示某个数组是否包含给定的值。

[1,2,3].includes(2)//true

同样该方法可以设置搜索的起始位置,默认为0.
如果第二个参数为负数,则表示倒数的位置。

[1,2,3].includes(3,3) //false
[1,2,3].includes(3,-1)//true

13 数组空位

数组的空位,指的是数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位

Array(3)//[,,,]

注意,空位不是undefined,一个位置等于undefined,依然是有值的。空位没有任何值。

猜你喜欢

转载自blog.csdn.net/qq_45785424/article/details/107238440