前端Vue日常工作中--Js数组常用方法

Js数组常用方法

1.改变原数组的方法

1.1改变数组长度的方法

1. push(element1, …, elementN)： 将一个或多个元素添加到数组的末尾，并返回新的长度

push() 向数组的末尾添加一个或更多元素，并返回新的长度 原数组会改变
var a = [1,2,3]
var b = a.push('d')

console.log(a) //[ 1, 2, 3, 'd' ]
console.log(b) //4

2. pop()：从数组的末尾删除最后一个元素，并返回该元素的值。

pop() 删除数组的最后一个元素  返回最后一个元素 原数组会改变
var a = [1,2,3,4,5,6]
var b = a.pop()

console.log(a) //[ 1, 2, 3, 4, 5 ]
console.log(b) //6

3. unshift(element1, …, elementN)： 将一个或多个元素添加到数组的开头，并返回新的长度。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度 原数组会改变
var a = [1,2,3]
var b = a.push('00')

console.log(a) //[ 1, 2, 3, '00' ]
console.log(b) //4

4. shift()： 从数组的开头删除第一个元素，并返回该元素的值。

shift() 删除数组的第一个元素   返回最后第一个元素 原数组会改变
var a =[0,1,2,3,4,5]
var b = a.shift()

console.log(a) //[ 1, 2, 3, 4, 5 ]
console.log(b) //0

5. splice(start, deleteCount, item1, …, itemN)： 从指定位置开始删除元素，并可以添加新的元素。返回删除的元素组成的数组。

参数：删除 (下标1，下标2)    替换(开始下标,长度,替换数字)  插入 (开始下标，0，添加数字)
var a = ['a','b','c','d','e']
var b = a.splice(0,2)
var c = a.splice(2,2,99)
var d = a.splice(3,0,77)
console.log(a) //[ 'c', 'd', 'e' ]
console.log(b) //[ 'a', 'b' ]

console.log(a) //[ 'a', 'b', 99, 'e' ]
console.log(c) //[ 'c', 'd' ]

console.log(a) //[ 'a', 'b', 'c', 77, 'd', 'e' ]
console.log(d) //[]

1.2不改变数组长度的方法：

1. reverse()： 反转数组的顺序。

reverse() 反转数组 颠倒数组中元素的顺序  原数组会改变
var a = [1,2,3]
var b = a.reverse()

console.log(a) //[ 3, 2, 1 ]
console.log(b) //[ 3, 2, 1 ]

2. sort(compareFunction)： 对数组进行排序，可以传入一个比较函数来定义排序规则。

var a = [5,2,9,7,6,1,0,3]
 a.sort(function(a,b){
     return a-b//从小到大
})
console.log(a) //[0,1,2,3,5,6,7,9]
 a.sort(function(a,b){
    return b-a //从大到小
})
console.log(a) //[9,7,6,5,3,2,1,0]

3. fill()： 用静态值填充数组的所有元素。

let a = [1, 2, 3, 4, 5];
a.fill(0);
// a现在是 [0, 0, 0, 0, 0]

2.不改变原数组的方法

2.1 不修改数组长度的方法

1. concat(array1, array2, …, arrayN)： 将数组与其他数组或值连接，返回新的数组，不修改原始数组。

concat() 合并数组  返回一个新的数组 原数组不会改变 （应用页面加载更多）
var a = ['a','b','c']
var b = [1,2,3]

var c = a.concat(b,[4,5,6])    
console.log(c)  // ['a','b','c',1,2,3,4,5,6]

2. slice(start, end)： 从数组中截取一部分，返回新的数组，不修改原始数组。

slice() 截取数组 返回新数组 slice(参数1，参数2)   原数组不会发生改变
参数1：开始下标  参数2：结束下标
var a = [0,1,2,3,4,5,6,7]
var b = a.slice(1,3)
var c = a.slice(-1)
var d = a.slice(2)

console.log(a) //[0,1,2,3,4,5,6,7]
console.log(b) //[ 1, 2 ]
console.log(c) //[ 7 ]
console.log(d) //[ 2, 3, 4, 5, 6, 7 ]

2.2 遍历数组的方法

1. forEach(callback(currentValue, index, array))： 对数组的每个元素执行提供的函数。

