开发者社区> cometwo123> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript数组常用方法

简介:
+关注继续查看

判断某个对象是否是数组: instanceof、Array.isArray()

对于一个网页或者一个全局作用域可以使用instanceof操作符。

if(value instanceof Array){  //判断value是否是数组
    
}

instanceof操作符它假设只有一个全局执行环境,如果网页包含多个框架则使用ECMAScript5新增的Array.isArray()方法。

if(Array.isArray(value)){//判断value是否是数组

}

Array.isArray()方法支持的浏览器有IE9+、Firefor 4+、Safari5+、Opera 10.5+、Chrome。

如果要在未实现这个方法中的浏览器中检查数组,则使用:

if(Object.prototype.toString.call(value)=="[object Array]"){

}

将数组转换为字符串: toLocaleString()、toString()、valueOf()、join()

复制代码
复制代码
var test=['a','b','c'];
alert(test.toString());//a,b,c
alert(test.toLocaleString());//a,b,c
alert(test.valueOf());//a,b,c
alert(test);//a,b,c 默认调用toString()方法

alert(test.join(','));//a,b,c
alert(test.join('|'));//a|b|c
复制代码
复制代码

添加和移除数组元素方法:push()、pop()、unshift()、shift()

push()方法可以接受任意数量的参数,把他们逐个加到数组末尾,并且返回数组修改后的数组长度

pop()方法从数组末尾移除最后一项,然后返回移除的项

unshift()方法在数组前端添加任意数量的参数并返回新数组长度

shift()方法能够移除数组中第一个项并返回移除的项

复制代码
复制代码
var test=[];
var count = test.push('a','b');//从数组末尾逐个添加
count =test.push('c');
alert(count);//3
alert(test);//


var item = test.pop();
alert(item);//c
alert(test.length);//2
复制代码
复制代码

排序方法:reverse()和sort()

reverse()方法会反转数组项顺,操作数组本身

sort()方法默认按升序排列数组项,操作数组本身

复制代码
复制代码
var test=[1,2,3,4,5];
test.reverse();
alert(test);//5,4,3,2,1

var test2=[0,1,5,10,15];
test2.sort();
alert(test2);//0,1,10,15,5    sort()方法会调用每个数组项的toString()方法,比较字符串,以确定排序。所以这里排序是字符串排序
复制代码
复制代码

 

sort()方法还可以传入一个比较函数。

比较函数在第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,第一个参数应该位于第二个之后则返回一个正数。

复制代码
复制代码
function compare(value1,value2){
    if(value1<value2){
        return -1;
    }else if(value1>value2){
        return 1;
    }else{
         return 0; 
    }
      
}    

var test=[0,1,5,10,15];
test.sort(compare);
alert(test);//0,1,5,10,15   
复制代码
复制代码

操作方法:concat()、slice()、splice()

concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。返回一个新的数组。

复制代码
复制代码
var a = [1,2,3];
alert(a.concat(4,5));//1,2,3,4,5

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
alert(arr.concat(arr2));
//George,John,Thomas,James,Adrew,Martin


var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
alert(arr.concat(arr2,arr3))
//George,John,Thomas,James,Adrew,Martin,William,Franklin
复制代码
复制代码

 

slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

var test =['a','b','c','d','e'];
var arr1=test.slice(1);
var arr2=test.slice(1,4);
alert(arr1);//b,c,d,e
alert(arr2);//b,c,d

 

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。操作数组本身

第一个参数:起始位置、第二个参数:截取的个数、第三个参数:追加的新元素。

复制代码
复制代码
//删除
var test=['a','b','c'];
var removed=test.splice(0,1)//删除第一项
alert(test);//b,c
alert(removed);//a 返回被删除的项

//插入
var test2=['a','b','c'];
var removed2=test2.splice(1,0,'d','e')//从位置1开始插入d,e
alert(test2);//a,d,e,b,c
alert(removed2)//空数组

//替换
var test3=['a','b','c'];
var removed3=test3.splice(1,1,'d','e')//从位置1开始插入d,e
alert(test3);//a,d,e,c
alert(removed3)//b
复制代码
复制代码

位置方法:indexOf()、lastIndexOf()

ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

 一个参数时:表示要查找的值,返回索引位置(从0开始)、两个参数时:第一个参数表示要查找的值,第二个参数表示起始位置。

