一、ES6中数组的方法
1、for Each循环 - 用来遍历数组的每一项
(需要建立一个空数组push接收返回的数组)
特点:
1、for Each循环的回调函数中不可以return出一个值 会返回 undefined ,但是可以使用return终止函数的执行
2、for Each循环 循环结束没有返回值 返回是undefined 需要建立一个空数组push接收返回的数组
格式:
建立一个空数组
数组变量名.forEach(function(item,index){
空数组名.push(item.需要的值)
})
funtion:for Each里面传的回调函数
回调函数里有两个参数item,index
item:每一项
index:数组下标
小练习:打印出数组中 年龄大于30岁的名字和年龄
需要建立一个空数组push接收返回的数组
2、Map循环
(直接return需要的值)
特点:
返回值:根据回调函数return的值 返回一个新数组
格式:
定义一个变量 = 数组变量名.map(function (item, index) {
return item.需要的值
})
funtion:map里面传的回调函数
回调函数里有两个参数item,index
item:每一项
index:数组下标
使用场景:Echarts
3、Filter 循环--过滤筛选
(写判断条件 结果为true的会组成一个新数组 return出去)
特点:
通过判断条件为true的组成一个新数组 return出去
格式:
定义一个变量 = 数组变量名.filter(function (item, index) {
return 判断条件
})
funtion:filter里面传的回调函数(高阶函数)
回调函数里有两个参数item,index
item:每一项
index:数组下标
4、Find 循环数组
(循环数组通过return的条件 返回一个新的对象 不要写判断 因为只会返回一个新对象)
特点:
1、用==进行筛选 不要写判断 因为只会返回一个新对象
2、循环数组通过条件 return符合条件的一个新的对象
格式:
定义一个变量 = 数组变量名.find(function (item, index) {
return 条件
})
funtion:find里面传的回调函数(高阶函数)
回调函数里有两个参数item,index
item:每一项
index:数组下标
5、Every 循环数组
(返回的是布尔类型 函数写判断条件 有一个不满足就返回false)
特点:
循环数组 通过return判断条件 如果数组的每一项都符合条件 返回turn 只要有一个不满足就返回false
格式:
定义一个变量 = 数组变量名.every(function (item, index) {
return 判断条件
})
2、利用原生的写法
只要有一个不满足就返回false
6、Some 循环
(返回的是布尔类型 函数写判断条件 有一个满足条件就返回turn所有都不满足就返回false)
特点:
循环数组 通过return条件判断 只要有一个满足条件就返回turn 所有都不满足就返回false
格式:
定义一个变量 = 数组变量名.some(function (item, index) {
return 判断条件
})
有一个满足条件就返回turn
所有都不满足就返回false
2、利用原生的写法
①全部不满足就返回false
②只要有一个满足就返回true
7、Reduce 高阶函数 - 累加、累乘等
特点:
可以实现数组的累加求和 等等
格式:
定义一个数组
定义一个接收变量 = 数组变量名.reduce(function(acc,cur){
return acc+cur
})
document.write(接收变量名)
一共有四个参数
acc 累加器 (从这个数字开始加)
cur 当前值
Index 索引
Array 原数组
2、利用原生的写法 - 加法
for in 循环会把数组上的其他属性也打印出来 所以最好用for循环
利用原生的写法 - 乘法
注意:乘法一开始的数字不能为0 需要改成1
3、利用map+原生reduce方法计算年龄和
1、map方法 循环返回数组的每一个年龄
2、利用原型reduce写累加方法
3、map返回的数组中的年龄使用reduce方法进行累加
8、findIndex循环
特点:
循环数组返回第一个符合条件元素的下标
格式:
定义一个接收变量 = 数组变量名.findIndex(function(item,index){
return 判断条件
})
console.log(接收变量名)
返回第一个符合条件的元素下标
2、利用原生的写法
如果一个都不满足会返回undefined
如果有满足的会返回第一个满足的元素下标
二、类数组转为真正的数组
1、为什么要把类数组转为真正的数组?
类数组没有真正数组的方法 用不了真正数组的方法
2、类数组有哪些?
第一种伪数组 arguments 方法中的关键字 用于存储实际参数
第二种伪数组 字符串
第三种 DOM树
3、如何判断是否为一个真正的数组?
1、ES6方法:Arry.isArray
如果返回true 是真正的数组 false就不是
例如:
变量名arr用ES6的Array from转为了真正数组 所以显示true
2、ES6之前的方法(1):instanceof
如果返回true 是真正的数组 false就不是
变量名arr用拓展运算符的方法转为了真正的数组 显示true
3、ES6之前的方法(2):Object.prototype.toString.call
-是数组
如果是数组会显示:[object Array]
变量名arr用拓展运算符的方法转为了真正的数组 显示[object Array]
-不是数组
Arguments不是数组会显示 [object Arguments]
arguments本身不是数组所以显示 [object Arguments]
arguments
1、类数组转数组ES6之前 原型里的方法
2、ES6里的方法1 - Array.from
ES6里的方法2 - 利用拓展运算符...实现
toString()
数组、字符串、数字都有toString()方法 把他们变成字符串
数组是去掉左右括号后再转成字符串
但是数字使用toString()方法需要用变量的方式