javascript 数组方法汇总

这里有更详细的MDN文档

数组创建于判断

1. 创建数组 (`new Array() / Array.of()`)

    // 字面量方法
const arr = [1, 2, 3];

// 构造函数方法

// 无参数 返回空数组
const arr = new Array(); // []

// new Array() 单正整数参数，表示生成数组长度
const a = new Array(7); // [ , , , , , , ]

// Array.of() 同样用于创建新数组，但是参数不论类型都为 元素
const arr = Array.of(7); // [ 7 ]

// 非正整数参数数字参数，报错
const arr = new Array(2.3); // 报错
const arr = new Array(-2); // 报错

// 其他类型值，当做数组的一项
const arr = new Array({name:'lisa'}); // [ { name: 'lisa' } ]

// 多参数，当做数组项
const arr = new Array(1, 'name', [2]); // [ 1, 'name', [ 2 ] ]

2. 判断是否为数组 (`Array.isArray()`)

    Array.isArray([1, 3, 4]); // true
Array.isArray(true); // false

3. 从类数组对象中创建一个新的数组 (`Array.from()`)

    const arr = Array.from('foo');
const temp = Array.from({'0': 'aaa', '1': 'bbb', length: 2});

    console.log(arr); // [ 'f', 'o', 'o' ]
    console.log(temp); // [ 'aaa', 'bbb' ]

会改变原数组的数组操作方法

1. 末端添加一个或者多个元素 (`.push()`)

改变原数组
返回值：添加后的数组长度

    let arr = [];

    arr.push(true, 'a', undefined, 23); // 返回值 4
    console.log(arr); // [true, "a", undefined, 23]

// 如果参数是数组，不会有拼接的效果，而是将数组作为一个元素添加到末尾
let a = [1, null];
const b = ['b', 'c'];

    a.push(b);
    console.log(a);

2. 删除数组末端最后一个元素 (`.pop()`)

改变原数组
返回值：操作中删除的元素

    let a = [1, null];
const ret = a.pop();

    console.log(a); // [1]
    console.log(ret); // null

3. 数组开头添加一个或多个元素 (`.unshift()`)

改变原数组
返回值：添加后的数组长度


let a = [1, null, '2'];
const ret = a.unshift(2, undefined);

    console.log(a); // [ 2, undefined, 1, null, '2' ]
    console.log(ret); // 5

4. 删除数组第一个元素 (`.shift()`)

改变原数组
返回值：操作中删除的元素

    let a = [1, null, '2'];

const ret = a.shift();

    console.log(a); // [ null, '2' ]
    console.log(ret); // 1

5. 删除现有数组中元素或者添加新元素 (`.splice()`)

改变原数组
返回值：由被删除元素组成的数组

    // 参数1 修改起始位置 参数2 删除的数量 参数3... 需要添加的元素
let a = [1, null, '2'];

const ret = a.splice(1, 2, 'new');

    console.log(a); // [ 1, 'new' ]
    console.log(ret); // [ null, '2' ]

6. 数组元素倒置 (`.reverse()`)

改变原数组
返回值：改变后的原数组引用

    let a = [1, null, '2', 222, 'undefined'];

const ret = a.reverse();

    console.log(a); // [ 'undefined', 222, '2', null, 1 ]
    console.log(ret); // [ 'undefined', 222, '2', null, 1 ]
    console.log(a === ret); // true

7. 数组元素排序 (`.sort()`)

改变原数组
返回值：排序后的数组

    // 参数 为排序规则函数， 排序不稳定, 排序是按照 Unicode 码
let a = [1, null, '2', 222, 1111, 22];

const ret = a.sort();

    console.log(a); // [ 1, 1111, '2', 22, 222, null ]
    console.log(ret); // [ 1, 1111, '2', 22, 222, null ]

/* ========== ============ =========== ======== */
// 如果有函数作为参数传入，则会按照函数规则排序
function compareNumbers(a, b) {
return a - b;
    }

let a = [1, null, '2', 222, 1111, 22];

