关闭

js中的Array

时间: 2019-02-03阅读: 1006标签: 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)];
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1952

es6之Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。==只要是部署了Iterator接口==的数据结构,Array.from都能将其转为数组。

Array.slice 8种不同用法

在深入研究一些更高级的用法之前,让我们看一下slice方法的基础知识。如MDN文档,slice 是数组上的一个方法,它最多有两个参数,从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取

JavaScript数组中的22个常用方法

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

es6中 Array.from()函数的用法

ES6为Array增加了from函数用来将其他对象转换成数组,Array.from可以接受三个参数,我们看定义:Array.from(arrayLike [, mapFn [, thisArg]])。arrayLike:被转换的的对象。 mapFn:map函数。 thisArg:map函数中this指向的对象。

Array.prototype.slice.call()

MDN中对于Array.prototype.slice.()的介绍中,提到了类数组对象。以下是原文:slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。

js数组的迭代

js数组的迭代:forEach() 方法对数组的每个元素执行一次提供的函数。map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

js 数组方法,包含ES6方法

JavaScript常用数组操作方法:concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。

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

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

在JavaScript中为什么应该用map和filter替换forEach?

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持,因此这是一个明智的选择。

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

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

点击更多...

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