语法和c区别_总结最全的展开语法应用实例

今天和大家聊一聊展开语法，用三个点表示...，作用是可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

首先我们看看几个常用例子：

展开语法

一、求数组最大值、最小值？

1、Math.max 配合 apply 获取最大值或最小值

let dataArr = [8, 3 ,6, 12, 1];
Math.max.apply(this, dataArr);  // => 12
Math.min.apply(this, dataArr);  // => 1

2、展开语法表示

let dataArr = [8, 3 ,6, 12, 1];
Math.max(...dataArr);  // => 12
Math.min(...dataArr);  // => 1

例二、连接多个数组？

1、concat方法

[].concat(['a', 'b', 'c'], 'qdk', 1);
//  => ['a', 'b', 'c', 'qdk', 1]

2、展开语法表示

[...['a', 'b', 'c'], 'qdk', 1];
//  => ['a', 'b', 'c', 'qdk', 1]

例三、浅拷贝对象
1、Object.assign方法

let obj1 = {a: 1, b: 2, c: 3};
let obj2 = {w: 10, h: 10};
Object.assign({}, obj1, obj2);
//  => {a: 1, b: 2, c: 3, w: 10, h: 10}

2、展开语法表示

let obj1 = {a: 1, b: 2, c: 3};
let obj2 = {w: 10, h: 10};
{...obj1, ...obj2};
//  => {a: 1, b: 2, c: 3, w: 10, h: 10}

例四、展开语法与迭代器

[...'qdk'];  // => ['q', 'd', 'k']
{...'qdk'};  // => {0: 'q', 1: 'd', 2: 'k'}

例五、展开语法与迭代器

let map = new Map();
map.set('q', '1');
map.set('d', '2');
map.set('k', '3');
[...map.keys()].join('');  // => qdk

例六、展开语法与生成器

function* fn(){
yield 'welcome';
yield 'to';
yield 'qianduanka';
}
[...fn()];  // => ['welcome', 'to', 'qianduanka']

例七、展开语法与解构赋值

let [arg1,arg2,...arg3] = ['friends', 'welcome', 'to', 'qianduanka'];
arg1;  // => friends
arg2;  // => welcome
args;  // => ['to', 'qianduanka']

例八、展开语法与解构赋值

let {a, b, ...c} = {a: 1, b: 2, c: 3};
a;  // => 1
b;  // => 2
c;  // => {c: 3}

面试题

一、请写出下面的输出内容？

1. {...'qdk'};  // => ???
2. [...new Map()];  // => ???
3. {...['a', 'b', 'c']};  // => ???

二、聊一聊扩展语法...与Array.from的区别？

三、聊一聊扩展语法...与Object.assign的区别？

如果你知道答案可以写在留言中，如果你的答案是棒棒哒，请联系前端咖，有机会获得内推机会哦，亲，在等你哦！

往期回顾

1.  数组的toString，你真的了解吗

2.  Array中some介绍

3.  Array中slice介绍

4.  Array中join介绍

5.  不是你记忆中的join,但致命的程度没两样

前端咖，值得关注，在看哦