const ret = a.sort(compareNumbers);

    console.log(a); // [ null, 1, '2', 22, 222, 1111 ]
    console.log(ret); // [ null, 1, '2', 22, 222, 1111 ]

不改变原数组的数组方法

1. 选取数组一部分为新数组 (`.slice(fn)`)

不改变原数组
返回值：选取的新数组（浅拷贝）

    let a = [1, null, '2', 222, 'undefined'];

const ret0 = a.slice();
const ret1 = a.slice(1, 3);
const ret2 = a.slice(1);
const ret3 = a.slice(-2, -1); // - 表示倒数

    console.log(a); // [ 1, null, '2', 222, 'undefined' ]
    console.log(ret0); // [ 1, null, '2', 222, 'undefined' ]
    console.log(a === ret0); // false
    console.log(ret1); // [ null, '2' ]
    console.log(ret2); // [ null, '2', 222, 'undefined' ] 
    console.log(ret3); // [ 222 ]

2. 合并两个或者多个数组 (`.concat()`)

不改变原数组
返回值：拼接后的新数组

    const a = [1, null, '2'];
const b = ['undefined', 'test'];
const c = [333];

const ret = a.concat(b, 222, c); // 参数中有非数组参数，参数会被当做数组元素合并

    console.log(a); // 未改变 [ 1, null, '2' ]
    console.log(ret); // [ 1, null, '2', 'undefined', 'test', 222, 333 ]

3. 返回一个表示数组的字符串 (`.toString()`)

不改变原数组
返回值：一个数组元素组成的字符串

    const a = [1, null, '2', 222, 1111, 22];

const ret = a.toString();

    console.log(a); // [ 1, null, '2', 222, 1111, 22 ]
    console.log(ret); // 1,,2,222,1111,22

4. 数组中查找第一个给定元素的索引 (`.indexOf()`)

不改变原数组
返回值：返回找到的元素的索引或者 -1 (未找到元素)

    const a = [1, null, '2', 222, 1111, 22];

const ret0 = a.indexOf(null);
const ret1 = a.indexOf('10000');

    console.log(a); // [ 1, null, '2', 222, 1111, 22 ]
    console.log(ret0); // 1
    console.log(ret1); // -1

5. 数组中查找最后一个给顶元素的索引 (`.lastIndexOf()`)

不改变原数组
返回值：返回找到的元素的索引或者 -1 (未找到元素)

    const a = [1, null, '2', 222, null, 22];

const ret0 = a.lastIndexOf(null);

    console.log(a); // [ 1, null, '2', 222, null, 22 ]
    console.log(ret0); // 4

6. 将数组拼接成字符串 (`.join()`)

不改变原数组
返回值：拼接后的字符串

    // 默认使用 ','拼接
const a = [1, null, '2', 222, null, 22];

const ret0 = a.join();
const ret1 = a.join('');
const ret2 = a.join(' # ');

    console.log(a); // [ 1, null, '2', 222, null, 22 ]
    console.log(ret0); // 1,,2,222,,22
    console.log(ret1); // 1222222
    console.log(ret2); // 1 # # 2 # 222 # # 22

遍历相关方法

1. 普通遍历 (`.forEach()`)

参数：callback (value, index, array)
返回值：undefined

    const a = [1, null, '2', 222, null, 22];
const b = [];

const ret = a.forEach((item, i) => {
const temp = item > 0 ? item : 0;

        b.push(temp);
return temp; // 一般不用写，写也不起作用
    })

    console.log(b); // [ 1, 0, '2', 222, 0, 22 ]
    console.log(ret); // undefined

2. 有返回值 (`.map()`)

参数：callback (value, index, array)
返回值：原数组经函数处理后的返回值的集合

    const a = [1, null, '2', 222, null, 22];

const ret = a.map((item, i) => {
const temp = item > 0 ? item : 0;

return temp;
    })

    console.log(ret); // [ 1, 0, '2', 222, 0, 22 ]

3. 测试数组中元素是否都通过了指定函数测试 (`.every()`)

参数：callback (value, index, array)
返回值：true | false 必须所有元素都返回 true 最后结果才是 true

    const a = [1, null, '2', 222, null, 22];

