最近总刷到一些关于js数组和字符串常用方法的视频,,一直想整理,今天周末就专门整理一下帮助自己理解,有点乱乱的,只能想一点写一点了

数组方法

数组元素的增删

push() 在数组的最后添加

push是在在数组的最后添加元素 arr.push(元素1,元素2,元素3)

    const arr = [1, 2, 3]
    arr.push('haha', '67', 'heiei')
    console.log(arr) //arr=[1, 2, 3, 'haha', '67', 'heiei']

unshift() 在数组最前面添加

unshift()是将元素加在数组的前面 arr.unshift(元素,元素,元素)

   const arr = [1, 2, 3]
   arr.push('haha', '67', 'heiei')
   console.log(arr) //arr=['haha', '67', 'heiei', 1, 2, 3,]

splice() 增减元素都可

在数组的中间增减元素arr.splice(起始位置, 删除个数, 增加元素)

增加元素时,中间删除个数就写0,arr.splice(起始位置, 0, 增加元素)

删除元素,删几个就写几,arr.splice(起始位置, 删除个数,增加元素)

起始位置:指定修改的元素开始位置（从0开始）。如果超出了数组的长度，就从数组末尾开始添加；如果是负值，则表示从数组末位开始的第几位；按升序从 array.length + 负值的索引开始搜默认为 0。如果计算出的索引小于 0，则整个数组都会被搜索。如果负数的绝对值大于数组的长度，则表示开始位置为第0位。 (比如:数组长度=7,索引值为0-6,起始位置如果写-3,则从索引值为7+(-3)=4的地方开始计算)。

比如:增加的这个元素的位置,想把这个元素放在下标2的位置,起始位置就是2,,起始位置为-5,就是把元素放在倒数第五个位置

增加元素
const arr = [1, 2, 3]
 const arr1 = [1, 2, 3]
//数组下标从0 开始

arr.splice(2, 0, 'haha', '67', 'heiei') //[1, 2, 'haha', '67', 'heiei', 3]
//'haha', '67', 'heiei'在下标2的位置把这些元素塞进去

arr1.splice(-2, 0, 'haha', '67', 'heiei') //[1, 2, 'haha', '67', 'heiei', 3]
//'haha', '67', 'heiei'把这些元素塞进倒数第二的位置

 删除元素
 const arr = [1, 2, 3, 4, 5]
 const arr1 = [1, 2, 3, 4, 5]
 //数组下标从0 开始
 
 arr.splice(2, 1) //[1, 3, 4, 5]
 //从下标2开始删除一个元素
 
 arr1.splice(-7, 2, 'haha', '67', 'heiei') //['haha', '67', 'heiei', 3, 4, 5]
 //从倒数第七个删除2个元素,(数组长度<7,从头删两个)然后把'haha', '67', 'heiei'添加进去

pop() 删除最后一个元素

删除数组中的最后一个元素,,一次只能删一个,出现一次就删掉一个

let arr = [0, 4,'dior', 'left', 'apple']
arr.pop() //[0, 4, 'dior', 'left']
arr.pop() //[0, 4, 'dior']
arr.pop() //[0, 4,]
arr.pop() //[0]
arr.pop() //[]
arr.pop() //undefined

shift() 删除第一个元素

删除数组中的第一个元素,,一次只能删一个,出现一次就删掉一个

let arr = [0, 4,'dior', 'left', 'apple']
arr.shift() //[4,'dior', 'left', 'apple']
arr.shift() //['dior', 'left', 'apple']
arr.shift() //['left', 'apple']
arr.shift() //['apple']
arr.shift() //[]
arr.shift() //undefined

slice() 浅拷贝

arr.slice([begin[, end]])

slice()方法返回一个新的数组对象，由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。end不写则默认到数组结束

end<0,则代表从数组最后往前数n个元素,slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）

