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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。