ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖

主要讲的内容



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

默认参数值

首先讲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值
 

结束