复制代码
复制代码
var numbers=[1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));//3
alert(numbers.lastIndexOf(4));//5

alert(numbers.IndexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//3

  var arr=['a','b','c','d','e','f','g']; 
  alert(arr.indexOf('g',2));//6
  alert(arr.lastIndexOf('c',5));//2

复制代码
复制代码

迭代方法:every()、filter()、forEach()、map()、some()

ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组

forEach():对数组中的每一项运行给定函数,这个方法没有返回值

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

以上函数都不会修改数组中包含的值。

复制代码
复制代码
var numbers=[1,2,3,4,5,4,3,2,1];
//every()
var everyResult=numbers.every(function(item,index,array){
      return (item>2); 
})
alert(everyResult);//false

//some()
var someResult=numbers.some(function(item,index,array){
      return (item>2); 
})
alert(someResult);//true

//filter()
var filterResult=numbers.filter(function(item,index,array){
      return (item>2); 
})
alert(filterResult);//[3,4,5,4,3]


//map()
var mapResult=numbers.map(function(item,index,array){
      return (item*2); 
})
alert(mapResult);//[2,4,6,8,10,8,6,4,2]


//forEach()
numbers.forEach(function(item,index,array){
      //执行操作 无返回值
})
 
复制代码
复制代码

归并方法:reduce()、reduceRight()

 ECMAScript5提供方法支持浏览器:IE9+、Firefox 3+、Safari 4+、Opera 10.5+、Chrome

 两个方法都会迭代数组的所以项,然后构建一个最终返回的值。reduce()方法从数组第一项开始,reduceRight()方法从数组最后开始。

var values=[1,2,3,4,5];
var sum=valuse.reduce(function(prev,cur,index,array){
         prev+cur;
});
alert(sum);//15

 

最近读了一些有关于ES6的文章,觉得真是一个超级大的进步,就是不知道兼容性怎么样,鉴于我还在初学,先写个小例子练手,顺便时刻提醒自己要坚持学下去。未来的趋势肯定是替代es5没跑了。

1
2
3
4
5
6
7
var arr=[1,2,1,3,2,4,5,1,3];
var setArr=new Set(arr);
var newArr=[];
setArr.forEach(function(e){
    newArr.push(e);
});
console.log(newArr);

利用set实现去重


 set是es6里新提出的一个集合的概念,类似于数组arr,同样不只是数字类型,其他类型的数据如字符串等也是支持的,set有个和数组不同的特性就是重复的元素加入集合中是无效的,因此一个数组,利用set.add来加入到这个集合中来就自动实现了去重的步骤。

以下是Set支持的所有操作:

  • new Set:创建一个新的、空的Set
  • new Set(iterable):从任何可遍历数据中提取元素,构造出一个新的集合。
  • set.size:获取集合的大小,即其中元素的个数。
  • set.has(value):判定集合中是否含有指定元素,返回一个布尔值。
  • set.add(value):添加元素。如果与已有重复,则不产生效果。
  • set.delete(value):删除元素。如果并不存在,则不产生效果。.add().delete()都会返回集合自身,所以我们可以用链式语法。
  • set[Symbol.iterator]():返回一个新的遍历整个集合的迭代器。一般这个方法不会被直接调用,因为实际上就是它使集合能够被遍历,也就是说,我们可以直接写for (v of set) {...}等等。
  • set.forEach(f):直接用代码来解释好了,它就像是for (let value of set) { f(value, value, set); }的简写,类似于数组的.forEach()方法。
  • set.clear():清空集合。
  • set.keys()set.values()set.entries()返回各种迭代器,它们是为了兼容Map而提供的

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 数组常见操作(一)
数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录和总结。
55 0
JavaScript 数组常见操作 (二)
数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录和总结。
28 0
javascript中的数组操作
1、数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值     要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
698 0
Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此继续之?当狠心深学下方是正道。 原文链接: http://www.
930 0
JavaScript中对数组的操作
原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式。如:       .var arr = [12,3,5,8];       .var arr = new Array(12,3,5,8);       .两则功能作用完全一样,没有任何差别,第一种的性能略高,因为代码短 二:数组的属性 1.Length:数组的length属性既可以获取,又可以设置。
651 0
Javascript 之 数组操作
Javascript 之 数组操作 1、数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值     要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
708 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的对象
立即下载
Javascript中的函数
立即下载
Javascript异步编程
立即下载