Javascript 数组方法全解析(包含es6,es7)

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Javascript 数组方法全解析(包含es6,es7)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Javascript 数组方法全解析(包含es6

1. 数组自带属性

 constructor //返回创建数组对象的原型函数
 length //返回数组对象的长度
 PRototyPE //这个是老熟人了,可以增加数组的原型方法和属性,这个放在后面的继承中讲

2. 数组的方法

//首先让我们看看数组的对象属性。
Array.prototype

Javascript 数组方法全解析(包含es6,es7)

1. concat

用法:用来连接多个数组的方法
有了这个方法之后我们连接多个数组就方便了
array1.concat(array2,array3,...,arrayX) 该参数可以是一个具体的值也可以是数组对象
let arr = [];
let arr1 = [1,2,3,4,5,6];
let pos = 7;
console.log(arr.concat(arr1,pos)); // =>[1,2,3,4,5,6,7]

//ok 我们再看一个厉害的,合并一维数组和二维数组
var num1 = [[1]];
var num2 = [2, [3]];

var nums = num1.concat(num2); 

console.log(nums); // =>[[1], 2, [3]] 
console.log(nums[0][0]); // =>1

2. copyWithin()
用法:浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小
重点是不改变大小

arr.copyWithin(target)

arr.copyWithin(target, start)

arr.copyWithin(target, start, end)

arr.copyWithin(目标索引, [开始索引], [结束源索引])

target(必须) 0为基底的索引,如果target为负数的话那么target为length+target
start(可选) 0为基底的索引,如果start为负数的话那么start为length+start 如果省略的话就是0
end(可选) 0为基底的索引,如果end为负数的话那么end为length+end 如果省略的话就是arr.length
start=>end 在数学中是[) 比如(0,2)表示选下标0,1 (1,4)表示选下标 1,2,3,同理类推
我们来看几个例子

[1, 2, 3, 4, 5].copyWithin(-2); 
//=> [1,2,3,1,2] targer为-2,也可以等于-2+5=3 start和end省略 所以等同于copyWithin(3,0,5)

[1, 2, 3, 4, 5].copyWithin(0, 3); // => [4,5,3,4,5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); //=> [4,2,3,4,5] 

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); 
//=>[1, 2, 3, 3, 4]  -2等同于-2+5=3 -3等同2 -1等同于4 所以等同于copyWithin(3,2,4)

//ok,我们再来看一个特殊的,copyWithin并不单单能对数组对象使用还能对类数组对象使用
[].copyWithin.call({length:5, 3:1},0,3); //=> {0:1,3:1, length:5}
/*为什么会出这么个玩意?别急待我一步一步和你说
{length:5, 3:1} => {0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}
[].copyWithin => Array.prototype.copyWithin.call()这一步也就是把类数组能使用数组的copyWithin方法.
[].copyWithin.call({length:5, 3:1},0,3)=>[undefined,undefined,undefined,1,undefined].copyWithin(0,3)=>[1,undefined,undefined,1,undefined]=>{0:1,3:1, length:5}
*/

3. entries
用法:array.entries(); 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键值
我们先看一段代码:

var arr= ['a','b','c'];

var Iterator = arr.entries(); //返回一个Array Iterator对象
console.log(Iterator.next().value); //=>[0:"a"]
console.log(Iterator.next().value); //=>[1:"b"]
console.log(Iterator.next().value); //=>[2:"c"]

ok,介绍完基本用法之后我们来看一下具体应用

//二维数组排序
var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];

function sortArr(arr){

    var pos = true;
    var Iteartor = arr.entries();

    while(pos){

        var result = Iteartor.next();
        if(result.done !== true){ //当循环到最后一个的时候result.done会变成true
             
             result.value[1].sort((a,b)=>a-b);

        }else{
             
             pos = false;
        }

    }

}

sortArr(arr);

我们再来看一个

var arr = ['a','b','c'];
var iteartor = arr.entries();

for(let i of iteartor){
    console.log(i);
}

//[0, "a"]
//[1, "b"]
//[2, "c"]

for .. of循环能遍历迭代器对象 //具体我放在以后的文章好好讲讲

4.Array.From
用法:可以将一个类似数组或者可迭代对象创建一个新的数组(不会改变原数组)
先举一个小例子

Array.from('abc'); //=>['a','b','c']
Array.from({0:'a',1:'b',length:2}) //=> ['a','b']

接下来我们再来看一个神奇的例子,一行代码将数组中的元素去重

Array.from(new Set([4,2,4,2,6,6,7,8])); //=>[4,2,6,7,8] 

