js 数组用法

1. join()

             join() 方法将所有数组元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组。

1 const arr =[1,2,3,4]
2 console.log(arr.join())  // 1,2,3,4
3 console.log(arr.join(''))  // 1234
4 console.log(arr.join(','))  // 1,2,3,4
5 console.log(arr.join('*'))  // 1*2*3*4

2. concat()

              concat()用于两个或多个数组的合并，将合并的数组添加到原数组的后面组成新的数组，不改变原数组。

1 const arr = [1,2,3,4]
2 const arr1 = [5,6,7]
3 const arr2 = [8,9,10]
4 console.log(arr.concat(arr1))  // [1,2,3,4,5,6,7]
5 console.log(arr.concat(arr1,arr2))  // [1,2,3,4,5,6,7,8,9,10]

3. toString()

               toString()将数组转换为字符串类型，不改变原数组。

1 const arr = ['one','two','three','four']
2 consloe.log(arr.toString())  // one,two,three,four

4. pop()

               pop() 方法用于删除数组的最后一个元素。返回数组的最后一个元素，会改变原数组。

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

5.push()

               push()方法用于给数组末尾添加一个或多个元素，返回新数组的长度，会改变原数组。

1 const arr = [1,2,3,4]
2 const arr1 = [5,6,7]
3 console.log(arr.push(5))  // 5  这个地方打印出来的是数组的长度
4 console.log(arr)   // [1,2,3,4,5]
5 console.log(arr.push(...arr1))  // 7  这个地方打印出来的是数组的长度
6 console.log(arr)  // [1,2,3,4,5,6,7]

6. shift()

                shift()方法用于删除数组的第一个元素，返回第一个元素的值，会改变原数组。

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

7. unshift()

                unshift()方法用于给数组最前面添加一个或多个元素，返回新数组的长度，会改变原数组。

1 const arr = [3,4,5]
2 console.log(arr. unshift(1,2))  // 5  返回的是数组的长度
3 console.log(arr)  // [1,2,3,4,5]

8.slice()

                 slice()方法用于选取数组的一部分返回新数组，不改变原数组，slice(start,end) ,start：规定从何处开始选取，可以是负数，如果是负数它规定从数组尾部开始算起始位置，-1指最后一个元素，-2倒数第二个元素，以此类推，end：规定从何处结束选取，如果没有知道该参数，那么截取的参数从开始位置一直到结束的数组所有元素

1 const arr = [1,2,3,4,5,6,7]
2 console.log(arr.slice(2))  // [3,4,5,6,7]
3 console.log(arr.slice(3,5))  // [4,5]
4 console.log(arr.slice(-2))  // [6,7]
5 console.log(arr.slice(-2,-1))  // [6]

9. splice()

                  splice()方法添加或删除数组元素，该方法会改变原数组。splice(index，删除的个数，向数组添加新元素)，第一个参数：整数，添加或删除的位置，负数则从数组的末尾开始，-1指数组最后一个元素，一次类推，第二个参数：想要删除元素的数量，如果是0则表示不会删除，第三个参数：要添加的元素

 1 const arr = [1,2,3,4,5,6,7]
 2 console.log(arr. splice(3))  // [4,5,6,7]
 3 console.log(arr)   // [1,2,3]
 4 
 5 console.log(arr. splice(2,3))  // [3,4,5]
 6 console.log(arr)   // [1,2,6,7]
 7 
 8 const arr1 = [8,9,10]
 9 console.log(arr. splice(1,2,...arr1))   // [2,3]
10 console.log(arr)  // [1,8,9,10,4,5,6,7]

 10. sort()

                  sort()方法对数组元素进行排序，默认排序顺序为按字母升序。排序顺序可以是字母或数字，并按升序或降序，该方法会改变原数组。

1 const arr = ['one', 'two', 'three', 'four']
2 console.log(arr. sort())  // [four, one, three, two]
3 
4 const arr1 = [5,4,3,2,10]
5 console.log(arr1.sort())  // [10,2,3,4,5]

11. reverse()

                   reverse()方法用于翻转数组元素，返回翻转后的数组值，该方法会改变原数组。

1 const arr = [5,4,3,2,1]
2 console.log(arr.reverse())  // [1,2,3,4,5]
3 
4 const arr1 = ['one','two','three','four']
5 console.log(arr1.reverse())  // ['four','three','two','one']

12. indexOf()

                   indexOf()方法检索字符串或数组，不改变原数组，从前往后查找如果找到则返回第一次找到的结果的索引，如果没找到则返回-1。

1 const arr = [2,5,6,7,88,9]
2 console.log(arr.indexOf(2))   // 0  这里返回的是数组的索引位置
3 console.log(arr.indexOf(99))  // -1 没找到返回-1

13. lastIndexOf()

                    lastIndexOf()方法检索字符串或数组，不改变原数组，从后往前查找，如果找到则返回结果的索引，没找到返回-1。lastIndexOf(item,start),item：想要查找的元素，start：开始检索的索引位置（从0到数组的length-1）。

