JS数组操作与方法
Posted 回眸丶一眨___间
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS数组操作与方法相关的知识，希望对你有一定的参考价值。
javascript数组方法
一、操作数组的方法
把数组转换为字符串 Array.join(str)
join()方法行为类似toString(),将数组转换为字符串，但是join方法可以使用参数str自定义分割符
[\'wfewfe\', \'123123\'].toString() // "wfewfe,123123" [\'wang\', \'shao\', \'jie\'].join(\'-\') // "wang-shao-jie"删除数组中最后一个元素pop(), 返回值为被删除的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango"- 向数组中添加数据，push()方法向数组末尾处添加一个元素；unshift()方法向数组头部处添加一个元素，返回新数组的长度
- 从数组中删除数据，shift()方法删除数组第一个元素，返回被删除元素值；<u>注意：</u>使用delete删除数组中元素会把删除位置的元素置为undefined，
splice()方法既能删除元素也能添加元素，Array.splice(index, howmany, item1,...., itemX),该方法返回值为被删除元素组成的数组。在不传递item1...i,temX参数的时候意为删除数组index位置开始howmany个元素。
参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。 concat()方法通过合并（连接）现有数组来创建一个新数组，Array.concat(arr1,...,arrX),该方法参数可以为任意个数组也可以是具体的值
[1,2,3,4,5,6].concat([1,2,3,4,5]) // 返回 [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5] [1,2,3,4].concat(11,22) // 返回 [1, 2, 3, 4, 11, 22]reverse()数组反转，用于将数组的元素顺序反转
const arr = [111, 222, 333, 444] console.log(arr.reverse()); // [444, 333, 222, 111]sort()方法用于对数组元素进行排序， 使用形式为Array.sort(sortby)，参数sortby可选，它规定排序顺序，必须为函数。需要注意的是：当对数值数组进行排序时，sortby参数必须为一个排序函数：
const arr = [111, 222, 333, 444, 123, 435, 42] // console.log(arr.sort()); // [111, 123, 222, 333, 42, 435, 444] // console.log(arr.sort((a, b) => a - b)); // [42, 111, 123, 222, 333, 435, 444] console.log(arr.sort((a, b) => b - a)); // [444, 435, 333, 222, 123, 111, 42]- includes()方法用于检测数组中是否存在某值，用法Array.includes(value)，如果value存在与数组中返回true，否则返回false
from()方法用于将类数组对象转化为真正的数组，最基本的要求是具有length属性的对象
const arrayLike = { 0: \'tom\', 1: \'65\', 2: \'男\', 3: [\'jane\',\'john\',\'Mary\'], \'length\': 4 } let arr = Array.from(arrayLike) console.log(arr) // [\'tom\',\'65\',\'男\',[\'jane\',\'john\',\'Mary\']] -------------------------------------------------------------------------------- // 属性名不是数值时转化失败 let arrayLike = { \'name\': \'tom\', \'age\': \'65\', \'sex\': \'男\', \'friends\': [\'jane\',\'john\',\'Mary\'], length: 4 } let arr = Array.from(arrayLike) console.log(arr) // [ undefined, undefined, undefined, undefined ]
from可以将Set结构的数据转化为真正的数组
二、遍历数组的方法
（1）for
const array = [1,2,3,4]
for(i = 0; i < array.length; i++) {
console.log(array[i]) // 依次打印array中元素
}（2）forEach
// 遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
[1,2,3,4,5].forEach(item, index, array) => {
// item为遍历数组的当前项， index为当前索引值， array为原始数组
}
// 遍历引用类型，如对象数组，没有返回值，可以改变原数组。注意：不能改变单个循环中的整个item，只能改变item下的属性
const arr = [
{
name: \'wang\',
sex: \'man\',
status: \'finish\'
},
{
name: \'wang2\',
sex: \'man2\',
status: \'finish\'
}
]
arr.forEach(item => {
if(item.name === \'wang\') {
item.status = \'done\'
}
})
console.log(arr);
// 0: {name: "wang", sex: "man", status: "done"}
//1: {name: "wang2", sex: "man2", status: "finish"}（3）map
// 遍历数组，有返回值，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
const arr = [\'wang\', \'shao\']
const arr2 = arr.map(item => {
return item += \'1\'
})
console.log(arr); // [\'wang\', \'shao\']
console.log(arr2); // [\'wang1\', \'shao1\']（4）for of
const arr = [1,2,3,4,5,6]
for (const value of arr) {
console.log(value); // 依次打印数组中每个元素
}（5）filter
//不会改变原始数组，返回新数组， filter 译为过滤，使用指定条件挑选出符合条件的元素组成数组
const arr = [
{ id: 1, text: \'aa\', done: true },
{ id: 2, text: \'bb\', done: false },
{ id: 2, text: \'bb\', done: true },
{ id: 2, text: \'bb\', done: true },
]
console.log(arr.filter(item => item.done))
// 0: {id: 1, text: "aa", done: true}
// 1: {id: 2, text: "bb", done: true}
// 2: {id: 2, text: "bb", done: true}
（6）every
// 遍历数组，对每一个元素运行指定函数，如果该函数对每一项都返回true则返回true
const arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
// false（7）some
// some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
const arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
// true（8）reduce
// reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}); // 返回10
const arr = [
{ id: 1, text: \'aa\', done: true, num: 11 },
{ id: 2, text: \'bb\', done: false, num: 22 },
{ id: 3, text: \'bb\', done: true, num: 33 },
{ id: 4, text: \'bb\', done: true, num: 44 }
]
const temp = arr.reduce((previousValue, currentValue) => {
return previousValue + currentValue.num
}, 0) // 返回110reduce高级用法
1.累加累乘
function Accumulation(...vals) {
return vals.reduce((t, v) => t + v, 0);
}
function Multiplication(...vals) {
return vals.reduce((t, v) => t * v, 1);
}
Accumulation(1, 2, 3, 4, 5); // 15
Multiplication(1, 2, 3, 4, 5); // 120 2.权重求和
const scores = [
{ score: 90, subject: "chinese", weight: 0.5 },
{ score: 95, subject: "math", weight: 0.3 },
{ score: 85, subject: "english", weight: 0.2 }
];
const result = scores.reduce((t, v) => t + v.score * v.weight, 0); // 90.5 3.代替reverse
function Reverse(arr = []) {
return arr.reduceRight((t, v) => (t.push(v), t), []);
}
Reverse([1, 2, 3, 4, 5]); // [5, 4, 3, 2, 1] 4.代替map和filter
const arr = [0, 1, 2, 3];
// 代替map：[0, 2, 4, 6]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);
// 代替filter：[2, 3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);
// 代替map和filter：[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []); 5.代替some和every
const scores = [
{ score: 45, subject: "chinese" },
{ score: 90, subject: "math" },
{ score: 60, subject: "english" }
];
// 代替some：至少一门合格
const isAtLeastOneQualified = scores.reduce((t, v) => v.score >= 60, false); // true
// 代替every：全部合格
const isAllQualified = scores.reduce((t, v) => t && v.score >= 60, true); // false 6.数组过滤
function Difference(arr = [], oarr = []) {
return arr.reduce((t, v) => (!oarr.includes(v) && t.push(v), t), []);
}
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 6]
Difference(arr1, arr2); // [1, 4, 5] 7.数组成员特性分组
function Group(arr = [], key) {
return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
}
const arr = [
{ area: "GZ", name: "YZW", age: 27 },
{ area: "GZ", name: "TYJ", age: 25 },
{ area: "SZ", name: "AAA", age: 23 },
{ area: "FS", name: "BBB", age: 21 },
{ area: "SZ", name: "CCC", age: 19 }
]; // 以地区area作为分组依据
Group(arr, "area"); // { GZ: Array(2), SZ: Array(2), FS: Array(1) } 8.url参数序列化
function StringifyUrlSearch(search = {}) {
return Object.entries(search).reduce(
(t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
Object.keys(search).length ? "?" : ""
).replace(/&$/, "");
}
StringifyUrlSearch({ age: 27, name: "YZW" }); // "?age=27&name=YZW" （9）reduceRight
//reduceRight功能与reduce基本相同，不同的是reduceRight是从末尾开始操作数组（10）find
//find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.find(item => item>4)
console.log(result); // 5
（11）findIndex
//find()方法返回数组中符合测试函数条件的第一个元素的索引值。否则返回-1
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.findIndex(item => item>10)
console.log(result); // -1（12）keys, values, entries
//Array.keys() 依次取出数组的索引值
//Array.values() 依次取出数组的元素值
//Array.entried() 依次取出数组的索引值和元素值
const arr = [111, 222, 333, 444]
for (let i of arr.keys()) {
console.log(i);
}
// 0 1 2 3
for (let i of arr.values()) {
console.log(i);
}
// 111 222 333 444
for (let [i, v] of arr.entries()) {
console.log(i, v);
}
// 0 111 1 222 2 333 3 444三、数组去重
1.ES6 Set去重
function unique (arr) {
return Array.from(new Set(arr))
}2.双循环数组切割去重
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}3.利用indexOf去重
新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
function unique(arr) {
if (!Array.isArray(arr)) {
console.log(\'type error!\')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}4.利用sort()
利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
function unique(arr) {
if (!Array.isArray(arr)) {
console.log(\'type error!\')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}5.利用includes()
function unique(arr) {
if (!Array.isArray(arr)) {
console.log(\'type error!\')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}6.利用reduce+includes
includes判断reduce中的前一个数组是否存在下一个元素
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}以上是关于JS数组操作与方法的主要内容，如果未能解决你的问题，请参考以下文章