5.every
every(callback[,thisArg])
用法:用来测试数组中是否每个元素都满足某种规则
测试函数参数:(value, index, arr) 分别是该数组的值,该数组的索引还有该数组
返回值:Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.every(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>false

6.some
some(callback[,thisArg])
用法:用来测试数组中是否有元素都满足某种规则
测试函数参数:(value, index, arr) 分别是该数组的值,该数组的索引还有该数组
返回值:Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.some(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>true

7.filter
filter(callback[,thisArg])
用法:用于创建一个新数组,满足通过参数函数测试的所有函数
测试函数参数:(value, index, arr) 分别是该数组的值,该数组的索引还有该数组
返回值:返回一个新数组
先看一个小例子

const checkIsBigEnough = (value) => value >= 10
let arr = [6,12,50,77,95];
console.log(arr.filter(checkIsBigEnough)); //=> [12,50,77,95]

ok,我再给大家举一个我经常用的例子,有的时候我们通过ajax获取后台穿过来的json数据,但是其实不是所有数据我们都能用的,这个时候filter的就显得比较重要了,还是看例子

//我从后台获取了一个数组,数组中包含多个对象如下:
let JSON = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"}
]
//这个时候我只需要获取FromStation值为北京的对象,这个时候filter就派上用场了
let filterMethod = (value) => value.FromStation == "北京"
let finallyData = json.filter(filterMethod);
console.log(finallyData);
//=> [{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"}]

8.find
find(callback[,thisArg])
用法:和上面几个是几兄弟,用法和filter相似,不过find返回值是符合测试函数的第一个值
测试函数参数:(value, index, arr) 分别是该数组的值,该数组的索引还有该数组
返回值:符合测试函数的第一个数组的值,如果没有符合条件的返回Undefined


    let json = [
    {"CostTime": "310", "FromStation": "上海"},
    {"CostTime": "336", "FromStation": "北京"},
    {"CostTime": "340", "FromStation": "杭州"},
    ]
    
    let checkMethod = (value) => value.CostTime == "340"
    
    console.log(json.find(checkMethod)); //=>{"CostTime": "340", "FromStation": "杭州"}

9.findIndex
用法:和上面几个是几兄弟,用法和find相似,不过findIndex返回值是符合测试函数的第一个值的索引
测试函数参数:(value, index, arr) 分别是该数组的值,该数组的索引还有该数组
返回值:符合测试函数的第一个数组的值,如果没有符合条件的返回-1

let json = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "340", "FromStation": "杭州"},
]

let checkMethod = (value) => value.CostTime == "340"
let checkMethod2 = (value) => value.FromStation == "深圳"

console.log(json.findIndex(checkMethod)); //=>2

console.log(json.findIndex(checkMethod2)); //=> -1

10.fill
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

用法:用一个固定的值去填充数组中从其实索引到终止索引内的全部元素
参数:
value(必填)用来填充数组的值
start(选填)起始索引,默认值为0 如果为负数的话start = start+arr.length
end (选填)终止索引,默认值为arr.length 如果为负数的话 end = end+arr.length
start=>end 在数学中是[),选择大于等于start,小于end的值
返回值:修改之后的数组

[1,2,3].fill(5) //=> [5,5,5] 不传start默认为0,不传end默认为arr.length
[1,2,3].fill(5,1) //=>[1,5,5] 
[1,2,3].fill(5,1,2) //=>[1,5,3]
[1,2,3].fill(5,1,1) //=>[1,2,3] 不变因为大于等于1小于1的值没有
[1,2,3].fill(5,-3,-2) //=>[5,2,3] start = -3 => -3+3 = 0  end = -2 =>-2 + 3 = 1 =>fill(5,0,1)
Array(3).fill(5) //=> [5,5,5] 这个方法比较有用,可以初始化数组(将所有值初始化为一个值)

11.indexOf
arr.indexOf(seArchElement,formIndex)
参数:
searchElement要查找的元素
formIndex从哪开始查找 (formIndex为一个整数,可以为负数,当formIndex为负数的时候formIndex可以转化成formIndex+arr.length 如果还为负数的话表示查找整个元素)
返回值:-1(没有找到元素) 或者 元素的下标(找到元素)

// 找出指定元素在数组中出现的位置
var positionIndex = [];
var arr = [1,5,6,1,7,8,1,6,6,6];
var pos = arr.indexOf(1);
while(pos!=-1){
   positionIndex.push(pos);
   pos = arr.indexOf(1,pos+1);
}
console.log(positionIndex); // => [0,3,6]

12.reduce
用法:方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。(这个是mdn文档上写的,看起来感觉特别难懂,其实他就是一个将数组元素不断递归执行一个函数之后返回的值)
我们还是先看例子:

//数组累加
var arr = [3,6,5,1];
arr.reduce((pre,cur)=>pre+cur,10) //10+3+6+5+1 => 25

//数组累乘
var arr = [3,6,5,1];
arr.reduce((pre,cur) => pre*cur) //3*6*5*1 =>90

ok,我们先来看看reduce函数
reduce((prevalue,curValue,index,array)=>{},initialValue)
我们先看回调函数中的值:
preValue: 上一次调用回调返回的值,或者是提供的初始值(initialValue)著作权归作者所有。
curValue: 数组中当前被处理的数组项
index: 当前数组项在数组中的索引值
array: 调用 reduce()方法的数组
我们写一个demo来看看这个方法是如果实行的

