前端常用方法整理与区分（字符串，数组，对象）

前端关于对象，数组，字符串的方法很多，有些方法功能上很接近，但是在具体的使用上面还是有差异的。

就好比：

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

2、有些只能处理字符串，有些只能处理数组，有些可以同时处理两者

3、有些方法直接调用，有些方法中要放参数。

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

1.字符串类

split()

作用：字符串分割成数组

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

返回：数组

栗子：

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

trim()

作用：消除字符串两头的空格

无参数

返回：字符串

const str = '  abc  ';

str.trim() // "abc"

substring()

作用：提取下标之间的字符，包括开始处的字符，但不包括结束处的字符

第一个参数必填，第二个参数选填

返回值：字符串

const str = 'Hello world!';

str.substring(3) // "lo world!"
str.substring(3, 7) // "lo w"

startsWith(), endsWith() 

作用：参数字符串是否在原字符串的头部/尾部（ES6新增）

第一个参数（必填），表示查找的字符串/字符；第二个参数（选填），表示开始搜索的位置。

返回：布尔值

栗子：

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true

repeat()

作用：将原字符串重复n次（ES6新增）

一个参数（必填）

返回：新字符串

栗子：

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

replace()

作用：字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

第一个参数（必填），子字符串或正则表达式；第二个参数（必填），替换文本或生成替换文本的函数。

返回：新字符串

const str="hello world!";
str.replace("world","china"); // hello china!

2.数组类

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]

 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);

4.处理多种数据格式类

includes

作用：1.从数组中是否找到了参数项。2.从字符串中是否找到了参数字符串

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

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

// 字符串
const str = 'hello world!'
str.includes('ll') // true
str.includes('oo') // false

indexOf

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

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

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