js数组、对象、字符串常用方法

是草莓味的啊

已于 2022-12-05 22:14:46 修改

阅读量370

点赞数

分类专栏： Web前端文章标签： javascript

于 2022-12-04 16:45:10 首次发布

本文链接：https://blog.csdn.net/weixin_43908649/article/details/128173546

版权

数组、对象、字符串常用方法

一、数组

1.1.创建数组

方法	说明
arr = [1, 2, 3, 4]	数组字面量
arr = new Array()	构造函数
Array.of(1, 2, 3, 4)	Array.of
Array.from(obj)	将非数组对象（Set、字符串、带length的对象、数组【浅拷贝】）转化为数组

1.2.数组常用方法

方法	说明	是否影响原数组
join	用指定的分隔符将数组每一项拼接为字符串	否
concat	连接两个或多个数组	否
push	向数组的末尾添加新元素，返回数组新长度	是
pop	删除数组的最后一项，返回被删除的数组项	是
unshift	向数组首位添加新元素，返回数组新长度	是
shift	删除数组的第一项，返回被删除的数组项	是
splice(开始位置,要删除的个数,要添加的值)	对数组进行增删改	是
sort	对数组的元素进行排序（正序或倒序）	是
reverse	对数组进行翻转	是
slice(start, end)	查找索引从start（包含）开始到end（不包含）结尾的元素，end不写默认到最后一位，出现负数（用【负数+数组长度】来替换开始或结束位置）	否
indexOf(target, index)	检测当前值在数组中第一次出现的位置索引，target是查找的目标值，index是从下标多少开始查找（默认为0）	否
lastIndexOf (target, index)	检测当前值在数组中最后一次出现的位置索引（同上）	否
includes(target, index)	判断一个数组是否包含一个指定的值，包含返回true，不包含返回false（同上），NaN在includes被认为是与自身相等的	否
find((当前值，下标，原数组)=>{return 条件})	返回数组中第一个符合条件的值	否
findIndex((当前值，下标，原数组)=>{return 条件})	返回数组中第一个符合条件的索引	否
forEach((当前值，下标，原数组)=>{})	循环遍历数组每一项，直接引入当前遍历数组的内存地址，允许操作原数组，forEach没有返回值	是
map((当前值，下标，原数组)=>{return v})	循环遍历数组每一项，生成一个新的数组，新的数组的值发生变化，map有返回值，会返回经过操作的新数组	否
filter((当前值，下标，原数组)=>{return v===‘’})	过滤出符合条件的项	否
entries	对键值对遍历（返回一个遍历器对象，可以使用for…of进行循环遍历）	否
keys	对键名遍历（同上）	否
values	对键值遍历（同上）	否
every	判断数组中每一项都是否满足条件，遇到不满足条件的数组项，后续的将不再循环	否
some	判断数组中是否存在满足条件的项，遇到满足条件的数组项，后续的将不再循环	否
fill(要替换的值,替换起始索引,替换结束索引)	使用特定值填充数组中的一个或多个元素	是
copyWithin(粘贴开始位置,复制开始位置,复制停止位置)	从数组的指定位置拷贝元素到数组的另一个指定位置中	否
fla(扁平化层数		Infinity任意多层)t
flatMap((v)=>[v,对v进行计算])	扁平化数组	否
toLocaleString	数组转换为字符串	否
toString	数组转换为字符串	否
reduce((上一次的值, 当前值, 索引, 原数组) => {},初始值)	累加器	否
reduceRight((上一次的值, 当前值, 索引, 原数组) => {},初始值)	从数组末尾开始累加器	否

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1.创建数组
      // ①.数组字面量
      const arr11 = []
      const arr12 = [1, 2, 3, 4]
      const arr13 = ['KangKang', 'Mary', 'Jane', 'Jessica']
      const arr14 = [
        {
    id: 1, name: 'KangKang', age: 20 },
        {
    id: 2, name: 'Mary', age: 22 }
      ]
      console.log(arr11, arr12, arr13, arr14)
      // ②.Array构造函数
      const arr21 = new Array() // 不定长空数组
      const arr22 = new Array(20) // 定长20
      const arr23 = new Array('KangKang', 'Mary', 'Jane', 'Jessica')
      console.log(arr21, arr22, arr23)
      // ③.Array.of
      const arr31 = Array.of(1, 2, 3, 4)
      const arr32 = Array.of('KangKang', 'Mary', 'Jane', 'Jessica')
      console.log(arr31, arr32)
      // ④.Array.from：将非数组对象转化为数组
      // 如果映射函数需要在对象上工作，你可以手动传递第三个参数给 Array.from()方法，从而指定映射函数内部的 this 值
      // 条件：类数组对象必须具有length属性，类数组对象的属性名必须为数值型或字符串型的数字
      const obj = {
   
        0: 'tom',
        1: '65',
        2: '男',
        3: ['jane', 'john', 'Mary'],
        length: 4
      }
      console.log(Array.from(obj)) // ['tom', '65', '男', ['jane', 'john', 'Mary']]
      // Set集合转数组
      console.log(Array.from(new Set([12, 45, 97, 9797]), (item) => item + 1)) // [13, 46, 98, 9798]
      // 字符串转数组
      console.log(Array.from('hello!')) // ['h', 'e', 'l', 'l', 'o', '!']
      // 进行数组的浅拷贝
      const old2 = [12, 45, 47, 56]
      const new2 = Array.from(old2)
      new2.push(18)
      console.log(old2, new2) // [12, 45, 47, 56]，[12, 45, 47, 56, 18]
      console.log(Array.from({
    length: 4 })) // [undefined, undefined, undefined, undefined]
      const arr42 = Array.from({
    length: 4 }).map((item, index) => {
   
        return {
   
          id: index,
          name: `小花${
     index}`
        }
      })
      console.log(arr42) // [{ id: 0, name: '小花0' }, { id: 1, name: '小花1' }, { id: 2, name: '小花2' }, { id: 3, name: '小花3' }]
      // 2.数组常用方法
      // ①.join()：用指定的分隔符将数组每一项拼接为字符串，原数组不变
      // concat()：用于连接两个或多个数组，原数组不变
      const arr51 = [
        'test/202211/29/1669716964812.png',
        'test/202211/29/1669716964813.png',
        'test/202211/29/1669716964814.png'
      ]
      const arr511 = [1, 2]
      const arr512 = ['jane', 'john']
      // 根据图片的键名去请求图片的线上地址
      console.log(arr51, arr51.join(',')) // test/202211/29/1669716964812.png,test/202211/29/1669716964813.png,test/202211/29/1669716964814.png
      console.log(arr511, arr512, arr511.concat(arr512, [8])) // [1, 2] ['jane', 'john'] [1, 2, 'jane', 'john', 8]
      // ②.push() ：向数组的末尾添加新元素，返回数组新长度，原数组改变
      // pop()：删除数组的最后一项，返回被删除的数组项，原数组改变
      // unshift()：向数组首位添加新元素，返回数组新长度，原数组改变
      // shift()：删除数组的第一项，返回被删除的数组项，原数组改变
      // splice()：对数组进行增删改 splice(开始位置,要删除的个数,要添加的值)，返回被删除的数组元素，原数组改变
      const arr52 = [2, 3, 4, 5, 6]
      console.log(arr52.push(8, 9), arr52) // 7 [2, 3, 4, 5, 6, 8, 9]
      console.log(arr52.pop(), arr52) // 9 [2, 3, 4, 5, 6, 8]
      console.log(arr52.unshift(0, 1), arr52) // 8 [0, 1, 2, 3, 4, 5, 6, 8]
      console.log(arr52.shift(), arr52) // 0 [1, 2, 3, 4, 5, 6, 8]
      const arr521 = [2, 3, 4, 5, 6]
      const arr522 = [2, 3, 4, 5, 6]
      const arr523 = [2, 3, 4, 5, 6]
      console.