扩展语法

1. 函数 rest 参数

ES6 引入 rest 参数也叫剩余参数，用于获取函数的多余参数，可以替代使用arguments对象

... 出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中

rest 参数组成的变量是一个数组，该变量将多余的参数放入数组中
函数的length属性，不包括 rest 参数

function restFn(...arg) {console.log(arg);
}
restFn(1, true, {name: 'jsx'}, [1, 2, 3, 4])
// [1, true, {…}, Array(4)] // 函数的length属性，不包括 rest 参数
console.log(restFn.length); // 0

rest 参数获取多余参数组成数组，函数 arguments 则是类数组对象，类数组不能使用数组对象方法，需要通过 Array.from() 转换

function replaceArgument() {// 没有数组方法arguments.map((item) => {console.log(item)}); // arguments.map is not a function
}
replaceArgument('jsx', 100, {title: 'arguments'}, ['html', 'css'])function restFunc(...rest) {// 没有数组方法rest.map((item) => {console.log(item)})
}
restFunc('jsx', 100, {title: 'arguments'}, ['html', 'css'])

rest 参数之后不能再有其他参数，即 rest 参数必须放到参数列表的末尾，如果 rest 参数后面还有参数，则会导致错误

function morearg(...arg, title) {console.log(arg, title)
}
morearg('jsx', 'ljj', 22); // Uncaught SyntaxError

2. spread 语法

数组扩展运算符也叫 spread 语法，spread 语法与 rest 参数完全相反，它会把可迭代对象 arr 用逗号展开为一个参数序列

... 出现在函数调用或类似的表达式中，那它就是 spread 语法，它会把一个数组展开为列表

... 出现在函数调用或类似的表达式中，那它就是 spread 语法，它会把一个数组展开为列表

let arr = ['html', 'css', 'js']
console.log(...arr); // html css jslet arr1 = ['html', ...['css', 'js']];
console.log(arr1); // ['html', 'css', 'js']function func(...array) {console.log(...array)
}
let arr2 = ['zdj', 'ddc']
func('jsx', 'ljj', ...arr2, ...'jsx'); // jsx ljj zdj ddc j s x

spread 语法可以数组合并、数组拷贝、连接多个数组、传递数组参数

// 合并，拷贝，连接，传递参数
console.log(['jsx', 'ljj', ...['ddc', 'zdj']]);
// ['jsx', 'ljj', 'ddc', 'zdj']let arr3 = ['html', 'css', 'js']
let newarr = [...arr3];
console.log(newarr); //  ['html', 'css', 'js']let arr4 = ['html'];
let arr5 = ['css', 'js']
console.log([...arr4, ...arr5]); // ['html', 'css', 'js']function arrFunc(...arg) {console.log(arg);
}
arrFunc([1, 2, 3])

spread 语法展开空数组不产生任何效果，字符串可以使用展开语法

let array = [];
console.log(...array); // 不产生任何效果let hello = 'hello';
console.log(...hello); // h e l l o

spread 语法只适用于可迭代对象，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错

let obj = {name: 'jsx'};
// console.log(...obj); // Uncaught TypeError
console.log(...document.querySelectorAll('div'))(...[1, 2])
// Uncaught SyntaxError: Unexpected numberconsole.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected numberconsole.log(...[1, 2])
// 1 2

3. 对象扩展运算符

对象的扩展运算符... 用于取出参数对象的所有可遍历属性，拷贝到当前对象之中

let obj = {name: 'jsx', age: 22};
let newobj = {...obj};
console.log(newobj); // {name: 'jsx', age: 22}

对象的扩展运算符也可以用于数组，将数组转化为可迭代对象

let arr = ['html', 'css'];
let obj1 = {...arr};
console.log(obj1); // {0: 'html', 1: 'css'}

如果扩展运算符后面是一个空对象，则没有任何效果
如果扩展运算符后面不是对象，则会自动将其转为对象，number，boolean，null，undefined 都返回空对象

// 等同于 {...Object(1)}
console.log({...1}) // {}// 等同于 {...Object(true)}
console.log({...true}) // {}// 等同于 {...Object(undefined)}
console.log({...null}) // {}// 等同于 {...Object(null)}
console.log({...undefined}) // {}

对象的扩展运算符，只会返回参数对象自身的、可枚举的属性，不会返回原型上的属性

