Array 常用方法

静态方法

Array.isArray(obj);

检测给定值是否为数组; 是则返回 true | 否则返回 false

console.log(Array.isArray([]));/* true */
console.log(Array.isArray(new Array(1,2)));/* true */
console.log(Array.isArray({}));/* false */

对操作数组本身进行修改的方法

  • pop 删除并返回数组的最后一个元素
  • push 向末尾添加一个或多个元素,并返回新的长度
  • shift 删除并返回数据的第一个元素
  • splice 删除元素,并向数组添加元素
  • unshift 向开头添加一个或多个元素,并返回新的长度
  • reverse 颠倒数组中元素的顺序
  • sort 排序
  • fill 用指定值来填充数组

对操作数组本身 无影响

  • concat 连接两个或多个数组,并返回结果
  • join 将数组的所有元素放入一个字符串中,元素按指定的分隔符进行连接
  • slice 从已有的数组返回选定的元素
  • map 返回调用处理方法后的数组值
  • forEach 遍历数组所有值,并将值逐一传给回调函数
  • filter 返回一个新数组,新数组中为符合条件的所有值
  • find 返回符合条件的第一个值
  • findIndex 返回符合条件第一个值得下标索引
  • indexOf 返回指定值在数组中首次出现的位置
  • includes 数组是否包含指定值
  • every 遍历数组,检测是否所有值都符合给定的函数判断;全部符合返回true
  • some 遍历数组,检测是否有符合给定函数的判断;有一个符合则返回true

对数组本身进行修改的方法

pop

删除数组中的最后一个元素,并返回删除的元素

let arr = [1,2,'a',{b:2}];
console.log(arr);
/* [ 1, 2, 'a', { b: 2 } ] */

console.log(arr.pop());
/* { b: 2 } */

console.log(arr);
/* [ 1, 2, 'a' ] */

push

向数组末尾添加一个或多个元素,并返回新的长度

let arr = [1,2];
let arrb = ['a','b'];
console.log(arr);
/* [ 1, 2 ] */

console.log(arr.push(...arrb));
/* length:4 */

console.log(arr);
/* [ 1, 2, 'a', 'b' ] */

arrb[0]='c';
console.log(arr);
/* [ 1, 2, 'a', 'b' ] */

console.log(arrb);
/* [ 'c', 'b' ] */

shift

删除数组中的第一个元素,并返回删除的元素

let arr = [{a:1},2,3];
console.log(arr.shift());
/* {a:1} */

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

unshift

向数组的头部增加一个或多个元素,并返回数组新的长度

let arr = [{a:1},2,3];
let arrb = ['c',{name:'dan'}];
console.log(arr.unshift(...arrb));
/* length:5 */

console.log(arr);
/* [ 'c', { name: 'dan' }, { a: 1 }, 2, 3 ] */

splice

向数组指定位置删除指定个数元素 或 添加元素,并返回删除元素的数组

  • index : 操作的起始位置
  • howmany : 删除的个数 0:不删除 | 不传:删除至数组末尾
  • newItem,*,newItems : 新增的元素
let arr = [1,2,3,4,5];
/*从数组第二位新增两个元素,注:纯新增必须设置第二个参数为 0*/
arr.splice(2,0,{a:1},234);
console.log(arr);
/* [ 1, 2, { a: 1 }, 234, 3, 4, 5 ] */

reverse

颠倒数组的前后顺序,并返回颠倒排序后的数组

let arr = [1,2,3,4,5];
console.log(arr);
/* [ 1, 2, 3, 4, 5 ] */

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

sort

对数组进行排序 | 无参时 按字符编码顺序升序排序 | 有参:如下

  • before 前一个元素
  • next 后一个元素

升序条件如下

  • 如果 before 小于 next,在排序后的数组中 before 应该出现在 next 之前,则返回一个小于 0 的值
  • 如果 before 等于 next,返回 0
  • 如果 before 大于 next,在排序后的数组中 before 应该出现在 next 之后,则返回一个大于 0 的值

降序条件如下

  • 如果 before 小于 next,在排序后的数组中 before 应该出现在 next 之后,则返回一个大于 0 的值
  • 如果 before 等于 next,返回 0
  • 如果 before 大于 next,在排序后的数组中 before 应该出现在 next 之前,则返回一个小于 0 的值
