Array 中各类函数如何使用

Array 中各类函数如何使用

月光魔力鸭

2018-08-31 09:19 阅读 318 喜欢 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 = new Array(); //长度为 0 array.push(1);//长度为1 数组下标从0开始 下标类型:  数值:array[1]; 直接取出第二个元素  非数值:array['1'];  当下标为非数值的时候通常会转化为字符串或者直接作为对象的属性的名字

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

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

  3. 遍历数组 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
Question from codewar,about all of array combinations.
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
我们有时候会拿textarea来做编辑器,但是常用编辑器都是支持tab缩进的,这里对textarea监听下事件处理下即可实现。
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
nvm install 16.15.0 : The process cannot access the file because it is being used by another process
在文件上传的时候,经常会对文件的mime进行限制,比如图片 image/jpg 等,让用户可以选择图片,而不是其他的文件。
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。