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方法还有一个重要的应用，可以将类数组对象转为数组

  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"