1 for in 、for of、 for
const a = [1, 2, 3] const obj = { age: '19', name: '三三' } for (let i = 0; i < a.length; i++) { console.log((a[i])) } // 1, 2, 3 for (let item in a) { console.log(a[item]) }
// 1,2,3
for (let item of a) {
//for of 主要用在遍历数组
console.log(item)
}
// 1,2,3
for (let key in obj) {
//for in 主要用在遍历对象属性
console.log(key, ':', obj[key])
}
// age: 19 // name: 三三
2、some()、every()
// some 某个,every 每个 // some是指数组中某个满足条件就返回true, // every是指每一个满足条件才会返回true const students = [ {name: '三三', age: 25}, {name: '斑', age: 23}, {name: '中级妖怪', age: 30} ] const res1 = students.some((item) => { return item.name.startsWith('三'); }) const res2 = students.every((item) => { return item.age > 10; }) console.log(res1, res2) // true true
3、map()、forEach()
const res = students.map(item => { return item.age // [25, 23, 30] }) //map有返回值,返回数组类型,新数组,原数组不改变 students.forEach(item => { item.age += 1 //
})
/**
* [ { "name": "三三", "age": 26 },
* { "name": "斑", "age": 24 },
* { "name": "中级妖怪", "age": 31 } ]
*/ //forEach没有返回值,返回原数组,原数组改变
4、filter()
const res1 = studengs.filter((item) => { // filter有返回值,返回值是新数组,把符合过滤条件的过滤出来,原数组不变 return item.age >= 25; }) console.log(res1) // [{name: "三三", age: 25}, {name: "中级妖怪", age: 30}]
5、find()、findIndex()
const res1 = students.find((item) { // find 返回符合筛选挑条件的第一个元素 return item.age >= 25; }) console.log(res1) //{name: "三三", age: 25} const a = [1, 3, 5, 7]; const s = a.find(item => {
return item > 3
}); console.log(s) // 5 const res1 = students.findIndex((item) => { //findIndex第一个满足条件的index索引 console.log(item) return item.age >= 25; }) console.log(res1) // 0
6、reduce()、reduceRight()
// 很多时候需要累加数组项或者其它数组项计算后得到一个值(比如说求和) // 参数 从左往右开始 /* prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 */ // 求数组的和。 const a = [1,2,3,4,5,6,7,8,9,10] const str = a.reduce((prev,cur,index,arr) => { return prev + cur ; }) str // 55 // reduceRight()方法,从右往左开始,参数和上面是一样。 const str1 = a.reduceRight((prev,cur,index,arr) => { return prev + cur ; }) // str1 // 55
7、indexOf()、lastIndexOf()、includes()
// indexOf() 是从左往右查,返回第一个匹配索引,大小写敏感,找不到返回-1,内部使用严格相等 // lastIndexOf() 从右往左查,返回最后一个匹配索引 // 注意:二者返回索引都是从左往右计算的
// includes()返回一个bool,表示包含给定的值
const arr = [1,2,3,4,5,5,6,7,1]; console.log(arr.indexOf(5));// 4 下标为4的位置 console.log(arr.lastIndexOf(5));// 5
console.log(arr.indexOf(5));
[NaN].indexOf(NaN); //-1
[NaN].includes(NaN); //true
// 可与上面find() 对比学习
8、assign() 与 解构运算符...
/* Object.assign(target,...sources); target是目标对象 sources是源对象 返回目标对象 */ var o1= {a:1}; var o2 = {b : 2}; var o3 = {c:3}; var obj = Object.assign(o1,o2,o3); console.log(obj) //{a:1,b:2,c:3}; console.log(o1) //{a:1,b:2,c:3}; 注意目标对象也会发生变化 // 可以用 ... 解构运算符代替 var obj = {...o1,...o2,...o3} console.log(obj) //{a:1,b:2,c:3}; console.log(o1) //{a:1};