前端八股文——javascript中Array⽅法总结

Posted 李喵喵爱豆豆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端八股文——javascript中Array⽅法总结相关的知识,希望对你有一定的参考价值。

Array方法

1. 创建数组

1.1 Array.from()

这里首先讲一下浅拷贝深拷贝的概念

浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
深拷贝:会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

Array.from就是一个浅拷贝

首先通过一个例子,看一下Array.from的使用:

	var str = "this is string";
    var arr = Array.from(str);
    console.log("arr:",arr);
    //arr: [ 't', 'h', 'i', 's', ' ', 'i', 's', ' ', 's', 't', 'r', 'i', 'n', 'g' ]
    //从结果得知from方法默认将str(不知道怎么描述^_^)拆分、组合成一个新的数组实例。

下面证明一下这是一个浅拷贝:

//浅拷贝和深拷贝是只针对object和Array这样的引用数据类型
   
    //我们用一个引用类型的实例看一下吧:
     var obj = new Object( 
         name:"web_sea",
         age:18,
         isRich:[false,true]
     )
     //将对象转成数组
     var objs = [];
       for(var i in obj)
        objs.push(obj[i]);
       

     var arrObj = Array.from(objs);
     console.log("objs:",objs);//objs: [ 'web_sea', 18, [false,true] ]
     console.log("arrObj:",arrObj);//arrObj:[ 'web_sea', 18, [false,true] ]
	  //我们要改变objs子对象的值;
     objs[2][0]=true;
     //改变第一层数据的值
     objs[1]=50;
     console.log("改变objs后objs:",objs);//[ 'web_sea', 50, [ true, true ] ]
     console.log("改变objs后arrObj:",arrObj);//arrObj:[ 'web_sea', 18, [ true, true ] ]

总结一下Array.from的语法:

  • 语法:Array.from(arrayLike[, mapFn[, thisArg]])
  • 参数
    • arrayLike :想要转换成数组的伪数组对象或可迭代对象。
    • mapFn(可选参数):如果指定了该参数,新数组中的每个元素会执行该回调函数。
    • thisArg(可选参数):执行回调函数mapFn时的this对象
  • 返回值
    • 一个新的数组实例
      举个例子:
	var aas = "123";
    var arrfun = Array.from(aas,i=>i*2);
    console.log("arrfun:",arrfun);//arrfun: [ 2, 4, 6 ]

1.2 Array.of()方法

这个方法用于一组值,将其转换成数组:

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

下面是Array构造器的方法的使用:

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

1.3 sort()排序函数原理

  1. sort()使用原地算法对数组进行排序,如果不传入参数,则数组按照元素的字典序升序排列(在此过程中含有隐式转换,因此数组的每个元素都会调用一次toString()方法转换为字符串),所谓的按字典序排列,就是对两个字符串的第一个不同字符的 Unicode 编码值进行比较并排序;
  2. arr.sort(function(a,b) return a-b ) 升序
    arr.sort(function(a,b) return b-a ) 降序

1.4 copyWithin()

将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

  • target(必需):从该位置开始替换数据。如果为负值,表⽰倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表⽰从末尾开始
    计算。
  • end(可选):到该位置前停⽌读取数据,默认等于数组长度。如果为负值,表⽰
    从末尾开始计算
[1, 2, 3, 4, 5].copyWithin(0, 3);
// 将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了
原来的 12
// [4, 5, 3, 4, 5]

1.5 find()

let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num)  //輸出的結果是2

1.6 findIndex()

var arr = ['a','b','c','d'];
   var flag = arr.findIndex(item => 
        return item === 'c';
    )
    console.log(flag) // 得到: 2

2. 对原数组有影响

2.1 push

push函数返回数组最新长度

var arr = []
var length = arr.push('first')
console.log(arr) // ['first']
console.log(length)  // 1 push方法会改变原有数组,且返回改变后数组的长度
  • index : 必需。添加/删除项⽬位置,使⽤负数可从数组结尾处规定位置。
  • howmany :必需。要删除项⽬数量。如果设置为 0,则不会删除项⽬。
  • item1, …, itemX: 可选。向数组添加新项⽬。

