【校招VIP】前端常用api整理与区分- 校招VIP

转载声明：文章来源 https://blog.csdn.net/iblackboy/article/details/112621836

前端常用的api很多，有些api功能上很接近，但是在具体的使用上面还是有差异的。

就好比：

1、有些是在原数组上修改，有些是创建一个新的数组，原数组不变。

2、哪些api是专门用来操作字符串的，哪些api是用来操作数组的。

3、方法直接调用呢，还是方法中要放参数。

特别像我这种鱼的记忆，几天不用就忘干净了。特此整理一下，持续更新中！

split()

作用:字符串分割成数组

一个参数（必填），以这个参数为分割标准

返回:数组

栗子:

var str='12345';
var arr=str.split('');    //arr=[1,2,3,4,5]

join()

作用:数组拼接成字符串

一个参数（必填），以这个参数为拼接标准

返回:字符串

栗子:

var arr=[1,2,3,4,5];
var str=arr.join('');    //str='12345'

slice()

作用:截取数组中的某些元素。

两个参数，第一个（必填）从那个元素开始，0代表第一个元素；第二个（选填）是到那个元素结束，不包含结束元素！不填则视为后面的全部

返回:新数组，不更改原数组

栗子:

//常规
var arr=[1,2,3,4,5];
var test=arr.slice(2,3);   //arr=[1,2,3,4,5]   test=[3]
 
//只有一个参数
var arr=[1,2,3,4,5];
var test=arr.slice(2);   //arr=[1,2,3,4,5]   test=[3,4,5]
 
//当参数为负数,从后面往前数相应的个数为开始
var arr=[1,2,3,4,5];
var test=arr.slice(-2);   //arr=[1,2,3,4,5]   test=[4,5]

splice()

作用:向/从数组中添加/删除项目，然后返回被删除的项目。

三个参数，第一个（必填）从那个元素开始删除，删除时包含此元素，0代表第一个元素；第二个（必填）是删除元素的个数，参数为0时视为没有删除元素，官方要求这个参数为必填，实际可以不填，视为删除后面的全部；第三个往后（选填）全部都是添加的元素。

注意事项：调用此方法会有返回值，并且会修改原数组

返回:由被删除元素构成的数组，更改原数组

栗子：

//只有一个参数
var arr = [1,2,3,4,5];
var test = arr.splice(3);   //arr=[1,2,3]   test=[4,5]
 
//两个参数
var arr = [1,2,3,4,5];
var test = arr.splice(3,1);   //arr=[1,2,3,5]   test=[5]
 
//两个参数且第二个参数为0
var arr = [1,2,3,4,5];
var test = arr.splice(3,0);   //arr=[1,2,3,4,5]   test=[]
 
//两个参数且第二个参数为负数(负数视为0)
var arr = [1,2,3,4,5];
var test = arr.splice(3,-1);   //arr=[1,2,3,4,5]   test=[]
 
//三个参数及以上
var arr = [1,2,3,4,5];
var test = arr.splice(3,2,8,9,10);   //arr=[1,2,3,8,9,10]   test=[4,5]

sort()

作用:对数组的元素进行排序

一个参数（选填），规定排序顺序，必须是函数。

注意事项：直接调用函数，不加参数的情况很坑！！！坑的地方在于sort函数在比较时，会调用每个数组项的toString()转型方法，即会将每一项转化为ASCII进行比较。这就很难保证按照数字的大小进行排序，特别是同时出现正负数和零。解决方式就是使用函数作为参数，增强排序的稳定性

返回:无返回值，更改原数组

栗子：

//顺序排序(不带参数)
var arr = [8,4,6,1,7];
arr.sort();                  //arr=[1,4,6,7,8]
var test = arr.sort();       //arr=[1,4,6,7,8]   test=[1,4,6,7,8]
 
//顺序排序(不带参数)出现的问题
var arr = [0,1,5,10,15];
arr.sort();                  //arr=[0,1,10,15,5]   结果没有按照顺序
 
//顺序排序(增强稳定)
function compare(a,b){        
    return a-b;
}
 
var arr = [0,1,5,10,15];
arr.sort(compare);                  //arr=[0,1,5,10,15]

reverse()

作用:颠倒数组中元素的顺序

无参数

返回:无返回值，更改原数组

栗子：

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

concat()

作用:数组拼接

一个(必填)或者多个参数，多个参数意味着同时拼接多个数组，参数类型为数组

返回:返回拼接后的副本，不更改所有原数组

var arr1=[1,2,3,4,5];
var arr2=[3,4,5,6,7];
alert(arr1.concat(arr2))      //[1,2,3,4,5,3,4,5,6,7]   arr1=[1,2,3,4,5]  arr2=[3,4,5,6,7]
var test=arr1.concat(arr2)    //test=[1,2,3,4,5,3,4,5,6,7]

includes

作用:判断一个数组是否包含一个指定的值

返回:根据情况，如果包含则返回 true，否则返回 false

var arr = [1,2,3,4,5];
arr.includes(1) //true
arr.includes(6) //false

indexOf

作用:找到一个给定元素的第一个索引

返回:数组所在位置的索引值,找不到返回-1

var arr = [1,2,3,4,5];
arr.indexOf(1) //0
arr.indexOf(5) //4
arr.indexOf(6) //-1

reduce(重要)

作用:对数组中的每个元素执行一个由您提供的reducer函数(升序执行)

这个api在某些场景特别好用，相较于数组中基础的api，稍有难度。理解不清楚经常会出现莫名的bug

返回：将其结果汇总为单个返回值

语法
array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)
 
参数			描述
accumulator		必需。累计器。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr				可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

单单是这样的话没有太多难度，主要是以下特殊的地方:

回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：

1、如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值

2、如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

如果数组为空且没有提供initialValue，会抛出TypeError。

如果数组仅有一个元素（无论位置如何）并且没有提供initialValue，或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

所以，提供初始值通常更安全，正如下面的例子，如果没有提供initialValue，则可能有四种输出：

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );
 
// reduce() 没有初始值
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
[ { x: 2 }, { x: 22 }            ].reduce( maxCallback ); // 22
[ { x: 2 }                       ].reduce( maxCallback ); // { x: 2 }
[                                ].reduce( maxCallback ); // TypeError
 
// map/reduce; 这是更好的方案，即使传入空数组或更大数组也可正常执行
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

reduce可以帮忙解决数组去重以及对象数组去重

数组去重：

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator
}, [])
 
console.log(myOrderedArray)

对象数组去重：

/**
 * 数组对象去重
 * 设置cur默认类型为数组，并且初始值为空的数组
 */
let obj = {};
arrList = arrList.reduce((cur,next) => {
	obj[next.value] ? "" : obj[next.value] = true && cur.push(next);
	return cur;
},[]);
 
// 这里得出去重后的数据
console.log(arrList);