const arr = ['red', 'pink', 'green', 'black','white',' purple']

    const newArr = arr.slice(2)//从下标2到最后
    const newArr1 = arr.slice(2,5)//从下标2到第五个元素
    const newArr2 = arr.slice(2, 8)//arr.length=6,比8小,从2到最后
    const newArr3 = arr.slice(2, -1)//从下标2(包含)到倒数第一个元素(不包含)
    const newArr4 = arr.slice(-5, -2)//从倒数第5个元素(包含)到倒数第2个元素(不包含)
    const newArr5 = arr.slice(2, -10)//10大于数组长度,结果是空数组
    console.log(newArr);// ['green', 'black', 'white', ' purple']
    console.log(newArr1);//['green', 'black', 'white']
    console.log(newArr2);//['green', 'black', 'white', ' purple']
    console.log(newArr3);//['green', 'black', 'white']
    console.log(newArr4);//['pink', 'green', 'black']
    console.log(newArr5);//[]

遍历数组

forEach() 遍历不会生成新数组

对数组的每个元素执行一次给定的函数,forEach() 被调用时，不会改变原数组,也不会生成新数组

 const arr = ['red', 'pink', 'green', 'black']
   arr.forEach(function (item, i) {
     console.log(item);//得到的是每一个元素'red', 'pink', 'green', 'black'
     console.log(i);//得到的是下标0,1,2,3
   })

 const arr = [{name:'哈哈',age:18},              {name:'名字1',age:19},              {name:'名字2',age:30},              {name:'名字3',age:8},              {name:'名字4',age:30},             ]
  arr.forEach(function (item, i) {
    console.log(item);//得到的是每一个元素,即每一个对象{name:'哈哈',age:18}......
    console.log(item.name);//得到的是每一个对象里边的名字:'哈哈','名字1','名字2','名字3','名字4'
    console.log(i);//得到的是下标0,1,2,3
  })

map() 遍历会返回一个新数组

map()也是遍历数组,和forEach()不同的是,返回值一个新数组

arr.map(function (item, i) {
    item是数组元素
    i是下标
   })
   
   
  const arr = ['red', 'pink', 'green', 'yellow']
  const newArr = arr.map(function (item, i) {
    console.log(item); //'red', 'pink', 'green', 'yellow'
    console.log(i); //0,1,2,3
    return item + 10
  })
  console.log(newArr); //['red10', 'pink10', 'green10', 'yellow10']

伪数组变真数组

Array.from()

Array.from(arrayLike[, mapFn[, thisArg]])

常见应用:把伪数组转换为真数组在获取元素时使用document.querySelectorAll('')得到的是一个伪数组,(伪数组不能使用数组的一些方法),使用from可以把伪数组转为真数组举例:

将获取到的元素伪数组转成真数组
 <ul>
    <li>111111111</li>
    <li>111111111</li>
    <li>111111111</li>
    <li>111111111</li>
    <li>111111111</li>
  </ul>
  <script>
    const li = document.querySelectorAll('li')
    console.log(li) //[li, li, li, li, li]伪数组,不能使用数组的一些方法
    const lis = Array.from(li) //将li的伪数组转为真数组
    lis.pop()  //删除最后一个元素
    console.log(lis) //[li, li, li, li]
  </script>

数组转字符串

join() 数组转字符串

把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。

数组也可以用join()转成字符串

字符串也可以用split()转成数组,方法差不多

 //要求:把data数组转成字符串
 const date = [2020,04,04,]  
 date..join('-')//2020-04-04

toString()

toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素。

其他

filter() 筛选数组中符合条件的元素

比如在[1,2,3,4,5,45,35]中找到大于5的元素并返回一个新数组

filter()最后会返回一个新数组

const newArr = arr.filter(function(item,i){
                  return 筛选条件
                  })

 arr = [12, 3, 43, 35, 4, 34, 23, 23, 12, 4, 55]
 
 const newArr = arr.filter(function (item, i) {
   return item > 20 //把数组中大于20的挑选出来
 })
 
 console.log(newArr); //[43, 35, 34, 23, 23, 55]

reduce() 函数累计处理

reduce返回值为函数累计处理的结果;

arr.reduce(function(){},起始值)

arr.reduce(function(累计值,当前元素[,索引号][,源数组]){},起始值)

[ ]里边的值可写可不写

