Javascript-ES6扩展写法

String 对象扩展

模版字符串

类似字符串的写法，用 ` 来包裹字符串，优点是可以不用反斜杠就能在代码中多行编辑。对于模版字符串来说，反引号内任何空格、换行符都不会被省略。并且可以使用占位变量的写法：

const value = 114514
// 传统派写法
const str = "第一行\n\
第二行:"
// 模版字符串写法明显简洁
const str2 = `第一行
第二行:${value}`
console.log(str, value, '\n')
console.log(str2)

输出：

indexOf() 与 lastIndexOf()

indexOf()

使用格式：

str.indexOf(searchString, position)

该方法用于返回搜索字符串的索引位置，positoin为可选参数（起始位置），也就是从头开始寻找。下面是代码实例：

const str = 'HelloJavaScript'
console.log('a 首次出现的位置：', str.indexOf('a'))
console.log('a 第二次出现的位置：', str.indexOf('a', 7))

输出：

lastIndexOf()

如果说indexOf()是从左往右在字符串中寻找目标，那么lastIndexOf()就是从右往左，也就是从后面往前找。使用方法：

str.lastIndexOf(searchString, position)

与之对应的，position是可选参数（起始位置），默认从最后开始寻找。

includes()

该方法用于判断某字符串是否“包含”在内，如果存在则返回true否则false。功能和正则表达式的test()方法一致，区别在于可以指定查找开始的索引位置。test()方法做不到这一点。

str.includes(searchString, position)

演示：

const str = 'HelloJavaScript'
console.log('str 字符串中是否存在 Java：', str.includes('Java'))

输出：

startsWith() 与 endsWith()

startsWith()用于判读字符串的开头是否是某个字符串，endsWith()方法用于判断末尾是否是某个字符结尾，返回true或者false。

实例：

const str = 'LanQiao Courses'
console.log('str 字符串中是否存在 Java：', str.includes('Java'))
console.log('str 字符串的开头是否存在字符 Lan：', str.startsWith('Lan'))
console.log('str 字符串的结尾是否存在字符 Course：', str.endsWith('Course'))

总结

String类在ES6中有如下扩展方法：

• indexOf() & lastIndexOf()：从某个位置左往右或从右往左查找字串索引。
• startsWith() & endsWith()：查找是否以某个字符串开头或结尾。
• Includes()：从某个位置开始，判断字符串是否为子串。

Array 对象扩展

扩展运算符

使用...在一个数组对象的前面，可以将这个数组的拆开后均摊出来，使用方法：

const variableName = [...value]

value是一个数组，使用...可以将它拆开后摊到数组中，于是乎variableName变成了数组。

使用实例：

const animals = ['兔子🐰', '猫咪🐱']
const zoo = [...animals, '老虎🐯', '乌龟🐢', '鱼🐟']
console.log(zoo)

输出结果：

Array.of()

该方法用于创建一个数组：

Array.of(元素0, 元素1, /* ... */, 元素N)

返回一个数组，和正常创建的数组一样。

Array.from()

该方法可以将一个特定格式的对象(甚至是更多数据结构的可迭代器)转换成数组作为返回值，第二个可选参数是类似Array.prototype.map()方法的函数，可以对数组迭代一遍进行改造：

cosnt arr = Array.from(待转换的对象, mapFn());

被转换的对象需要如下格式：

const arrLike = { 0: '🍎', 1: '🍐', 2: '🍊', 3: '🍇', length: 4 }
const arr = Array.from(arrLike)

输出：

关于Arrray.from()更加详细的使用建议参考MDN:

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

熟练掌握后就能写出下方图片中两种很高效的数组创建写法：

indexOf() 和 lastIndexOf()

使用方法和字符串的查找字串返回索引一样：

arr.indexOf(searchElement, fromIndex)
arr.lastIndexOf(searchElement, fromIndex)

需要说明的是，前者是从前往后，后者是从后往前查找返回找到的索引，如果没有返回-1。

find() 和 findLast()

该方法不同于indexOf()的地方在于，可以寻找第一个满足构造方法中条件的值。如果查找失败返回undefined。

arr.find(callbackFn, thisArg)
arr.findLast(callbackFn, thisArg)

使用方法：

const arr = [1, 3, 4, 5]
const result = arr.find(function (value) {
  return value > 2
})
console.log('find() 的结果：', result)

findLast方法是从后往前找。

findIndex() 和 findLastIndex()

这两个方法用于查找满足构造函数的值在数组中的索引。匹配失败返回-1。

使用方法：

arr.findIndex(callbackFn, thisArg)
arr.findLastIndex(callbackFn, thisArg)

对于callbackFn可以按顺序传入下面的参数：

• element，数组中元素迭代的值。
• index，迭代值的数组下标。
• array，被操作数组。

实例：

const arr = ['小猫', '兔子', '小狗', '兔子']
const result = arr.findIndex(function (value) {
  return value == '兔子'
})
console.log('findIndex() 的结果：', result)

输出：

includes()

该方法判断数组中是否有某个元素，返回布尔值。和字符串中的includes()方法一样。

arr.includes(searchElement, fromIndex)

some()

该方法用于判断数组中是否有满足某个条件的值，返回布尔值。

arr.some(callbackFn, thisArg)

回调函数的参数也是按照element、index、array的顺序可选传入的。

实例：

const arr = [1, 3, 4, 5]
const result = arr.some(function (value) {
  return value > 3
})
console.log('存在大于 3 的元素？', result)

输出：

every()

判断数组中所有的元素是否满足某个条件。参数中callbackFn的使用方法和之前一致，不多赘述。

arr.every(callbackFn, thisArg)

参考实例：

const arr = [1, 3, 4, 5]
const result = arr.every(function (value) {
  return value > 3
})
console.log('所有元素均大于 3 ？', result)

输出：

sort()

对数组进行排序：

arr.sort(compareFn)

实例：

const arr = [2, 3, 4, 8, 1]
const result = arr.sort(function (a, b) {
  return a - b
})
console.log(result)

对于迭代器中传入的a和b有如下解释，如果返回值为负值表示a在b前，正值表示a在b后，0位置不变。

reserve()

该方法可以反转数组。使用格式：

arr.reverse();

实例：

const arr = ['一', '二', '三', '四']
arr.reverse()
console.log(arr)

输出：

fill()

该方法用于指定一个值对数组进行切片填充。

array.fill(value, start, end);

如果不指定start和end，默认填充整个数组。

参考：

const arr = ['🐱', '🐶', '🐰']
arr.fill('🐷')
console.log(arr)

输出：

map()

该方法可以对数组中的所有元素进行操作后返回成一个新的数组。回调函数的参数表和上方一致。

使用方法：

arr.map(callbackFn, thisArg)

参考：

const arr = [1, 4, 9, 16]
const result = arr.map(function (x) {
  return x * 2
})
console.log(result)

输出：

reduce() 和 reduceRight()

arr.reduce(callbackFn, initialValue)
arr.reduceRight(callbackFn, initialValue)

该方法可以指定一个初始值，迭代数组后返回计算出来的最终值。

实例：

const arr = [1, 2, 3, 4]
const sum = arr.reduce(function (acc, cur) {
  return acc + cur
}, 0)
console.log(sum) // 10

比如这段代码，指定了初始值为0，每次迭代将这个值加上迭代的元素，最终得到求和的值返回赋给sum。

输出:

10

entries()、keys()、values()

使用arr.entries()可以得到包含arr键值对的二维数组。使用keys()可以得到一个包含键的数组，values()得到一个包含所有值的数组。利用这三个数组可以进行针对性的迭代。

特别的，直接输出entries()得到的是一个迭代器，不过你可以直接将它使用扩展运算符均摊到数组中查看。

const arr = ['🐱', '🐶', '🐰', '🐍', '🐦', '🐟']
console.log(arr.entries())

输出：

> Array Iterator {}

使用扩展运算符：

const arr = ['🐱', '🐶', '🐰', '🐍', '🐦', '🐟']
console.log([...arr.entries()])

得到结果：

还可以使用for ... of进行迭代：

const arr = ['🐱', '🐶', '🐰', '🐍', '🐦', '🐟']
for (const item of arr.entries()) {
  console.log(item)
}

总结

• 扩展运算符
• 两种创建数组的方法：
  • Array.of() 方法：将一组指定的值转换为数组。
  • Array.from() 方法：将类数组对象或者可迭代对象转换为数组。
• 六种数组查找方法：
  • indexOf()、lastIndexOf() 方法：查找指定元素的下标值。
  • find()、findLast() 方法：返回数组中满足指定条件的元素的值，未找到则返回 undefined。
  • findIndex()、findLastIndex() 方法：返回数组中满足指定条件的元素的索引，未找到则返回 -1。
• 三种数组测试方法：
  • includes() 方法：判断数组中是否包含某个元素。
  • some() 方法：测试数组中是否存在至少一个元素满足特定要求。
  • every() 方法：测试数组中是否所有的元素均满足特定要求。
• 数组实例的其他方法：
  • sort() 方法：给数组中的元素进行排序。
  • reverse() 方法：将数组中的元素进行逆序排列。
  • fill() 方法：用一个固定值去填充数组中指定索引位置的数组值。
  • map() 方法：对数组中的每个元素执行一次回调函数，返回由执行结果构成的新数组。
  • reduce()、reduceRight() 方法：依次对数组的每个元素执行回调函数，并传入前一次执行的返回值。
  • entries()、keys()、values() 方法：返回一个数组迭代器对象。