美文网首页让前端飞
2. JavaScript Array

2. JavaScript Array

作者: moonburn | 来源:发表于2017-06-08 11:17 被阅读0次

    此文章用于归纳Array的所有方法

    在JavaScript中，除了Object，用得最多的可能就是数组Array了。下面我们将一起来总结一下数组Array的所有方法。

    首先总结一下Array的属性：

    • Array.length：返回数组的长度。

    然后总结一下Array的方法：

    • Array.from（arrayLike ,function）：此方法接受2个参数，第一个参数接受一个类数组对象，第二个参数接受一个映射函数。该方法是将arrayLike转换成真正的数组，如果有第二个参数，将会把第一个参数里的每一个元素在function中作用一遍，并返回结果，构成一个新数组，然后返回该数组。具体操作如下：
    function arr(){
 return  Array.from(arguments, function(num){return num*2});   
}
arr(1,2,3,4);//[2, 4, 6, 8]
    • Array.isArray(obj)：确定输入的值是否是一个数组，如果是，返回true如果不是，返回false。
    • Array.of()：是创建数组的一种方法，它接受的每一个参数都将作为新构成数组的一个元素。该方法返回构建完成的数组。和Array()创建数组有稍微不同，具体如下：
    Array.of(2);       // [2] 
Array.of(1, 2, 3); // [1, 2, 3]
Array(2);          // [ , ]或者[undefined × 2]
Array(1, 2, 3);    // [1, 2, 3]

    最后总结Array实例的方法，也就是array.prototype的方法：

    • concat()：该方法用于合并2个或多个数组，不会改变原数组，返回一个新数组。
    var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2);//["a", "b", "c", "d", "e", "f"]
arr1.concat(1,2,3)//["a", "b", "c", 1, 2, 3]
    • copyWithin(target, start = 0, end = this.length)：该方法接受3个参数，其中第一个参数为目标位置（必选），第二个是起始位置（可选），第三个是结束位置（可选）。该方法的作用是将指定的一部分元素复制到同一个数组指定的位置替换掉，并返回数组。具体代码如下：
    //从第3个位置开始替换倒数第2个到倒数第1个元素，即5
[1,2,3,4,5,6].copyWithin(3,-2,-1)//[1,2,3,5,5,6]
//从第0个位置开始替换第2到第4的元素，即3,4
[1,2,3,4,5,6].copyWithin(0,2,4)//[3,4,3,4,5,6]
    • entries()：将输入的数组变为迭代器对象，可使用next()或者for of循环。具体代码如下：
    var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next()); //Object {value: Array(2), done: false}
for (let e of iterator) {
  console.log(e);
}
// [1, 'b']
// [2, 'c']
    • every(function)：该方法接受一个函数作为参数，该函数可以有3个参数，第一个参数是当前正在处理的数组的元素，第二个参数为当前元素的索引，第三个参数为该数组本身。该方法主要的作用是遍历每一个元素，看是否每一个元素都能通过function的测试，如果都通过，返回true，只要有一个没通过，返回false。具体代码如下：
    [1,2,3,4,5,6].every(function(item,index){
   return item>5
})//false
[1,2,3,4,5,6].every(function(item,index){
   return item>0
})//true
    • some(function)：与 every(function)类似。只要有一个元素满足条件，返回true，没有一个元素满足条件，返回false。
    [1,2,3,4,5,6].some(function(item,index){
   return item>5
})//true
[1,2,3,4,5,6].some(function(item,index){
   return item>9
})//false
    • fill(value, start = 0, end = this.length)：该方法接受3个参数，第一个参数为填充的值，第二个参数和第3个参数与copyWithin()类似。具体代码如下：
    //用3替换倒数第2个到倒数第1个元素，即5
[1,2,3,4,5,6].fill(3,-2,-1)//[1,2,3,4,3,6]
//用0替换第2到第4的元素，即3,4
[1,2,3,4,5,6].fill(0,2,4)//[1,2,0,0,5,6]
    • filter(function)：该方法的function参数与every类似，不同的地方在于，该方法返回一个通过function测试的元素组成的新数组。具体代码如下：
    [1,2,3,4,5,6].filter(function(item,index){
   return item>5
})//[6]
[1,2,3,4,5,6].filter(function(item,index){
   return item>2
})//[3,4,5,6]
    • find(function)：该方法的function参数与every类似，不同的地方在于，该方法返回第一个通过function测试的元素，如果都没通过，返回undefined。具体代码如下：
    [1,2,3,4,5,6].find(function(item,index){
   return item>5
})//6
[1,2,3,4,5,6].find(function(item,index){
   return item>2
})//3
    • findIndex(function)：该方法的function参数与every类似，不同的地方在于，该方法返回第一个通过function测试的元素的索引，如果都没通过，返回-1。具体代码如下：
    [1,2,3,4,5,6].findIndex(function(item,index){
   return item>5
})//5
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>2
})//2
    • forEach(function)：该方法的function参数与every类似，不同的地方在于，该方法没有返回值，只是将数组中每一个元素在函数中作用一遍。具体代码如下：
    var arr = [];
[1,2,3,4,5,6].forEach(function(item,index){
  if(item>2){ arr.push(item); }
})
console.log(arr)//[3, 4, 5, 6]
    • includes(element,fromIndex = 0)：该方法接受2个参数，第一个参数是需要寻找的元素，第二参数可选，为从什么位置开始寻找。如果找到了，返回true，如果没找到，返回false具体代码如下：
    var arr = [1,2,3]
