最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

JavaScript扩展(三点)运算符

javascript 47浏览 0评论

JavaScript es6中推出了扩展运算符(spread),表现形式是3个点:… ,那么它有什么作用呢?

1. 在函数声明中,表示不定参数。

参考如下代码:

function foo(...nums) {
	console.log(nums);
}
foo(1, 2); // [1, 2]
foo(1, 2, 3); // [1, 2, 3]

其中,nums就是表示传入的参数,然后包装成数组。

当然也可以有固定参数,然后不定参数可以这么写:

function foo(num, ...nums) {
	console.log(num);
	console.log(nums);
}
// 1 对应到 num,2 对应到 nums
foo(1, 2); 
// 1
// [2]

// 1 对应到 num,2,3 对应到 nums
foo(1, 2, 3); 
// 1
// [2, 3]

2. 转换数组为独立元素

请看下面代码:

// 这个输出是数组
console.log([1, 2, 3]); // [1, 2, 3]

// 这个输出是数组内的元素
console.log(...[1, 2, 3]); // 1 2 3

根据这个特性,可以很方便的合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5]

使用push的方式会改变arr1本身,可以使用如下方式,就不会改变了。

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

let arr3 = [...arr1, ...arr2]; // 新数组
console.log(arr3); // [1, 2, 3, 4, 5]

获取数组最大值

let arr = [3, 5, 1];
console.log(Math.max(arr)); // NaN
console.log(Math.max(...arr)); // 5

3. 将字符串装换为数组

let str = "hello";
console.log([...str]); // ["h", "e", "l", "l", "o"]

4. 对象合并

let object1 = {
	id: 1,
	name: "happy"
}
let object2 = {
	...object1, // object1的属性赋值给object2
	age: 18
}
console.log(object2); // {id: 1, name: 'happy', age: 18}

转载请注明:快乐编程 » JavaScript扩展(三点)运算符

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址