let arr = [{name:'a',age:23},{name:'g',age:32},{name:'d',age:2},{name:'z',age:99},{name:'j',age:13},{name:'e',age:78},{name:'p',age:34},{name:'e',age:33}];
function sortBy(attr,ascORdesc = 'asc'){
    let ascORdescFlag = (ascORdesc== 'asc'?1:-1);
    return function sort(before,next){
        before = before[attr];
        next = next[attr];
        if(before<next){
            return -1*ascORdescFlag;
        }
        if(before>next){
            return 1*ascORdescFlag;
        }
        return 0;
    };
}
arr.sort(sortBy('age',22));
console.log(arr);
/*
[ { name: 'z', age: 99 },
 { name: 'e', age: 78 },
 { name: 'p', age: 34 },
 { name: 'e', age: 33 },
 { name: 'g', age: 32 },
 { name: 'a', age: 23 },
 { name: 'j', age: 13 },
 { name: 'd', age: 2 } ]
*/

arr.sort(sortBy('name'));
console.log(arr);
/*
[ { name: 'a', age: 23 },
 { name: 'd', age: 2 },
 { name: 'e', age: 78 },
 { name: 'e', age: 33 },
 { name: 'g', age: 32 },
 { name: 'j', age: 13 },
 { name: 'p', age: 34 },
 { name: 'z', age: 99 } ]
*/

fill

将指定的值 替换到 数组中的指定位置

  • value: 必填|填充的值
  • start: 可选|填充的起始位置
  • end: 可选|填充的结束位置
let arr = ['d','b','c',1,3];
arr.fill('hello',3,5);
console.log(arr);
/* [ 'd', 'b', 'c', 'hello', 'hello' ] */

arr.fill('world',2);
console.log(arr);
/* [ 'd', 'b', 'world', 'world', 'world' ] */

arr.fill('hello world');
console.log(arr);
/* 
[ 'hello world',
 'hello world',
 'hello world',
 'hello world',
 'hello world' ]
*/

对数组本身无影响的方法

concat

连接两个或多个数组

let arr = [1,{age:28},3],arrb=['a','b'],arrc = [];
arrc = arrc.concat(arr,arrb);
console.log(arrc);
/* [ 1, { age: 28 }, 3, 'a', 'b' ] */

arr[0] = 'hello world';
arr[1].age = 18;
console.log(arrc);
/*
注意: 原数组中,引用类型的值修改会造成返回的新数组值修改 [引用的为同一地址]
[ 1, { age: 18 }, 3, 'a', 'b' ] 
*/

join

将数组中得所有元素连接成字符串

  • separator 连接各元素的分隔符;若不指定,默认为逗号连接
let arr = [-1,'a',['b','c',['d','e']],'123a'];
console.log(arr.join());
/* -1,a,b,c,d,e,123a */

console.log(arr.join(''));
/* -1ab,c,d,e123a */

/*打平嵌套数组
* 注:处理后,如元素组中的元素 为String类型的数字,处理后为Number类型
*/
function unwind(array){
    return arr.join(',').split(',').map((item)=>{return Number(item)?Number(item):item});
}
console.log(unwind(arr));
/* [ -1, 'a', 'b', 'c', 'd', 'e', 123 ] */

slice

返回数组中指定的元素

  • start | [起始下标] -1 为数组最后的元素
  • end | [结束下标]
let arr = [1,'b',{c:'hello'},'d'];
let arrb = arr.slice(-1),arrc = arr.slice();
console.log(arrb);
/* [ 'd' ] */

console.log(arrc);
/* [ 1, 'b', { c: 'hello' }, 'd' ] */

map

返回一个新数组,新元素为 原元素调用函数处理后的值

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
let arr = [1,3,'4','b',{c:'hello'}];
let arrb = arr.map(function(item){
    return item*2;
});
console.log(arr);
/* [ 1, 3, '4', 'b', { c: 'hello' } ] */

console.log(arrb);
/* [ 2, 6, 8, NaN, NaN ] */

forEach

遍历数组的每个元素,并将元素传递给回调函数

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
/*
*数组去重
*此方法仅可用于基础类型的值 去重,引用类型无法去除
*/
function uniq(array){
    let returnArr = [],tmpMap = {};
    array.forEach((item)=>{
        if(!tmpMap[item]){
            returnArr.push(item);
            tmpMap[item] = 1;
        }
    });
    return returnArr;
}
let testArr = [1,1,2,2,2,3,3,3,3,'a','a','b','c',{d:'123'},{d:'456'}];
console.log(uniq(testArr));
/* [ 1, 2, 3, 'a', 'b', 'c', { d: '123' } ] */

