数组和字符串方法整理笔记本

咖喱鸡肉炒饭o
128 阅读4分钟

总结一下自己实习到现在经常用到或者遇到的一些数组和字符串的方法，空闲时当作笔记看看。防止在写代码时splice、slice、split三者分不清的该用哪个的尴尬问题。本人前端小白，如有哪里不对的欢迎指出。

数组方法

1. pop：删除数组的最后一个元素，返回被删除的元素

let arr = [1, 2, 3]
let res = arr.pop()
console.log(arr) // [1, 2]
console.log(res) // 3

2. push：向数组尾部添加一个或多个元素，返回新的数组长度

let arr = [1, 2, 3]
let res = arr.push(4)
console.log(arr) // [1, 2, 3, 4]
console.log(res) // 4

3. shift：删除原数组第一项，返回被删除的元素

let arr = [1, 2, 3]
let res = arr.shift()
console.log(arr) // [2, 3]
console.log(res) // 1

4. unshift：向数组的开头添加一个或多个元素，并返回新数组的长度

let arr = [1, 2, 3]
let res = arr.unshift()
console.log(arr) // [1, 2, 3]
console.log(res) // 3

5. findIndex：找到满足条件的元素并返回该元素的index 没有返回-1

let arr = [1, 2, 3]
let res = arr.findIndex(item => item === 2)
console.log(res) // 2

6. find：找到满足条件的元素，返回最先满足的单个值

let arr = [
    { name: '张三', age: 28 },
    { name: '李四', age: 22 },
    { name: '王五', age: 18 }
]
let res = arr.find(item => item.age === 22)
console.log(res) // { name: '李四', age: 22 }

7. splice：删除/替换/增加数组元素(会修改原数组)

let arr = [1, 2, 3]
let del = arr.splice(0, 1)
console.log(del) // [1]
console.log(arr) // [2, 3]
let replace = arr.splice(0, 1, 5)
console.log(replace) // [2]
console.log(arr) // [5, 3]
let increase = arr.splice(0, 0, 9)
console.log(increase) // []
console.log(arr) //[9, 5, 3]

8. slice：截取数组 第二个参数是下标(从1开始)不是数量

let arr = [1, 2, 3]
let res = arr.slice(1, 2)
console.log(res) // [2]
console.log(arr) // [1, 2, 3]

9. concat：合并数组(不会修改原数组)

let arr = [1, 2, 3]
let res = arr.concat([5, 6])
console.log(res) // [1, 2, 3, 5, 6]
console.log(arr) // [1, 2, 3]

10. join：将数组的所有元素用已传入的字符组合起一个字符串

let arr = [1, 2, 3]
let res = arr.join('*')
console.log(res) // '1*2*3'
console.log(arr) // [1, 2, 3]

11. sort：按升序排列数组项(会修改原数组)

let arr = [1, 5, 3]
let res = arr.sort()
console.log(res) // [1, 3, 5]
console.log(arr) // [1, 3, 5]

12. reverse：反转数组项的顺序(会修改原数组)

let arr = [1, 2, 3]
let res = arr.reverse()
console.log(res) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

13. forEach：遍历数组(当元素为地址引用时可以被修改)

let arr = [
    { name: '张三', age: 28 },
    { name: '李四', age: 22 }
]
arr.forEach((item) => {
  if (item.name === '张三') {
    item.age += 1
  }
})
console.log(arr)
// [
//   { name: '张三', age: 29 },
//   { name: '李四', age: 22 }
// ]

14. map：映射，组中的每一项执行给定函数，返回调用后的结果数组

let arr = [1, 2, 3]
let res = arr.map((item) => item *= 2)
console.log(res) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

15. filter：过滤数组中每一项，返回满足条件的元素数组

let arr = [
    { name: '张三', age: 28 },
    { name: '李四', age: 22 }
]
arr.filter((item) => item.age === 22)
console.log(res) // [{ name: '李四', age: 22 }]
console.log(arr)  
// arr = [
//   { name: '张三', age: 29 },
//   { name: '李四', age: 22 }
// ]

16. reduce：接收一个函数作为累加器，最终计算为一个值。

let arr = [1, 2, 3]
let res = arr.reduce((pre, item, index) => {
  return item * 2
}, 0)
console.log(res) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

17. every：判断数组中每一项都是否满足条件，都满足则返回true

let arr = [1, 2, 3]
let res = arr.every((item) => item > 2)
console.log(res) // false

18. some：判断数组中是否存在满足条件的项，存在则返回true

let arr = [1, 2, 3]
let res = arr.every((item) => item > 2)
console.log(res) // true

19. includes：判断数组中是否包含某个元素

let arr = [1, 2, 3]
let res = arr.includes(3)
console.log(res) // true

20. fill：填充数组

let arr = new Array(6)
console.log(arr, arr.length) // [empty * 6]  6
arr.fill(0, 1, 6)
console.log(arr) // [empty, 0, 0, 0, 0, 0]
arr.fill(1)
console.log(arr) // [1, 1, 1, 1, 1, 1]

字符串方法

1.toLowerCase：把字符串转为小写，返回新的字符串

let str = 'Hello World'
let res = str.toLowerCase()
console.log(res) // 'hello world'
console.log(str) // 'Hello World'

2.toUpperCase：把字符串转为大写，返回新的字符串

let str = 'Hello World'
let res = str.toUpperCase()
console.log(res) // 'HELLO WORLD'
console.log(str) // 'Hello World'

3.charAt：返回指定下标位置的字符，如果不存在则返回空字符

let str = 'Hello World'
let res = str.charAt(6)
console.log(res) // 'W'
console.log(str) // 'Hello World'

4.charCodeAt：返回指定下标位置的unicode编码，不存在返回NaN

let str = 'Hello World'
let res = str.charCodeAt(6)
console.log(res) // 87
console.log(str) // 'Hello World'

5.indexOf：返回某个指定的子字符串在字符串第一次出现的位置

let str = 'Hello World'
let res = str.indexOf('l')
console.log(res) // 2
console.log(str) // 'Hello World'

6.lastIndexOf：返回某个指定子字符串在字符串中最后一次出现的位置

let str = 'Hello World'
let res = str.lastIndexOf('l')
console.log(res) // 9
console.log(str) // 'Hello World'

7.split：把字符串分割成字符串数组(不改变原字符串)

let str = 'Hello World'
let res = str.split(' ')
console.log(res) // ["Hello", "World"]
console.log(str) // 'Hello World'

8.replace：在字符串中用一些字符替换另一些字符

let str = 'Hello World'
let res = str.replace(' ', '*')
console.log(res) // 'Hello*World'
console.log(str) // 'Hello World'

9.match：返回所有查找的关键字内容的数组

let str = 'Hello World'
let res1 = str.match(/o/ig)
let res2 = str.match('o') 
console.log(res1) // ["o", "o"]
console.log(res1) // ["o", index: 4, input: "Hello Word", groups: undefined]
console.log(str) // 'Hello World'

10.substr：字符串中抽取从 start 下标开始的指定数目的字符

let str = 'Hello World'
let res1 = str.substr(2, 5)
let res2 = str.substr(2)
console.log(res1) // 'llo W'
console.log(res2) // 'llo World'
console.log(str) // 'Hello World'

11.padStart、padEnd：字符串从前、后开始补全长度

let str = 'hello'
let res1 = str.padStart(6, *)
let res2 = str.padEnd(6,*)
console.log(res1) // '*hello'
console.log(res2) // 'hello*'
console.log(str) // 'Hello World'
avatar
文章
阅读
粉丝