function User() {let name = 'jsx';let sayHi = function() {};this.message = 'jsx'
}
User.prototype.attr = '原型属性';
let user = new User();
let clone = {...user
}
console.log(clone); // {message: 'jsx'}

如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象

let str = 'jsx';
console.log({...str}); // {0: 'j', 1: 's', 2: 'x'}

用户自定义的属性，如果扩展运算符内部有同名的属性会被覆盖掉，后面覆盖前面同名属性，不同名属性会添加到新对象上

let obj3 = {now: 'js'}
let expand = {...obj3, now: 'vue'};
console.log(expand); // {now: 'vue'} let obj4 = {now: 'js'}
let expand1 = {now: 'webpack', ...obj4};
console.log(expand1); // {now: 'js'}

对象的扩展运算符等同于使用 Object.assign() 方法，可以用于合并两个对象

let obj5 = {class: 'js'
};
let objMax = {name: 'jsx'
};
let obj6 = {...obj5,...objMax
};
console.log(obj6); // {class: 'js', name: 'jsx'}
console.log(Object.assign({}, obj5, objMax)); // {class: 'js', name: 'jsx'}

4. 扩展运算符使用场景

浅拷贝数组和对象

let arr = ['html', 'css']
let newarr = [...arr];
console.log(newarr)let obj = {name: 'jsx'};
let newobj = {...obj};
console.log(newobj)

合并数组、连接数组

let arr1 = ['jsx', 'ljj'];
let arr2 = ['html', 'css'];
let allarr = [...arr1, ...arr2];
console.log(allarr);

替代在 apply 中使用

function applyFn(a, b) {console.log(a, b); // jsx ljj
}
let arr3 = ['jsx', 'ljj']
// applyFn.apply(null, arr3);
applyFn(...arr3)

函数传递参数

 function func(...arg){console.log(arg); // ['jsx', 'ljj']
}
func('jsx', 'ljj')
func(...['jsx', 'ljj'])

数组去重 Set() 结合使用

let arr4 = [2, 2, 3, 22];
let noreplace = [...new Set(arr4)]
console.log(arr4); // [2, 2, 3, 22]

转换类数组

function likeArr() {[...arguments].map((item) => {console.log(item)})
}
let arrover = ['html', 'css', 'js'];
likeArr(arrover); //  ['html', 'css', 'js']

解构赋值

let [numMin, ...numMax] = [1, 2, 3, 4];
console.log(numMin); // 1
console.log(numMax); // [2, 3, 4]let objover = {title: '加油',message: '学习',date: 20220420
}
let {title,...objAll
} = objover;
console.log(title); // 加油
console.log(objAll); // {message: '学习', date: 20220420}

ES6 的扩展运算符相关推荐

ES6的扩展运算符 [...arr]
ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 数组去重 var arr = [1,2,3,4,5,2,3,1]; va ...
es6之扩展运算符 Object.assign和三个点（...）
一.导读 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里 ...
【ES6】...扩展运算符
文章目录扩展运算符一.在函数中使用 1.1 传递实参 1.2 接收形参 1.3 new 表达式二.在数组中使用 2.1 合并数组 2.2 拷贝数组三.在对象中使用 3.1 合并对象 3.2 拷 ...
es6之扩展运算符...
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, ...
ES6新特性_ES6扩展运算符的介绍---JavaScript_ECMAScript_ES6-ES11新特性工作笔记013
接下来去看es6的扩展运算符比如我声明一个常量数组tfboys=['','','']; 然后写一个函数,chunwan,然后 chunwan(tfboys);调用以后可以看到右边打印出来了,可以看到 ...
es6之三个点（...）扩展运算符数组和对象的使用场景及最常见的用法（霸霸看了都说好）
概念 es6之扩展运算符 (-) 简称三个点数组的扩展运算符应用复制数组扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...
ES6增加了扩展运算符: ... 三个点是ES几的
ES6 的扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 1.将一个数组转为用逗号分隔的参数序列(把数组中元素展开). 如下: ...
ES6 rest参数，扩展运算符，Symbol数据类型，迭代器和生成器【详解加案例】(二)
文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...
c语言扩展运算符是什么,扩展运算符（spread）是三个点（…)
扩展运算符(spread)是三个点(-),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来一.展开数组 //展开数组 let a = [1, ...

ES6 的扩展运算符