JavaScript中操作数组的方法示例介绍

好多数组的操作方法发现有些都不记得了，这里总结了一些基本的操作方法，可能不是很多，大家可以在评论区补充，话不多说，上代码

// 1. concat 
// 合并数组 
// 需要合并的数组 
// 合成之后的数组 
// 原有数组没有被改变
var concatArr1 = [1, 2, 3, 4]
var concatArr2 = [5, 6, 7, 8]
var concatArr3 = [9, 10]
var concatAdd = concatArr1.concat(concatArr2, concatArr3)
console.log(concatArr1, concatArr2, concatArr3);
console.log(concatAdd);
// 2. copyWithin 
// 复制前面几位数据替换掉后面几位数据 
// 1.复制数据多少位。2.元素复制的起始位置。3.停止复制的索引位置 
// 返回值：更改后的数据 
// 原有数组被改变
var copyWithinArr = [1, 2, 3, 4, 5, 6, 7]
copyWithinArr.copyWithin(2, 0, 2)
console.log(copyWithinArr);
// 3. entries 
// 查询数组的下标和值 
// 无 
// 使用一个变量接受再使用next方法,进行下一个值, 这个方法实在鸡肋
// 返回值：第n条数据的下标和值
// 原有数组没有被改变
var entriesArr = ['张三', '李四', '王五', '赵六']
var entriesArrReturn = entriesArr.entries()
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
// 4.every
// 查询数组中是否所有的都符合条件
// 数组
// true 或 false
// 不改变原数组
var everyArr = [10, 15, 20, 30]
function everyfilter(item) {
    return item < 40
}
console.log(everyArr.every(everyfilter));
// 5.fill
// 使用固定值替换掉数组的所有值
// 需要换成的新值
// 改变后的数组
// 改变原数组
var fillArr = ['张三', '李四', '王五', '赵六']
fillArr.fill('李四')
console.log(fillArr);
// 6.filter
// 过滤数组
// 回调函数
// 改变后的数组
// 不改变原数组
var filterArr = [10, 20, 30, 40, 50, 60, 17]
var filterList = filterArr.filter(i => {
    return i > 20
})
console.log(filterList);
// 7.find
// 查找到数组中符合条件的第一个元素
// 回调函数
// 符合条件的第一个值
// 不改变原数组
var findArr = [1, 2, 3, 4, 5, 6, 7]
console.log(findArr.find((a) => {
    return a > 3
}));
// 8.findIndex
// 查找到数组中符合条件的第一个元素的下标
// 回调函数
// 符合条件的第一个值的下标
// 不改变原数组
var findIndexArr = [1, 2, 3, 4, 5, 6, 7]
console.log(findIndexArr.findIndex((a) => {
    return a > 3
}));
// 9.forEach
// 循环遍历数组
// 回调函数
// 数组中的每一个值，和下标，第三个值是当前的数组
// 不改变原数组
var forEachArr = ['a', 'b', 'c', 'd']
forEachArr.forEach((element, index) => {
    console.log(element, index);
});
// 10.from
// 将拥有length属性的对象转换成一个数组
// 需要转换的值
// 转换成功的数组
// 改变原本的字符串或者伪数组
var fromStr = Array.from('sfhoisjfp')
console.log(fromStr);

