JS常用操作方法圖表
阿新 • • 發佈：2018-12-29
擷取字串方法
| 方法名 | 引數 | 返回值 | 例子 |
|---|---|---|---|
| String.prototype.substr() | (indexStart, length) 都可為負數，length為負數時自動轉為0，length不傳預設擷取剩下的所有 | 新字串 | 'JavaScript'.substr(4, 6) // "Script" |
| String.prototype.substring() | (indexStart, indexEnd) 負數會轉為0 | 新字串 | 'JavaScript'.substring(-4) // "JavaScript" |
| String.prototype.slice() | (indexStart, indexEnd) 負數會轉為與長度相加之後的數 | 新字串 | 'JavaScript'.slice(-4) // "ript" |
三者區別：
- 他們三者第二個引數都是可選的，如果只傳一個正常下標的數字，都是返回從這個下標開始到字串結束的這一段字串，他們都不會改變原字串
- substr擷取的是從indexStart下標開始長度為length的字串，substring和slice兩個引數都是開始和結束的下標，並且都不包含結束下標的字元
- substring和slice引數如果為負數，substring會轉為0，而slice會轉為與字串的長度相加之後的新下標
擷取陣列方法
| 方法名 | 引數 | 返回值 | 例子 |
|---|---|---|---|
| Array.prototype.slice() | (indexStart, indexEnd) 如果slice方法的引數是負數，則表示倒數計算的位置 | 新陣列 | ['a', 'b', 'c'].slice(1, 2) //['b'] |
| Array.prototype.splice() | (indexStart, count, addElement1, addElement2,...) 如果只傳一個引數就相當於把原陣列拆分為截斷了 | 被刪除的元素,改變原陣列 | ['a', 'b', 'c', 'd', 'e', 'f'].splice(4, 2); // ["e", "f"] |
兩者區別：
- 只傳一個正常下標，都能得到從這個下標開始到陣列結束的一個新陣列
- slice不會改變原陣列，返回值是新陣列，splice會改變，返回值是被刪除的元素
- slice能夠刪除原陣列中的某些元素，並能在刪除的位置新增新成員
tips:
- slice方法還有一個重要的應用，可以將類陣列物件轉為陣列
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) //['a', 'b'] Array.from也可以做到
Array.from({ 0: 'a', 1: 'b', length: 2 }) //['a', 'b']
常用陣列方法
var arr = [1, 2, 3];
let arr2 = ['今天天氣不錯', '早上好']
arr2 = arr2.map(s => s.split(''))
// [ [ '今', '天', '天', '氣', '不', '錯' ], [ '早', '上', '好' ] ]| 方法名 | 引數和說明 | 返回值 | 例子 |
|---|---|---|---|
| Array.isArray() | arr | Boolean | Array.isArray(arr) // true |
| Array.prototype.valueOf() | 無 | 陣列本身 | arr.valueOf() // [1, 2, 3] |
| Array.prototype.toString() | 無 | 陣列的字串形式 | arr.toString() // "1,2,3" |
| Array.prototype.push() | elementN，尾部插入值 | 新的length | arr.push(7) // 4 |
| Array.prototype.pop() | 無 | 刪除的元素,刪除最後一個元素 | arr.pop() // 3 |
| Array.prototype.shift() | 無 | 刪除的元素,刪除第一個元素 | arr.shift() // 1 |
| Array.prototype.unshift() | elementN，首部插入值 | 新的length | arr.shift(7) // 4 |
| Array.prototype.join() | separator,預設為'',' | 字串 | arr.join(' |
| Array.prototype.concat() | array,object,elementN | 新陣列（淺拷貝） | arr.concat([7]) // [1, 2, 3, 7] |
| Array.prototype.reverse() | 無 | 顛倒排序之後的原陣列 | arr.reverse() // [3, 2, 1] |
| Array.prototype.sort() | 無，預設按字典排序，或者傳入一個函式 | 重新排序之後的原陣列 | arr.sort() // [1, 2, 3] |
| Array.prototype.map() | 回撥函式，把每次的執行結果重新組成一個數組 | 新陣列 | arr.map(function (n) { return n + 1; }); //[2,3,4] |
| Array.prototype.forEach() | 回撥函式，操作原陣列 | 不返回值，改變原陣列 | arr.forEach(function (n) { console.log(n) }); //1 2 3 |
| Array.prototype.filter() | 回撥函式，根據篩選項條件得到新陣列 | 新陣列 | arr.filter(function (item) { return (item > 2) }); //[3] |
| Array.prototype.some() | 回撥函式，某一個元素滿足條件即返回true，否則返回false | Boolean | arr.some(function (item) { return item > 2 }); //true |
| Array.prototype.every() | 回撥函式，所有元素滿足條件即返回true，否則返回false | Boolean | arr.every(function (item) { return item > 2 }); //false |
| Array.prototype.reduce() | (func, 初始值)，從左到右 | 執行之後的返回值 | arr.reduce(function (prev, cur) { return prev+cur }, 10); //16 |
| Array.prototype.reduceRight() | (func, 初始值)，從右到左 | 執行之後的返回值 | arr.reduceRight(function (prev, cur) { return prev+cur }, 10); //16 |
| Array.prototype.indexOf() | (searchElement,fromIndex)第二個引數是開始查詢的位置 | 存在返回索引值，沒有返回-1 | arr.indexOf(2); //1 |
| Array.prototype.lastIndexOf() | (searchElement,fromIndex)第二個引數是開始查詢的位置，從右到左 | 存在返回索引值，沒有返回-1 | arr.lastIndexOf(3); //2 |
| ES6 | |||
| Array.from() | 類似陣列的物件和可遍歷的物件 | 真正的陣列 | Array.from({'0': 'a','1': 'b','2': 'c', length: 3}); // ["a", "b", "c"] |
| Array.of() | 將一組值轉為陣列，為了彌補Array()引數不同的行為差異 | 陣列 | Array.of(1,2,3); // [1, 2, 3] |
| Array.prototype.includes() | (searchElement,fromIndex)，fromIndex可選，便是開始查詢的位置 | Boolean | [1, 2, 3].includes(2); ; // true |
| Array.prototype.flat() | depth,可選引數，預設1，將巢狀陣列拉平變成一維陣列 | 新陣列 | [1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6] |
| Array.prototype.flatMap() | callback， | 新陣列 | arr2.flatMap(s => s.split('')); // ["今", "天", "天", "氣", "不", "錯", "早", "上", "好"] |
| Array.prototype.copyWithin() | (target, start, end) 將start和end之間的元素複製覆蓋target指定的位置，end指定的元素不會複製 | 陣列 | [1,2,3,4].copyWithin(1, 2, 3); // [1, 3, 3, 4] |
| Array.prototype.find() | (callback, thisArg) | 返回符合條件的第一個值,否則unfettered | [1,2,3,4,5].find(function(item){ return item>2 }); // 3 |
| Array.prototype.findIndex() | (callback, thisArg) | 返回符合條件的第一個值的下標,否則unfettered | [1,2,3,4,5].findIndex(function(item){ return item>2 }); // 2 |
| Array.prototype.fill() | (value, start, end )，將指定的位置填充為value，如果不指定就全部填充 | 修改後的陣列 | [1,2,3,4].fill(7, 2, 3); // [1, 2, 7, 4] |
| Array.prototype.entries() | 無 | 可遍歷的Iterator物件,[key, value] | [1,2,3,4].entries(); // 可被for of遍歷 |
| Array.prototype.keys() | 無 | 可遍歷的Iterator物件, key | [1,2,3,4].keys(); // 可被for of遍歷 |
| Array.prototype.values() | 無 | 可遍歷的Iterator物件, value | [1,2,3,4].values(); // 可被for of遍歷 |
字串處理方法
| 方法名 | 引數和說明 | 返回值 | 例子 |
|---|---|---|---|
| String.fromCharCode() | 一個或多個數值，代表Unicode 碼點 | 字串 | String.fromCharCode(104, 101, 108, 108, 111) // 'hello' |
| String.prototype.charAt() | index,下標 | 字串 | new String('abc').charAt(1) //b |
| String.prototype.charCodeAt() | index,下標 | Unicode 碼點（十進位制表示） | 'hello'.charCodeAt(1) // 101 |
| String.prototype.concat() | string2...stringN | 字串 | 'hello'.concat('world', 'haha') // "helloworldhaha" |
| String.prototype.indexOf() | searchValue,fromIndex | 第一次出現的索引,沒找到就-1 | 'hello'.indexOf('e') // 1 |
| String.prototype.lastIndexOf() | searchValue,fromIndex | 第一次出現的索引 | 'wanwan'.lastIndexOf('a'); //4 'wanwan'.lastIndexOf('a', 3) //1 |
| String.prototype.trim() | 無，刪除字串兩端空白字串 | 新字串 | ' wan '.trim() // 'wan' |
| String.prototype.toLowerCase() | 無，小寫 | 新字串 | 'wanCheng'.toLowerCase() // 'wancheng' |
| String.prototype.toUpperCase() | 無，大寫 | 新字串 | 'wanCheng'.toUpperCase() // 'WANCHENG' |
| String.prototype.match() | regexp | array | 'wancheng'.match('wan') // ['wan'] 'wancheng'.match(/\w/) // ['w'] |
| String.prototype.search() | regexp | 首次匹配成功的索引，不成功為-1 | 'wancheng'.search('c') // |
| String.prototype.replace() | regexp | 新字串 | 'wan cheng'.replace(/wan/i, 'san') // "san cheng" |
| ES6 | |||
| String.prototype.includes() | searchString,position(可選) | boolean | 'hello world'.includes('hello') // true |
| String.prototype.startsWith() | searchString,position(可選),是否是以給定的字串開頭 | boolean | 'hello world'.startsWith('h') // true |
| String.prototype.endsWith() | searchString,position(可選),是否是以給定的字串結尾 | boolean | 'hello worlds'.endsWith('s') // true |
| String.prototype.repeat() | count（[0, +∞]） | 新字串 | 'wan'.repeat(2) // 'wanwan' |
| String.prototype.padStart() | targetLength,padString (可選) | 原字串 | 'abc'.padStart(7, 'sd') // "sdsdabc" |
| String.prototype.padEnd() | targetLength,padString (可選) | 原字串 | 'abc'.padEnd(7, 'sd') // "abcsdsd" |