- for循环 和 while循环 是普通循环，一般用于 字符串类型、数组类型的遍历
- for...in...循环用于对象类型的遍历
数组 中forEach，map，filter的区别（只用于数组）
第1种：forEach循环
-
Array.forEach(function (v, i){ })，用于【调用数组】的每个元素，并将元素传递给回调函数。原数组不变，不会返回一个新数组，与普通的for 循环一样，但比for循环语句简单
-
特点：
- ①forEach():没有返回值，只是针对每个元素调用function,就是将数组中的每个值，依次进行遍历，执行功能函数。
- ② 需要先创建一个空数组（或其它数据类型）
- ③ 没有返回值 例如：依次输出数组元素的值
案例：
// 第一种做法：for循环
let arr = [4, 9, 0, 10, 240, -12, 98]
let newArr = []
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i] + 10)
}
console.log(arr); // [4, 9, 0, 10, 240, -12, 98] **原数组不变**
console.log(newArr); // [14, 19, 10, 20, 250, -2, 108] 没有返回值，需要新建一个空数组
// 第一种做法：原数组.forEach(function(v,i){ }) v -> value值 i -> 索引
let arr = [4, 9, 0, 10, 240, -12, 98]
let newArr = []
arr.forEach(function (v, i) {
// v + 10 推入到新数组中 newArr.push()
newArr.push(v + 10) })
console.log(arr); // [4, 9, 0, 10, 240, -12, 98] **原数组不变**
console.log(newArr); // [14, 19, 10, 20, 250, -2, 108] 没有返回值，需要新建一个空数组
第2种：map循环
-
Array.map(function (v, i){ })，原数组的每一项执行函数后，返回一个新的数组。原数组不变，若是数组对象则会改变
-
特点：
-
① map():返回一个新的数组，新数组里每个元素为调用function的结果，就是将每个元素进行function的处理，将处理后的结果作为一个元素放入新的数组。简单的说，【将数组每个元素进行处理，得到处理后的数组】
②有返回值
- 例如 ：将数组元素乘以2后的得到新数组
案例
- [1,2,3,4,5,6] 将原有数组中每一项的数据乘以10返回新数组
- ['13','3','79','1','10','24','78','2'] 个位数补0返回新数组
- 遍历数组对象
// [1,2,3,4,5,6] 将原有数组中每一项的数据加10返回新数组 用forEach循环 或map循环都可以操作
// 采用map循环操作
let arr = [1, 2, 3, 4, 5, 6]
let newArr = arr.map(function (v, i) {
return v * 10
})
console.log(arr); // [1, 2, 3, 4, 5, 6] **原数组不变**
console.log(newArr); // [10, 20, 30, 40, 50, 60] 有返回值
// 第2题：
// ['13','3','79','1','10','24','78','2'] 个位数补0返回新数组
// 需要判断元素是否小于<10后 补0,且此案例中每个元素都是字符串类型
let arr = ['13', '3', '79', '1', '10', '24', '78', '2']
let newArr = arr.map(function (v, i) {
if (+v < 10) {
v = '0' + v }
return v // 把结果推进newArr中
})
// 或直接简写为 ： return +v < 10 ? '0' + v : v
console.log(arr); // ['13', '3', '79', '1', '10', '24', '78', '2']
console.log(newArr); // ['13', '03', '79', '01', '10', '24', '78', '02']
// 第3题：遍历数组对象
// 每个对象里年龄都+1
let arr = [{
name: '李狗蛋',
age: 16,
sex: '男'
}, {
name: '张翠花',
age: 20,
sex: '女'
}, {
name: '赵铁柱',
age: 25,
sex: '男'
}, {
name: '王小二',
age: 19,
sex: '男'
}]
let newArr = arr.map(function (v, i) {
// v.age = v.age + 1
v.age += 1 // 这里的v指每个对象
return v
})
console.log(newArr)
console.log(arr)
// 原数组arr和新数组newArr结果都是一样的 ,因为对象是引用类型，一改则全改
/* [{
name: '李狗蛋',
age: 17,
sex: '男'
}, {
name: '张翠花',
age: 21,
sex: '女'
}, {
name: '赵铁柱',
age: 26,
sex: '男'
}, {
name: '王小二',
age: 20,
sex: '男'
}] */
第3种：filter循环
Array.filter(function(v,i){})，过滤数组中符合条件的元素并返回一个新的数组，常用于【去重、筛选符合某些条件的元素】
特点：①返回一个符合func条件的元素数组 ②将数组中的每个元素进行条件判断【 需要将数组元素按照一定条件进行筛选适用】，符合条件的元素存入新数组中，最后返回新数组
③有返回值
④不会改变原数组
例如：筛选数组中元素值大于60，小于等于100的元素
去重
案例
- 去掉[13, 0, '', 90, 78, '' , ''] 的空字符串和0值
- 数组去重 [1,1,2,3,4,4,5,6,6,6,6,7,7,8,9,9,9]
// arr = [13, 0, '', 90, 78, '', ''] 去掉数组中的空字符串和0
let arr = [13, 0, '', 90, 78, '', '']
let newArr = arr.filter(function (v, i) {
if (v !== '' && v !== 0) {
return v
}
return v
//或 return v !== '' && v !== 0 // return 符合条件的推入新数组的条件->布尔值(过滤)
})
console.log(newArr); // [13, 90, 78]
console.log(arr); // [13, 0, '', 90, 78, '', ''] // **原数组不变**
// 第2题：
// 数组去重 [1,1,2,3,4,4,5,6,6,6,6,7,7,8,9,9,9]
let arr=[1,1,2,3,4,4,5,6,6,6,6,7,7,8,9,9,9]
let newArr=arr.filter(function(v,i){
return arr.indexof(v)===i
})
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
常见案例分析
1.统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数(并封装)
let str = 'abcoefoxyozzopp'
function getCount(str) {
// 将字符串转换为数组
let arr = str.split('')
// 声明一个空对象存储各个字符出现的次数 ['a','b','c','0'...]
let obj = {} //forEach没有返回值，故需要先创建空对象
// 对数组进行遍历 v 代表当前遍历项
arr.forEach(v => {
// obj[v] 相当于 obj.a 判断如果对象中有指定字符的属性名则在当前数量上加一
//否则给对象创建一个新键名
if (obj[v]) {
obj[v] += 1
} else {
obj[v] = 1
}
})
}
console.log(getCount(str))
// {a: 1, b: 1, c: 1, o: 4, e: 1,f: 1,o: 4,p: 2,x: 1,y: 1,z: 2}
2.装一个函数，实现功能：往函数传参为该格式字符串：'get-elements-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’（注意：直接在函数中返回‘getElementsByClassName’字符串为0分，需要对相同格式的字符串都能生效）最后封装
function getName(str) {
// 1. 将所有的字母都转换为小写
str = str.toLowerCase()
// 2. 将-分隔的字符串转换为数组
let arr = str.split('-')
let newArr = arr.map(function (v, i) {
// 如果当前索引不为0 则找到字符串索引为0项转换大写，拼接 剩余字符串
if (i !== 0) {
return v[0].toUpperCase() + v.substr(1)
}
return v
})
// 再将数组转换为字符串
let newStr = newArr.join('')
return newStr
}
console.log(getName(str));
3.有一个url(字符串)如下: www.heima.com?key0=haha&key1=hello&key2=xixi ; 要求处理此url, 得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }
//第1步：提取字符串，得到一个新数组
let arr = url.split('?') // ['http://www.heima.com', 'key0=haha&key1=hello&key2=xixi']
// 第2步：返回删除数组中的第2个元素
let newStr = arr.pop() // 'key0=haha&key1=hello&key2=xixi'
// 第3步：分割数组
let newArr = newStr.split('&') // ['key0=haha', 'key1=hello', 'key2=xixi']
// 第4步：遍历每个元素，在进一步分割
let newArr1 = []
newArr.forEach(function (v, i) {
newArr1.push(v.split('='))
})
// console.log(newArr1);[['key0', 'haha'], ['key1', 'hello'], ['key2', 'xixi']]
// 第5步：遍历每个元素，创建一个对象
let obj = {}
newArr1.forEach(function (v, i) {
obj[v[0]] = v[1]
})
console.log(obj) // {key0: 'haha', key1: 'hello', key2: 'xixi'}