forEach()  forEach(function (item, index, array)
    1.用来遍历索引数组      
    参数1: 每次取出的单元值  参数2: 每次取出的单元索引  参数3: 数组本身
    2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）
    3.无返回值
    4.不改变原数组
    
let a = [1, 2, 3];
a.forEach((element, index) => {
  console.log(`Index ${index}: ${element}`);
});
// 输出:
// Index 0: 1
// Index 1: 2
// Index 2: 3

2. map(callback(currentValue, index, array))： 创建一个新数组，其中每个元素都是对原始数组元素调用一个提供的函数的结果。

map()
    1.读取原数组中的每个值，可进行修改，之后生成一个新数组返回
    2.返回一个数组
    3.不改变原数组

let a = [1, 2, 3];
let b = a.map(element => element * element);
// b [1, 4, 9]

3. filter(callback(element, index, array))： 创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。

filter()过滤
    1.遍历数组元素，将符合条件的元素过滤出来，追加到新的数组中
    2.返回一个新的数组
    3.参数任然是一个回调函数
    4.不改变原数组
    
let a = [1, 2, 3, 4, 5];
let b = a.filter(element => element % 2 === 0);
// b现在是 [2, 4]

4. reduce(callback(accumulator, currentValue, index, array), initialValue):

callback 是一个累加函数，用来操作每个元素。
accumulator 是累加器，累积回调函数的结果。
currentValue 是当前被处理的元素。
initialValue 是可选的，是初始值，如果提供了初始值，则它将作为第一次调用回调函数时的第一个参数。
reduce()
    1.遍历数组，将元素跟储存值进行处理，并返储存值
    2.参数是一个回调函数和一个储存初始值，回调函数有四个参数：储存值、元素值、元素下标、数组，回调函数需要返回值
    3.返回一个值（储存值）
    4.不改变原数组
    
// 计算数组元素的总和
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 10，因为 1 + 2 + 3 + 4 = 10

2.3 检索元素的方法

1. indexOf(searchElement, fromIndex)： 返回数组中第一个匹配项的索引，如果没有找到则返回 -1。

indexOf() 查找 参数在数组是否存在  存在返回下标 不存在返回-1
var a = ['a','b','c','d','e']
var b = a.indexOf('c')
var c = a.indexOf('p')
if(a.indexOf('e') == -1){
    console.log('不存在这个参数')
}else{
     console.log('存在这个参数')
}   //存在这个参数

 console.log(a) //[ 'a', 'b', 'c', 'd', 'e' ]
 console.log(b) //2
 console.log(c) //-1
 

2. lastIndexOf(searchElement, fromIndex)： 返回数组中最后一个匹配项的索引，如果没有找到则返回 -1。

let a = [1, 2, 3, 4, 5, 2];
let lastIndex = a.lastIndexOf(2);
// lastIndex的值是 5

3. includes(element, fromIndex)： 判断数组是否包含指定的元素，返回布尔值。

includes 判断数组中是否包含指定值，如果包含返回true，否则返回false
    Array.includes(value)
    参数: 要检测的值
    返回值: arr如果包含value则返回true，否则返回false
let a = [1, 2, 3, 4, 5];
let includes = a.includes(3);
// includes的值是 true

4. every(callback(element, index, array), thisArg): 检测数组中的所有元素是否满足指定条件。它返回一个布尔值。

   callback 是一个测试函数，用来测试每个元素。
   thisArg 是可选的，是执行回调函数时的 this 值。
   every()
       1.检查数组的每个值是否都满足要求，自带循环，每次循环都会调用一次回调函数
       2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）
       3.返回true或false
       4.不改变原数组
       
   // 检查数组中的所有元素是否都大于 10
   const numbers = [12, 15, 18, 20];
   const result = numbers.every((element) => element > 10);
   console.log(result); // 输出 true，因为所有元素都大于 10
   

5. some(callback(element, index, array), thisArg): 检测数组中的某些元素是否满足指定条件。它返回一个布尔值。

  callback 是一个测试函数，用来测试每个元素。
  thisArg 是可选的，是执行回调函数时的 this 值。
   Some()
       1.检查数组的元素是否有满足条件的（刚好跟every相反）
       2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）
       3.返回true或false
       4.不改变原数组
       
   // 检查数组中是否有元素大于 20
   const numbers = [12, 15, 18, 25];
   const result = numbers.some((element) => element > 20);
   console.log(result); // 输出 true，因为有一个元素大于 20

2.4 数组转换的方法

1. toString()： 将数组转换为字符串。

let a = [1, 2, 3];
let arrayString = a.toString();
// arrayString的值是 "1,2,3"

2. join(separator)： 将数组的所有元素连接为一个字符串，并使用指定的分隔符。

join() 将数组的元素组成一个字符串  把数组的所有元素放入一个字符串
元素通过指定的分隔符进行分隔 默认以逗号为分隔 原数组不会改变
var a = [1,2,3]
var b = a.join()
var c = a.join('@')

console.log(a) //[ 1, 2, 3 ]
console.log(b) //1,2,3
console.log(c) //1@2@3

2.5 其他方法

1. isArray(obj)： 判断一个对象是否为数组。

let a = [1, 2, 3];
let isArr = a.isArray(myArray);
// isArr的值是 true

2. find(callback(element, index, array))： 返回数组中第一个满足提供的测试函数的元素值，如果没有找到则返回 undefined。

let a = [1, 2, 3, 4, 5];
let foundElement = a.find(element => element > 2);
// foundElement的值是 3