主要讲的内容



时间充裕的话就讲,模板字面量


默认参数值

首先讲es6之前,我们是怎么做的。例如我们要写一个求和的函数,

请两个参数的和,但是如果有的人就是穿一个参数呢?


那么b没有传值,b的值是多少呢?打印出来就是undefined。NaN就是a+b的值


所以我们要处理b这个参数。b等于b或者是0,这是一个缩写的形式。基本上所有es5的前端都会去这么写,默认参数


上面的一行简写的方式等于下面if else的方式。

b赋值b给b有什么用?就是为了形式好看而已。如果b不存在就让他等于0


或的逻辑就是一个短路逻辑,前面如果是一个真值,就直接取b的值,交给b。如果前面b是个假值,就看第二个的值,把第二个的值交给b。

就是这么个意思,这就是一个取默认值的惯用写法。所以Es5的写法让人很难懂。


那么a和b如果你不传的话,哪个不传,哪个就是0


只传一个1。结果是1


传1和2


如果我要求四个数值的和。那么就要判断四遍


es6的语法。

如果a或者b的值等于undefined。那么默认就是0


相当于是这种旧的方法。if判断b的值是否是undefined



两个都不传,0+0就是0


以上就是默认参数。

函数默认参数和python的区别



如果你没有给我传第二个参数。那么我就给第二个参数一个默认值


传一个1过去。数组内的结果最终返回的就是1


1放的空数组和2放的空数组。是同一个空数组吗?


所以每次进push函数的时候,它都是一个新的空数组。


python并不是这样的。数组是共有的,每次调用这个数组,只初始化一次。js里面,每次都是新的数组,这就是两者之间的区别。



剩余参数

要求很多个参数的和,但是并不知道传递几个参数进来。


es5里面的写法。arguments就是所有的参数


arguments是一个伪数组,它的原型链直接到了这个对象,,只有数组的样子,没有数组的方法。


arguments是有个伪数组,它的原型链直接到了这个对象,看下面的__proto__:Object


循环argumens求和




假设第一个参数,我们传一个前缀进去。


因为第一个参数是传递的信息,所以循环arguments的时候 从1开始求和。不再是从0开始了。


三个点

三个点后面加参数,就表示后面所有的参数都统一的放到numbers这个数组里面。


打印出来numbers的值


这样求和就是循环numbers这个数组了。


简写的形式,因为numbers是一个真的数组。reduce方法是计算数组元素相加后的综合。reduce的第二个参数,是可选的,表示初始值,这里给的初始值是0

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。


伪数组转数组

没有剩余参数的话。那么怎么获取到后面的所有参数呢?通过arguments.slice从第一个参数开始切 一直到最后一个。问题在于arguments是一个伪数组,它没有slice方法。所以第一步就应该把arguments变成一个数组。


很遗憾es5没有给我们提供一个好的方法,把一个伪数组变成数组。下面一句话是前端程序员看了所有的api后,发现一个最方便的,es5里面把一个arguments从一个伪数组变成一个真数组的方式。


这一句是es6里面提供新的方法,把一个伪数组编程一个数组的方法。


更简单的方式。前面加三个点表示把1到10这10个参数都放到新的数组里面。


打印出了args,那么它是不是一个真的数组呢?


在concole内查看,args的原型就是一个数组,


最简单的方式


展开操作

array2是array1的后三项


a对应的上面的1,b对应2,c对应3,...array2表示后面都包了。abc其实是三个占位符,表示占了前面三个元素,那么array2只能去后面的456这三个元素了,array2就是456


那么array2的值输出就是 456


前面三个用逗号省略掉了。这叫做模式匹配。


复制一个array1。但是这样没有什么意义。直接写array2=array1就可以。


在array1前面加0 后面加7.


es5的写法。用数组0链接数组1,再链接数组7


解构赋值

把a和b的值相互调换,需要用到第三个变量。



es6的写法,借助,数组,让左边的第0项等于右边数组的第0项,让左边的第1项等于右边数组的第1项,




所以括号往上走。b的值就变成了这样。这就是为什么写js的代码。每一行后面都要加分号的原因了。如果不加的话,括号会自动往上走


b是数组3


因为括号往上走了,直接等于了最后的[3]


让a等于10,b等于20,rest等于后面的 30,40,50。这是解构赋值的写法,从等号右边的数组解构。


解构对象

es5的语法


es6的语法糖。表示从frank里面取name、age、gender。然后这三个东西分别声明一个变量。

这就是解构赋值。把frank的结构解开,然后分别赋值给name、age、gender


写成一行的方式


a等于1,b等于2


如果没有2,那么b就undefined了。如果想给b一个默认值呢?


