Fork me on GitHub

JS常用操作方法图表

截取字符串方法

方法名 参数 返回值 例子
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方法还有一个重要的应用,可以将类数组对象转为数组

    1
    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })  //['a', 'b']
  • Array.from也可以做到

    1
    Array.from({ 0: 'a', 1: 'b', length: 2 })  //['a', 'b']

常用数组方法

1
2
3
4
5
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(‘ ‘) // “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”