JavaScript常用的方法  indexOf() join() map() 方法 - pop() push() 方法 - reduce() reverse() slice() sort() splice() split() substring() unshift()

  • 功能: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:数组后一项的值
    • returnreturn 出来的值,会被当成下一次的 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