let和const
- 定义函数时，用const定义函数
- let和const都不具备变量声明提升的能力
变量的自动解构和剩余参数
只有数组和对象能够自动解构
数组的结构 var [a,b,c] = [1,2,3]; console.log(a); console.log(b); console.log(c);
对象的解构 var {a,b,c} = {"a":1,"b":2,"c":3}; console.log(a); console.log(b); console.log(c);
对象的结构往往用在函数的形参列表中，调用函数的时候，传的对象（实参）就能够自动解构。
function People({name,age,sex,yuwen,shuxue,yingyu}){ this.name = name; this.age = age; this.sex = sex; this.yuwen = yuwen; this.shuxue = shuxue; this.yingyu = yingyu; } var xiaoming = new People({ "name" : "小明", "age" : 12, "sex" : "男", "yuwen" : 34, "shuxue" : 44, "yingyu" : 66 });
console.log(xiaoming);
剩余参数【rest运算符】
左边迎接的人群，比来宾少，有些来宾就接不到： var [a,b,c] = [1,2,3,4,5,6,7]; console.log(a); //1 console.log(b); //2 console.log(c); //3
我们可以在c变量之前加上...运算符，表示c现在接受所有剩余的参数。 var [a,b,...c] = [1,2,3,4,5,6,7]; console.log(a); console.log(b); console.log(c); //[3,4,5,6,7]
注意：...【rest运算符】只能出现在最后一项。
强制解构【扩展运算符】
rest运算符是放在左边的【将零散的转为数组（对象）】，扩展运算符是放在右边的【将数组（对象）的转化为零散】
用处： 数组赋值====
let arr1=['aa','bb','cc'];
let arr2=[...arr1]; //这个数组将变为零散量。
console.log(arr2);
arr2.push('dd');
做函数的参数====
function jspang(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
jspang(1,2,3);
...运算符也可以作用于对象，通常用于一个情况：创建obj1的副本，仅仅改变obj1的某一（些）个属性。
var obj1 = {
"a" : 1,
"b" : 2,
"c" : 3
};
var obj2 = {
...obj1 ,
"b" : 8
};
console.log(obj2); //{"a" : 1,"b" : 8,"c" : 3}
强制解构还可以用于类数组对象，可以将类数组对象变为真的数组：
const fun = function(){
console.log(arguments); //[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, '5': 6, '6': 7, '7': 8 }
**//下面的语句是一个奇淫技巧，是最快的将类数组对象变为数组的方法**
var arr = [...arguments]; //类数组对象；这里...是对对象扩展拿到零散量，再将零散量用[]括起来变成数组
console.log(arr); //[ 1, 2, 3, 4, 5, 6, 7, 8 ]
console.log(Array.isArray(arr)); //true
}
fun(1,2,3,4,5,6,7,8);
数组的新方法
forEach方法
arr.forEach(function(数组内容，数组下标){})
var arr = ["白板","幺鸡","二条","三万","四筒"];
arr.forEach((item,index)=>{
console.log(`${index}:${item}`);
})
结果：
0:白板
1:幺鸡
2:二条
3:三万
4:四筒
注意：参数是个函数，这个函数中有两个参数，分别是item和index，是遍历到的这一项的内容和下标。
map()方法
Map()返回一个新的数组，新数组的每一项是原数组的映射。
var arr =[1,2,3,4,5,6,7,8];
const strArr = arr.map((item)=>{
return item*2;
})
console.log(strArr);
结果：
[ 2, 4, 6, 8, 10, 12, 14, 16 ]
注意点：
- map方法中参数是函数；
- 函数必须要有一个 return
- map()出的数组，一定和原数组长度相同！
- 函数里面的的return就是新数组中这一项的数值。
filter()方法
从一个数组中，过滤一些项组合成为新数组，此时使用filter()函数。它返回一个符合条件的新的数组
把arr数组中所有的偶数都提炼出来组合成为新的数组：
var arr = [3,43,25,43,543,645,765,7,23,432,4,324,23,43,45];
const arr1 = arr.filter((item)=>{
return item % 2 ===0;
})
console.log(arr1);
结果：
[ 432, 4, 324 ]
注意：
- filter()中参数有一个函数，这个函数return为true的项会被加入到新的数组中。
reduce()方法
reduce表示迭代遍历，每一项的遍历都可以使用遍历上一项的时候的结果。 reduce可以理解为“降阶”。
reduce里面的函数有两个参数，分别是a、b。
我们来探究a、b什么意思。所以我们直接输出a：
var arr = ["白板","幺鸡","二条","三万","四筒"];
arr.reduce(function(a,b){
console.log(a);
});
结果：
白板
undefined
undefined
undefined
注意：结果中少了最后一项
arr.reduce(function(a,b){
console.log(b);
});
结果：
幺鸡
二条
三万
四筒
注意：这里又少了第一项
小结：
reduce的机理：
-
**a就表示遍历前一项的时候return的值**，b表示这一项【当前】的值。【a缺尾，b缺头】 -
系统会自动从下标为1的项开始遍历，**遍历下标为1的项的时候，a的值是第0项。**【这里是为什么没有最后一项的原因】 -
** 最后的一项的return，就是总return。**arr.reduce(function(prev,cur,index,arr){ ... }, init);
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init; 【一般一个数组中只有第一项会返回正常值，undefined，并且还没有最后一项】
cur 表示当前正在处理的数组元素【不会有第一项的值】；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。
例子1：求数组的和
var arr = [3,4,5,2,2];
var sum = arr.reduce((a,b)=>{
console.log('上一次return的值');
console.log(a);
console.log('当前遍历的值');
console.log(b);
return a+b;
})
console.log(sum);
结果：
上一次return的值
3
当前遍历的值
4
上一次return的值
7
当前遍历的值
5
上一次return的值
12
当前遍历的值
2
上一次return的值
14
当前遍历的值
2
console.log(sum);// 16
例子2：求数组的最大值
var arr = [4,43,5,436,45,623,4,324,23,443,53,65,46,45,6,234,324];
var result = arr.reduce(function(a,b){
return a >= b ? a : b;
});
console.log(result); //623
reduce的哲学意义，就是把一个数组揉吧揉吧，每一项都参与参与，得出唯一的一个数字。
小结：
reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是 reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算.
（重要）综合运用map、filter、reduce、结构
-
删除用filter
-
改变用map
-
增加用...
var xiaoming = {
"name" : "小明",
"age" : 12,
"sex" : "男",
"friends" : [
{
"name" : "小红",
"age" : 13
},
{
"name" : "小强",
"age" : 14
},
{
"name" : "小刚炮",
"age" : 18
}
]
}
● 题目1：不允许更改小明！返回一个新对象，这个对象和小明相同，仅让小明的年龄变为15岁！
答案：
var xiaoming = {
"name" : "小明",
"age" : 12,
"sex" : "男",
"friends" : [
{
"name" : "小红",
"age" : 13
},
{
"name" : "小强",
"age" : 14
},
{
"name" : "小刚炮",
"age" : 18
}
]
}
var xiaoming2 = {
...xiaoming ,
"age" : 15
}
● 题目2：不允许更改小明！让小强的age变为22。
var xiaoming2 = {
...xiaoming ,
"friends" : xiaoming.friends.map(function(item){
//如果这一项的name是小强，此时返回别的项都不改，只改变age项
if(item.name == "小强"){
return {
...item ,
"age" : 22
}
}
//反之，返回原来的项
return item;
});
}
● 题目3：不允许更改小明！让小明的只有15岁以下的朋友。
var xiaoming2 = {
...xiaoming ,
"friends" : xiaoming.friends.filter(function(item){
return item.age < 15;
})
}
● 题目4：不允许更改小明！小明增加一个朋友，老王，88岁
var xiaoming2 = {
...xiaoming ,
"friends" : [...xiaoming.friends , {
"name" : "老王" ,
"age" : 88
}]
}
var xiaoming2 = {
...xiaoming ,
"friends" : [{
"name" : "老王" ,
"age" : 88
},...xiaoming.friends ]
}
● 题目5：不允许更改小明！增加一个朋友并且自动编号：
var xiaoming2 = {
...xiaoming ,
"friends" : [
...xiaoming.friends,
{
"id" : xiaoming.friends.reduce(function(a,b){
return a.id > b.id ? a : b;
}).id + 1 ,
"name" : "老王" ,
"age" : 88
}
]
}
不更改原来的对象，返回一个新对象，新对象是原来对象的增、删、改某些属性，这叫做函数式编程，也叫作兰姆达式编程。
includes()方法
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。之前我们判断数组中是否存在一项，此时用indexOf() != -1（IE8开始兼容）。如果要IE6、7兼容，必须一项一项遍历比较。 ES6中，有了更简单的比较方法：
var arr = ["三星","oppe","苹果"];
console.log(arr.includes("vivo")); //false
console.log(arr.includes("苹果")); //true
console.log(arr.indexOf('苹果')); //2
注意，includes是全等比较，带着类型比较的：
var arr = ["三星","oppe","苹果",7];
console.log(arr.includes("7")); //false
常用的几种方法：some(),every(),find(),findIndex()
every() 与 some()方法都是js中数组的迭代方法。
every(): 对数组中每一项运行给定函数，如果该函数的每一项都返回true,则返回true
some(): 对数组中每一项运行给定函数，如果该函数的某一项返回true,则返回true
var arr = [1, 2, 3, 4, 5]
console.log(arr.some((item, index, array) => {
return item > 3
})) // true
console.log(arr.every((item, index, array) => {
return item > 3
})) // false
注意：every()和some()中参数都是函数，函数的参数第一项是数组的元素，第二项是数组的下标，第三项是数组；
find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。
只查找满足条件的第一个数组元素：
const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5
没有符合元素，返回undefined:
const myArr=[1,2,3,4,5,6]; var v=myArr.find(value=>value>40); console.log(v);// undefined
回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。
查找索引值为4的元素：
const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index)=>index==4);
console.log(v);// 5
findIndex()
findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数，与find()相同。
const bookArr=[
{
id:1,
bookName:"三国演义"
},
{
id:2,
bookName:"水浒传"
},
{
id:3,
bookName:"红楼梦"
},
{
id:4,
bookName:"西游记"
}
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1
小结：
- find()最终返回的是一个满足条件的元素【原数组中的元素】，当条件成立为true时，只会返回满足条件的第一个元素，然后就终止了查找；如果没有符合条件的元素，返回值为undefined。
- findIndex()最终返回的是满足条件的数组的下标，只是当条件为true时findIndex()返回的是索引值【原数组的索引值】，只会返回满足条件的第一个元素的索引值，然后就终止了查找**。如果没有符合条件元素时findIndex()返回的是-1**
- 上面的两个方法的参数都是函数，函数中都必须有return.
join()方法将一个数组（或一个类数组对象）的所有元素根据传入的参数连接成一个字符串，并返回这个字符串。
