日期：1月23日 夜
1. es6 中的数组扩展 都是不改变原数组的 返回新的内容
1.1 数组常用的静态函数
from: ƒ from() 将伪数组转为真实数组
isArray: ƒ isArray() 判断当前变量是否是一个数组类型
of: ƒ of() 将散列的变量 收集成一个数组 (会返回一个数组类型)
const myArray = {
0:"上元教育",
1:"上元it",
2:"上元会计",
length:3
}
// 没有Symbol(Symbol.iterator) 这个属性 就无法延展成数组
// const myArray02 = [...myArray] 无法延展
// console.log(myArray02);
const myArray07 = from(myArray) //ES6中伪数组转换真数组
console.dir(myArray07);
console.log("------------------------------");
const myArray08 = Array.of(1,2,3,4,5,6,7) //数组对象的静态函数
console.dir(myArray08);
Array.myOf = (...rest) => rest //给数组对象添加静态函数，效果如（myArray08）一样
const myArray09 = Array.myOf(1,2,3,4,5,6,7)
console.dir(myArray09);1.2 数组常用的实列函数 （罗列的方法，非常常用，需要记住，并灵活使用）
find: ƒ find() 从数组中检索出某个元素
findIndex: ƒ findIndex() 从数组中检索出某个元素 的位置
every: ƒ every() 判断数组中的元素是否都满足某一个条件 类似于逻辑与
some: ƒ some() 判断数组中的元素是否有一个是满足条件的 类似于逻辑或者
map: ƒ map() 将数组中的每个元素重新整理 并且返回一个新数组
filter: ƒ filter() 过掉数组中的某些元素 并且返回新数组
reduce: ƒ reduce() 递归 （会在下文中，演示reduce 的使用）
forEach: ƒ forEach() 遍历数组
keys: ƒ keys() 获取数组所有的key
values: ƒ values() 获取数组所有的value
entries: ƒ entries() 获取数组所有的key和value
find/findIndex/every/some/map/filter/forEach 写法固定的
函数内部会嵌套一个匿名函数
该匿名函数可以对原数组的元素进行隐式迭代 (隐式迭代: 在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代
该匿名函数有三个参数
参数1 : 遍历出的每个值
参数2 ；遍历出值所对应的索引
参数3 ： 当前数组本身
案例：
const arr = ["上元教育", "上元it", "小x明", "上元会计"];
// const r = arr.find(function(item,index,arr) {
// console.log(item,index,arr);
// // 函数给我们返回一个boolean值 返回的是true 那么他就会返回当前的 元素 item
// return index === 1;
// })
// console.log(r);
// 检索出数组中第一个姓小的
const r1 = arr.find(item => item.startsWith("小"))
console.log(r1);
// 检索出数组中第一个姓小的位置
const r2 = arr.findIndex(item => item.startsWith("小"))
console.log(r2);
// 判断数组中所有的元素是否都包含上元
const r3 = arr.every(item => item.includes("上元"))
console.log(r3);
// 判断数组中所有的元素是否有包含小明
const r4 = arr.some(item => item.includes("小明"))
console.log(r4);
// 将数组中所有元素的前面加上苏州市
const r5 = arr.map(item => "苏州市"+item)
console.log(r5);
const r6 = arr.map((item,index) => {
if(index <= 1) {
return "苏州市"+item
}
return "江苏省"+item
})
console.log(r6);
// 将数组中包含上元都取出来
const r7 = arr.filter(item => item.includes("上元"))
console.log(r7);
// 遍历数组
arr.forEach((value,index) => console.log(index,value))
// 获取数组中所有的索引
const keys = arr.keys() // 返回key的迭代器
console.log( keys);
const values= arr.values()
console.log(values);
const entries = arr.entries()
console.log(entries);reduce函数的使用方法:
/*
语法
arr.reduce(function(prev,cur,index,arr){
...
}, init);
其中，
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。
求数组中的元素的和
reduce
传入1个参数
function(preValue,curValue) {
}
第一次迭代： preValue 数组的第0个元素
curValue 数组的第1个元素
从第2次开始： preValue 表示上一次函数结果的返回值
curValue 表示当前的值
传入2个参数
参数1 function(preValue,curValue) {
}
参数2: number
第一次迭代 preValue 是被参数2赋值的 即为 preValue = number
curValue 是数组中第0个元素
从第2次开始： preValue 表示上一次函数结果的返回值
curValue 表示数组中当前的元素
*/
const arr = [10,20,30,40,50,60,70]
// 用法1
const result = arr.reduce((preValue,curValue) => {
//console.log(preValue,curValue);
return preValue + curValue
})
console.log(result);
console.log("----------------------------");
// 用法2
const result2 = arr.reduce((preValue,curValue) => preValue * curValue,1)
//用法2的扩展
const result3 = arr.reduce((a,b) =>{ //这个扩展是为了初学者更能理解此函数的用法，其中a,b可以用其他来代替
return a*b
},1)
console.log(result2);
console.log(result3);
/*
[{
name:"火龙果",
num:10,
price:5.5
},{
name:"橙子",
num:2,
price:8
},{
name:"西红柿",
num:5,
price:7
},{
name:"xxxx",
num:20,
price:3
}]
reduce((result,obj) => {
return result + obj.num * obj.prie
},0)
*/
const goodses = [{
name:"火龙果",
num:10,
price:5.5
},{
name:"橙子",
num:2,
price:8
},{
name:"西红柿",
num:5,
price:7
},{
name:"xxxx",
num:20,
price:3
}]
// const totalPrice = goodses.reduce((preValue,curValue) => {
// return preValue.num*preValue.price + curValue.num +curValue.price
// })
const totalPrice = goodses.reduce((preValue,curValue) => preValue + curValue.num*curValue.price,0)
console.log(totalPrice);案例2总结：此案例难点在于数组中的对象的初始值是否能理解，返回的值必须都为数字，才能进行运算，否则会报错。
此案例小结： reduce会进行遍历，学完es6后，会有多种遍历方式，一时间不知道该用哪种遍历了，我会专门进行学习，有时间会专门写一篇遍历的内容。