2.2 unshift()

返回新数组长度

let numbers = [30, 40];
const length = numbers.unshift(20);
console.log( length );
console.log( numbers );

输出为:

 length: 3 
 numbers: [ 20, 30, 40 ] 

2.3 splice

返回空数组,返回包含删除元素的数组

[2, 3, 4].splice(0, 1); // 0位置删除⼀个,返回[2]
[2, 3, 4].splice(0, 1, 5); // 0位置删除1个,插⼊5,原数组是[5, 3, 4],返回
[2]
arrayObject.splice(index,howmany,item1,.....,itemX)

2.4 pop()

 let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来
alert( fruits ); // Apple, Orange

2.5 shift()

取出数组的第一个元素并返回它:

let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来
alert( fruits ); // Orange, Pear

3.对原数组⽆影响

3.1 concat()

需要注意的是,concat返回的是一个浅拷贝

const arr = [1, 2, 3].concat([4, 5])
console.log(arr) // [1,2,3,4,5]

3.2 slice()

arrayObject.slice(start, end)
注意:

  1. start表示从何处开始选取, end表示从何处结束选取,startend表示一个选取的范围;
  2. start可以为负数,此时它规定从数组尾部开始算起的位置。也就是-1 ,指最后一个元素,-2 指倒数第二个元素,以此类推
  3. end如果没有被指定参数,数组会包含从 start 到最后一个数组元素的所有元素
  4. slice()方法不会修改数组本身,而是返回所选取范围的数组元素。如果想删除数组中的某一个元素,需要使用splice()
    下面来看一些例子
  5. 这里的取值范围是0-2(start-end),因为数组的下标是从0开始,所以这里的2就是下面数组中的 javascript元素
    这里需要注意的是0-2选取的元素是html和css,并不包括javascript
var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(0, 2);
//sliceArr值为['html', 'css']

3.3 reduce()

定义:reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

prev:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 init,其值则为 init,否则为数组索引为 0 的元素 arr[0]。
cur:数组中正在处理的元素。在第一次调用时,若指定了初始值 init,其值则为数组索引为 0 的元素 arr[0],否则为 arr[1]。
index:数组中正在处理的元素的索引。若指定了初始值 init,则起始索引号为 0,否则从索引 1 起始。
arr:用于遍历的数组。

求和案例:

var arr = [1,5,8,10,15,66,65,25,48,55]
 
//  reduce
 var sum = arr.reduce(function(prev,cur)
  return prev+cur;
 );
 
console.log(sum); //298

3.4 filter()

filter用于对数组进行过滤。
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

实例:返回数组中所有大于5的元素:

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => 
  return num > 5;
);
 
console.log(res);  // [6, 7, 8, 9, 10]

3.5 some()

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。

isSome:function()
				let a = [2,3,5,7,9]
				let status = a.some(function(currentValue,index,arr)
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否有值大于等于1
				)
				console.log(status)
			
 // currentValue:2
 // index:0
 // arr:2,3,5,7,9
 // true

3.6 every()

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。

isEvery:function()
				let a = [2,3,5,7,9]
				let status = a.every(function(currentValue,index,arr)
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否所有值都大于等于1
				)
				console.log(status)
			
				 // currentValue:2
				 // index:0
				 // arr:2,3,5,7,9,
				 
				 // currentValue:3
				 // index:1
				 // arr:2,3,5,7,9,
				 
				 // currentValue:5
				 // index:2
				 // arr:2,3,5,7,9,
				 
				 // currentValue:7
				 // index:3
				 // arr:2,3,5,7,9,
				 
				 // currentValue:9
				 // index:4
				 // arr:2,3,5,7,9,
				 
				 // status:true