filter

返回一个新数组,新数组中的元素为符合判断条件的元素

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
/* 数组去重 
*此方法仅可用于基础类型的值 去重,引用类型无法去除
*/
let testArr = [1,1,2,2,2,3,3,3,3,'a','a','b','c'];
let reArr = testArr.filter((item,i,arr)=>{
    return arr.indexOf(item)===i;
});
console.log(reArr);
/* [ 1, 2, 3, 'a', 'b', 'c' ] */

find

返回符合条件的 第一个值

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
let testArr = [{age:11},{age:22},{age:33}];
let reArr = testArr.find((item,i,arr)=>{
    return item.age>15;
});
console.log(reArr);
/* { age: 22 } */

findIndex

返回符合条件的 第一个值的下标索引

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
let testArr = [{age:11},{age:22},{age:33}];
let reArr = testArr.find((item,i,arr)=>{
    return item.age>15;
});
console.log(reArr);
/* 1 */

indexOf

返回指定元素值的第一个下标索引

  • item | 待检索的值
  • start | 检索的起始位置
/* 数组去重 
*此方法仅可用于基础类型的值 去重,引用类型无法去除
*/
let testArr = [1,1,2,2,2,3,3,3,3,'a','a','b','c'];
let reArr = testArr.filter((item,i,arr)=>{
    return arr.indexOf(item)===i;
});
console.log(reArr);
/* [ 1, 2, 3, 'a', 'b', 'c' ] */

lastIndexOf

返回指定元素值的第一个下标索引

  • item | 待检索的值
let testArr = [1,1,2,2,2,3,3,3,3,'a','a','b','c'];
console.log(testArr.lastIndexOf('a'));
/* 10 */

includes

检测数组中是否包含指定元素,有则true | 否则false

  • item | 待检测的值
  • start | 检索的起始位置
let testArr = [11,22,33];
console.log(testArr.includes(22));
/* true */

every

检测是否数组中的元素都符合指定的条件,都符合则返回true | 一旦有一个不符合返回 false

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
let testArr = [{age:11},{age:22},{age:33}];
let reArr = testArr.every((item,i,arr)=>{
    return item.age>15;
});
console.log(reArr);
/* false */

some

检测数组中是否有一个满足条件的元素,只要有一个则返回true | 一个都没有则返回 false

  • currentValue: 当前值[原数组] | 必须
  • index: 当前值的下标索引 | 可选
  • arr: 原数组对象 | 可选
let testArr = [{age:11},{age:22},{age:33}];
let reArr = testArr.some((item,i,arr)=>{
    return item.age>15;
});
console.log(reArr);
/* true */

reduce

将数组中的每个值从左到右开始缩减,经函数处理后,最终返回一个值

  • function
    • total 初始值, 或者计算结束后的返回值 | 必须
    • currentValue: 当前值[原数组] | 必须
    • index: 当前值的下标索引 | 可选
    • arr: 原数组对象 | 可选
  • 可选。传递给函数的初始值
/*打平嵌套数组
* 使用条件仅为 待打平的数组为 二维数组
*/
let testArr = [1,['a','c'],3];
console.log(testArr.reduce((r,item)=>r.concat(item),[]));
/* [ 1, 'a', 'c', 3 ] */
/* 注:不提供默认值时:初始的默认值为 首位元素的值*/

reduceRight

将数组中的每个值从右到左开始缩减,经函数处理后,最终返回一个值

  • function
    • total 初始值, 或者计算结束后的返回值 | 必须
    • currentValue: 当前值[原数组] | 必须
    • index: 当前值的下标索引 | 可选
    • arr: 原数组对象 | 可选
  • 可选。传递给函数的初始值
let testArr = [1,2,3,4,5,6];
console.log(testArr.reduce((total,item)=>{
    return total-item;
}));
/* 注:不提供默认值时:初始的默认值为 末位元素的值*/
/* -19 */
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 创建数组 通过一个数字参数,创建指定长度的数组 通过一个非数字参数 或 多个参数创建一个拥有元素的数组 通过直接量...
    欧阳小龙虾阅读 234评论 0 0
  • 在日常编程过程中,我们总要对数组进行操作。然而使用最原始的js代码效率很低,而ES6提供了很多方法,极大的提高了我...
    小焲阅读 1,642评论 1 0
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,960评论 0 16
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,383评论 0 2
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,060评论 0 6