1. for
循环,可以break结束循环。
arr = [1,2,3,4,5,6]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]) //1,2,3,4,5,6
}
2. for...in
循环,用于对象循环遍历,可获取对象的对应键值
[注意
]:for…in
循环对象的所有枚举属性,需再使用hasOwnProperty()
方法来忽略继承属性,即在循环内部判断一下,某个属性是否为对象自身的属性,避免出现遍历失真的情况。
let obj = { name: 'Tom', sex: 'male', age: '18' }
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key])
}
}
// Tom
// male
// 18
3. map
方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途无法停止,会将所有成员遍历完。
let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]
此外,map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员item
、当前位置index
和数组本身arr
。
let objArr = [
{ name: 'Tom', sex: 'male', age: '18' },
{ name: 'Jerry', sex: 'male', age: '16' },
{ name: 'Caty', sex: 'male', age: '20' },
]
objArr.map((item, index, arr)=>{
console.log(item.name) //Tom Jerry Caty
console.log(index) // 0 1 2
console.log(objArr) //objArr
})
4. forEach
的使用方法和map差不多,只是forEach
方法 不返回值,只用来操作数据
,且循环中途无法停止,会将所有成员遍历完。
传入三个参数:当前成员item、当前位置index和数组本身arr。
let objArr = [
{ name: 'Tom', sex: 'male', age: '18' },
{ name: 'Jerry', sex: 'male', age: '16' },
{ name: 'Caty', sex: 'male', age: '20' },
]
objArr.forEach((item, index, arr)=>{
console.log(item.name) //Tom Jerry Caty
console.log(index) // 0 1 2
console.log(objArr) //objArr
})
5. filter
过滤循环
filter方法用于过滤数组成员
,满足条件的成员组成一个新数组
返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组
。
传入三个参数:当前成员item
、当前位置index
和数组本身arr
。
let objArr = [
{ name: 'Tom', sex: 'male', age: '18' },
{ name: 'Jerry', sex: 'male', age: '16' }
]
let obj2 = objArr.filter((item, index, arr)=>{
return (item.name === 'Tom')
})
console.log(obj2) // [{ name: 'Tom', sex: 'male', age: '18' }]
ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string):
let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew) // [3, 4, 5, 2, 3]
Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.
6. Object.keys 遍历对象的属性
Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。
let obj = { name: 'Tom', sex: 'male', age: '18' };
console.log(Object.keys(obj)) // ["name", "sex", "age"]
console.log(Object.values(obj)) // ["Tom", "male", "18"]
判断一个对象是否是空对象,可以用Object.keys(obj).length>0
总结对比
方法 | 适用于 | 是否停止循环 | 用法 |
---|---|---|---|
for | 数组 | break结束循环 | for (let i = 0; i < arr.length; i++) { … } |
for…in | 数组 | break结束循环 | for(let key in obj){ … } |
map | 数组 | 无法停止 | objArr.map((item, index, arr)=>{…}) |
forEach | 数组 | 无法停止 | objArr.forEach((item, index, arr)=>{…}) |
filter | 数组 | ------ | let arr2 = arrObj.filter((item,index,arr)=>{ return ?}) |
Object.keys | 数组 | ------ | Object.keys(obj) ,返回的是数组 |
数组的增删改
在数组 arr 开头添加元素 item。结果返回新的数组。
//输入:[1, 2, 3, 4], 10
//输出:[10, 1, 2, 3, 4]
function prepend(arr, item) {
let res = [...arr]
res.unshift(item)
return res
}
在数组 arr 末尾添加元素 item。结果返回新的数组。
//输入:[1, 2, 3, 4], 10
//输出:[1, 2, 3, 4, 10]
function append(arr, item) {
return arr.concat(item)
}
删除第一个元素。结果返回新的数组。
//输入:[1, 2, 3, 4]
//输出:[2, 3, 4]
function curtail(arr) {
let res = [...arr]
res.shift() //删除第一个元素,并返回第一个元素的值。改变原数组长度
return res
}
//或者
function curtail(arr) {
return arr.slice(1)
}
删除最后一个元素
//输入:[1, 2, 3, 4]
//输出:[1, 2, 3]
function delete(arr, item) {
return arr.slice(0,-1)
}
删除数组 arr 中的所有值与 item 相等的元素, 操作原数组,并返回结果
//输入:[1, 2, 2, 3, 4, 2, 2], 2
//输出:[1, 3, 4]
function removeWithoutCopy(arr, item) {
for (let i = 0; i < arr.length; i++) {
if(arr[i] == item){
arr.splice(i, 1)
i--
}
}
return arr
}
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组
//输入:[1, 2, 3, 4, 2], 2
//输出:[1, 3, 4]
function removeCopy(arr, item) {
let res = arr.filter(el=>{
return el != item
})
return res
}
在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组
//输入:[1, 2, 3, 4], 'aaa', 2
//输出:[1, 2, 'aaa', 3, 4]
function insert(arr, item, index) {
let res = [...arr]
res.splice(index, 0, item)
return res
}
map和filter对比