前言

初级前端的同学面试必备，在这里我把一些常用的api总结一下。

数组的Api

改变自身的方法(9个)

分别为pop、push、shift、unshift、sort、splice、reserve 以及ES6新增的copyWithin和fill。

下面列举一些常见的数组api

1.Array.forEach() 方法

Array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项,该函数接收三个参数，参数一：当前数组中元素；参数二：索引； 参数三：当前数组。没有返回值，不能中断array.forEach()迭代。

const colors = ['blue', 'green', 'white'];

colors.forEach((item, index ,Array) => {
  console.log(item, index ,Array);
});

2.Array.map()方法

array.map(callback) 方法通过在每个数组项上使用callback函数调用结果来创建一个新数组，不改变原数组。该函数接收三个参数，参数一：当前数组中元素；参数二：索引； 参数三：当前数组。

const colors = ['blue', 'green', 'white'];

const newColors = colors.map((item,index,Array) => {
  return item + 1;
});

console.log(newColors);

3.Array.reduce() 方法

array.reduce(callback)通过调用callback 函数来将数组简化为一个值。 在每次遍历中的callback(accumulator， item，index，Array)使用参数调用的。该回调函数接收四个参数，分别是累加器，当前项，索引和数组本身，reduce方法有两个参数，第一个是callback函数，第二个是传入的初始值。

const item = [1,2,3,4];

const sum = item.reduce((accumulator,item,index,Array) => {
    console.log(accumulator,item,index,Array)
    return accumulator + item;
},1)

console.log(sum);

4.array.concat()方法

array.concat(arr1,arr2,arr3)将一个或多个数组连接到原数组,并且创建一个新的数组而不改变原数组。

const arr1 = [1,2,3];

const arr2 = [4,5,6];

const arr3 = arr1.concat(arr2);

console.log(arr1,arr2,arr3);

5.array.slice()方法

array.slice(fromIndex，toIndex)返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。其创建一个新数组，而不改变原数组。

const arr = [1,2,3,4,5,6];

const arr1 = arr.slice(2,4);

console.log(arr,arr1);

6.array.splice()方法

array.splice(fromIndex,removeCount,item1，item2)从数组中删除元素，并插入新的元素。如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

删除：需指定2个参数，要删除的第一项位置和要删除的项数
插入：需提供3个参数，起始位置、0（要删除的项数）、和要插入的项，如要插入多个项 ，再传入第四，第五...参数
替换：需指定3个参数，起始位置、要删除的项数和要插入的任意数量的项

删除
const arr = [1,2,3,4,5,6];

const arr1 = arr.splice(1,2);

console.log(arr,arr1);

插入
const arr2 = [1,2,3,4,5,6];

const arr3 = arr2.splice(1,0,7,8);

console.log(arr2,arr3);

替换
const arr4 = [1,2,3,4,5,6];

const arr5 = arr4.splice(1,2,7,8);

console.log(arr4,arr5);

7.array.fill() 方法

array.fill(value, fromIndex, toIndex)用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。会改变原数组。

const arr = [1,2,3,4,5,6];

const arr1 = arr.fill(7,1,3);

console.log(arr,arr1)

8.array.flat()方法

array.flat(depth)方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1。

const arr = [1,2,3,[4,5],[6,7,[8,9]]];

const arr1 = arr.flat(1);

const arr2 = arr.flat(2);

console.log(arr1,arr2);

9.array.push() 方法

array.push(item1，... ,itemN)方法将一个或多个项追加到数组的末尾，并返回新的数组长度。

const arr = [1,2,3,4,5,6];

const length = arr.push(6);

console.log(arr,length);

10.array.pop() 方法

array.pop()方法从数组中删除最后一个元素，然后返回该元素。

const arr = [1,2,3,4,5,6];

const item = arr.pop();

console.log(arr,item);

11.array.shift() 方法

array.shift()方法从数组中删除第一个元素，然后返回该元素， 具有O(n)复杂度。

const arr = [1,2,3,4,5,6];

const item = arr.shift();

console.log(arr,item);

12.array.unshift() 方法

array.unshift(item1，..., itemN)方法将一个或多个项追加到数组的开头，返回新的数组长度

const arr = [1,2,3,4,5,6];

const length = arr.unshift(-1,-2,0);

console.log(arr,length);

13.array.sort() 方法

array.sort(compare)方法对数组的元素进行排序，会改变原数组。可选参数compare(a,b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：如果a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。如果a等于b，就返回0。如果a大于b，就返回一个大于0的值。

const numbers = [4, 3, 1, 2];

比较函数格式如下:
function compare(a, b) {
   if (a < b ) {           // 按某种排序标准进行比较, a 小于 b，
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

console.log(numbers.sort((a,b) => a-b)); //比较数字升序;
console.log(numbers.sort((a,b) => b-a)); //比较数字降序;

14.array.filter() 方法

array.filter(predicate)方法创建一个新数组,不改变原数组。其参数:当前遍历项、索引和数组本身。如下所示：将一个数组过滤为仅包含偶数：

const numbers = [1, 5, 7, 10];

const res = numbers.filter((item => {
    return item % 2 == 0;
}));

console.log(res);

15.array.indexOf() 方法

array.indexOf(itemToSearch, fromIndex) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

const arr = [1,2,3,1,2,3];

const index = arr.indexOf(1,0);

const index2 = arr.indexOf(1,1);

console.log(index,index2);

16.array.includes() 方法

array.includes(itemToSearchfromIndex)返回一个布尔值，array是否包含itemToSearch。 可选参数fromIndex，默认为0，表示开始搜索的索引。

const arr = [1,2,3,4,5,6];

const isTrue = arr.includes(1,0);

const isTrue1 = arr.includes(1,1);

const isTrue2 = arr.includes(7);

console.log(isTrue,isTrue1,isTrue2);

对象的Api

1.Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1)[1]);
console.log(Object.entries(object1));

const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(object2)[2]);