const ret = a.every((item, i) => {

return item > 0 ;
    })

    console.log(ret); // false

4. 测试数组中元素是否有通过制定函数测试的元素 (`.some()`)

参数：callback (value, index, array)
返回值：true | false 只要有一个元素的返回值是 true 最后结果就是 true

    const a = [1, null, '2', 222, null, 22];

const ret = a.some((item, i) => {

return item > 0 ;
    })

    console.log(ret); // true

5. 返回通过函数测试的所有元素 (`.filter()`)

参数：callback (value, index, array)
返回值：通过函数测试的元素组成的数组

    const a = [1, null, '2', 222, null, 22];

const ret = a.filter((item, i) => {

return item > 0 ;
    })

    console.log(ret); // [ 1, '2', 222, 22 ]

6. 返回满足函数测试的第一个元素或者他的索引 (`.find() / .findIndex()`)

参数：callback (value, index, array)
返回值：通过函数测试的第一个元素

    const a = [1, null, '2', 222, null, 22];

const ret = a.find((item, i) => {

return item > 2 ;
    })

    console.log(ret); // 222

const ret2 = a.findIndex((item, i) => {

return item > 2 ;
    })

    console.log(ret2); // 3

其他方法

1. 填充元素 (`.fill()`)

参数： value（去填充的值）, start（起始坐标）, end （终止坐标）
返回值：填充后的数组

    // 原数组发生改变
const a = [1, null, '2', 222, null, 22];
const b = [1, null, '2', 222, null, 22];

const ret0 = a.fill('fill');
const ret1 = b.fill('fill', 2, 4);

    console.log(ret0); // [ 'fill', 'fill', 'fill', 'fill', 'fill', 'fill' ]
    console.log(a); // [ 'fill', 'fill', 'fill', 'fill', 'fill', 'fill' ]
    console.log(ret1); // [ 1, null, 'fill', 'fill', null, 22 ]
    console.log(b); // [ 1, null, 'fill', 'fill', null, 22 ]

2. 判断数组是否包含指定值 (`.includes()`)

参数： search （要找的值）, from （开始查找的坐标）
返回值：true | false 是否包含

    const a = [1, null, '2', 222, null, 22];

const ret = a.includes(222);

    console.log(ret); // true

3. 累加器 (`.reduce() / .reduceRight()`)

参数：callback { value （上一次调用函数的返回值或者提供的初始值） current （数组中正在处理的元素）index （当前的索引）} initialvalue 初始值
返回值函数处理后的最终值

    const a = [123, 333, 232, 11, 331, 1]

const ret0 = a.reduce((a, b) => a + ' # ' + b);
const ret1 = a.reduce((a, b) => (a + ' # ' + b), 10000);
// reduceRight 与 reduce 的执行方向相反
const ret2 = a.reduceRight((a, b) => (a + ' # ' + b));

    console.log(ret0); // 123 # 333 # 232 # 11 # 331 # 1
    console.log(ret1); // 10000 # 123 # 333 # 232 # 11 # 331 # 1
    console.log(ret2); // 1 # 331 # 11 # 232 # 333 # 123
    console.log(a); // [ 123, 333, 232, 11, 331, 1 ]

秒客网

javascript数组方法汇总

javascript 数组方法汇总

数组创建于判断

1. 创建数组 (`new Array() / Array.of()`)

2. 判断是否为数组 (`Array.isArray()`)

3. 从类数组对象中创建一个新的数组 (`Array.from()`)

会改变原数组的数组操作方法

1. 末端添加一个或者多个元素 (`.push()`)

2. 删除数组末端最后一个元素 (`.pop()`)

3. 数组开头添加一个或多个元素 (`.unshift()`)

4. 删除数组第一个元素 (`.shift()`)

5. 删除现有数组中元素或者添加新元素 (`.splice()`)

6. 数组元素倒置 (`.reverse()`)

7. 数组元素排序 (`.sort()`)

不改变原数组的数组方法

1. 选取数组一部分为新数组 (`.slice(fn)`)

2. 合并两个或者多个数组 (`.concat()`)

