数组方法总结+es6

定义数组

var arr = new Array(1,2,3);
var arr1 = [1,2,3]
var arr = new Array(3);// [undefined,undefined, undefined]

数组方法

1.concat()

合并数组(深拷贝)

var  arr = [1,2].concat([2,3],[4,5],[5,6]);
2.join()

数组->字符串

[1,2,3].join(); // 1,2,3
3.pop()

移出数组中的最后一个元素,并将其返回,未生成新数组

var arrpop = ['1',2,3];
console.log(arrpop.pop()); // 3
console.log(arrpop); //[ '1', 2 ]
4.push()

新元素(可以是任何值)添加到数组的末尾,并返回修改后数组的长度

var arrPush = [];
console.log(arrPush.push(1,2);//3返回新数组的长度
console.log(arrPush);//[1,2]
5.reverse()

反转数组顺序,并返回修改后的数组。

var  a = [1,2,3];
console.log(a.reverse()); //[ 3, 2, 1 ]
console.log(a); //[ 3, 2, 1 ]
6.shift()

shift()是移除数组的首个元素,返回移出的字符。

var arrShift = ["aa","bb" ,"cc"];
console.log(arrShift.shift()); //aa
console.log(arrShift);  //[ 'bb', 'cc' ]
7. unshift()
unshift是向前添加元素到数组中。返回的都是数组的长度。
var  a = [1,2,3];
console.log(a.unshift("添加1")); //4
console.log(a);  //[ '添加1', 1, 2, 3 ]
8.slice(start_index, end_index)

从已有的数组中返回选定的元素。该方法不会改变原数组,返回值是一个新的数组。

var arr = ["a","b" ,"c","d"];
console.log(arr.slice(0,2)); //["a","b","c"]
console.log(arr);  // ["a","b" ,"c","d"];
9.splice(start , delete_count , i1 , i2 ,i3 ,...)

该方法可以在删除的同时添加新的元素,第一个参数表示删除的起始位置,第二个参数表示删除的个数,其余参数表示将要插入在此处的新元素.

var a = ["app" ,"pc" ," banner ","img" ,"js" ,"css"];
console.log(a.splice(2,2,'新增1',"新增2"));   //[ ' banner ', 'img' ]
console.log(a);   //[ 'app', 'pc', '新增1', '新增2', 'js', 'css' ]
10.sort()

用于数组的排序,它有一个可选参数(回调函数),我们可以用他来自定义排序规则。该函数有两个参数,两个参数相等时返回0,第一个参数大时返回1否则返回-1.

function customSort(a, b){
    if( a>b ) return 1;
    if( a<b ) return -1;
    if( a==b ) return 0;
}

var a = [111, 99 ,1, 5,3];

console.log(a.sort());  //[ 1, 111, 3, 5, 99 ]

console.log(a.sort(customSort));  //[ 1, 3, 5, 99, 111 ]
11.Array.filter(callback,thisObject)//过滤a.不会改变原来的数组
var arr1 = [29,3,4,5,"str","fdl","1"];
var arr2 = arr1.filter((element,index , Array)=>{
    return (typeof(element)== "number"); //返回数组中类型为数字的元素
});
console.log(arr2);  // [29, 3, 4, 5]
12.Array.some(callback)

对数组中的每个元素都执行一次指定的函数(callback),
直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false。
它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

var numArr = [1,2,3,4,5,6,7,8,8,,9,9,0,0,12];
var isGreater = function (element , index , Array){
   return (element > 10); //如何匹配到大于10的则返回true否则返回false
};
var newArr = numArr.some(isGreater); //true
console.log(newArr);
13.Array.every()

对数组中的每个元素都执行一次指定的函数(callback),
直到此函数返回 false,如果发现这个元素,every 将返回 false,
如果回调函数对每个元素执行后都返回 true ,every 将返回 true。
它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略

var evenArr = [2,4,"8"];
var isEven = function (element , index, Array){
   return (typeof(element) == "number") && (element%2 ==0);//全部为偶数则返回true否则返回false
};
console.log(evenArr.every(isEven)); //false
14.Array.reduce(callback,initialValue) Array.reduceRight()

使用指定函数将数组元素进行组合,生成单个的值 (注入和折叠)
拥有两个参数 ,第一个为操作的函数,第二个为定义函数的初始值
这两个方法的用途一样,reduce是从左到右,reduceRight是从右到左。

var  a = [1,2,3,4,5];
var sum = a.reduce(function(x,y){
  return x+y;
},0);
console.log(sum); //15
15.Array.forEach(callback,thisObject)
ar EachArr = ["11","22","33","44"];
var mul = [];
var each = function (element , index ,Array){
    mul[index] = (+element)*2;
};
var forEach = EachArr.forEach(each);
console.log(mul); //[22, 44, 66, 88]
16.array.IndexOf()/array.lastIndexOf(searchElement[, fromIndex]);

searchElement: 要搜索的元素
fromIndex : 开始搜索的位置,默认为数组的长度(length),在这样的情况下,将搜索所有的数组元素。搜索是反方向进行的。

var array = [1,2,3,4,5];
console.log(array.lastIndexOf(3)); //返回索引位置2
console.log(array.lastIndexOf(6));//未找到返回-1

es6扩展方法

17.Array.from

类似数组的对象,Array.from将它转为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
18.Array.of()

Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length //1

19.copyWithin()

// copyWithin(target, start = 0, end = this.length)
[1, 2, 3, 4, 5].copyWithin(0, 3)  // [4, 5, 3, 4, 5]

20.find() 和 findIndex()

[1, 4, -5, 10].find((n) => n < 0)  // -5  上面代码找出数组中第一个小于 0 的成员

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

21. fill()

fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)      // [7, 7, 7]
new Array(3).fill(7)

22.entries(),keys() 和 values()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

23.includes()

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

24.flat(),flatMap()

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

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

推荐阅读更多精彩内容

  • ES3数组方法 join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成...
    markdown阅读 758评论 1 8
  • 转载:在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总...
    七色烟火阅读 3,214评论 0 3
  • Array 对象属性 | 属性 | 描述 || constructor | 返回对创建此对象的数组函数的引用。 |...
    胖太_91bf阅读 259评论 0 0
  • 一、创建Array 创建数组主要有两种方法,第一种是使用数组构造函数,第二种是使用数组字面量表示法。 使用数组构造...
    JackfengGG阅读 945评论 0 51
  • 临湖石罅枕暄风。煮酒小桥东。黄碟花前舞,回眸叶底白头翁。 注:一东。
    幽小窗阅读 394评论 12 27