数组字符串常用方法

148 阅读4分钟

Array方法

不改变原数组

map

迭代数组,对数组每个值处理,返回一个新数组

 const arr = [1,2,3,4,5,6,7,8,9];
 console.log(arr.map((item, index) => item * 2));  // [2, 4, 6, 8, 10, 12, 14, 16, 18]
 console.log(arr); // [1,2,3,4,5,6,7,8,9]
forEach

遍历比较复杂的数组

 const arr = [1,2,3,4,5,6,7,8,9]
 arr.forEach( (item, index) => {}) // 没有返回值
 `item`  // 每次遍历的元素
 `index` // 下标 可选
join

将数组每个值用符号拼接,返回一个字符串

 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 const result = arr.join('-'); 
 console.log(result); // 1-2-3-4-5-6-7-8-9
 console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
filter

过滤数组 返回一个过滤完的新数组

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  arr.filter((item, index) => item > 1) // 返回一个过滤完的新数组
  `item` // 每次遍历的元素
  `index` // 下标 可选
  `return` // 一个表达式 为flase表示过滤掉
reduce

累计值,一般用来求和,返回累计的结果

 const arr = [1, 2, 3]
 const sum = arr.reduce((prev, item) =>  prev + item, 0) // 循环2次 写起始值循环3次
 console.log(sum); // 6
 `prev -> 累计值`
 `item -> 每次循环的元素值   `
 `return -> 返回累计值`
 `0` // 起始值,不写prev默认为数组第一个元素的值,
find

查找对应的值或对象返回查找的结果,没有查到则返回 undefined

 const arr = [{
        name: '张三',
        salary:10000,
        },
        {
            name: '李四',
            salary:10000,
        },
        {
            name: '王五',
            salary:10000,
        }
    ]
 const obj = arr.find(item => item.name === '李四')
 console.log(obj); // { name: '李四', salary: 10000 }
every

检测数组是否都符合条件,返回一个布尔值

  const arr = [1,2,3,4,5,6,7,8,9];
  const falg = arr.every(item => item >= 1)
  console.log(falg); // true
some

检测数组中是否有符合条件的值, 返回一个布尔值, 只要有一个符合就返回true,如果都不符合则返回false

  const arr = [1,2,3,4,5,6,7,8,9];
  const falg = arr.some(item => item > 8)
  console.log(falg); // true 
findIndex

寻找对应元素的下标,返回数组下标

  const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
  console.log(arr.findIndex(item => item === 205)); // 3
Array.from

伪数组转换为真数组返回新数组,不改变原数组

 <ul>
      <li></li>
      <li></li>
      <li></li>
 </ul>
 let lis = document.querySelectorAll('ul li')
 const arr = Array.from(lis) // 返回一个真数组
 console.log(arr)  // [li, li, li, li] 可以调用数组方法
toString

数组上的toString方法,可以将数组转化成字符串

  let arr = [1,2,3]
  console.log(arr.toString());  // 1,2,3 
  console.log(arr); // [1,2,3]

slice

截取数组,返回截取元素的数组,该方法不会改变原数组

  const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9]
  const result = arr.slice(0, 3)
  console.log(arr) // [635, 205, 168, 152, 56, 48, 9, 5, 5]
  console.log(result) // [5, 152, 56]

改变原数组

splice

删除或添加对应的数组元素,只返回被删除的元素数组,该方法会改变数组

  const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
  console.log(arr.splice(3, 1, '0')); // [205] 
  console.log(arr); // [5, 152, 56, "0", 5, 48, 168, 635, 9]
  `3` // 要删除或要替换的下标
  `1` // 删除的元素个数
  `'0'` // 要添加的元素

sort

数组进行排序改变原数组,返回原数组

  const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
  // a - b 从小到大排列
  const result = arr.sort((a, b) => a - b) // 正序
  console.log(arr); // [5, 5, 9, 48, 56, 152, 168, 205, 635]
 
  // b - a 从大到小排列
  const result = arr.sort((a, b) => b - a) // 反序
  console.log(arr); // [635, 205, 168, 152, 56, 48, 9, 5, 5]
  
reverse

翻转数组返回翻转的数组,会改变原数组

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

String方法

split

字符串转换为数组,返回一个数组

 const str = 'jsc,onst'
 console.log(str.split(`可以配置正则`)); // [ 'jsc,onst' ]
substring

截取字符串,返回截取结果

  const str = 'jsconst'
  console.log(str.substring(2, 4)); // co
  `2` // 从字符串下标2开始截取
  `4` // 从字符串下标4结束(不包括4)
  // 如果不写结束下标则截取到字符串最后一位
startsWith

判断一个字符是否以什么开头,返回一个布尔值

  const str = 'jsconst'
  console.log(str.startsWith('co', 2)); // true
  `'co'` // 是否以co开头
  `2` // 默认为0,从字符串哪个位置开始匹配(可选)
includes

判断此字符串是否含有某个字符,返回一个布尔值

  const str = 'jsconst'
  console.log(str.includes('j', 2)); // false
  `j` // 要匹配的字符
  `2` // 匹配的位置(可选)