// 11.includes
// 查找数组中是否拥有该值
// 查询的值
// true或者false
// 不改变原数组
var includesArr = [10,20,30,50,90]
console.log(includesArr.includes(10));
// 12.indexOf
// 查找数组中是否拥有该值
// 查询的值
// 返回第一个相同的值的下表，没有相同的值的话返回-1
// 不改变原数组
var indexOfArr = [20,30,50,90,10]
console.log(indexOfArr.indexOf(10));
// 13.isArray
// 查看当前值是否是一个数组
// 查询的值
// true或false
// 不改变原数组
var isArrayArr = []
console.log(Array.isArray(isArrayArr));
// 14. join
// 将数组转换成字符串
// 将数组改变后的字符串
// 符号，可以将转换之后的默认逗号替换掉，或者填and可以去掉符号
// 不改变原数组
var joinArray = ["Banana", "Orange", "Apple", "Mango"];
var joinStr = joinArray.join('/');
console.log(joinStr);
// 15.fruit 
// 取出数组的下表默认拿第一个再次调用next方法可以获取下个值的下标
// 无
// 下表
// 不改变原数组
var fruitArray = ["Banana", "Orange", "Apple", "Mango"];
var index = fruitArray.keys()
console.log(index.next().value);
console.log(index.next().value);
console.log(index.next().value);
console.log(index.next().value);
// 16.lastIndexOf
// 查找最后一个相同的值的下标
// 一个需要寻找的值
// 最后一个符合条件值的下标，没有就返回-1
// 不改变原数组
var lastIndexOfArr = [10, 20, 30, 40, 10, 20, 10]
console.log(lastIndexOfArr.lastIndexOf(77));
//17.map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
// map() 方法按照原始数组元素顺序依次处理元素。
// 注意： map() 不会对空数组进行检测。
// 注意： map() 不会改变原始数组。
// 18.pop() 方法用于删除数组的最后一个元素并返回删除的元素。
// 注意：此方法改变数组的长度！
var popArray = ["Banana", "Orange", "Apple", "Mango"];
popArray.pop();
console.log(popArray);//Banana,Orange,Apple
// 19.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
// 注意： 新元素将添加在数组的末尾。
// 注意： 此方法改变数组的长度。
var pushArr = ["Banana", "Orange", "Apple", "Mango"];
pushArr.push("Kiwi")
console.log(pushArr);//Banana,Orange,Apple,Mango,Kiwi
// 20.reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）
// 开始缩减，最终计算为一个值。
// reduce() 可以作为一个高阶函数，用于函数的 compose。
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

// 21.reduceRight() 方法的功能和 reduce() 功能是一样的，
// 不同的是 reduceRight()从数组的末尾向前将数组中的数组项做累加。
// 注意: reduce() 对于空数组是不会执行回调函数的。
// 22.reverse() 方法用于颠倒数组中元素的顺序。
var reverseArr = ["Banana", "Orange", "Apple", "Mango"];
reverseArr.reverse(); 不改变原数组
// 23.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
// 注意： 此方法改变数组的长度！
var shiftArr = ["Banana", "Orange", "Apple", "Mango"];
shiftArr.shift() //Orange,Apple,Mango
// 24.slice() 方法可从已有的数组中返回选定的元素。
// slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
// 注意： slice() 方法不会改变原始数组。
var sliceArr = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var sliceNew = sliceArr.slice(1, 3);//Orange,Lemon
// 25.some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
// some() 方法会依次执行数组的每个元素：
// 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
// 如果没有满足条件的元素，则返回false。
// 注意： some() 不会对空数组进行检测。
// 注意： some() 不会改变原始数组。
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);//true
}
// 26.sort() 方法用于对数组的元素进行排序。
// 排序顺序可以是字母或数字，并按升序或降序。
// 默认排序顺序为按字母升序。
// 注意：当数字是按字母顺序排列时"40"将排在"5"前面。
// 使用数字排序，你必须通过一个函数作为参数来调用。
// 函数指定数字是按照升序还是降序排列。
// 这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。
// 注意： 这种方法会改变原始数组！。
var sortArr = ["Banana", "Orange", "Apple", "Mango"];
sortArr.sort();//Apple,Banana,Mango,Orange
// 27.splice() 方法用于添加或删除数组中的元素。
// 注意：这种方法会改变原始数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");//Banana,Orange,Lemon,Kiwi,Apple,Mango
// 28.toString() 方法可把数组转换为字符串，并返回结果。
// 注意： 数组中的元素之间用逗号分隔。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();//Banana,Orange,Apple,Mango
// 29.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
// 注意： 该方法将改变数组的数目。
var unshiftArr = ["Banana", "Orange", "Apple", "Mango"];
unshiftArr.unshift("Lemon", "Pineapple");//Lemon,Pineapple,Banana,Orange,Apple,Mango
// 30.valueOf() 方法返回 Array 对象的原始值。
// 该原始值由 Array 对象派生的所有对象继承。
// valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
// 注意： valueOf() 方法不会改变原数组。
var valueOfArr = ["Banana", "Orange", "Apple", "Mango"];
var v = valueOfArr.valueOf();//Banana,Orange,Apple,Mango