arr.includes(2);//true
arr.includes(5);//false
arr.includes(2,2)//false
    • indexOf(element,fromIndex = 0)：该方法接受2个参数，第一个参数是需要寻找的元素，第二参数可选，表示从什么位置开始寻找。找到了返回当前元素的位置，如果没找到，返回-1具体代码如下：
    var arr = [1,2,3]
arr.indexOf(2);//1
arr.indexOf(5);//-1
arr.indexOf(2,2)//-1
    • lastIndexOf(element,fromIndex = 0)：该方法接受2个参数，第一个参数是需要寻找的元素，第二参数可选，表示从什么位置开始寻找。如果找到了，返回给定的元素最后一次出现的位置，如果没找到，返回-1具体代码如下：
    var arr = [1,2,3,1]
arr.lastIndexOf(2);//3
arr.lastIndexOf(5);//-1
arr.lastIndexOf(2,2)//-1
    • join(separator = ',')：该方法接受1个参数（可选），将数组的所有元素以separator连接为字符串，并返回该字符串。具体代码如下：
    var a = ['a', 'b', 'c'];
a.join();      // 'a,b,c'
a.join(', ');  // 'a, b, c'
a.join(' + '); // 'a + b + c'
a.join('');    // 'abc'
    • keys()：该方法作用于entries()类似，将对象变为可迭代的对象，但还是有所不同。具体代码如下：
    var a = ['a', 'b', 'c'];
var iterator = a.keys();
console.log(iterator.next()); //Object {value: 0, done: false}
for (let e of iterator) {
console.log(e);
}
//1
//2
    • map(function)：该方法的function参数与every类似，不同的地方在于该方法返回一个由function作用之后的新数组，该方法。具体代码如下：
    [1,2,3,4,5,6].map(function(item,index){
return item*2
})//[2, 4, 6, 8, 10, 12]
    • pop()：该方法会删除最后一个元素并返回该元素，被删除元素的数组长度减少1。具体代码如下：
    var arr = [1, 2, 3];
arr.pop();//3
console.log(arr); // [1, 2]
    • push(element)：该方法会在最后添加一个元素并返回该数组的length。具体代码如下：
    var arr = [1, 2, 3];
arr.push(4);//4
console.log(arr); // [1,2,3,4]
    • reduce(function)：该方法接受一个function作为参数，把数组的元素依次放入function中，得到的结果作为也作为参数传入function，一直到所有元素作用完毕，返回最终结果。具体代码如下：
    var arr = [1,2,3,4,5,6]
arr.reduce(function(element1,element2){
    return element1+element2
})//21
    • reduceRight(function)：该方法与reduce()类似，只不过执行顺序是从右往左。具体代码如下：
    var arr = [1,2,3,4,5,6]
arr.reduceRight(function(element1,element2){
    return element1+element2
})//21
    • reverse()该方法是将数组中的元素顺序反转，并返回该数组。具体代码如下：
    var arr = [1,2,3,4,5,6]
arr.reverse()
    • shift()：该方法和pop()类似，只不过pop删除最后一个元素，shift()删除第一个元素。
    var arr = [1, 2, 3];
arr.shift();//1
console.log(arr); // [2, 3]
    • slice(start = 0,end=this.length)：该方法接受2个参数，一个开始的位置，一个结束的位置（不包括结束的位置）。选择数组的这一部分浅拷贝到一个新数组对象里面，并返回新数组。原数组不会改变。具体代码如下：
    var arr = [1,2,3,4,5,6]
//选择第2和第4，即3,4
arr.slice(2,4)//[3,4]
console.log(arr)// [1,2,3,4,5,6]
    • splice(start = 0, deleteCount, element ...)：该方法接受3个参数，第一个参数是修改的开始位置，第二个参数是可选的，表示要移除数组的个数，第3个参数是加入的元素。该方法返回被删除的数组，并且原数组会被修改。具体代码如下：
    var arr = [1,2,3,4,5,6,7,8]
//从第2开始，删除4个元素，并添加moonburn字符串
arr.splice(2,4,'moonburn')//[3,4,5,6]
console.log(arr)// [1,2,'moonburn',7,8]
    • sort(compareFunction)：该方法接受一个参数（可选）。如果不输入参数，会自发的给数组排序，默认排序顺序是根据字符串Unicode码点。也可以加入compareFunction，自己排序。具体代码如下：
    var arr = [1,20,3,40,5,60]
arr.sort(function(element1,element2){
    return element1>element2
})
console.log(arr)// [1, 3, 5, 20, 40, 60]
    • toLocaleString()：数组的toLocaleString()会将所有的元素都作用一遍toLocaleString()，并拼接为字符串。具体如下：
    var arr = [123,new Date(),'string']
arr.toLocaleString()//"123,2017-6-8 11:04:50,string"
    • toString()和toLocaleString()类似，只是不带地域特色。具体如下：
    var arr = [123,new Date(),'string']
arr.toString()//"123,Thu Jun 08 2017 11:08:24 GMT+0800 (中国标准时间),string"
    • unshift(element····)：将一个或多个元素添加到数组的开头。返回新数组的length具体代码如下：
    var arr = [1,2,3,4];
arr.unshift('a','b');//6
console.log(arr);//["a", "b", 1, 2, 3, 4]

    相关文章

      网友评论

        本文标题：2. JavaScript Array

        本文链接：https://www.haomeiwen.com/subject/ulyofxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        让前端飞

        关于我们|服务条款|联系我们|2. JavaScript Array|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！