JS数组中的方法2

保证node的版本#

1
node -v //查询node版本

最好升级到8.5以上版本

编译器#

webstorm版本>2017以上版本
vscode
sublime

webstorm配置npm和语法#

File->Setting中配置每打开一个项目都要重新配置
File->Default Setting 中配置后以后就不用配置了
- react jsx 语法是支持react的语法包含es6语法可以直接使用jsx语法

1.forEach(没有返回值)#

1
let arr=[1,2,3,4,5]
2
for(let i=0;i<arr.length;i++){//纯编程的 编程式语法:自己调用循环 可以很明确的看出来代码怎么执行的
3
  console.log(arr[i])
4
}
5
arr.forEach(function(item){//声明式语法 好处:不关心如何实现 不支持return，不管写不写return都会执行完
6
  console.log（item）
7
},改变this指向)

面试题 forEach，for in，for，for of的区别（为什么遍历数组的时候不采用for in）
- 按理说索引应该是数字number数据类型的，但是for in循环中key会变成string字符串数据类型
```
1
for(let key in arr){
2
  console.log(typeof key) //string  包括数组的私有属性也能打印出来
3
}
```
- 如果给arr加上个属性 arr.b='100' 属于数组的私有属性for in可以打印出来
```
1
for(let val of arr){//支持return 并且是val（值）of数组（不能遍历对象）
2

3
}
```

总结

forEach不支持return
for in循环遍历出来的包含私有属性
for of 既能return（并且是val（值）of数组），又能遍历私有属性（不能遍历对象）

扩展: 遍历对象的方法:Object.keys ->将对象的key做成一个新的数组

1
let obj={a:1,b:2}
2
//[a,b]
3
for(let val of Object.keys(obj)){
4
    console.log(val)// a        b
5
    console.log(obj[val])// 把val变成变量 只能用[],不能用点，点会把val变成字符串，就取不出来了
6
}

2.`filter` （过滤）- 删除#

是否操作原数组
这个方法的返回结果<过滤后的新数组>
回调函数的返回结果:
- 返回true表示这一项放到新数组中
- 返回false表示这一项不放到新数组中

过滤出数组中大于2小于5的数

错误示范

1
let arr=[1,2,3,4,5].filter(function(item,index)){
2
  return 2<item<5 //-->不行  会先比较前面2<item  永远都是true  会输出[1,2,3,4,5]
3
}
4
console.log(arr) //[1,2,3,4,5]

正确示范

1
let arr=[1,2,3,4,5].filter(function(item,index)){
2
  return item>2&&item<5
3
}
4
console.log(arr) //[3,4]

3.`map`(映射) - 更新#

将原有的数组映射成新数组
是否操作原数组
这个方法的返回结果<返回新数组>
回调函数的返回结果<回调函数中返回什么>，这一项就是什么

举例<有一个数组>[1,2,3],如何将他变成

1
<ul>
2
  <li>1</li>
3
  <li>2</li>
4
  <li>3</li>
5
</ul>
6
- 思路:
7
let arr=[1,2,3].map(function(item){
8
   return 2
9
})
10
console.log(arr)//[2,2,2]
11
let arr1=[1,2,3].map(function(item){
12
   return item*=3
13
})
14
console.log(arr1)//[3,6,9]
15
- 实现功能:es6中的模板字符串拼 ${}中间包变量
16
let arr2=[1,2,3].map(function(item){
17
   return `<li>${item}</li>` //是es6中的模板字符串，遇到变量用${}取值
18
})
19
console.log(arr2)//[<li>1</li>,<li>2</li>,<li>3</li>]
20
console.log(arr2.join(''))//<li>1</li><li>2</li><li>3</li>

总结

如果想删除数组中的某一项，可以用filter
如果想更新或者修改某个数组，可以用map

4.`includes` (是否包含)#

数组中只要有5就拿出来

1
let arr=[1,2,3,4,55]
2
arr.includes(5) //false  返回的是布尔类型 有5就是true，没有5就是false  很局限

5.`find`#

返回找到的那一项
不会改变原数组
回调函数中:
- 返回true表示找到了，找到后停止循环
- 返回undefined表示没找到

数组中只要包含5就拿出来

1
let arr=[1,2,3,4,55,555]
2
let newArr=arr.find(function(item,index){
3
  return item.toString().indexOf(5)>-1  //找到了
4
})
5
console.log(newArr)  //55

总结:

找到具体的某一项,用find。实际应用中<比如有用户列表>，用户都有自己的用户名和密码，拿到用户的密码对应找到用户的用户名，找到一个就会停止往下找。

6.`some`#

找true，找到true后停止,返回true;找不到返回false。

7.`every`#

找false，找到false后停止,返回false

判断一个数组中有没有5,用some

1
let arr=[1,2,3,4,55,555]
2
let newArr=arr.some(function(item,index){
3
  return item.toString().indexOf(5)>-1  //找到了
4
})
5
console.log(newArr)  //true

8.`reduce`(收敛)#

四个参数、next下一个、index索引、item原数组
返回的结果<叠加后的结果>
回调函数返回的结果:
原数组不变

求数组中的和

1
//第一步分析:
2
[1,2,3,4,5].reduce(function(prev,next,index,item){
3
    console.log(arguments)
4
    //{'0':1,'1':2,'2':1,'3':[1,2,3,4,5]}->prev数组的第一项,next数组的第二项
5
    //{'0':undefined,'1':3,'2':2,'3':[1,2,3,4,5]}->prev是undefined,next数组的第三项
6
    //{'0':undefined,'1':4,'2':3,'3':[1,2,3,4,5]}->prev是undefined,next数组的第四项
7
    //{'0':undefined,'1':5,'2':4,'3':[1,2,3,4,5]}->prev是undefined,next数组的第五项
8
    //-->prev是undefined的原因，因为这里没有return
9
})
10
//第二步分析->有return的时候:
11
[1,2,3,4,5].reduce(function(prev,next,index,item){
12
    console.log(arguments)
13
    return 100 //本次的返回值会作为下一次的prev
14
    //{'0':1,'1':2,'2':1,'3':[1,2,3,4,5]}->prev数组的第一项,next数组的第二项
15
    //{'0':100,'1':3,'2':2,'3':[1,2,3,4,5]}->prev是100,next数组的第三项
16
    //{'0':100,'1':4,'2':3,'3':[1,2,3,4,5]}->prev是100,next数组的第四项
17
    //{'0':100,'1':5,'2':4,'3':[1,2,3,4,5]}->prev是100,next数组的第五项
18
})
19
//求和:
20
let sum=[1,2,3,4,5].reduce(function(prev,next,index,item){
21
    console.log(prev,next)
22
    return prev+next
23
})
24
console.log(sum) //15

求302+303+30*4

1
//思路:
2
let sum2=[{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
3
    return prev.price*prev.count+next.price+next.count
4
    //30*2+30*3  ->150
5
    //150.price*150.count + ...  ->NaN
6
})
7
console.log(sum2) //NaN
8
//在数组最前面加上0 会导致多循环一次
9
let sum2=[0,{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
10
    return prev+next.price+next.count
11
    //0+30*2  ->60
12
    //60+30*3  ->150
13
    //150+30*4 ->270
14
})
15
console.log(sum2) //270
16
//传第二个参数0来解决 -> 默认指定第一次的prev
17
let sum2=[{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
18
    return prev+next.price+next.count
19
    //0+30*2  ->60
20
    //60+30*3  ->150
21
    //150+30*4 ->270
22
},0)
23
console.log(sum2) //270

总结<求和>、求叠加、两个数组合成一个数组，可以用reduce

扩展

数组扁平化<将一个二维数组变为一维数组怎么写>？可以使用reduce -> 将[[1,2,3],[4,5,6],[7,8,9]]变为[1,2,3,4,5,6,7,8,9]

1
let arr=[[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev,next){
2
    return prev.concat(next)
3
})
4
console.log(arr)//[1,2,3,4,5,6,7,8,9]

音乐

音乐

保证node的版本#

编译器#

webstorm配置npm和语法#

1.forEach(没有返回值)#

2.`filter` （过滤）- 删除#

3.`map`(映射) - 更新#

4.`includes` (是否包含)#

5.`find`#

6.`some`#

7.`every`#

8.`reduce`(收敛)#

支持与分享

音乐

保证node的版本#

编译器#

webstorm配置npm和语法#

1.forEach(没有返回值)#

2.filter （过滤）- 删除#

3.map(映射) - 更新#

4.includes (是否包含)#

5.find#

6.some#

7.every#

8.reduce(收敛)#

支持与分享

2.`filter` （过滤）- 删除#

3.`map`(映射) - 更新#

4.`includes` (是否包含)#

5.`find`#

6.`some`#

7.`every`#

8.`reduce`(收敛)#