const object3 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(object3)[0]);

2.Object.keys()

返回键名组成的数组 不返回原型链上的可枚举属性。

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.keys(object1)[1]);
console.log(Object.keys(object1));

const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(object2)[2]);

const object3 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(object3)[0]);

3.Object.values()

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.values(object1)[1]);
console.log(Object.values(object1));

const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(object2)[2]);

const object3 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(object3)[0]);

4.Object.getOwnPropertyNames(obj)

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

console.log(Object.getOwnPropertyNames(Array.prototype));

5.obj.hasOwnProperty(prop)

返回一个布尔值，指示对象自身属性中是否具有指定的属性。

const object1 = { foo: 'bar', baz: 42 };

console.log(object1.hasOwnProperty('foo'));

console.log(object1.hasOwnProperty('bar'));

6.Object.freeze()

可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举值、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

const object1 = { foo: 'bar', baz: 42 };

object1.foo = 'bar1';

console.log(object1);

const object2 = { foo: 'bar', baz: 42 };

Object.freeze(object2);

object2.foo = 'bar1';

console.log(object2);

字符串的Api

1.String.charAt(index)

根据位置返回指定的字符

const str = 'abcd';

console.log(str.charAt(1));
console.log(str.charAt(2));

2.String.indexOf、String.lastIndexOf()

String.indexOf返回某个指定的字符串值在字符串中首次出现的位置，对大小写敏感，未找到返回-1。 String.lastIndexOf() 可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，对大小写敏感，未找到返回-1。

const str = 'abcdabcd';

console.log(str.indexOf('bc'));

console.log(str.lastIndexOf('bc'));

console.log(str.lastIndexOf('ac'));

3.String.slice(fromIndex,toIndex)

从字符串中截取字符,返回一个新的字符串。包括字符串从fromIndex开始(包括fromIndex)到toIndex结束(不包括 toIndex)为止的所有字符。

const str = 'abcdabcd';

console.log(str.slice(0,3));

4.String.substring()

从字符串中截取字符

参数：
    没有参数，从0开始截取；
    一个参数，从num开始截取到最后；
    两个参数，从num1开始截取到num2，包括num1，不包括num2；
    参数不可以是负数，就从0开始；
    参数是可以顺序可以倒序，后面小于前面，两个数字就倒一下，再截取；
    返回值：截取的字符；原字符串：不变；

const str = 'abcdabcd';

console.log(str.substring(0,3));

5.String.includes()

用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。区分大小写。

const str = 'abcdabcd';

console.log(str.includes('a'));
console.log(str.includes('e'));

6.String.startsWith(prefix,index) , String.endsWith(prefix,index)

字符串是否已某个或某串字符开始/结束；参数：prefix某个字符；index:在字符串中中搜索prefix的结束位置（不包括index）；返回值：true/false；原字符串：不变；

const str = 'abcdefgh';

console.log(str.startsWith('a'));

console.log(str.startsWith('a',1));

console.log(str.endsWith('fgh'));

console.log(str.endsWith('bcd',4));

7.String.trim()

将字符串前面和后面的空格去掉；返回值：字符串；原字符串：不变；

const str = '  abcd  ';

console.log(str.length);

console.log(str.trim());

console.log(str.trim().length);

8.String.concat()

合并字符串；返回值：合并之后的字符串；原字符串：不变；

const str1 = "Hello ";

const str2 = "world!";

console.log(str1,str2,str1.concat(str2));

9.String.split()

用于把一个字符串分割成字符串数组。；返回值：分割后的字符串数组；原字符串：不变；

const str = 'abcdef';

console.log(str.split('d'));

10.regexp.test(str)

检测字符串中是否存在正则所匹配的内容；返回值：存在返回true，否则返回false；

const str = '1234abcd';

const reg = /^[1-9]*/;

console.log(reg.test(str));

const str2 = '1234abcd';

const reg2 = /^[2-9][0-9]*/;

console.log(reg2.test(str2));

11.String.match()

在字符串中查找参数所匹配的内容，；如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

const str = 'abcd';

console.log(str.match('ad'));
console.log(str.match('ab'));

12.String.replace() 在字符串中搜索指定内容，并使用新的内容去替换

用法1：字符串.replace(要查找的字符串，新的字符串)；返回值：返回新的字符串，不改变原字符串

用法2：第二个参数可以是一个回调函数，每一次的匹配，都会执行一次回调函数，并把回调函数的返回值作为新的内容

const str = '1234world';

console.log(str.replace('1234','hello '));

//match:匹配的子串；例如，如果是用 /(^[0-9]*)([^\d])/ 这个来匹配，p1 就是匹配的（^[0-9]*），p2 就是匹配的（^\d）。
const replacer =  (match, p1, p2) =>  {
    return [p1,p2];
}

console.log(str.replace(/(^[0-9]*)([^\d])/,replacer));