js中的Array

时间: 2019-02-03阅读: 64标签: 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)];

JS取出两个数组中的不同或相同元素

concat() 方法:用于连接两个或多个数组。Array filter() 方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。indexOf() 方法:可返回某个指定的字符串值在字符串中首次出现的位置。

JS中forEach的用法

orEach是ES5中操作数组的一种方法,主要功能是遍历数组,forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身

js 数组方法,包含ES6方法

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

js判断数组是否包含某个元素

js判断JS 判断某变量是否为某数组中的一个值的4种方法(总结),分享给大家。indexOf()、正则表达式、arr.find() 、for循环结合if判断

js判断对象、数组是否为空

做项目时想要根据判断对象是否为空,然后执行不同的操作,下面就整理下如何实现,针对数组和对象的通用方法。方法一:isPrototypeOf()和length判断、方法二:hasOwnProperty、方法三:利用JSON.stringify()方法

for in 和 for of的区别详解

for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。for ... in 循环返回的值都是数据结构的 键值名。遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名

JS 将有父子关系的数组转换成树形结构数据

将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作

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

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

js实现一维数组转换为树形结构数组

在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