js中的Array

更新日期: 2019-02-03阅读: 2.5k标签: array

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)];

链接: https://fly63.com/article/detial/1952

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

原生js数组扁平化方法总汇,JavaScript多维数组如何实现扁平化处理返回一维数组

js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 JavaScript方法包括 递归、es5 Array 的reduce函数用法、toString方法、ES6扩展运算符...

数组去重_原生js对普通数组去重算法的7种方法总结

JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单

如何快速的创建一个包含100个元素的数组

如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!

js中数组创建的多种方式,数组中常用方法总汇

javascript创建数组的几种方式:1、字面量形式直接创建数组,2、Array构造函数创建数组。js数组常用的方法有哪些:join(),push()和pop(),shift() 和 unshift(),sort(),reverse(),concat()等

Array的 every、some、filter、map的区别,以及和reduce的区别

every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.

从非数组对象转数组方法小结

从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

js中split()和join() 的使用_数组对象和字符串的相互转换

在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!