1.起始值可以省略,如果写就作为第一次累计的起始值

2.有起始值,累计值=起始值

3.没有起始值,累计值=第一个数组元素arr[0]

4.每次遍历,后面的数组元素累计到累计值

 const arr = [1, 2, 3]
    //有起始值,prev= 起始值
    arr.reduce(function (prev, item) {
      console.log(prev); //prev的值依次为0,1,3
      return prev + item
    }, 0)
    

    //没有起始值时,prev= arr[0]
    arr.reduce(function (prev, item) {
      console.log(prev); //prev的值依次为1,3
      return prev + item
    })

find() 找到值并返回对应的元素

find方法找到值并返回对应的元素

arr.find(function (item) {
  return item === 'xxx'
  })

 const arr1 = [{name: '手机1', price: 1999,},
               {name: '手机2', price: 2999,},
               {name: '手机3', price: 599,}
              ]
     
    //找到价格=2999的对象并返回结果
    const phone = arr1.find(function (item) {
                    return item.price === 2999
                    })
    console.log(phone); //{name: '手机2',price: 2999,}

includes() 查看是否含有某个值

查看数组中从某个位置开始是否含有某个值,返回值为true或false arr.includes('值'[,起始位置])

注意:
1.如果起始位置大于等于数组的长度，则将直接返回 false，且不搜索该数组。

2.如果起始位置为负值，则按升序从 array.length + 负值的索引开始搜（即从末尾开始往前跳起始位置的绝对值个索引，然后往后搜寻）。默认为 0。如果计算出的索引小于 0，则整个数组都会被搜索。

    const arr4 = [10, 20, 30, 50, 45, 89, 100]
    
    console.log(arr4.includes(30)); //true
    console.log(arr4.includes(30, 2)); // true
    console.log(arr4.includes(30, 3)); //false
    console.log(arr4.includes(30, -3)); //false
            -3位置,,数组长度为7, -3对应的索引值为7-3=4,索引值为4的元素是45
    console.log(arr4.includes(30, -5)); //true
    console.log(arr4.includes(30, -10)); //true
    
    //元素30是下标2,从下标3开始,不含30,
    //起始位置-3即从数组最后一个开始往前数3个,即从45开始,,30是-5个

every() 判断是否都符合条件

arr.every(function (item){ return 条件 }

是否每个值都符合条件返回值为(全符合)true,(不是全都符合)false

const arr2 = [10, 20, 30, 50]

    const gt = arr2.every(function (item) {
      //return item > 10    //数组中有不满足条件的,返回false
      return item > 5 //数组中全都满足条件,返回true
    })
    console.log(gt);//满足条件就是true,不满足就是false

some() 判断是否有符合条件的值

数组中是否有值符合条件返回值为(有)true,(没有)false arr.some(function (item){ return 条件 }

   const arr3 = [10, 20, 30, 50]
    const flag = arr2.some(function (item) {
      //return item > 10    //数组中有值大于10,,满足条件true
      return item < 5 //数组中都不满足条件,,返回false
    })
    console.log(flag);

sort() 数组排序

sort()是对数组进行排序

语法:

 let arr = [9, 0, 3, 5, 77, 34, 56, 75, 34, 2]
    //升序
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr);//[0, 2, 3, 5, 9, 34, 34, 56, 75, 77]
    //降序
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr);//[77, 75, 56, 34, 34, 9, 5, 3, 2, 0]

注意:直接用arr.sort(),元素按照转换为的字符串的各个字符的Unicode位点进行排序。

如图所示,先排列首位为2,再是3,依次变大,数字不可以用arr.sort()来排列

错误示范
const arr = [23, 434, 46, 53, 2446, 65, 6, 3, 44, 23, 535, 3423, 24]

console.log(arr.sort());//[23, 23, 24, 2446, 3, 3423, 434, 44, 46, 53, 535, 6, 65]

数组的方法能想起来的就是这么多,也是自己复习一下了,如果有大佬发现有错误,请批评指教,哈哈哈~~~

今天时间不够了,,字符串的下次再写,出去玩咯,,不太快乐的周末

js中数组和字符串常用方法总结