ASCII 码的相互转换

for (let i = 'a'.charCodeAt(); i <= 'z'.charCodeAt(); i++) {
   
  a.push(String.fromCharCode(i))
}

字符串操作

  • filter: filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
  • var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。

  • round: 返回四舍五入后的整数,需要注意,js 的 round 有点不同,它并不总是舍入到远离 0 的方向,特别是负数的小数部分恰好等于 0.5 的情况下。

Math.round(-3.5)  // -3
Math.round(-3.51) // -4
  • Math.trunc(3.1) // 3返回一个数的整数部分,直接去除小数点之后的部分,传入的参数会被隐式转换为数字类型

  • 遍历数组

let arr = [1, 2, 3, 4, 5]
for (let item of arr) {
   
  console.log(item) // item为正在处理的当前元素
}
arr.forEach((item, index) => {
   
  console.log(item, index) // item为正在处理的当前元素,index为索引值
})

需要注意的是,forEachfor..of 不同,除了抛出异常之外,没有办法中止或者跳出 forEach 循环。

  • map: 返回一个由回调函数的返回值组成的新数组。
let arr = [1, 2, 3]
let tpl = arr.map((item) => `<span>${
     item}</span>`)
console.log(tpl)
// [ '<span>1</span>', '<span>2</span>','<span>3</span>' ]
  • reduce: 从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次的回调函数,并返回最后一次回调函数的返回值。
let arr = [1, 2, 3]
let sum = arr.reduce((previous, current, index) => {
   
  console.log(previous, current, index)
  return previous + current
})
console.log(sum) // 6
  • find: 找到第一个满足测试函数的元素并返回那个元素的值,如果找不到,则返回 undefined
let arr = [1, 2, 3, 4, 5]
let found = arr.find((item) => item > 3)
console.log(found) // 4
  • findIndex: 找到第一个满足测试函数的元素并返回那个元素的索引,如果找不到,则返回 -1
let arr = [1, 2, 3, 4, 5]
let index = arr.findIndex((item) => item > 3)
console.log(index) // 3
  • includes: 判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false
let arr = [1, 2, 3, 4, 5]
console.log(arr.includes(3)) // true
console.log(arr.includes('2')) // false
  • indexOf: 返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1
let arr = [1, 2, 3, 4, 5]
let index = arr.indexOf(4)
console.log(index) // 3
  • join: 连接所有数组元素组成一个字符串。
let arr = [1, 2, 3, 4, 5]
console.log(arr.join('')) // '12345'
console.log(arr.join('-')) // '1-2-3-4-5'
  • concat: 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr3 = arr1.concat(arr2)
console.log(arr3) // [ 1, 2, 3, 4, 5 ]
  • slice: 抽取当前数组中的一段元素组合成一个新数组,这是一个原数组的浅拷贝,原始数组不会被改变。
let arr = [1, 2, 3, 4, 5]
console.log(arr.slice(2)) // [ 3, 4, 5 ]
console.log(arr.slice(1, 3)) // [ 2, 3 ]
  • splice: 在任意的位置给数组添加或删除任意个元素。这个很容易和 slice 搞混,此方***改变原数组。
    插入元素:
let arr = [1, 2, 3, 4, 5]
arr.splice(2, 0, 6)
console.log(arr) // [ 1, 2, 6, 3, 4, 5 ]

删除元素:

let arr = [1, 2, 3, 4, 5]
let item = arr.splice(1, 2)
console.log(item) // [ 2, 3 ]console.log(arr) // [ 1, 4, 5 ]

删除元素的同时插入两个元素:

let arr = [1, 2, 3, 4, 5]
let item = arr.splice(1, 2, 6, 7)
console.log(item) // [ 2, 3 ]
console.log(arr) // [ 1, 6, 7, 4, 5 ]
  • reverse: 颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个,该方***改变原数组。
let arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [ 5, 4, 3, 2, 1 ],原数组被改变
  • push: 在数组的末尾增加一个或多个元素,并返回数组的新长度。
let arr = [1, 2, 3, 4, 5]
console.log(arr.push(6)) // 6
console.log(arr.push(7, 8)) // 8
console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]
  • pop: 删除数组的最后一个元素,并返回这个元素。
let arr = [1, 2, 3, 4, 5]
let item = arr.pop()
console.log(item) // 5
console.log(arr) // [ 1, 2, 3, 4 ]
  • unshift: 在数组的开头增加一个或多个元素,并返回数组的新长度,与 push 对应
let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(6)) // 6
console.log(arr.unshift(7, 8)) // 8
console.log(arr) // [ 7, 8, 6, 1, 2, 3, 4, 5 ]
  • shift: 删除数组的第一个元素,并返回这个元素,与 pop 对应
let arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [ 2, 3, 4, 5 ]

pushpopunshiftshift 这几个方法组合起来,可以用来实现栈、队列的功能

  • sort: 方法用用于对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的
let arr = ['b', 'd', 'a', 'c']
arr.sort()
console.log(arr)
  • sort 实现升序降序排列
