数据常用方法总结
forEach遍历数组
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
arr.forEach((item, index) => {
console.log("值是" + item, "下标是" + index);
});
值是15 下标是0
值是26 下标是1
值是23 下标是2
值是10 下标是3
值是9 下标是4
值是6 下标是5
值是78 下标是6
值是21 下标是7
值是24 下标是8
值是10 下标是9
值是9 下标是10
filter过滤数组
// filter 过滤数组单元值 生成新数组 遍历筛选元素 把满足条件的元素筛选出来后放入新的数组
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.filter((item) => item > 30);
console.log(arr); // 15, 26, 23, 10, 9,6, 78, 21, 24, 10,9
console.log(newArr); //78
map迭代原数组
// map 迭代原数组 生成新数组遍历元素 把每项执行一遍回调函数 把结果放到一个新数组中返回例如求一个数的平方
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.map((item) => item - 10);
console.log(arr); //15, 26, 23, 10, 9, 6, 78, 21, 24, 10,9
console.log(newArr); //5, 16, 13, 0, -1,-4, 68, 11, 14, 0,-1
const data=[
{id:1,name:'zs',age:20},
{id:2,name:'ls',age:34},
{id:3,name:'ww',age:224},
{id:4,name:'aa',age:30}
]
const res=data.map(({ id ,name }) => {
return { id, name }
})
console.log(res)
/* [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' },
{ id: 3, name: 'ww' },
{ id: 4, name: 'aa' }
] */
join数组单元素拼接成字符串
// join数组单元素拼接成字符串
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.join("");
let newArr2 = arr.join(",");
console.log(newArr); //1526231096782124109
console.log(newArr2); //15,26,23,10,9,6,78,21,24,10,9
concat 合并两个数组 生成一个新数组
// concat合并两个数组 生成一个新数组
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let arr2 = ["zs", "ls", "wr", "ly"];
let newArr = arr.concat(arr2);
console.log(newArr);//15, 26, 23, 10, 9,6, 78, 21, 24, 10,9, 'zs', 'ls', 'wr', 'ly'
sort 数组排序
// sort 对原数组单元值排序 传入一个函数 计算a-b从小到大 b-a从大到小
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.sort(function (a, b) {
return a - b;
});
let newArr2 = arr.sort(function (a, b) {
return b - a;
});
console.log(newArr); //6, 9, 9, 10, 10,15, 21, 23, 24, 26, 78
console.log(newArr);// 78, 26, 24, 23, 21,15, 10, 10, 9, 9, 6
splice 删除或替换原数组单元
//万能方法,可以实现增删改:
//Array.splice(开始位置, 删除的个数,元素)
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha')
let arr2 = arr.splice(2, 3)
let arr1 = arr.splice(2, 1 'haha')
console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
console.log(arr2) //[1, 2] 删除三个元素
console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
indexOf 查找在数组中首次出现的位置
// indexOf在数组中查找首次出现的位置 找到返回索引值 找不到返回-1
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.indexOf(9);
console.log(newArr); //4
lastIndexOf 在数组中最后出现的位置
// lastIndexOf在数组中查找某个元素最后一次出现的位置 找到返回索引值 找不到返回-1
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.lastIndexOf(9);
let newArr1 = arr.lastIndexOf(100);
console.log(newArr); //10
console.log(newArr1); //-1
reverse反转数组
// reverse反转数组
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.reverse();
console.log(newArr); // 9, 10, 24, 21, 78, 6, 9, 10, 23, 26,15
from伪数组转为真数组
let array = {
0: 'name',
1: 'age',
2: 'sex',
3: ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array )
console.log(arr) // ['name','age','sex',['user1','user2','user3']]
let array = {
'name': 'name',
'age': 'age',
'sex': 'sex',
'user': ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array )
console.log(arr) // [ undefined, undefined, undefined, undefined ]
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
find返回首次满足条件的元素 可迭代
//find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
//如果没有符合条件的元素返回 undefined
//find() 对于空数组,函数是不会执行的。
//find() 并没有改变数组的原始值。
//array.find(function(currentValue, index, arr),thisValue),其中currentValue为当前项,index为当前索引,arr为当前数组
let test = [1, 2, 3, 4, 5];
let a = test.find(item => item > 3);
console.log(a); //4
let b = test.find(item => item == 0);
console.log(b); //undefined
findIndex返回首次满足条件的元素索引 可迭代
//返回数组中首次满足条件的元素的索引值
//findIndex()与find()的使用方法相同,只是当条件为true时findIndex()返回的是索引值,而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1,而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数,与find()相同。
const bookArr=[
{
id:1,
bookName:"三国演义"
},
{
id:2,
bookName:"水浒传"
},
{
id:3,
bookName:"红楼梦"
},
{
id:4,
bookName:"西游记"
}
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1
some有一个满足条件返回true 可迭代
//some方法会依次检测数组中每一个元素是否符合给定函数的条件,返回布尔值,不会对空数组处理,不改变原数组。在执行中,有一个满足就返回true,不再继续执行
var aa = [1,32,4,26];
var bb = aa.some(function(item){
return item > 30;
})
console.log(bb); // 输出为true
//some回调函数有三个参数,一个是当前元素(必须),一个是当前元素的索引index(可选),一个是当前元素属于的数组对象。
every满足所有返回true 可迭代
//every方法会依次检测数组中每一个元素是否符合给定函数的条件,返回布尔值,不会对空数组处理,不改变原数组。所有元素都满足才返回true
var aa = [3,32,4,26];
var bb = aa.every(function(item){
return item > 2;
})
console.log(bb); // 输出为true
//every回调函数有三个参数,一个是当前元素(必须),一个是当前元素的索引index(可选),一个是当前元素属于的数组对象。
reduce方法每一个元素依次执行返回最终的值。
参数 描述 function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。 函数参数:参数描述total必需。初始值, 或者计算结束后的返回值。currentValue必需。当前元素currentIndex可选。当前元素的索引arr可选。当前元素所属的数组对象。 initialValue 可选。传递给函数的初始值
//计算数组元素相加后的总和
//reduce方法会对数组中的每一个元素依次进行回调函数的方法,返回最终的值。
var aa = [3,2,4,1];
var bb = aa.reduce(function(total,item){
return total+item;
})
console.log(bb); // 输出为10
//reduce回调函数有四个参数,第一个是总和(必须),也是返回的值,第二个是当前元素(必须),第三个是当前元素的索引index(可选),一个是当前元素属于的数组对象。
//计算数组元素相加后的总和
//reduce方法会对数组中的每一个元素依次进行回调函数的方法,返回最终的值。
var aa = [3,2,4,1];
var bb = aa.reduce(function(total,item){
return total+item;
})
console.log(bb); // 输出为10
//reduce回调函数有四个参数,第一个是总和(必须),也是返回的值,第二个是当前元素(必须),第三个是当前元素的索引index(可选),一个是当前元素属于的数组对象。
const arr = [
{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },
{ id: 2, name: '榴莲', state: false, price: 80, count: 2 },
{ id: 3, name: '草莓', state: true, price: 20, count: 3 },
]
// 需求:把购物车数组中,已勾选的水果,总价累加起来!
/* let amt = 0 // 总价
arr.filter(item => item.state).forEach(item => {
amt += item.price * item.count
})
console.log(amt) */
// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)
console.log(result)
reduce还可以用于 将二维数据转为一维数组 计算数组中出现的次数 数组去重 … 还有数种功能这里就不一一赘述了具体请参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
push尾部追加
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.push("zs");
console.log(newArr); //12 返回新数组的长度 改变原数组
console.log(arr);//15, 26, 23, 10,9, 6, 78, 21,24, 10, 9, 'zs'
unshift头部追加
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.unshift("zs");
console.log(newArr); //12 返回新数组的长度 改变原数组
console.log(arr); //'zs',15, 26, 23, 10,9, 6, 78, 21,24, 10, 9
pop尾部删除
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.pop();
console.log(newArr); //9 返回删除的元素 改变原数组
console.log(arr); //15, 26, 23, 10,9, 6, 78, 21,24, 10
shift头部删除
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.shift();
console.log(newArr); //15 返回删除的元素 改变原数组
console.log(arr); // 26, 23, 10,9, 6, 78, 21,24, 10, 9
Array 对象方法
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果。 |
copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
entries() | 返回数组的可迭代对象。 |
every() | 检测数值元素的每个元素是否都符合条件。 |
fill() | 使用一个固定值来填充数组。 |
filter() | 检测数值元素,并返回符合条件所有元素的数组。 |
find() | 返回符合传入测试(函数)条件的数组元素。 |
findIndex() | 返回符合传入测试(函数)条件的数组元素索引。 |
forEach() | 数组每个元素都执行一次回调函数。 |
from() | 通过给定的对象中创建一个数组。 |
includes() | 判断一个数组是否包含一个指定的值。 |
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
isArray() | 判断对象是否为数组。 |
join() | 把数组的所有元素放入一个字符串。 |
keys() | 返回数组的可迭代对象,包含原始数组的键(key)。 |
lastIndexOf() | 搜索数组中的元素,并返回它最后出现的位置。 |
map() | 通过指定函数处理数组的每个元素,并返回处理后的数组。 |
pop() | 删除数组的最后一个元素并返回删除的元素。 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reduce() | 将数组元素计算为一个值(从左到右)。 |
reduceRight() | 将数组元素计算为一个值(从右到左)。 |
reverse() | 反转数组的元素顺序。 |
shift() | 删除并返回数组的第一个元素。 |
slice() | 选取数组的一部分,并返回一个新数组。 |
some() | 检测数组元素中是否有元素符合指定条件。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加或删除元素。 |
toString() | 把数组转换为字符串,并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
valueOf() | 返回数组对象的原始值。 |
window上对象的一些方法https://www.runoob.com/jsref/obj-window.html