Array 中各类函数如何使用

Array 中各类函数如何使用

BUG集散地

2018-08-31 09:19 阅读 27 喜欢 0 array的函数理解 array的api

对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性? 接下来我们一起走进JS原生对象Array的世界中.

Array如何创建

1.空数组

     var array = new Array();

我们可以通过new指令直接创建一个空的数组,返回一个length为0的数组,并赋值给array变量,这是常见的创建方式之一。

2.指定长度数组

    var array = new Array(size);

通过传递size参数,指定数组的长度,返回一个length为size的数组,赋值给变量array。

3.指定内容的数组

    var array = new Array(element1,element2,element3...);

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

4.单维数组

    var array = [元素1,元素2,元素3...];

图例

5.多维数组

    var array = [[元素a1,元素a2..],[元素b1,元素b2..],[元素c1,元素c2..]...

Array 有哪些属性

constructor : 返回创建此对象的数组函数的引用 length : 返回该数组的长度 prototype : 通过他增加属性和方法定义进行拓展数组定义

constructor : 返回引用,同时可以通过他来判断是否是某个对象

    var a= new Array();
    if(a.constructor == Array){
      console.log('this is an array');
    }

prototype : 能够向Array原型中添加自定义属性和方法

    Array.prototype.mytest = function(){
      alert(this.length);
    }
    var array = new Array();
    array.mytest();//alert "0"

这样我们就可以丰富Array原型的方法和属性了。

Array 基本操作
  1. 存取数组元素

    • 单维数组:数组名[下标索引]
      var array = ['a','b','c'];
      console.log(array[0]);// logs 'a' 
    • 多维数组:数组名[外层下标索引][内层下标索引]
      var array = [['a','b','c'],['d','e','f'],['g','h','j']];
      console.log(array[0][1]);//logs 'b' 
      同单维一样,先取出其中的数组元素,在根据内层下标取出想要的值。 特点:

      数组的长度是弹性的,可以自由伸缩

      var array = new Array(); //长度为 0
      array.push(1);//长度为1

      数组下标从0开始 下标类型:  数值:array[1]; 直接取出第二个元素  非数值:array['1'];  当下标为非数值的时候通常会转化为字符串或者直接作为对象的属性的名字

  2. 增加数组 通过”[]“运算符指定一个新下标 通过自带函数增加元素:push/unshift/concat

  3. 删除数组 delete 数组名[下标] 通过自带的函数删除元素:pop /shift

  4. 遍历数组

     for ( var 数组元素变量 in 数组名)
     for(var index=0;index<数组名.length;index++)
Array的函数

先列一下都有哪些函数。 push() : 在数组末尾添加数组 unshift() : 在数组头部添加元素 concat() : 合并两个数组 pop() : 删除并返回数组的最后一个元素 shift(): 删除并返回数组的第一个元素 slice() : 从已有数组中选取部分元素构成一个新的数组 splice(): 1.删除任意数量的元素;2.在指定位置插入指定的元素;3.替换任意数量的元素 reverse():颠倒数组中元素的顺序 sort() : 对数组中的元素按照一定的特性进行排序 join() : 通过指定的分隔符分割数组中的元素组成字符串返回


indexOf():从数组的起始位置开始查找元素(ECMAScript5) lastIndexOf():从数组的结束位置开始查找元素(ECMAScript5) every() : 如果该函数对每一项都返回true,则返回true(ECMAScript5) filter():返回值为true的所有数组成员(ECMAScript5) forEach():遍历循环数组中的元素(ECMAScript5) map():返回每次函数调用的结果数组 some(): 有任意一项返回true,则返回true(ECMAScript5) reduce():从数组起始位置开始遍历(ECMAScript5) reduceRight():从数组结束位置开始遍历(ECMAScript5)

根据上面列出的函数,每一个都附带1~2个例子帮助理解。

1.push(item,item2,item3..) 描述:每添加一个新的元素都会在数组的末尾位置。 参数:

参数 描述
item 必需。要添加到数组中的第一个元素
item2 可选。要添加到数组中的第二个元素
itemN 可选。要添加到数组中的第N个元素
返回值:返回指定的元素添加到数组后的数组长度length
例子:
var array = new Array();
array.push('a');
console.log(array);//logs ["a"]
array.push(new Object());
console.log(array);//logs ["a", Object]
var arrayLength = array.push('a','b','c');
console.log(array);//logs ['a',Object,'a','b','c']
console.log(arrayLength);//logs 5

2.unshift(item,item2,item3...) 描述:每添加一个新的元素都会在数组的起始位置,该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推(见例子)。 参数:

参数 描述
item 必需。要添加到数组中的第一个元素
item2 可选。要添加到数组中的第二个元素
itemN 可选。要添加到数组中的第N个元素
返回值:返回指定的元素添加到数组后的数组长度length
注意:该方法并没有创建一个新的数组,而是修改的原数组
例子:
var array = new Array();
array.push('a');
console.log(array);//logs ['a']
array.unshift('b');
console.log(array);//logs ['b','a']
array.unshift('c','d');
console.log(array);//logs ['c','d','b','a']

3.concat(array,array2,array3...) 描述:用于两个或者多个数组进行连接,该方法并不会改变原有的数组结构,而是返回一个新的数组。 参数:

参数 描述
array 参数可以是任意的值,也可以是数组,可以是多个
例子:
var array = ['a','b'];
var array1 = ['c','d'];
var resultArray = array.concat(array1,'e');
console.log(resultArray);//logs ["a", "b", "c", "d", "e"]
resultArray = array.concat();
console.log(resultArray); //logs ["a", "b"],并不会添加新的元素,也不会改变原有的数组

4.pop() 描述:该函数没有参数,删除并返回数组的最后一个元素,如果是空数组则返回undefined 参数:无 例子;

var array =  ['a','b'];
var result = array.pop();
console.log(result);//logs 'b'
console.log(array);//logs ['a']
var array2 = [];
var result2 = array2.pop();
console.log(result2);//logs undefined
console.log(array2);//logs []

5.shift() 描述:该函数没有参数,删除并返回数组的第一个元素,如果是空数组则返回undefined 参数:无 例子:

var array = ['a','b'];
var result = array.shift();
console.log(result);//logs 'a'
console.log(array);//logs ['b']
var array2 = [];
var result2 = array2.shift();
console.log(result2);//logs undefined
console.log(array2);//logs []

6.slice(start,end) 描述:从已存在的数组中返回start到end的元素,并组成一个新的数组,该函数并不会修改原有的数组。 参数:

参数 描述
start 必需。起始位置从0开始,规定从何处开始选取数组,如果是负数,从倒数位置开始选取,比如-1 ,从指最后一个元素,依次类推,如果start大于数组的长度则返回一个空数组。
end 可选。 规定从何处结束选取,如果参数为空,则选取到数组的末尾处,如果是负数,则从末尾向前取

例子:

var array = ['a','b','c','d'];
var res1 = array.slice(0,2);
console.log(res1);//logs ['a','b']
var res2 = array.slice(2);
console.log(res2);//logs ['c','d']
var res3 = array.slice(-1);
console.log(res3);//logs ['d']
//slice 不会向前取值,如果start=-1(倒数第一个),end<倒数第一个的时候,返回值为空[]

7.splice(index,howMany,element1,element2...) 描述:删除任意数量的元素,在指定位置插入指定的元素,替换任意数量的元素,该函数会修改原有的数组。 参数:

参数 描述
index 必需。规定从何处添加/删除元素,必须是数字
howMany 必需。要删除的元素的个数,如果写0 ,则不进行删除操作
element1,element2.. 向数组添加的新元素,如果为空,则不添加元素
例子:
var array = ['a','b','c','d','e'];
var result = array.splice(1,2);//从第一个元素开始,删除两个元素,不添加任何元素。
console.log(result);//logs ['b','c']
console.log(array);//logs ['a','d','e']
var result2 = array.splice(1,0,'m');//从第一个位置开始,删除0个元素,添加一个'm'元素。
console.log(result2);//logs []
console.log(array);//logs ['a','m','d','e']

8.reverse() 描述:颠倒数组中元素的顺序,该函数没有参数,同时会修改原有的数组并进行返回。 参数:无 例子:

var array = ['a','b','c','d','e'];
var result1 = array.reverse();
console.log(array);//logs ['e','d','c','b','a']
console.log(result1);//logs  ['e','d','c','b','a']

9.sort(sortby) 描述:针对数组元素进行排序,可以根据默认排序,也可以自定义排序。该函数会修改原有数组。如果参数不填,则会按照字母顺序对数组元素进行排序。 参数:

参数 描述
sortby 可选。规定排序规则,只能传递函数
例子:
var array = ['1','2','3','4'];
array.sort();
console.log(array);//logs ['1','2','3','4']
// 按照升序进行排列,如果想对对象元素进行排序需要传递函数参数。
var array2 = [
{
name : 'boyuyun',
title : '博育云首页',
sortNum : 1
},
{
name : 'app',
title : '应用首页',
sortNum : 2
},
{
name : 'menu',
title : '菜单首页',
sortNum : 3
}];
array2.sort(function(preObject,nextObject){//preobject:为第一个元素,nextObject:为下一个元素
    var preV = preObject.sortNum,nextV = nextObject.sortNum;
    if(preV > nextV){
        return -1;
    }else if(preV == nextV){
        return 0;
    }else{
        return 1;
    }
});
console.log(array2);//下图为打印输出结果

例子结果 10.join(separator) 描述:将数组所有元素放入字符串,并通过分隔符进行分割,默认分隔符为逗号“,”。该函数不会修改原有数组对象。 参数:

参数 描述
separator 可选。分隔符字符串,默认为逗号
例子:
var array = ['a','b','c','d'];
var str = array.join();
console.log(str);//logs 'a,b,c,d';
var str1 = array.join('&');
console.log(str1);//logs 'a&b&c&d'

11.indexOf(item,start) 描述:在数组中查找符合条件的元素,并返回索引,如果没有找到则返回-1,start则为从数组的哪个位置开始查找。 参数:

参数 描述
item 可选。不传递参数则返回-1,该参数为在数组中需要查找的元素
start 可选。不传递则从数组开始位置查找。
例子:
var array = ['a','b','c','d','e'];
var index = array.indexOf('c');
console.log(index);//logs 2
var index2 = array.indexOf('c',3);
console.log(index2);//logs -1

12.lastIndexOf(searchvalue,fromindex) 描述:返回指定字符串在数组中最后出现的位置,索引从后向前搜索,如果找不到则返回 -1,找到返回位置索引。该函数对大小写敏感。 参数:

参数 描述
searchValue 必需。规定查询的字符串
fromindex 可选。整数参数,从0开始计数,从此处开始向前检索。
例子:
var array = ['a','b','c','d','e','a','b','c'];
var i = array.lastIndexOf('a');
console.log(i);//logs 5
var ii = array.lastIndexOf('a',4);//从第四个开始向前检索
console.log(ii);//logs 0

13.every(fn) 描述:如果该函数对每一项都返回true,则返回true,主要是遍历数组所有元素,判断是否全部符合某一标准。 参数:

参数 描述
fn(item) 必选。函数参数,传递一个比较函数,函数返回值为true/false
例子:
var array = [50,60,70,80,90];
//检查所有学生的成绩是否全部及格
function isPass(score){
    if(score>=60){return true;}return false;
}
if(array.every(isPass)){
    console.log('全部及格');
}else{
    console.log('有不及格的学生');
}
//logs '有不及格的学生'

14.filter(fn) 描述:返回符合fn的条件的数组元素并组成一个数组返回。fn为函数,遍历数组中的所有元素,通过函数fn检查是否符合条件进行过滤。对原有数组不进行修改,返回新的数组(包含符合过滤条件的元素)。 参数:

参数 描述
fn(item) 必选。该参数为函数,函数的参数为数组的元素。
例子:
var array = [50,60,70,80,90];
//返回所有及格的成绩>= 60
var getPass = function(value){return value>=60;}
var result = array.filter(getPass);
console.log(result);//logs [60,70,80,90]
//当然在函数中我们可以定义更加复杂的过滤条件

15.forEach(fn) 描述:数组的循环遍历函数,参数为函数,函数参数为item,index,分别为数组元素和索引。 参数:

参数 描述
fn(item,index) 必选。该参数为遍历的函数,循环数组内每一个元素进行操作。
例子:
var array = ['a','b','c','d'];
array.forEach(function(item,index){
    console.log(item);
});
//logs 'a' 'b' 'c' 'd'

16.map(fn) 描述:循环遍历数组,对每一个元素进行函数的修改,比如所有元素+1. 参数:

参数 描述
fn(item,index,array) 必选。原数组中每一个元素经过该函数返回一个新的元素
例子:
var array = [3,5,7,9];
//将所有元素+1
var result = array.map(function(item,index,array){
    return item+1;
});
console.log(result);//logs [4,6,8,10]

17.some(fn) 描述:同every类似,只要数组中有 一个元素符合fn的过滤条件,则返回true 参数:

参数 描述
fn(item) 必选。数组所有元素通过该函数过滤,函数返回值为boolean
例子:
var array = [50,60,70,80];
//查看所有学生成绩是否有不及格的
var isPass = function(value){
    return value < 60;
}
if(array.some(isPass)){
    console.log('有不及格的学生');
}else{
    console.log('没有不及格的学生');
}
//logs '有不及格的学生'

18.reduce() 描述: 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 参数:

参数 描述
fn(previousValue,currentValue,index,array) 必选。
initValue 作为第一次调用 callback 的第一个参数。
例子:
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});
//logs 10

//这两个还不太理解,很少用到。

19.reduceRight() 描述:同reduce ,只不是方向从结束位置开始的。


上面的是属于我的理解,有不正确的地方欢迎指正! 主要用于自己的一个知识复习,也算是一个备忘,同时分享给大家,互相交流!

转载请注明出处: https://chrunlee.cn/article/js-array-api.html


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
codewars上的一个题目,这里记录下解决方法。
之前一直没面试过前端,今天有一个,先整理下需要问的问题和答案。这里都是一些简单的问题,关于当下比较流行的框架并没有涉及到..
通过jspdf ,我们可以将页面或图片生成pdf下载下来,如果是一些复杂的页面,我们可以将页面转成图片,然后把图片加入到pdf中,生成并下载。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象