截取字符串方法
| 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.from也可以做到
常用数组方法
| 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(‘ | ‘) // “1 | 2 | 3” |
| 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” |
原文:大专栏 JS常用操作方法图表