JS易混淆的方法整理

naiba發表於2018-02-22
JS

js的字串方法如substr、substring，陣列方法如slice、splice等名字相近，用法稍有不同，讓開發者在開發過程中總是記不起其用法，需要查資料。現整理一下，希望有助大家記憶。

String物件

slice

stringObject.slice(start, end)

var a = 'Hello world!';
var b = a.slice(2);
var c = a.slice(-4, -2);
// a: 'Hello world!'
// b: 'llo world!'
// c: 'rl'，引數可為負
複製程式碼

substr

stringObject.substr(start, length)

var a = 'Hello world!';
var b = a.substr(0, 4);
var c = a.substr(-5, 2);
// a: 'Hello world!'
// b: 'Hell'
// c: 'or'，引數可為負
複製程式碼

substring

stringObject.substring(start, stop)

var a = 'Hello world!';
var b = a.substring(0, 4);
var c = a.substring(3, 2);
var d = a.substring(0, -1);
// a: 'Hello world!'
// b: 'Hell'
// c: 'l'，start比stop小，交換這兩個引數
// d: ''，引數為負，返回空字串
複製程式碼

slice、substr、substring都是字串的切割方法，三者之間有細微的區別，根據不同的使用場景可以靈活使用。三種方法都是生成新的字串，而不是修改原string。

Array物件

concat

arrayObject.concat(arrayX, arrayX, ......, arrayX)

引數可以為具體的值，也可以為陣列物件，可以任意多個。不改變現有的陣列，返回被連線陣列的一個副本。

var a = [1, 2, 3];
var b = a.concat(4, 5);
var c = a.concat([4, 5]);
// a: [1, 2, 3]
// b: [1, 2, 3, 4, 5]
// c: [1, 2, 3, 4, 5]
複製程式碼

pop

arrayObject.pop()

刪除 arrayObject 的最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。如果陣列已經為空，則 pop() 不改變陣列，並返回 undefined 值。該方法會改變原陣列。

var a = [1, 2, 3];
var b = a.pop();
// a: [1, 2]，修改了原陣列
// b: 3，返回刪除元素的值
複製程式碼

push

arrayObject.push(newelement1,newelement2,....,newelementX)

引數順序新增到 arrayObject 的尾部，直接修改arrayObject。

var a = [1, 2, 3];
var b = a.push(4, 5);
// a: [1, 2, 3, 4, 5]，修改了原陣列
// b: 5，返回修改後的陣列的長度
複製程式碼

shift

arrayObject.shift()

把陣列的第一個元素從其中刪除，並返回第一個元素的值。如果陣列是空的，那麼 shift() 方法將不進行任何操作，返回undefined值。該方法會改變原陣列。類比pop方法。

var a = [1, 2, 3];
var b = a.shift();
// a: [2, 3]，修改了原陣列
// b: 1，返回刪除元素的值
複製程式碼

unshift

arrayObject.unshift(newelement1, newelement2, ...., newelementX)

向陣列的開頭新增一個或更多元素，並返回新的長度。該方法的第一個引數將成為陣列的新元素 0，如果還有第二個引數，它將成為新的元素 1，以此類推。

var a = [1, 2, 3];
var b = a.unshift(4, 5);
// a: [ 4, 5, 1, 2, 3 ]，修改了原陣列
// b: 5，返回修改後的陣列的長度
複製程式碼

slice

arrayObject.slice(start, end)

返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。該方法不會修改原陣列。

var a = [1, 2, 3, 4, 5];
var b = a.slice(2);
// a: [1, 2, 3, 4, 5]，不修改原陣列
// b: [3, 4, 5]，返回新陣列

var c = [1, 2, 3, 4, 5];
var d = c.slice(2, -1);
// c: [1, 2, 3, 4, 5]，不修改原陣列
// d: [3, 4]，返回新陣列
複製程式碼

splice

arrayObject.splice(index, howmany, item1, ....., itemX)

可刪除從 index 處開始的零個或多個元素，並且用引數列表中宣告的一個或多個值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的陣列。

var a = [1, 2, 3, 4, 5];
var b = a.splice(1, 1);
// a: [1, 3, 4, 5]，修改了原陣列
// b: [2]，返回新陣列

