js常用数据处理方法

luochen_ya
275 阅读5分钟

一、数据类型判断

1. typeof 判断数据类型

console.log(typeof 2) // number 
console.log(typeof undefined) // undefined 
console.log(typeof '222') // string 
console.log(typeof true) // boolean
console.log(typeof Symbol()) // symbol 
console.log(typeof 1n) // bigint
console.log(typeof null) // object 
console.log(typeof {}) // object 
console.log(typeof []) // object 
console.log(typeof new Function()) // function
console.log(typeof new Date()) // object
console.log(typeof new RegExp()) // object

2. instanceof 判断A是否为B的实例

let arr = [1, 2]
console.log(arr instanceof Array) // true

3. toString 把数据类型转换为字符串

let val = 12345
console.log(typeof val.toString()) // string

二、常用数组遍历方法

1. forEach() 遍历数组 两个参数 第一个遍历对象 第二个下标

let list = [1, 2, 3, 4, 5]
list.forEach((item, index) => {
  console.log(item)   // 数据内容 1 2 3 4 5
  console.log(index)  // 数据下标 0 1 2 3 4
})

2. every(fn) 判断数组中是否所有元素都满足fn函数中的条件 返回一个布尔值

let list = [1, 2, 3, 4, 5]
let result = list.every(val => {
  return val > 0
})
console.log(result) // true

result = list.every(val => {
  return val > 1
})
console.log(result) // false

3. filter(fn) 返回数组中满足fn函数条件的集合

let list = [1, 2, 3, 4, 5]
let result = list.filter(val => {
  return val > 2
})
console.log(result) // [3, 4, 5]

4. find(fn) 返回数组中第一个匹配fn函数中条件的值，没有则返回undefined

let list = [1, 2, 3, 4, 5]
let result = list.find(val => {
  return val > 2
})
console.log(result) // 3

result = list.find((val)=>{
  return val > 5
})
console.log(result) // undefined

5. findIndex(fn) 返回数组中第一个匹配fn函数中条件的索引，没有则返回-1

let list = [1, 2, 3, 4, 5]
let result = list.findIndex(val => {
  return val > 2
})
console.log(result) // 2

result = list.findIndex(val => {
  return val > 5
})
console.log(result) // -1

6. includes() 返回一个布尔值，表示某个数组是否包含给定的值

let list = [1, 2, 3, 4, 5]
let result = list.includes(2)
console.log(result) // true

result = list.includes(6)
console.log(result) // false

7. map(fn) 以fn函数中返回值组成新的数组返回

let list = [1, 2, 3, 4, 5]
let result = list.map(item => {
  return item + 1
})
console.log(result) // [2, 3, 4, 5, 6]

8. reduce(fn, 初始值) 累计器

// reduce有第二个参数的时候的时候
let result = list.reduce((accumulator, currentValue, currentIndex, array) => {
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue;
  // 2  1  0  [1, 2, 3, 4, 5] // 第一次accumulator的值为reduce的第二个值  currentValue为数组的第一个值
  // 3  2  1  [1, 2, 3, 4, 5] // 第二次accumulator的值为reduce的第二个参数2 加上 数组的第一个值  即第一次循环时return的值
  // 5  3  2  [1, 2, 3, 4, 5] // 同上
  // 8  4  3  [1, 2, 3, 4, 5] // 同上
  // 12  5  4  [1, 2, 3, 4, 5] // 同上
}, 2)
console.log(result) // 17 为最终累计的和

// reduce没有第二个参数的时候的时候
result = list.reduce((accumulator, currentValue, currentIndex, array) => {
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue;
  // 1  1  0  [1, 2, 3, 4, 5] // 第一次accumulator的值为数组的第一个值  currentValue为数组的第二个值
  // 3  2  1  [1, 2, 3, 4, 5] // 第二次accumulator的值为数组的第一个值加上数组的第二个值  即第一次循环时return的值
  // 6  3  2  [1, 2, 3, 4, 5] // 同上
  // 10  4  3  [1, 2, 3, 4, 5] // 同上
})
console.log(result) // 15 为最终累计的和

9. some(fn) 检查数组中是否含有满足fn函数条件的值 返回一个布尔值

let list = [1, 2, 3, 4, 5]
let result = list.some(val => {
  return val > 3
})
console.log(result) // true

result = list.some(val => {
  return val > 6
})
console.log(result) // false

三、常用对象遍历方法

1. for-in 遍历出原型链上的属性，可以通过hasOwnProperty方法来实现过滤

let obj = {
  name: '洛辰',
  age: 23,
  sex: '男'
}
for(let key in obj) {
  console.log(`${key} => ${obj[key]}`)
  // name => 洛辰
  // age => 23
  // sex => 男
}

2. Object.keys(obj) 返回对象自身属性名组成的数组

let obj = {
  name: '洛辰',
  age: 23,
  sex: '男'
}
console.log(Object.keys(obj)) // ['name', 'age', 'sex']

3. Object.values(obj) 返回对象自身属性值组成的数组

let obj = {
  name: '洛辰',
  age: 23,
  sex: '男'
}
console.log(Object.values(obj)) // ['洛辰', 23, '男']

4. Object.getOwnPropertyNames(obj) 返回对象自身属性名组成的数组（包括不可枚举属性）

let obj = {
  name: '洛辰',
  age: 23,
  sex: '男'
}
console.log(Object.getOwnPropertyNames(obj)) // ['name', 'age', 'sex']

