JavaScript常用的方法

 indexOf()

• 功能：indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引。

• 语法：indexOf(searchValue, fromIndex)

  • searchValue：查找的值
  • formIndex：开始查找的位置

• 返回值：如果找到了，则返回第一次出现的索引；如果没找到，则返回 -1。

• 代码：

'I am jsliang'.indexOf('a', 4); // 9
[1, 3, 1, 4].indexOf(1, 1); // 2
'怪盗 jsliang'.indexOf('我'); // -1

• 扩展：如果需要查找到最后一次出现指定值的索引，可以使用 lastIndexOf()。

join()

• 功能：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

• 语法：arr.join(separator)

  • separator 是合并的形式。例如 '' 就是不以任何形式拼接成字符串：['hello', 'hi'].join('') -> 'hellohi'；例如 '-' 就是以 - 形式拼接成字符串：['hello', 'hi'].join('') -> 'hello-hi'

• 返回值：一个所有数组元素连接的字符串。

• 代码：

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1 的值变为 "Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

map()

• 功能：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

• 语法：map((item, index) => {})

  • item：遍历的项
  • index：该次遍历项的索引

• 返回值：一个新数组，每个元素都是回调函数的结果。

• 代码：

[1, 2, 3, 4].map(item => item * 2) // [2, 4, 6, 8]

[{
  name: 'jsliang',
  age: 24,
}, {
  name: '梁峻荣',
  age: 124
}].map((item, index) => {
  return `${index} - ${item.name}`;
}) // ['0 - jsliang', '1 - 梁峻荣']

方法 - pop()

• 功能：pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

• 语法：

  • arr.pop()：返回从数组中删除的元素

• 返回值：一个新数组，每个元素都是回调函数的结果。

• 代码：

let arr = [1, 2, 3, 4];
for(let i = 0, time = 1; i < arr.length; time++) {
  console.log(`------
第 ${time} 次遍历：`);
  console.log(arr.pop());
  console.log(arr);
}

/* Console：
------
第 1 次遍历：
4
[ 1, 2, 3 ]
------
第 2 次遍历：
3
[ 1, 2 ]
------
第 3 次遍历：
2
[ 1 ]
------
第 4 次遍历：
1
[]
*/

push()

• 功能：push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

• 语法：arr.push(element)

  • element：需要传入到数组的元素

• 返回值：当调用该方法时，新的 length 属性值将被返回。

• 代码：

let arr = [];
arr.push(1);
arr.push('2');
arr.push([3, 4, 5]);
arr.push([...6, 7, 8]);
console.log(arr);

/*
[1, "2", Array(3), 6, 7, 8]
0: 1
1: "2"
2: (3) [3, 4, 5]
3: 6
4: 7
5: 8
length: 6
*/

方法 - reduce()

• 功能：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

• 语法：arr.reduce((prev, next) => { return prev + next }

  • prev：数组前一项的值
  • next：数组后一项的值
  • return：return 出来的值，会被当成下一次的 prev

• 返回值：函数累计处理的结果

• 代码：

[1, 2, 3, 4].reduce((prev, next) => {
  return prev + next;
}); // 10
['前端', 'pang', 'liang'].reduce((prev, next, index) => {
  return (index = 0 ? '-js' : '') + prev + 'js' + next;
}); // 前端-jspang-jsliang

reverse()

• 功能：reverse() 方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

• 语法：arr.reverse()

• 代码：

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

slice()

• 功能：slice() 方法提取一个字符串的一部分，并返回一新的字符串。

• 语法：str.slice(beginSlice, endSlice)

  • beginSlice：从该索引（以 0 为基数）处开始提取原字符串中的字符。
  • endSlice：结束位置（以 0 为基数）。

• 返回值：返回一个从原字符串中提取出来的新字符串。

• 代码：

const str = 'jsliang';
str.slice(0, 2); // 'js'
str.slice(2); // 'liang'

sort()

• 功能：sort() 对数组的元素进行排序，并返回数组。

• 语法：sort(function)

  • function：按某种顺序进行排列的函数。

• 返回值：排序后的数组。

• 代码：

[4, 2, 5, 1, 3].sort(), // [1, 2, 3, 4, 5]
[4, 2, 5, 1, 3].sort((a, b) => a < b), // [5, 4, 3, 2, 1]
['a', 'd', 'c', 'b'].sort(), // ['a', 'b', 'c', 'd']
['jsliang', 'eat', 'apple'].sort(), // ['apple', 'eat', 'jsliang']

splice()

• 功能：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

• 语法：array.splice(start, deleteCount, item1, item2, ...)

  • start：指定修改的开始位置（从0计数）。
  • deleteCount：整数，表示要移除的数组元素的个数。
  • item1, item2, ...：要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

• 返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

• 代码：

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');

console.log(months);
// ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');

console.log(months);
// ['Jan', 'Feb', 'March', 'April', 'May']

split()

• 功能：split() 方法使用指定的分隔符字符串将一个 String 对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

• 语法：str.split('.')

  • '.'：即分割的形式，这里通过 . 来划分，如果是 '' 空，那么就单个字符拆分，如果是 '|'，那么通过 | 来划分。

• 返回值：一个新数组。返回源字符串以分隔符出现位置分隔而成的一个数组。

• 代码：

String(12321).split(''); // ['1', '2', '3', '2', '1']

String(123.21).split('.'); // ['123', '21']

substring()

• 功能：substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

• 语法：str.substring(start, end)

  • start：需要截取的第一个字符的索引，该字符作为返回的字符串的首字母。
  • end：可选。0 - n，即从 start 开始，截取 end 位长度的字符串。

• 返回值：包含给定字符串的指定部分的新字符串。

• 代码：

var str = 'jsliang';
str.substring(0, 2); // js
str.substring(2); // liang

unshift()

• 功能：unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

• 语法：arr.unshift(element1, ..., elementN)

  • element1：要插入的第一个元素
  • elementN：要插入的第 N 个元素

• 返回值：当一个对象调用该方法时，返回其 length 属性值。（ unshift 会改变原本数组）

• 代码：

let arrA = ['1'];
arrA.unshift('0');
console.log(arrA); // ['0', '1']

let arrB = [4, 5, 6];
arrB.unshift(1, 2, 3);
console.log(arrB); // [1, 2, 3, 4, 5, 6]

原文作者：jsliang
原文链接：https://github.com/LiangJunrong/document-library/blob/master/SUMMARY.md