1 let list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11]
1、for 循环
for (let i = 0; i < list.length; i++) { if (list[i] === 5) { console.log(list[i]); // 5 break } console.log(list[i]); // 1 2 3 4 } for (let i = 0; i < list.length; i++) { if (list[i] === 5) { console.log(list[i]); // 5 continue } console.log(list[i]); // 1 2 3 4 6 7 8 undefined 10 11 }
2、for of 循环
1 for (const i of list) { 2 if (i === 5) { 3 console.log(i); // 5 4 break 5 } 6 console.log(i); // 1 2 3 4 7 }
3、forEach
1 list.forEach((item, index, arr) => { 2 console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, empty, 10, 11] 3 if (item === 5) { 4 console.log(item, '111'); // 5 5 return 6 } 7 console.log(item, '222'); // 1 2 3 4 6 7 8 10 11 8 })
/** * 1、for、for of、forEach 三者都是由左到右遍历数组 * 2、forEach 无法跳出循环;for 和 for ..of 可以使用 break 或者 continue 跳过或中断 * 3、for ...of 直接访问的是实际元素。for 遍历数组索引,forEach 回调函数参数更丰富,元素、索引、原数组都可以获取 * 4、for ...of 与 for 如果数组中存在空元素,同样会执行。 */
let list_1 = [ {name: 'aa', flag: false}, {name: 'bb', flag: true}, {name: 'cc', flag: false} ]
4、some
1 let flag_1 = list_1.some(item => item.flag) 2 console.log(flag_1); // true
5、every
1 let flag_2 = list_1.every(item => item.flag) 2 console.log(flag_2); // false
1 /** 2 * 1、some、every 二者都是用来做数组条件判断的,都是返回一个布尔值 3 * 2、二者都可以被中断 4 * 3、some 若某一元素满足条件,返回 true,循环中断;所有元素不满足条件,返回 false。 5 * 4、every 与 some 相反,若某一元素不满足条件,返回 false,循环中断;所有元素满足条件,返回 true。 6 */
let list_2 = [ {name: 'aa', text: 'box', id: 1}, {name: 'bb', text: 'content', id: 2}, {name: 'cc', text: 'box', id: 3} ]
6、filter
1 let arr1 = list_2.filter(item => { 2 return item.text === 'box' 3 }) 4 console.log(arr1); // [{name: 'aa', text: 'box', id: 1}, {name: 'cc', text: 'box', id: 3}]
7、map
1 let arr2= list_2.map(item => { 2 return item.id < 2 3 }) 4 console.log(arr2); // [true, false, false]
1 /** 2 * 1、filter、map 二者都是生成一个新数组,都不会改变原数组(不包括遍历对象数组是,在回调函数中操作元素对象) 3 * 2、二者都会跳过空元素 4 * 3、map 会将回调函数的返回值组成一个新数组,数组长度与原数组一致。 5 * 4、filter 会将符合回调函数条件的元素组成一个新数组,数组长度与原数组不同。 6 * 5、map 生成的新数组元素是可自定义。 7 * 6、filter 生成的新数组元素不可自定义,与对应原数组元素一致。 8 */
1 let list_3 = [ 2 {name: 'aa', id: 1}, 3 {name: 'bb', id: 2}, 4 {name: 'cc', id: 3} 5 ]
8、find
1 let arr3 = list_3.find(item => item.id === 3) 2 console.log(arr3); // {name: "cc", id: 3}
9、findIndex
1 let index = list_3.findIndex(item => item.id === 2) 2 console.log(index); // 1
1 /** 2 * 1、find、findIndex 二者都是用来查找数组元素 3 * 2、find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined。 4 * 3、findIndex 它返回数组中找到的元素的索引,而不是其值,如果不存在返回 -1。 5 */
1 let list_4 = ['1', 2, 3, 4, 5, 3, 4, 5, 'a', 'a', 'a']
10、reduce
1 let arr = list_4.reduce((t, v) => { if (!t.includes(v)) { 3 return [...t, v] 4 } else { 5 return t 6 } 7 }, []) 8 console.log(arr, 'arr'); // ["1", 2, 3, 4, 5, "a"]
11、reduceRight
let list_5 = [1, 5, 3, 4, 2, 6] let reverse = list_5.reduceRight((t, v) => { t.push(v) return t }, []) console.log(reverse); // [6, 2, 4, 3, 5, 1]
12、for in 遍历对象
1 Object.prototype.fun = () => {} 2 let obj = {1: 'a', 2: 'b', 3: 'c'} 3 4 for (const i in obj) { 5 console.log(i, ':', obj[i]); // 1 : a, 2 : b,3 : c,fun : () => {} 6 } 7 8 for (const i in obj) { 9 if (Object.hasOwnProperty.call(obj, i)) { 10 console.log(i, '=', obj[i]); // 1 = a,2 = b,3 = c 11 } 12 }