js中的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); // 19、解构
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)];本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!