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(`------\n第 ${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