Javascritp Array数组(包含最新的方法)方法总结

合并数组 - concat()

用法一 (合并两个数组)

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
console.log(children );      // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

用法二 (合并多个数组)


var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

console.log(family);          // ["Jani", "Tove", "Stale", "Kai Jim", "Borge", "Cecilie", "Lone"]

数组转字符串 - join()、toString()

两种方法都返回新的字符串

join() 方法


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join();

console.log(a);                // "Banana,Orange,Apple,Mango"

toString() 方法


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.toString();

console.log(a);                // "Banana,Orange,Apple,Mango"

相同点:

都可以将数组转字符串。

区别:

join还有另外的用法:join() 可接受一个参数作为元素之间的连接符号


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join("-");

console.log(a);            //  "Banana-Orange-Apple-Mango"

删除数组最后一个元素 - pop()

pop 返回元素的最后一个元素,原数组最后一个删除。


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.pop();

console.log(a);                //  "Mango"

console.log(fruits );          //  ["Banana", "Orange", "Apple"]

添加元素 - push()

push 返回的是数组的长度,原数组最后面添加一个新元素


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.push("Kiwi");

console.log(a);                // 5

console.log(fruits);          //   ["Banana", "Orange", "Apple", "Mango", "Kiwi"]

数组反转 - reverse()


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();

console.log(fruits);        // ["Mango", "Apple", "Orange", "Banana"]

删除数组第一个元素 - shift()

shift 返回数组的第一个元素,原数组第一个元素被删除


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a= fruits.shift();

console.log(a);              //  "Banana"

consoel.log(fruits);        //   ["Orange", "Apple", "Mango"]

截取数组元素 - slice(start,end)

slice 返回截取的元素组成的数组,原数组不会发生变化。

slice接受两个参数,起始位置和结束位置,第一个参数起始位置如果为负数,表示从数组尾部开始算,如 -1 代表最后一个。如果不传入结束位置,表示从起始位置起到数组结尾的所有元素。


var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var a= fruits.slice(1,3);

console.log(a);                //  ["Orange", "Lemon"]

console.log(fruits);          //   ["Banana", "Orange", "Lemon", "Apple", "Mango"]

数组排序 - sort(func)

sort 方法用于对数组的元素进行排序。

sort 可接受一个参数 func,非必传,如果要传入必须是函数,在不传参的情况下,sort 表示按字符串编码的顺序进行排序,如果要对数组进行排序需传入函数。

不传参:


var  arr= ["George", "John", "Thomas", "James", "Adrew", "Martin"];

arr.sort();

console.log(fruits);          //  ["Adrew", "George", "James", "John", "Martin", "Thomas"]

// 没有传入函数,所以结果是按照0123456789的顺序进行排列

var nums = [21,14,26,11,105];

nums.sort();

console.log(nums);            //  [105, 11, 14, 21, 26]

传参:


function sortNumber(a, b){

        return a - b

}

var nums = [21,14,26,11,105];

nums.sort(sortNumber);

console.log(nums);            // [11, 14, 21, 26, 105]

在指定位置添加/删除/替换元素 - splice( start, count , .....)

splice 接受多个参数,第一个是起始位置,第二个为删除个数,之后的参数为添加/删除/替换的元素。

splice 返回删除元素的数组

用法一 (添加元素)


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,0,"Lemon","Kiwi");

console.log(fruits );            //  ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

用法二 (替换元素)


// 从第二个位置起删除两个元素,接受新的两个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2,"Lemon","Kiwi");

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange", "Lemon", "Kiwi"]

用法三 (删除元素)


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2);

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange"]

在数组开头添加元素 - unshift()


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon","Pineapple");

console.log(fruits);            // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

检查某元素是否存在于数组中 - indexOf()、lastIndexOf()

indexOf 和 lastIndexOf 都接受两个参数,第一是需要检查的元素。第二个是从那个索引位置开始检查

indexOf 表示从 0 开始,lastIndexOf 表示最后一个元素开始


var  arr = [1,23,4,5,6,7,89];

arr.indexOf(89)                //    6

arr.indexOf(89,2)              //    6

arr.lastIndexOf(89)            //    6