如果没有b,那么b就等于7


如果b有值,那么b就等于2


所以5和7是 a和b的默认值




声明一个函数,你可以就看到这样的语法。主要看f函数的返回值是什么。所以结果就是a=1 b=2



解构赋值,取了个别名。解构赋值取的是name,但是把name重命名成xingming


那么有没有这个name的值呢?windows自带了name。所以这里我们把name都换成name2这个变量名,打印name2就会报错。


继续再复杂一点的 -子对象

假设frank有孩子,现在想取他的孩子的名字tom该怎么取呢?


先取出child,再从child里面取出name



child的name起个别名。这里只有xingming这个变量被声明了。



输出child报错。它并没有被声明,只声明了name、age、gender这三个变量


综合语法

如果孩子刚出生,没有起名字,也就没有name这个属性值,给name属性一个默认值为Tom


如果有名字,就是里面的那个名字


这里的frank是被解构的对象。


拷贝对象

把objA的属性,一个一个的全拷贝过来。



a是字符串被完整的拷贝过来了。


全拷贝,没有把这个对象拷贝过来,只是把这个对象的地址拷贝过来了。


改了B的值但是A的值也被改了。全拷贝就是大家共用对象。


不讲深拷贝。因为做不到。所有深拷贝的答案都是错的

方便的方法做全拷贝

把objeA所有的属性都拷贝过来。


打印拷贝后的B。这就是把A的所有的属性,全拷贝过来。


做对象合并

定义A和C。现在要合并A和C。只看下面两个红框内的代码。最下面的代码是没有修改的。


以前的写法,先把A的拷贝过来,再把C的拷贝过来。后面的属性会覆盖前面的属性。


最后p1的值是C的。


三个点的写法

把A的属性拷贝过来,在把C的属性拷贝过来。C在后面会覆盖前面的属性。


MDN 上更多的例子

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC

这是深拷贝。如果这个对象满足以下条件就是深拷贝

第一个这个对象没有复杂的对象。没有日期对象,没有正则对象。没有函数,没有循环引用,没有所有普通对象之外的对象,

第二个条件:这个对象没有Undefined

不适用于复杂对象的深拷贝。


如果面试官问你,写一个能是适应于复杂对象的深拷贝。回答:递归,可以参考别人写的算法,理解着背下来。

字符串

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E8%A7%A3%E6%9E%84%E5%AF%B9%E8%B1%A1

这是一个es5版本的字符串处理。它接收一个对象,判断这个对象是不是一个undefined,如果是undefined就把这个对象初始化成一个空对象,如果不是undefined就不变它。


它要取options里面的size,还要判断options里面的size是不是undefined如果是undefined就默认取big。如果不是undefined就不管它


function drawES5Chart(options) {
options = options === undefined ? {} : options;
var size = options.size === undefined ? 'big' : options.size;
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
var radius = options.radius === undefined ? 25 : options.radius;
console.log(size, cords, radius);
// now finally do some chart drawing
}
drawES5Chart({
cords: { x: 18, y: 30 },
radius: 30
});

首先参数默认值就是一个空对象。


左边这一堆东西默认值是空对象。


来解构一下。取这个对象的size如果没有那么就默认为big。取cords对象,如果就默认为{ x: 0, y: 0 }。取radius如果没有就是25


function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
{
console.log(size, cords, radius);
// do some chart drawing
}
drawES2015Chart({
cords: { x: 18, y: 30 },
radius: 30
});

一步一步来解析

把取的第一个参数命名为a,如果a不存在,那就给a默认值为空对象{}


这个a我要给它解构一下,分别是size、cords、radius


同时要给解构的这几个值 分别一个默认值


推荐的写法,定义总的变量为options。然后里面再去解构options这个变量


合构-属性加强

和解构相反的操作。


假设有两个变量叫做x和y。把他俩合成一个对象。这就是把他合起来。


es6的语法糖


变量和值相同 就直接写一个。



解构都是在等号的左边,右边是被解构的对象


function的简化写法


如果要加参数


从别的地方拷贝obj1对象。


一个对象的属性和方法,下面是四种写法


以前的函数写法


还可以给方法的参数加默认值


最后一个例子-动态key值

想声明一个对象,给你一个key


需要你声明一个对象 有这个key



这么写他的key就是字符串key。而不是变量key



我们很难把一个变量变成一个key,一旦我们把变量写在那里,它自动的就变成了字符串。因为js他的字符串是可以隐藏的


所以js程序员一直以来,想要动态的添加key的时候,只能这么去添加


es6语法糖

把key作为一个变量,然后取key这个变量的值。


同时还可以做运算。key+key就是两个x


以上就是动态的key值

结束