let arr = [3, 5, 1, 4, 2]
arr.sort((a, b) => {
   
  if (a < b) return -1
  if (a > b) return 1
  return 0
})
console.log(arr) // [ 1, 2, 3, 4, 5 ],升序
arr.sort((a, b) => {
   
  if (a < b) return 1
  if (a > b) return -1
  return 0
})
console.log(arr) // [ 5, 4, 3, 2, 1 ],降序
  • substring 该方法返回一个字符串在开始索引到结束索引之间的一个子集,或者从开始索引到字符串末尾的一个子集。

    let str = '0123456789'
    console.log(str.substring(0, 3)) // '012'
    console.log(str.substring(3, 6)) // '345'
    console.log(str.substring(0, -3)) // 相当于 str.substring(0, 0),输出为空字符串
    
  • slice slice 的作用和 substring 非常类似,不同的是,slice 的参数可以为负数,表示倒数第几个字符

    let str = '0123456789'
    console.log(str.slice(0, 3)) // '012'
    console.log(str.slice(3, 6)) // '345'
    console.log(str.slice(0, -3)) // '0123456',表示从第0各字符提取到倒数第三个字符
    console.log(str.slice(-3, -1)) // '78'
    
  • includes 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 truefalse

    let str = '0123456789'
    console.log(str.includes('123')) // true
    console.log(str.includes('123', 4)) // false
    
  • startsWith startsWith 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 truefalse

    let str = '0123456789'
    console.log(str.startsWith('0123')) // true
    console.log(str.startsWith('1234')) // false
    console.log(str.startsWith('1234', 1)) // true
    
  • endsWith endsWithstartsWith 作用类似,用来判断当前字符串是否以另外一个给定的子字符串结尾,endsWith 的第二个参数是可选的 str 长度.

    let str = '0123456789'
    console.log(str.endsWith('789')) // true
    console.log(str.endsWith('456', 7)) // true,相当于判断 '0123456'.endsWith('456)
    
  • repeat 该方法返回一个新字符串,表示将原字符串重复 n 次.

    'abc'.repeat(2) // 'abcabc'
    
  • padStart、padEnd 这两个方法提供了字符串补全长度的功能,如果某个字符串不够指定的长度,会在头部或者尾部补全,padStart 用于头部补全,padEnd 用于尾部补全,这个在格式化字符串的时候非常有用.

    '5'.padStart(5, '0') // '00005'
    '123'.padEnd(5) // '123 ',默认使用空格补全
    '12345'.padStart(4) // '12345',超出长度,不会变化
    
  • trim、trimStart、trimEnd 这三个方法的作用类似,trim 用来消除字符串首尾的空格,trimStart 用来消除字符串头部的空格,trimEnd 用来消除字符串尾部的空格,他们返回的都是新字符串,不会改变原值.

    let str = ' abc '
    str.trim() // 'abc'
    str.trimStart() // 'abc '
    str.trimEnd() // ' abc'
    
  • replaceAll 以前 js 的字符串替换方法 replace() 只会替换第一个匹配,如果想要替换所有的匹配,需要写正则表达式,例如:

    'aabbcc'.replace('b', '_') // 'aa_bcc'
    'aabbcc'.replace(/b/g, '_') // 'aa__cc'
    

    写正则增加了复杂度,现在新增的 replaceAll() 方法,可以一次性替换所有匹配

    'aabbcc'.replaceAll('b', '_') // 'aa__cc'
    
  • split 该方法使用指定的分割字符将一个字符串分割成子字符串数组,以一个指定的分割字符串来决定每个拆分的位置

    console.log('Hello JavaScript'.split(' ')) // [ 'Hello', 'JavaScript' ]
    console.log('Hello'.split('')) // [ 'H', 'e', 'l', 'l', 'o' ]
    

数学计算

  • Math 是一个内置对象,它拥有一些数学常数和数学函数方法,这里我们介绍几个常用的 API。

  • PI: 圆周率常数

console.log(Math.PI) // 3.141592653589793
  • floor: 返回小于一个数的最大整数
console.log(Math.floor(3.1)) // 3
console.log(Math.floor(3)) // 3
  • ceil: 返回大于一个数的最小整数
console.log(Math.ceil(3)) // 3
console.log(Math.ceil(3.1)) // 4
  • round: 返回四舍五入后的整数,需要注意,js 的 round 有点不同,它并不总是舍入到远离 0 的方向,特别是负数的小数部分恰好等于 0.5 的情况下。
Math.round(3.49) // 3
Math.round(3.5) // 4
Math.round(-3.5) // -3
Math.round(-3.51) // -4
  • trunc: 返回一个数的整数部分,直接去除小数点之后的部分,传入的参数会被隐式转换为数字类型
Math.trunc(3.1) // 3
Math.trunc(0.5) // 0
Math.trunc('-1.2') // -1
  • random: 该函数返回一个浮点数,伪随机数的范围从 0 到 1,也就是说大于等于 0,小于 1,我们可以以此为种子,扩展到自己想要生成的随机数的范围,比如下面的例子,可以让我们生成指定范围的随机整数。
function random(min, max) {
   
  return Math.floor(Math.random() * (max - min) + min)
}