视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript常用数组操作的介绍(代码示例)
2020-11-27 19:26:48 责编:小采
文档


Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

替换方案:

Array.prototype.distinct = function(){
 var arr = this,
 result = [],
 i,
 j,
 len = arr.length;
 for(i = 0; i < len; i++){
 for(j = i + 1; j < len; j++){
 if(arr[i] === arr[j]){ 
 j = ++i;
 }
 }
 result.push(arr[i]);
 }
 return result;
}
[1,2,3,3,4,4].distinct(); //[1,2,3,4]

数组去重合并

function combine(){ 
 let arr = [].concat.apply([], arguments); //没有去重复的新数组 
 return Array.from(new Set(arr));
} 
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));

排序Array.sort()

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序

替换方案:升序

Array.prototype.bubleSort=function () {
 let arr=this,
 len = arr.length;
 for (let outer = len; outer >= 2; outer--) {
 for (let inner = 0; inner <= outer - 1; inner++) {
 if (arr[inner] > arr[inner + 1]) {
 //升序
 [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
 //console.log([arr[inner], arr[inner + 1]]);
 }
 }
 }
 return arr;
}
[1,2,3,4].bubleSort(); //[1,2,3,4]

求数组中最大值Math.max()

返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字,则会返回 NaN。

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
 return Math.max(prev,cur);
},0) //4
Math.max()是Math对象内置的方法,参数是字符串;
reduce是ES5的数组api,参数有函数和默认初始值;
函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)

求和 reduce

[1,2,3,4].reduce(function (prev, cur) {
 return prev + cur;
},0)

替换方案:求和,利用slice截取改变数组,再利用递归求和

function sum(arr) {
 var len = arr.length;
 if(len == 0){
 return 0;
 } else if (len == 1){
 return arr[0];
 } else {
 return arr[0] + sum(arr.slice(1));
 }
}
sum([1,2,3,4]);

合并concat

concat()方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply( ['parsnip', 'potato'], ['celery', 'beetroot']);
console.log(vegetables);

替换方案:

let arr=[1,2,3,4];
[5,6].map(item=>{
 arr.push(item)
}) //arr值为[1,2,3,4,5,6]

判断是否包含值

includes(),find(),findIndex()是ES6的api

[1,2,3].includes(4)//false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3) //2 如果数组中无值返回-1

替换方案:

[1,2,3].some(item=>{
 return item===3
}) //true 如果不包含返回false

类数组转化 Array.from() — ES6

类数组:具有长度的属性,但是属性是非负整数。它不具有数组的一些方法,但是不意味着它不能使用数组的方法。
比如:document.getElementsByTagName('p')返回的值为类数组
call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
Array.from是将类似数组或可迭代对象创建为数组
数组对象中slice()方法是在不操作原数组的基础上切割数组,可以称之为浅拷贝

var a={
 0:"aa",
 1:"cc",
 2:"dd",
 length:3
}
var callArr = Array.prototype.slice.call(a);
var applyArr = Array.prototype.slice.apply(a)
var fromArr = Array.from(a)
console.log(a,callArr, applyArr, fromArr);

Array.prototype.slice理解:

Array.prototype.slice = function(start,end){
 var result = new Array();
 start = start || 0;
 end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键
 for(var i = start; i < end; i++){
 result.push(this[i]);
 }
 return result;
}

循环 fill -- ES6

[1,2,3].fill(1)
[1,2,3].map(()=>0)

every -- ES5;每一项是否都满足条件,返回布尔值

 [1,2,3].every(item=>{return item>2})// false

some 只要有一项满足,返回布尔值

 [1,2,3].some (item=>{return item>2})// true

过滤数组 filter -- ES5

方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

[1,2,3].filter(item=>{return item >=2 });

对象和数组转化keys,values,entries,

fromEntries

Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox
输出{name:'张三',age:14}

new Map() 构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map:

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

【相关推荐:JavaScript视频教程】

下载本文
显示全文
专题