let arr = [1,2,3,4,5,6,7];
arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
})
/*
1,2
3,3
6,4
10,5
15,6
21,7
28
*/

arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
},10)
/*
10,1
11,2
13,3
16,4
20,5
25,6
31,7
38
*/

由此可以看出:

  1. 在initialValue没有传入的时候
    pre在第一次循环的时候为数组第一个数
    cur为数组第二个值
  2. 在initialValue有值的时候
    在第一次循环pre初始为initialValue
    cur为数组第一个值

其实reduce以递归的思想可以理解为:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
再举一个reduce的常用例子吧,二维数组的合并

var twoArr = [['a','b'],['c','d'],['e','f']];
twoArr.reduce((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> a,b,c,d,e,f

13.reduceRight
用法其实和reduce基本没有区别,唯一的区别是他是从右到左执行回调函数

var twoArr = [['a','b'],['c','d'],['e','f']];
twoArr.reduceRight((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> f,e,d,c,b,a

let arr = [1,2,3,4,5,6];
arr.slice(0,2); // =>[1,2]
arr.slice(-1) // =>[6]
arr.slice(0) // => [1,2,3,4,5,6]
arr.slice(-7) //=> [1,2,3,4,5,6]
arr.slice(2,-3) // => [3]

字符串方法和数组方法相似
let str = 'I am Bob';
str.slice(-5); //=> m Bob
str.slice(0,6); //=> I am B

数组方法之splice
splice(start,deleteCount,item...)
用法:万精油方法,可以对数组进行增加,删除,插入,可以从数组中移除一个或者多个元素,并且用后面的item来替换它,返回值为删除的元素的数组,并且改方法会改变原数组
let arr = [1,2,3,4,5,6];
arr.splice(0,5); [1,2,3,4,5]返回一个呗删除的数组
console.log(arr); // =>[6]
arr.splice(0,0,7,8,9); //返回一个空数组[]
arr // =>[7,8,9,6]

数组的遍历

let arr = [1,2,3,4];
//普通for循环
for(var i = 0,length=arr.length;i < length;i++){
    //do someThing
}

//forEach循环
arr.forEach((value, index)=>{
   //do someThing
})

//map循环
arr.map((value, index)=>{
   //do someThing
})

//其实还有两个循环一个for in ,还有一个是for of,不过强烈介意不要用for in,一个是效率比普通for循环差好多,因为它会遍历整个数组的原型对象,我们来看一个例子
//我们给数组原型添加一个haha的方法
Array.prototype.haha = function(){
    //do somthing
}
//然后我们再用for in来输出数组
for(let i in arr){
    console.log(arr[i]);
}
//=> 1,2,3,4 haha
最后竟然输出了haha,这是因为for in这个循环会遍历数组的原型对象,所以会输出haha,那么要解决这个有方法么?其实也有:
for(let i in arr){
    if(arr.hasOwnProperty(i))
    console.log(arr[i]);
}
//可以看到遍历输出了正确的值,但是还是不建议大家使用for in去循环数组,不单单是效率低,而且容易出问题,特别是当项目引用了许多第三方类库的时候。
有大牛做过一个测速,遍历数组的时间对比 for in > map > forEach > for

数组元素的添加和删除

  1. push 将一个或者多个数组添加到数组的末尾,并且返回数组的长度
    Array.prototype.push(ele1,ele2,ele3,ele4)
  2. pop 删除数组的最后一个值,并且返回删除元素的值
    Array.prototype.pop()
  3. shift删除数组第一个值,并且返回删除元素的值,用法和pop相似
    Array.prototype.shift()
  4. unshift 用法和push相似,将一个或者多个元素添加到数组的开头,并且返回数组的长度

    Array.prototype.unshift(ele1,ele2,ele3,ele4)
    

数组和字符串之间的相互转化

  1. 数组转化成字符串
    join:首先join方法不会改变原数组,只会返回一个生成的新字符串
let a = ['a','b','c'];

console.log(a.join()) //=> 'a,b,c'
console.log(a.join("")) //=> 'abc'
console.log(a.join('-')) //=> 'a-b-c'

ok,这个比较简单,我们在来看一个复杂点的,类数组转化成字符串

function f(a,b,c){
   let e = Array.prototype.join.call(arguments,"");
   console.log(e);
}
f('Hello',' ','World'); //=> Hello World
  1. 字符串转化成数组

用字符串的split方法,具体先不多说,等写字符串方法全解析的时候再进行具体说明

后记

以上都是个人开发经验总结而成,如有错误,欢迎各位大佬指正
转载请注明出处

脚本宝典总结

以上是脚本宝典为你收集整理的Javascript 数组方法全解析(包含es6,es7)全部内容,希望文章能够帮你解决Javascript 数组方法全解析(包含es6,es7)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。