arr.lastIndexOf(89,5)          //    -1

数组遍历 - map()、forEach()

相同点:

  • 都是数组的遍历方法,可以遍历数组中的每一个元素

  • forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项),index(索引值),arr(原数组)

  • 都不会改变原数组

  • 匿名函数的 this 都指向 windows

不同点:

  • map 方法会返回一个新的数组,数组中的元素为处理后的值,forEach 方法不会返回新的数组

  • map 方法不会对空数组进行检测,forEach对于空数组是不会调用回调函数的。

  • map 方法不支持低端浏览器


var arr = [1,2,3,4];

var a = arr.map(function(item,index,arr){

    return item * item;

})

console.log(a);        //  [1, 4, 9, 16]

console.log(arr);      //   [1, 2, 3, 4]


var arr = [1,2,3,4];

var a = arr.forEach(function(item,index,arr){

    return item * item;

})

console.log(a);        //  undefined

console.log(arr);      //   [1, 2, 3, 4]

数组过滤 - filter()

filter() 方法是返回某一数组中满足条件的元素,该方法返回的是一个新的数组。

// 返回元素长度大于 10 的数组元素


var arr =  [12,5,8,16,125,98];

var filters = arr.filter(function(value){

      return value >= 10

});

console.log(filters );        //  [12, 16, 125, 98]

of 遍历


let arr2=[1,2,234,'sdf',-2];

for(let a of arr2){

  console.log(a)          // 1,2,234,sdf,-2 遍历了数组arr的值

}

数组累加器 - reduce()、reduceRight()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce 和 reduceRight 用法一样,区别在于 reduceRight 是从数组的末尾向前做数组项累加。


array.reduce(function(total, currentValue, currentIndex, arr), initialValue);

total       必需。初始值, 或者计算结束后的返回值。

currentValue 必需。当前元素

currentIndex 可选。当前元素的索引

arr         可选。当前元素所属的数组对象。

initialValue    初始值


var numbers = [65, 44, 12, 4];

var a = numbers.reduce(function(total,num){

      return total + num;

},0)

console.log(a);          // 125

判断数组中的元素是否满足指定条件 - some()、every()

some 方法会遍历数组的每一个元素,判断是否满足条件,返回一个布尔值。

every 方法会遍历数组的每一个元素,判断每一项是否满足条件,如果每项都满足,才返回true。


var numbers = [65, 44, 12, 4];

var a = numbers.some(function(item){

      return item > 62;

});

console.log(a);          //  true


var numbers = [65, 44, 12, 4];

var a = numbers.every(function(item){

      return item > 62;

});

console.log(a);          //  false

将当前数组指定位置的元素复制到其他位置并替换 - copyWithin(index,start,end)

index(必需):从该位置开始替换数据。如果为负值,表示倒数。

start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。

end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。


[1, 2, 3, 4, 5].copyWithin(0,1,3)    //   [2, 3, 3, 4, 5]

JSON数组格式转换 - Array.from()

Array.from() 转换的 json 要求必须要有length属性


let  people = {

    0:'zhangsan',

    '1':24,   

    length:2   

};

let trans=Array.from(people);

console.log(trans);            //  ['zhangsan',24]

将一堆元素转换成数组 - Array.of()


let arr = Array.of(1,"23","测试","dsa"); 

console.log(arr);            //  [1, "23", "测试", "dsa"]

查找数组中满足条件的元素 - find()


let arr=[1,2,3,"cxz",-2];

var a = arr.find(function(x){

  return x<="cxz";

});

console.log(a);              // "cxz"

查找数组中满足条件的元素的下标 - findIndex()


let arr=[1,2,3,"cxz",-2];

var a = arr.findIndex(function(x){

  return x<="cxz";

});

console.log(a);              // 3

判断数组中是否包含某元素 - includes()

includes 判断数组中是否包含某元素,返回布尔值


let arr=[1,2,3,"cxz",-2];

var a = arr.includes("cxz");

console.log(a);              //  true

最后欢迎大家关注我的个人公众号,互联网码农,专注互联网编程技术分享,关注公众号,回复关键字,可以领取系列编程学习视频哦,前端、java、ios、安卓、c++、python应用尽有。

image
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容