今天和大家聊一聊展开语法,用三个点表示...,作用是可以在函数调用/数组构造时, 将数组表达式或者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的区别?
如果你知道答案可以写在留言中,如果你的答案是棒棒哒,请联系前端咖,有机会获得内推机会哦,亲,在等你哦!
往期回顾
数组的toString,你真的了解吗
Array中some介绍
Array中slice介绍
Array中join介绍
不是你记忆中的join,但致命的程度没两样
前端咖,值得关注,在看哦