const arr = [0,1,2,3,4,5]
console.log(arr.lastIndexOf(4))  // 4 返回的是索引
console.log(arr.lastIndexOf(7))  // -1 没找到
console.log(arr.lastIndexOf(2,3))  // 2  

 14. every()

                     every()方法对数组中每一项运行给定函数，如果该函数对每一项都返回true，则返回true（如果数组中有一个元素不满足，则整个表达式返回false，剩余的元素不会再进行检测）。该方法不会对空数组进行检测，every((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

 const arr = [1,2,3,4,5]
 const list = arr. every(item =>{
      return item >= 1
 })
 console.log(list)   //  true 

15. some()

                     some()方法对数组每一项运行给定函数，如果该函数对任意一项返回true，则返回true（如果找到第一个满足条件的元素，则终止循环，不再继续查找）。该方法不会对空数组进行检测，some((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

  const arr = [1,2,3,4,5,6,7]
  const list = arr. some(item =>{
       return item === 7
  })
  console.log(list)   //  true  

16. filter()

                      filter()方法用于筛选数组返回一个新数组，配合return使用，新数组里返回的是符合条件的所有元素，该方法不会对空数组进行检测，不会改变原数组。filter((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

 const arr = ['spray', 'limit', 'spray', 'exuberant', 'destruction', 'present']
 const result = arr. filter((item, index)=>{
      return  arr. indexOf(item) === index
 })
//  结果：['spray', 'limit',  'exuberant', 'destruction', 'present'] 

17. map()

                      map()方法返回一个新的数组，数组中的元素是原数组处理之后的值，不会对空数组进行检索，不改变原数组。必须要有返回值，如果不给return它会返回一个undefined，相当于给遮这个新数组添加新的值但不影响原数组，只是将原来的数组拷贝一份，map((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

                      

const arr = [1,2,3,4,5]
const result = arr.map(function (item) {  
        return item * 2
})
console.log(result)   // [2,4,6,8,10]

// 箭头函数
const result1 = arr.map(item => item * 2)
console.log(result1)   //  [2,4,6,8,10]

// 获取特定属性值
const arr1 = [
    { name:"张三", age:18 },
    { name:"李四", age:23 },
    { name:"王二", age:20 }
]
const result2 = arr1.map(item => {
        return  item.name
})
console.log(result2)   // ['张三', '李四', '王二']

// 获取数组中对象中特定属性的值
const ageList = []
const result3 = arr1.map(item => {
      ageList.push(item.age)
})
console.log(result3)  // [18,23,20]

// 日常接口数据映射
res.data.map(item => {
      return {
          title:  item.title,
          age:  item.age,
          sex:  item.sex === 0 ? '女' : '男'
      }
})

// 写箭头函数需要注意的
const arr2 = [1,2,3,4,5]
const result4 = arr2.map(item => {
       if(item===2){
           return  item * 2
       }
})

console.log(result4)  //  [undefined, 4, undefined, undefined, undefined]    原因：上面写的是数组里的某个元素值等于2时才return，那么其他的值每遍历一次因为没有return 所以得到的值是undefined
// 正确写法
const result4 = arr2.map(item => {
       if(item===2){
           return  item * 2
       }
       return item
})

 18. forEach()

                        forEach()方法会改变原数组，用于调用数组的每个元素，该方法无法中断执行，会将所以元素遍历完，forEach使用return无效，forEach((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

const arr = [1,2,3,4,5]
const copyList = []
const result = arr. forEach(item =>{
       copyList.push(item)
})
console.log(result)  // [1,2,3,4,5]

19. find()

                       find()方法检索数组返回第一个符合条件的数组成员，如果没找到返回undefined，不改变原数组。find((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

const arr = [1,2,3,4,5]
const result = arr. find(item =>{
     if(item===2){
         return item
     }
})
console.log(result)   // 2

const result1 = arr. find(item =>{
     if(item===8){
         return item
     }
})
console.log(result1)   // undefined

20. findIndex()

                       findIndex()方法检索数组返回第一个符合条件的数组成员，如果没找到返回-1，不改变原数组。findIndex((item,index,list)=>{})，item：当前元素的值，index：当前元素的索引，list：当前元素属于的数组对象。

  const arr = [1,2,3,4,5]
  const result = arr. findIndex(item =>{
       if(item===2){
           return item
       }
  })
  console.log(result)   // 2
  
  const result1 = arr. findIndex(item =>{
      if(item===8){
          return item
      }
 })
 console.log(result1)   // -1

21. includes()

                         includes()方法用来检测数组是否有某个值，如果有则返回true，否则返回false。includes(item,index)，item：需要查找的元素值，index：从哪个索引位置开始查找。

[1,2,3,4,5].includes(2)   // true
[1,2,3,4,5].includes(2,2)   //  false

22. fill()

                        fill()方法用于将固定值替换数组某一项或者全部，改方法会改变原数组，array.fill(value, start, end)，value：需要填充的值，start：开始填充的位置，end：结束填充的位置

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

23. copyWithin()

                         copyWithin()方法用于从数组的指定位置拷贝元素到另一个指定的位置，该方法会改变原数组， array.copyWithin(target, start, end)，target：复制到指定目标的索引位置，start：元素复制的起始位置，end：元素复制的结束位置

const arr = [1,2,3,4,5]
console.log(arr.copyWithin(2))  // [1,2,1,2,3]  从下标为2的元素开始，复制数组，所以3，4，5被替换为1，2，3
console.log(arr.copyWithin(2, 1))  // [1,2,2,3,4]  从下标为2的元素开始，复制数组，指定复制的第一个元素的下标为1，所以3，4，5被替换为2，3，4
console.log(arr.copyWithin(2, 1,2))   // [1,2,2,3,4]  从下标为2的元素开始，复制数组，指定复制的第一个元素的下标为1，结尾位置下标为3 所以3，4，5被2，3，4替换