every()和some()的主要区别
every()会对数组中的每一个元素,即currentValue进行匹配,只有全部满足条件才会返回true,而some()中,只需有一个currentValue满足条件即可返回true,后面的currentValue不会再进行比较

3.7 join()

arryObject.join(separator)
参数:
separator: 可省略,如指定则以传入的字符串来分割数组元素,省略则默认以逗号分割数组元素

let arr = new Array()
arr[0] = 'feiniaomy.com'
arr[1] = 'mochu'
arr[2] = '飞鸟慕鱼'

let str = arr.join();
console.log("str => ", str)

3.8 flat(),flatMap()

将数组扁平化处理,返回⼀个新数组,对原数据没有影响

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

// 相当于 [2, 3, 4].map(x => [x, x*2]).flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

参考文献

[1] Array方法之Array.from(),附带对浅拷贝和深拷贝的理解
[2] Array.of()方法
[3] sort()排序函数原理
[4] 代码随想录前端八股文;
[5] findIndex()的用法
[6]js中push方法小结
[7]JavaScript 中 数组(Array)的 pop/push, shift/unshift 方法以及性能比较
[8] 详解JS中slice函数和splice函数区别
[9] JS中的reduce()函数介绍
[10] Javascript中的every()与some()的区别和应用
[11] JavaScript中join()方法详解
[12] flat(),flatMap() 超全详细用法

理解javascript中的Array类型

引子:

  从事前端开发有段时间了,个人观点:想在前端开发这条路上走的更远,不仅要学好HTML&HTML5、CSS&CSS3,最重要的就是要学好javascript了。所以打好javascript基础是非常有必要,今天就平时所用的javascript中的数组Array类型做个整理。本人前端初学者,如果以下内容对您有帮助的话本人也非常欣慰,如果写的不好,请提出您的见解,共享下您在学习js中的宝贵经验,谢谢!

  Array类型是js中非常常用的数据类型了,这里就不脑补了,至于什么是数组类型,请绕道w3school进行查阅。

 

一、创建Array

  js中创建数组有两种方式,一种是通过Array构造函数进行创建,另一种是通过数组字面量进行创建,下面就两种方式创建数组提供对应Demo:

  1、通过Array构造函数进行创建: 

// 创建一个空数组
var arr = new Array();

// 指定数组长度
var arr2 = new Array(10);

// 创建并指定数组项
var arr3 = new Array("a", "b", "c");

 

  2、通过数组字面量进行创建:

// 创建一个空数组
var arr = [];

// 创建包含数组项的数组
var colors = ["red", "blue", "yellow"];

 

 

二、检测数组

  ES3中规定,如果页面中只有一个全局执行环境,可以通过instanceof操作符判断。如果页面中包含多个框架,就会出现问题。为了解决这个问题,ES5中引入了Array.isArray()方法,这个方法可以确定某个值到底是不是数组。但是支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。对于老版本的浏览器中,可以通过功能检测来实现isArray()方法。具体实现代码如下:

if( Array.isArray !== "function"){
    Array.isArray = function(candidate){
        return Object.prototype.toString.call(candidate) === "[object Array]";
    };  
}

 

 

三、栈方法

  栈的概念:栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构。

  1、push():push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。

  2、pop():pop()方法不接收参数,从数组的末尾移除最后一项,减少数组的length值,然后返回移除的项。Demo如下:

var colors = ["red", "blue"];
colors.push("brown");    // 添加另一项
colors[3] = "black";    // 添加一项
console.log(colors);    // red,blue,brown,black
console.log(colors.length);    // 4    

var item = colors.pop();    // 移除colors的最后一项
console.log(item);    // “black”
console.log(colors);    // red,blue,brown

 

 

四、队列方法

  队列的概念:队列是一种FIFO(First-In-First-Out,先进先出)的数据结构。

  1、shift():shift()方法不接收参数,从数组的前端移除第一个项并返回该项,同时将数组的长度减1。

  2、unshift():unshift()方法与shift()用途相反,它能在数组的前端添加任意个项并返回新数组的长度。Demo如下:

