js中的Array

访客3年前 (2021-02-11)关于黑客接单483

js中的Array

Array 工具用于在单个的变量中存储多个值。建立 Array 工具的语法：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

参数

参数 size 是期望的数组米素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来挪用组织函数 Array() 时，新建立的数组的米素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新建立并被初始化了的数组。

若是挪用组织函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当挪用组织函数时只通报给它一个数字参数，该组织函数将返回具有指定个数、米素为 undefined 的数组。

当其他参数挪用 Array() 时，该组织函数将用参数指定的值初始化数组。

当把组织函数作为函数挪用，不使用 new 运算符时，它的行为与使用 new 运算符挪用它时的行为完全一样。

1、啥是ArrayLike工具

类似，下面这种工具的就是ArrayLike
var arraylike = {
    0: "a",
    1: "b",
    2: "c",
    length: 3
}
arraylike.forEach(element => { // 报错
    console.log(element);
});
ArrayLike工具和数组类似，然则不能使用数组的方式，由于它是继续自Object.prototype而不是Array.prototype

获取dom米素的方式，一样平常都市发生ArrayLike工具

将ArrayLike工具转换成Array

方式一：
    var array = Array.from(arraylike);

方式二：
    var array = Array.from(arraylike, item => item+item);

2、reduce方式

reduce方式实在类似于叠罗汉，取数组中之一个参数和第二个参数做运算，然后将效果返回，作为下一次运算的之一个米素与数组中的第三个米素运算，重复这种操作
var array = [1,2,3,4,5];
var res = array.reduce((a, b) => a + b);            // 15 求和运算
var res = array.reduce((a, b) => a + b, 10);        // 25 通报第二个参数作为运算的起始之一个参数

数组花样化成工具，这对于处置后端api数据，利便前端渲染很有用
    var array = [
        {name: "小明", age: "10"},
        {name: "小张", age: "20"},
        {name: "小王", age: "30"},
    ]

    方式一:
        var obj = array.reduce((a, b) => {
            a[b.name] = b.age;
            return a;
        }, {});   // { ‘小明‘: ‘10‘, ‘小张‘: ‘20‘, ‘小王‘: ‘30‘ }

    方式二：
        var obj = array.reduce((a, b) => Object.assign(a, {
            [b.name]: b.age
        }), {});

    方式三：
        var obj = array.reduce((a, b) => ({...a, [b.name]: b.age}), {});

3、map方式

map方式循环便利所有米素，发生一个新的数组

var arr = [1,2,3,4,5];
var res = arr.map(item => item+1); // [ 2, 3, 4, 5, 6 ]

var res = arr.map(function(item){
    return item+this.init;
}, {
    init: 1
});  // [ 2, 3, 4, 5, 6 ]

filter方式

filter方式循环便利所有米素，凭据条件筛选出相符的米素，发生一个新的数组
    var arr = [1,2,3,4,5];
    var res = arr.filter(item => item > 3) // [ 4, 5 ]

4、sort方式

sort方式在原数组的基础上举行排序
    根据字母表顺序排序
        var arr = ["c", "b", "f", 1, "g", 2];
        arr.sort((a, b) => a.toString().localeCompare(b));  // [ 1, 2, ‘b‘, ‘c‘, ‘f‘, ‘g‘ ]

    升序排序
        var arr = [3,5,2,1,9];
        arr.sort((a, b) => a - b);

5、for...of

遍历数组
var arr = [3,5,2,1,9];
for(let item of arr) {
    console.log(item);
}

6、every

有条件的暂停遍历
var arr = [3,5,2,"end",1,9];
arr.every(item => {
    console.log(item);
    return item != "end";
})

7、some

和上面的every逻辑上正好相反
var arr = [3,5,2,"end",1,9];
arr.some(item => {
    console.log(item);
    return item === "end";
})

8、find和findIndex

var arr = [
    {name: "小明", age: "10"},
    {name: "小张", age: "20"},
    {name: "小王", age: "30"},
];

var res = arr.find(item => item.age==20);       // { name: ‘小张‘, age: ‘20‘ }
var res = arr.findIndex(item => item.age==20);  // 1

9、解构

var arr = [1,2,3,4,5];
var [a,,b, ...c] = arr;
console.log(a, b, c);   // 1 3 [ 4, 5 ]

10、去重

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

行使reduce举行数组去重
    var res = arr.reduce((a,b) => {
        if(a.indexOf(b) === -1) {
            a.push(b);
        }
        return a;
    }, []) // [ 1, 2, 3 ]

行使filter举行去重
    var res = arr.filter((a,b,c) => {
        return c.indexOf(a) === b;
    }) 

行使Set去重
    var res = [...new Set(arr)];

返回列表

上一篇：西席继续教育工作计划

下一篇：优异家长发言稿短一点家长代表演讲稿