四、常用字符串操作方法

1. charAt(index) 返回下标的那个字符

let str = 'hello world'
console.log(str.charAt(8)) // r

2. concat() 字符串往后拼接

let str = 'hello'
console.log(str.concat(' world')) // hello world

3. replace() 替换第一个符合条件的字符

let str = 'A-BA-CBA-DCBA'
console.log(str.replace('A', 'B')) // B-BA-CBA-DCBA
console.log(str.replace('A')) // undefined-BA-CBA-DCBA（不填就是undefined）

4. replaceAll() 替换所有符合条件的字符

let str = 'A-BA-CBA-DCBA'
console.log(str.replaceAll('A', 'B')) // B-BB-CBB-DCBB
console.log(str.replaceAll('A')) // undefined-Bundefined-CBundefined-DCBundefined（不填就是undefined）

5. slice() 截取下标到下标之间的字符

let str = 'hello world'
console.log(str.slice(0, 6)) // 'hello'
console.log(str.slice(1)) // 'ello world'

6. substring() 截取下标到下标之间的字符

let str = 'hello world'
console.log(str.substring(0, 6)) // 'hello'
console.log(str.substring(1)) // 'ello world'

7. substr() 截取从下标开始的长度的字符

let str = 'hello world'
console.log(str.substr(0, 4)) // 'hell'
console.log(str.substr(-5, 4)) // 'worl'

8. split() 把字符串分割为字符串数组

let str = 'hello world'
console.log(str.split(' ')) // ['hello', 'world']
console.log(str.split('')) // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

9. trim() 移除字符串首尾空白 但不能移除中间的空白

let str = ' hello world '
console.log(str.trim()) // hello world

10. indexOf() 从前开始搜索指定的字符串 返回字符串的位置 没有找到则返回-1

let str = 'hello world'
console.log(str.indexOf('l')) // 2
console.log(str.indexOf('hello')) // 0
console.log(str.indexOf('world')) // 6

11. lastIndexOf() 从后开始搜索指定的字符串 返回字符串的位置 没有找到则返回-1

let str = 'hello world'
console.log(str.lastIndexOf('l')) // 9
console.log(str.lastIndexOf('hello')) // 0
console.log(str.lastIndexOf('world')) // 6

12. toUpperCase() 将字符串全部转换为大写

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

13. toLowerCase() 将字符串全部转换为小写

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

五、常用数组操作方法

1. join() 数组拼接为字符串

let arr = [1, 2, 3, 4, 5]
console.log(arr.join()) // 1,2,3,4,5
console.log(arr.join('-')) // 1-2-3-4-5

2. push() 数组末尾添加元素

let arr = ['aa', 'bb', 'cc', 'dd']
let num = arr.push('ee', 'ff')
console.log(num) // 6 返回新数组的长度
console.log(arr) // ['aa', 'bb', 'cc', 'dd', 'ee', 'ff']

3. pop() 删除数组末尾的值

let arr = ['aa', 'bb', 'cc', 'dd']
let item = arr.pop()
console.log(item) // dd 删除的那个值
console.log(arr) // ['aa', 'bb', 'cc']

4. unshift() 数组开头添加元素

let arr = ['aa', 'bb', 'cc', 'dd']
let num = arr.unshift('a1', 'a2')
console.log(num) // 6 返回新数组的长度
console.log(arr) // ['a1', 'a2', 'aa', 'bb', 'cc', 'dd']

5. shift() 删除数组开头的值

let arr = ['aa', 'bb', 'cc', 'dd']
let item = arr.shift()
console.log(item) // aa
console.log(arr) // ['bb', 'cc', 'dd']

6. sort(fn) 数组排序 字母从小到大 数值绑定fn函数

let arr1 = ['aa', 'ee', 'bb', 'dd', 'cc']
console.log(arr1.sort()) // ['aa', 'bb', 'cc', 'dd', 'ee']
let arr2 = [8, 1, 45, 5]
console.log(arr2.sort(function(a,b){return a-b})) // [1, 5, 8, 45]

7. reverse() 反转数组

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

8. concat() 两个数组或多个数组拼接

let arr1 = ['a1', 'a2', 'a3']
let arr2 = ['b1', 'b2', 'b3']
let arr3 = ['c1', 'c2', 'c3']
console.log(arr1.concat(arr2, arr3)) // ['a1', 'a2', 'a3', 'b1', 'b2', 'b3', 'c1', 'c2', 'c3']

9. slice(sta, end) 数组截取

let arr = [1, 3, 5, 7, 9, 11]
console.log(arr.slice(1)) // [3, 5, 7, 9, 11]
console.log(arr.slice(1, 3)) // [3, 5]

10. splice(下标, 删除个数, 替换元素)：删除、插入和替换

let arr = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff']
let arr1 = arr.splice(0, 2)
console.log(arr1) // ['aa', 'bb'] 删除的元素
console.log(arr) // ['cc', 'dd', 'ee', 'ff']
let arr2 = arr.splice(2, 0, 'gg')
console.log(arr2) // []
console.log(arr) // ['cc', 'dd', 'gg', 'ee', 'ff']
let arr3 = arr.splice(2, 2, 'hh')
console.log(arr3) // ['gg', 'ee']
console.log(arr) // ['cc', 'dd', 'hh', 'ff']
avatar
文章
阅读
粉丝