var colors = [];
var count = colors.unshift("red", "green");
console.log(count);    // 2
console.log(colors);    // red,green

count = colors.unshift("black");
console.log(count);    // 3
console.log(colors);    // black,red,green

var item = console.pop();
console.log(item);    // "green"
console.log(colors.length);    // 2

 

 

五、重排序方法

  数组中已经存在两个可以直接用来重排序的方法:reverse() 和 sort() 。

  1、reverse() 方法会将反转数组项的顺序,如下所示:

var arr = [5, 4, 3, 2, 1];
arr.reverse();
console.log(arr);    // 1,2,3,4,5

 

  2、sort() 方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort() 方法会调用每个数组项的 toString() 转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort() 方法比较的也是字符串,如下所示:

var arr = [0, 1, 5, 10, 15];
arr.sort();
console.log(arr);    // 0,1,10,15,5

 

  上面的例子中,可以看出,虽然数值5小于数值10,但是在进行字符串比较时,”10“则位于”5“的前面,于是数组的顺序就被修改了。显然,这种排序方式存在问题。因此,sort()方法引入了可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

  比较函数接收两个参数,如果第一个参数应该位于第二个参数之前就返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。以下就是一个简单的比较函数:

function compare(num1, num2){
    if(num1 < num2){
        return -1;
    } else if(num1 > num2){
        return 1;
    } else {
        return 0;
    } 
}

 

  这个比较函数可以适用于大多数数据类型,只要将其作为参数传递给 sort() 方法即可,如下面这个例子所示。  

var val = [0, 15, 10, 1, 5];
val.sort(compare);
console.log(val);    // 0, 1, 5, 10, 15

 

  在将比较函数传递到 sort() 方法之后,数值仍然保持了正确的升序。当然,也可以通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可。  

function compare(num1, num2){
    if(num1 < num2){
        return 1;
    } else if(num1 > num2){
        return -1;
    } else {
        return 0;
    }
}

var val = [0, 1, 5, 10, 15];
val.sort(compare);
console.log(val);    // 15, 10, 5, 1, 0

 

  对于数值类型或者其valueOf() 方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。

function compare(num1, num2){
    return num2 - num1;
}

 

 

六、操作方法

  1、concat():基于当前数组中的所有项创建一个新的数组。

  利用这个方法连接数组项一般会经过三个过程,第一步创建当前数组的一个副本,第二步将接收到的参数添加到这个副本的末尾,第三步返回新构建的数组。

  在没有给concat() 方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat() 方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的不是数组,这些值就会被简单地添加到结果数组的末尾。下面来看一个例子:

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

console.log(colors);    // red, green, blue
console.log(colors2);    // red, green, blue, yellow, black, brown

 

 

  2、slice():基于当前数组的一个或多个项创建一个新数组。

  slice() 方法可以接收一个或两个参数,即要返回项的起始位置和结束位置。

  a) 当只有一个参数的情况下,slice() 方法返回从该参数指定位置开始当前数组末尾所有项

  b) 如果有两个参数,该方法返回起始结束位置之间的项——但不包括结束位置的项。

  注意:slice() 方法不会影响原始数组。下面看一下slice() 的例子:

var colors = ["red", "green", "blue", "yellow", "purple"];

var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);

console.log(colors);      // red, green, blue, yellow, purple  
console.log(colors2);    // green, blue, yellow, purple
console.log(colors3);    // green, blue, yellow

  如果 slice() 方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。例如,在一个包含5项的数组上调用 slice(-2, -1) 与调用 slice(3, 4) 得到的结果相同。如果结束位置小于其实位置,则返回空数组。

  

  3、splice():该方法可以用来对数组项进行删除、插入或替换。但是主要用途还是用于向数组的中部插入项。下面分别介绍这三种用途:

  a)【 删除】可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如,splice(0, 2) 会删除数组中的前两项。

  b)【插入】可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项数。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如,splice(2, 0, "red", "green")会从当前数组的位置2开始插入字符串"red"和"green"。

  c)【替换】可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice(2, 1, "red", "green")会删除当前数组位置2的项,然后再从位置2开始插入字符串"red"和"green"。

  splice() 方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。下面的代码展示了上述3种使用splice() 方法的方式:

