js数组常用的方法

1.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

      const array1 = ['a', 'b', 'c'];

      const array2 = ['d', 'e', 'f'];

      const array3 = array1.concat(array2);

       console.log(array3);

      // expected output: Array ["a", "b", "c", "d", "e", "f"]

        补充:在ES6里面也可以使用拓展运算符 ‘...’来合并数组。

    eg: // 1.扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

    let ary = [1, 2, 3];

    ...ary // 1, 2, 3

    console.log(...ary); // 1 2 3,相当于下面的代码

    console.log(1, 2, 3);

    //2.扩展运算符可以应用于合并数组

    let ary1 = [1, 2, 3];

    let ary2 = [3, 4, 5];

    let ary3 = [...ary1, ...ary2];

    // 方法二

    ary1.push(...ary2);

    //方法三

    arr1.concat(arr2)

    // 3.将伪数组或可遍历对象转换为真正的数组

    let oDivs = document.getElementsByTagName('div');//oDiv为伪数组

    oDivs = [...oDivs];

2.Array.from() 方法从一个将伪数组或可遍历对象转换为真正的数组,浅拷贝的数组实例。

//定义一个集合

let arrayLike = {

    '0': 'a',

    '1': 'b',

    '2': 'c',

    length: 3

};

//转成数组

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

补充:此方法只是浅拷贝了原数组,当arrayLike 里面的属性值发生了改变时,arr2数组的内容也会发生变化。

例如:将 arrayLike[2] = 'qwe', arr2 数组的内容也会发生变化

 3.find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined

例如:let ary = [{

    id: 1,

    name: '张三'

}, {

    id: 2,

    name: '李四'

}];

let target = ary.find((item, index) => item.id == 2);

console.log(target)

//找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个

输出结果为: {id: 2, name: "李四"}

4.findIndex()用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1。

例如:

let ary = [1, 5, 10, 15];

let index = ary.findIndex((value, index) => value > 9);

console.log(index); // 2

5.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false

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

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

6.join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符

例如:

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());

// 输出: "Fire,Air,Water"

console.log(elements.join(''));

// 输出: "FireAirWater"

console.log(elements.join('-'));

// 输出: "Fire-Air-Water"

7.pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度,修改了原数组。

例如:

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());

// 输出结果: "tomato"

console.log(plants);

// 输出结果: Array ["broccoli", "cauliflower", "cabbage", "kale"]

8.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度,修改了原数组。

例如:

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');

console.log(count);

// 输出: 4

console.log(animals);

// 输出: Array ["pigs", "goats", "sheep", "cows"]

8.unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

例如:

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));

// expected output: 5

console.log(array1);

// expected output: Array [4, 5, 1, 2, 3]

9.shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);

// expected output: Array [2, 3]

console.log(firstElement);

// expected output: 1

10.reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

const array1 = ['one', 'two', 'three'];

console.log('array1:', array1);

// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();

console.log('reversed:', reversed);

// expected output: "reversed:" Array ["three", "two", "one"]        

11.splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

说明:splice(参数1,参数2,参数3...) 最多有三个参数,参数1代表起始位置,参数2代表要删除的个数,参数3代表要添加的数据,可以多个,用逗号隔开。

eg:

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');

// 在months数组索引为1的位置,向后删除0个元素,并添加上 'Feb'

console.log(months);

// 输出: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');

// 在months数组索引为4的位置,向后删除1个元素,并添加上 'May'

console.log(months);

// expected output: Array ["Jan", "Feb", "March", "April", "May"]

12.slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

eg:

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));

// 输出结果: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));

// 输出结果: Array ["camel", "duck"]

13.sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

const months = ['March', 'Jan', 'Feb', 'Dec'];

months.sort();

console.log(months);

// 输出结果: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];

array1.sort();

console.log(array1);

// 输出结果: Array [1, 100000, 21, 30, 4]

要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列

eg:

varnumbers=[4,2,5,1,3];

numbers.sort(function(a,b){

return a-b;//升序

});

console.log(numbers); // number[1,2,3,4,5]

14.reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

reducer函数接收4个参数:

1.Accumulator (acc) (累计器)

2.Current Value (cur) (当前值)

3.Current Index (idx) (当前索引)

4.Source Array (src) (源数组)

您的reducer函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果。

reduce() 如何运行:

假如运行下段reduce()代码:

[0,1,2,3,4].reduce(function(accumulator,currentValue,currentIndex,array)

{

return accumulator+currentValue;

});

callback 被调用四次,每次调用的参数和返回值如下表:

15.forEach()方法从头至尾遍历数组,为每个元素调用指定的函数

eg:

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"

// expected output: "b"

// expected output: "c"


16.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。(筛选,过滤数组)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

//筛选数组里面元素长度大于6的元素

console.log(result);

// 输出: Array ["exuberant", "destruction", "present"]

17.map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。(映射)

eg:

const array1 = [1, 4, 9, 16];

// pass a function to map

const map1 = array1.map(x => x * 2);

console.log(map1);

// expected output: Array [2, 8, 18, 32]

18.数组的深拷贝可以使用lodash工具参考: https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue

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

推荐阅读更多精彩内容