3. 返回一个表示数组的字符串 (`.toString()`)

4. 数组中查找第一个给定元素的索引 (`.indexOf()`)

5. 数组中查找最后一个给顶元素的索引 (`.lastIndexOf()`)

6. 将数组拼接成字符串 (`.join()`)

遍历相关方法

1. 普通遍历 (`.forEach()`)

2. 有返回值 (`.map()`)

3. 测试数组中元素是否都通过了指定函数测试 (`.every()`)

4. 测试数组中元素是否有通过制定函数测试的元素 (`.some()`)

5. 返回通过函数测试的所有元素 (`.filter()`)

6. 返回满足函数测试的第一个元素或者他的索引 (`.find() / .findIndex()`)

其他方法

1. 填充元素 (`.fill()`)

2. 判断数组是否包含指定值 (`.includes()`)

3. 累加器 (`.reduce() / .reduceRight()`)

相关文章

javascript数组方法汇总

javascript 数组方法汇总

数组创建于判断

1. 创建数组 (new Array() / Array.of())

2. 判断是否为数组 (Array.isArray())

3. 从类数组对象中创建一个新的数组 (Array.from())

会改变原数组的数组操作方法

1. 末端添加一个或者多个元素 (.push())

2. 删除数组末端最后一个元素 (.pop())

3. 数组开头添加一个或多个元素 (.unshift())

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

5. 删除现有数组中元素或者添加新元素 (.splice())

6. 数组元素倒置 (.reverse())

7. 数组元素排序 (.sort())

不改变原数组的数组方法

1. 选取数组一部分为新数组 (.slice(fn))

2. 合并两个或者多个数组 (.concat())

3. 返回一个表示数组的字符串 (.toString())

4. 数组中查找第一个给定元素的索引 (.indexOf())

5. 数组中查找最后一个给顶元素的索引 (.lastIndexOf())

6. 将数组拼接成字符串 (.join())

遍历相关方法

1. 普通遍历 (.forEach())

2. 有返回值 (.map())

3. 测试数组中元素是否都通过了指定函数测试 (.every())

4. 测试数组中元素是否有通过制定函数测试的元素 (.some())

5. 返回通过函数测试的所有元素 (.filter())

6. 返回满足函数测试的第一个元素或者他的索引 (.find() / .findIndex())

其他方法

1. 填充元素 (.fill())

2. 判断数组是否包含指定值 (.includes())

3. 累加器 (.reduce() / .reduceRight())

相关文章

1. 创建数组 (`new Array() / Array.of()`)

2. 判断是否为数组 (`Array.isArray()`)

3. 从类数组对象中创建一个新的数组 (`Array.from()`)

1. 末端添加一个或者多个元素 (`.push()`)

2. 删除数组末端最后一个元素 (`.pop()`)

3. 数组开头添加一个或多个元素 (`.unshift()`)

4. 删除数组第一个元素 (`.shift()`)

5. 删除现有数组中元素或者添加新元素 (`.splice()`)

6. 数组元素倒置 (`.reverse()`)

7. 数组元素排序 (`.sort()`)

1. 选取数组一部分为新数组 (`.slice(fn)`)

2. 合并两个或者多个数组 (`.concat()`)

3. 返回一个表示数组的字符串 (`.toString()`)

4. 数组中查找第一个给定元素的索引 (`.indexOf()`)

5. 数组中查找最后一个给顶元素的索引 (`.lastIndexOf()`)

6. 将数组拼接成字符串 (`.join()`)

1. 普通遍历 (`.forEach()`)

2. 有返回值 (`.map()`)

3. 测试数组中元素是否都通过了指定函数测试 (`.every()`)

4. 测试数组中元素是否有通过制定函数测试的元素 (`.some()`)

5. 返回通过函数测试的所有元素 (`.filter()`)

6. 返回满足函数测试的第一个元素或者他的索引 (`.find() / .findIndex()`)

1. 填充元素 (`.fill()`)

2. 判断数组是否包含指定值 (`.includes()`)

3. 累加器 (`.reduce() / .reduceRight()`)