var colors = ["red", "green", "blue"];
var removed = colors.splice(0, 1);    // 删除第一项
console.log(colors);    // green, blue
console.log(removed);    // red

removed = colors.splice(1, 0, "yellow", "orange");    // 从位置1开始插入两项
console.log(colors);    // green, yellow, orange, blue
console.log(removed);    // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple");    // 从位置1删除一项,然后在位置1处新增2项
console.log(colors);    // green, red, purple, orange, blue
console.log(removed);    // yellow

 

 

  4、join():接收一个参数,将数组中的每一项以传入的参数作为连接字符连接转换成一个字符串并返回,如下所示:

var colors = ["red", "green", "blue"];
var str = colors.join(‘-‘);
console.log(str);    // "red-green-blue"

 

 七、位置方法

  ES5为数组实例添加了两个位置方法:indexOf() 和 lastIndexOf() 。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,indexOf() 方法从数组的开头(位置0)开始向后查找,lastIndexOf() 方法则从数组的末端开始向前查找。

  这两个方法都返回要查找的项在数组中的位置,或者在没有找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。以下是几个例子:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

console.log(numbers.indexOf(4));    // 3
console.log(numbers.lastIndexOf(4)); // 5

console.log(numbers.indexOf(4, 4));    // 5
console.log(numbers.lastIndexOf(4, 4));    // 3

var person = {name: "Michael"};
var people = [{name: "Michael"}];

var morePeople = [person];

console.log(people.indexOf(person));    // -1
console.log(morePeople.indexOf(person));    // 0

 

 

八、迭代方法

  ES5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这5个迭代方法的作用:

  a) every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

  b) filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

  c) forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

  d) map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

  e) some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

  以上方法都不会修改数组中的包含的值。

 

  Demo for every() and some():

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 someResult = numbers.some(function(item, index, array){
    return (item > 2);
});

console.log(someResult);    // true

 

 

  Demo for filter():

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]

 

 

  Demo for map():

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});

console.log(mapResult);    // [2, 4, 6, 8, 10, 8, 6, 4, 2]

 

 

  Demo for forEach():

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

numbers.forEach(function(item, index, array){
    // 执行某些操作
});

 

 

九、归并方法

   先来说说什么事归并方法,所谓归并就是迭代一个数组中的所有项,从而进行每一项的累加或其它的操作。

   ES5中新增了reduce() 和 reduceRight() 两个归并方法,这两个方法都会迭代数组的所有项,然后构建一个最终的返回值。其中,reduce() 方法从数组的第一项开始,逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始,向前遍历到第一项。

  这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给reduce() 和 reduceRight() 的函数接收4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

  使用reduce() 方法可以执行求数组中所有值之和的操作,比如:

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
});

console.log(sum);    // 15

 

 

十、常用示例

  1、反转打印一段字符串(巧用Array的reverse方法):

window.onload = function {

    if(typeof String.prototype.reverse !== ‘function‘){
        String.prototype.reverse = function(){
        return Array.prototype.reverse.apply(this.split(‘‘)).join(‘‘);
    };
    }
    
    var str = "hello world !";
    var str2 = str.reverse(str);
    console.log(str2);    // "! dlrow olleh"
};

 

以上是关于前端八股文——javascript中Array⽅法总结的主要内容,如果未能解决你的问题,请参考以下文章

前端面试八股文(详细版)—上

JavaScript 插入排序法

JavaScript 语句 数组与冒泡排序法

前端八股文浏览器系列:浏览器渲染前端路由前端缓存(HTTP缓存)缓存存储(HTTP缓存存储本地存储)

前端八股文之浏览器缓存

太顶了!面试率超高的前端八股文,一鸣惊人!