数组的处理
===================================代码示例===========================================
let arr1 = [1,2,3,4,5] let arr2 = [ {name:'jerry',age:25}, {name:'tom',age:25}, ]
// push arr1.unshift(6) // arr1 = [6,1,2,3,4,5]
// unshift arr1.unshift(6) // arr1 = [6,1,2,3,4,5]
// splice(在index处添加一个元素) arr1.splice(2,0,6) // arr1 = [1,2,6,3,4,5]
// 取数组中的某个元素(开始的下标，取的length个数),得到一个新数组
arr1.splice(2,1) // [3]
arr1.splice(2,2) // [3,4]
// 数组参数位置调换 // 1. [arr1[2], arr1[3]] = [arr1[3], arr1[2]] console.log(arr1) // [1, 2, 4, 3, 5] // 2. let val = arr1[2] arr1[2] = arr1[3] arr1[3] = val console.log(arr) // [1, 2, 4, 3, 5] // 3. arr1[3] = [arr1[2],arr1[2]=arr1[3]][0] console.log(arr1) // [1, 2, 4, 3, 5] //4. arr1.splice(2, 1, ...arr1.splice(3, 1, arr1[2])) console.log(arr1) // [1, 2, 4, 3, 5]
// $set更新数组 (避免页面延迟响应) // 参数1：要处理的数组；参数2：指定的下标处；参数3：要插入的值 this.$set(arr1,1,6) // [1,6,2,3,4,5]
// concat （数组拼接） let a = [1,2,3] let b = ["4","5","6"] let c = a.concat(b) // 得到一个新数组c [1,2,3,"4","5","6"]
// sort （排序，按照 Unicode code 位置排序，默认升序） let arr = ['cherries','apples','bananas'] let newArr = arr.sort() // ['apples','bananas','cherries'] let arr2 = [1,10,21,2] let newArr2 = arr2.sort() // [1,10,2,21]
// reverse (颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组) let newArr = arr1.reverse() // [5,4,3,2,1] console.log(arr) // [5,4,3,2,1]
// 数组转字符串 // join (数组转字符串,是通过指定的分隔符进行分隔，默认使用’,'号分割，不改变原数组) let str = arr1.join() // '1,2,3,4,5' console.log(arr1) // [1,2,3,4,5] // toString let str1 = arr1.toString() // '1,2,3,4,5' console.log(arr1) // [1,2,3,4,5] // toLocaleString let str2 = arr1.toLocaleString() // '1,2,3,4,5' console.log(arr1) // [1,2,3,4,5] // toLocaleString方法功能还可以： // 根据本地时间把 Date 对象转换为字符串 var d=new Date(); var n=d.toLocaleString(); // 2023/8/30 09:38:36 // 将数字转转变成千分位格式 let num=12345678; console.log(num.toLocaleString()); // 12,345,678 // 把时间转换为24小时制 // 2021/10/12 下午7:39:06 console.log(new Date().toLocaleString() // 2021/10/12 19:39:06 console.log(new Date().toLocaleString('chinese',{hour12:false}))
// fill （替换数组内元素，用新元素替换掉数组内的元素，可以指定替换下标范围） // 参数1：替换的新值；参数2：开始位置；参数3：结束位置 let newArr = arr1.fill('a',0,1) // ['a',2,3,4,5]
// 数组查找 // find (查找数组中第一个符合条件的元素，并返回终止搜索) let arr = [1,2,'3',4,'5'] let val = arr.find(n => typeof n === "number") // 1 let val2 = arr.find(n => typeof n === "string") // 3 // findIndex (查找数组中第一个符合条件的元素下标，并返回终止搜索) let arr = [1,2,'3',4,'5'] let arrIndex = arr.findIndexn => typeof n === "number") // 0 let arrIndex2 = arr.findIndexn => typeof n === "string") // 2 // indexOf （从前往后查找,返回下标索引值） // 两个参数：查找的值、查找起始位置(不存在，返回 -1 ；存在，返回位置。) let arr = [1,1,2,2,1] console.log(arr.indexOf(1)) // 0 console.log(arr.indexOf(3)) // -1 不存在 console.log(arr.indexOf(1,2)) // 4 // lastIndexOf (从后往前查找,返回下标索引值) // 两个参数：查找的值、查找起始位置(不存在，返回 -1 ；存在，返回位置。) let arr = [2,5,9,2] arr.lastIndexOf(2) // 3 arr.lastIndexOf(7) // -1 arr.lastIndexOf(2,2) // 0
// pop ()方法用于删除数组列表中的最后一个元素，并返回该元素本身 arr1.pop() // 5 console.log(arr1); // [1,2,3,4]
// slice 取指定元素后，返回新的数组 // arr.slice(begin, end) // begin:从该索引开始提取原数组元素，如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取,此参数缺省为0，如果 begin 超出原数组的索引范围，则会返回空数组 // end:在该索引处结束提取原数组元素，slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）,如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素） // 如果 end 被省略或者大于数组的长度，则 slice 会一直提取到原数组末尾。 let newArr = arr1.slice() // [1,2,3,4,5] arr1.slice(1) // [2, 3, 4, 5] arr1.slice(1,3) // [2, 3]---前包后不包 // arr1.slice(1,3) 取索引1-3直接的元素，包含1但不包含3，也就是索引1,2所对应的元素，故返回[2,3]
// every 方法用于检测数组中所有元素是否都符合指定条件（通过函数提供） // 如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回true // every()不会对空数组进行检测 // every() 不会改变原始数组 function isBig(element,index,array){ return element < 10 } arr1.every(isBig) // 数组arr1中每个元素都小于10，所以返回true
// some 用于检测数组中的元素是否满足指定条件 // 如果一个元素满足条件就返回true，不会继续执行后面的元素判断；没有满足条件则返回false // 不会改变原数组 // some() 不会对空数组进行检测 // some() 不会改变原始数组 function isBig(element,index,array){ return element > 10 } arr1.some(isBig) // false 数组的每个元素值都小于10 // 注意： // every() 每一项都返回true才返回true // some() 只要有一项返回true就返回true
// apply 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数 // Array.apply(thisArg, [argsArray]) // thisArg:必选,在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装 // argsArray:可选,一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象 let arr = Array.apply(null,{length:5}) // [undefined,undefined,undefined,undefined,undefined] // 这里length：5 表示数组长度，好处是数组的每个参数都输undefined，数组可以遍历 // 也可以指定数组的某个元素 let arr = Array.apply(null,{0:'a',1:'b',2:'c',length:5}) // ['a', 'b', 'c', undefined, undefined]
// from 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组 // 如果对象是数组返回 true，否则返回 false // Array.from(object, mapFunction, thisValue) // object：必需，要转换为数组的对象 // mapFunction：可选，数组中每个元素要调用的函数 // thisValue：可选，映射函数(mapFunction)中的 this 对象 // 通过字符串创建一个数组 let arr = Array.from("RUNOOB") // ['R', 'U', 'N', 'O', 'O', 'B'] // 返回集合中包含的对象数组(相当于赋值数组) let arr = [1,2,3] let newArr = Array.from(arr) console.log(arr,newArr) // [1, 2, 3] , [1, 2, 3] // 使用箭头语法和映射函数更改元素的值 let arr=Array.from([1, 2, 3], x => x * 10) console.log(arr) // [10, 20, 30] // 实现数组去重
// 不考虑兼容性，去重的方法代码最少，这种方法还无法去掉‘{}’空对象
// 这个方法就是将一个类数组对象，或者可遍历对象转换成一个真正的数组
let arr = Array.from(new Set([1, 2, 1, 2])) console.log(arr) //[1, 2] // 可以将一个伪数组转换为数组 // 这里key值不按常理出牌所以无效，但规定了 length 所以输出: 四个 undefined let obj={'a':1,'b':2,'c':3,'length':4} let arr=Array.from(obj, item => {return item}) console.log(arr) // [undefined, undefined, undefined, undefined] // 指定特定索引值 let obj = { '0': 1, '3': 2, 'length': 4, } let newObj= Array.from(obj, item => {return item}) console.log(newObj); // [1, undefined, undefined, 2]
// of 用于将一组值，转换为数组 // 返回参数值组成的数组。如果没有参数，就返回一个空数组 Array.of(); // [] Array.of(3); // [3] Array.of(3,2,1); // [3,2,1]
// includes 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false let site = ['runoob', 'google', 'taobao']; site.includes('runoob'); // true site.includes('baidu'); // false [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true
// filter 返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 // filter() 不会对空数组进行检测 // filter() 不会改变原始数组 // 返回数组 ages 中所有元素都大于 18 的元素: let ages = [32, 33, 16, 40];function checkAdult(age) { return age >= 18;} function myFunction() { document.getElementById("demo").innerHTML = ages.filter(checkAdult);} // 返回数组被2整除的 let arr = [1, 6, 9, 10, 100, 25]; let result = arr.filter(function (item) { if (item % 2 == 0) { return true; } else { return false; } }) let result2 = arr.filter(v=>v%2 === 0) console.log(result); // [6, 10, 100] console.log(result2); // [6, 10, 100]
// 数据去重
// 1.利用filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
// 2.利用hasOwnProperty 判断是否存在对象属性
function unique(arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
// forEach 遍历数组 let res = arr1.forEach(function(item,index) { console.log(`数组第${index+1}个元素是${item}`); }) console.log(res); //forEach的返回值为undefined // forEach()是没有返回值的 // 运行结果 // 数组第1个元素是1 // 数组第2个元素是2 // 数组第3个元素是3 // 数组第4个元素是4 // 数组第5个元素是5 // forEach()和for循环区别: // 1. forEach() 方法无法提前结束 // 如，想要找到某个满足条件的元素时就结束循环。在for语句中可以这样写 let arr = [1, 3, 5, 13, 2]; // for语句执行了2次，在第二次找到了数组中的3，并结束了循环 for (var i = 0; i < arr.length; i++) { if (arr[i] == 3) { console.log("找到了3，并结束循环"); break; } console.log(arr[i]); } // forEach在找到3之后用return结束遍历，结果仍然输出了3后面的元素 arr.forEach(function(item) { if (item == 3) { return console.log('找到了3，但未结束遍历'); } console.log(item); }) // 终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足某种条件然后返回某值，可以用一般的for循环实现，或者用Array.every()或者Array.some() // 2.forEach()会跳过空值 let arr1 = [1, 3, , 13, 2]; let arr2 = [1, 3, , 13, 2]; for (var i = 0; i < arr1.length; i++) { arr1[i] = 2; } console.log(arr1); // 运行结果【2,2,2,2,2】 let newarr = []; arr2.forEach(function(item, index) { // item = 2; //修改不了原数组 arr2[index] = 2; }) console.log(arr2); // 运行结果【2,2,empty,2,2】 // 可以发现，for循环对于数组中的空值进行了修改，而forEach()方法跳过了空值 // 要注意的是，用forEach()方法修改数组元素不能使用item直接修改，item相当于从arr2中复制过来的值，并不是真正指向原数组arr2里面的元素。所以我们想要修改原数组的每个元素必须通过拿到它的索引值index去进行修改:arr2[index] = 2 // 3.forEach()的循环次数由数组初始长度决定 // for循环时，向数组中添加数据，循环次数也增加了。而forEach()方法却只循环数组的初始长度 // 总结：forEach适用于只是进行集合或数组遍历，for则在较复杂的循环中效率更高
// for 循环数组去重
// 1.利用for 嵌套for 实现数组去重（es5最常用）
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]){
arr.splice(j,1);
j--;
}
}
}
retrun arr;
}
// 2.利用indexOf去重
let arr = [1,2,2,3,4,5,6]
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;
}
console.log(unique(arr)) // [1,2,3,4,5,6]
// 3.利用sort()去重
// 利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
function unique(arr) {
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;
}
// 4.利用includes去重
function unique(arr) {
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
// map 通过指定函数处理数组中的每一个元素， // 一个处理后的新数组 // map()不会对空数组进行检测 // map()不会改变原始数组 let arr=[1,2,3] arr.amp(x => x*2); // [2, 4, 6] console.log(arr) // [1,2,3]
// 利用map 数据结构去重
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map .has(arr[i])) { // 如果有该key值
map .set(arr[i], true);
} else {
map .set(arr[i], false); // 如果没有该key值
array .push(arr[i]);
}
}
return array ;
}
// 其他的数组去重方法 // 1. 利用递归去重 function unique(arr) { var array= arr; var len = array.length; array.sort(function(a,b){ //排序后更加方便去重 return a - b; }) function loop(index){ if(index >= 1){ if(array[index] === array[index-1]){ array.splice(index,1); } loop(index - 1); //递归loop，然后数组去重 } } loop(len-1); return array; } // 2.利用 reduce+includes function unique(arr){ return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]); } // 3.[...new Set(arr)] [...new Set(arr)]
