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

【javascript|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