var c = [1, 2, 3, 4, 5];
var d = c.splice(-1, 1);
// c: [1, 2, 3, 4]，修改了原陣列
// d: [5]，返回新陣列

var e = [1, 2, 3, 4, 5];
var f = e.splice(1, 1, 6, 7);
// e: [ 1, 6, 7, 3, 4, 5 ]，修改了原陣列
// f: [2]，返回新陣列

var g = [1, 2, 3, 4, 5];
var h = g.splice(1, 0, 8);
// g: [ 1, 8, 2, 3, 4, 5 ]，修改了原陣列
// h: []，沒有刪除值，返回空陣列
複製程式碼

sort

arrayObject.sort(sortBy)

無引數時，將按字母順序對陣列中的元素進行排序。引數為比較函式時，如果要交換prev和next的值，返回大於0的值。

var a = [1, 10, 8, 6, 9];
var b = a.sort(function (prev, next) {
  return prev - next;
});
// a: [1, 6, 8, 9, 10]，修改了原陣列
// b: [1, 6, 8, 9, 10]，返回修改後的陣列
複製程式碼

reverse

arrayObject.reverse()

用於顛倒陣列中元素的順序。會改變原陣列。

var a = [1, 2, 3];
var b = a.reverse();
// a: [3, 2, 1]，修改了原陣列
// b: [3, 2, 1]，返回修改後的陣列
複製程式碼

map

arrayObject.map(function(currentValue, index, arrayObject) {})

對陣列的每一項進行處理，返回新陣列。

var a = [1, 2, 3];
var b = a.map((curVal) => curVal * 2);
// a: [1, 2, 3]，不修改原陣列
// b: [2, 4, 6]，返回新陣列
複製程式碼

forEach

arrayObject.forEach(function(currentValue, index, arrayObject) {})

陣列的每個元素執行一次提供的函式。一般來說不修改原陣列，但也可以通過處理函式修改原陣列。該方法很靈活，可類比for...of。

var a = [1, 2, 3];
var sum = 0;
var b = a.forEach((curVal) => sum += curVal);
// a: [1, 2, 3]，不修改原陣列
// b: undefined，forEach不返回值
// sum: 6
複製程式碼

find

arrayObject.find(function(currentValue, index, arrayObject) {})

返回陣列中第一個滿足測試條件（返回true）的元素。如果不存在這樣的元素，返回undefined。findIndex類似，只不過返回的是第一個滿足測試條件的元素的index。

var a = [1, 2, 3];
var b = a.find((curVal) => curVal === 1);
var c = a.find((curVal) => curVal === 4);
// a: [1, 2, 3]，不修改原陣列
// b: 1
// c: undefined
複製程式碼

filter

arrayObject.filter(function(currentValue, index, arrayObject) {})

返回陣列中所有滿足測試條件（返回true）的元素組成的陣列。如果不存在這樣的元素，返回[]。

var a = [1, 2, 3];
var b = a.filter((curVal) => curVal > 1);
var c = a.filter((curVal) => curVal > 3);
// a: [1, 2, 3]，不修改原陣列
// b: [2, 3]
// c: []
複製程式碼

reduce

arrayObject.filter(function(previousValue, currentValue, currentIndex, arrayObject) {}, initialValue)

接收一個函式作為累加器（accumulator），陣列中的每個值（從左到右）開始縮減，最終為一個值。

如果沒有initialValue引數,reduce從index為1開始執行回撥函式,跳過第一個index。如果有initialValue引數, reduce將從index為0開始執行回撥。如果陣列是空的並且沒有initialValue引數,將會丟擲TypeError錯誤。如果陣列只有一個元素並且沒有初始值initialValue,或者有initialValue但陣列是空的, 這個唯一的值直接被返回而不會呼叫回撥函式。

var a = [1, 2, 3];
var b = a.reduce((prevResult, curItem) => prevResult + curItem);
// a: [1, 2, 3]，不修改原陣列
// b: 6
複製程式碼

除了Array的pop、push、shift、unshift、splice、sort、reverse這7個方法會修改原陣列，其他方法均不會修改原陣列。

相關文章