亲宝软件园·资讯

展开

ES6扩展运算符 ES6扩展运算符的理解与使用场景

Mr_Ma 人气:0
想了解ES6扩展运算符的理解与使用场景的相关内容吗,Mr_Ma在本文为您仔细讲解ES6扩展运算符的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:es6,扩展运算符,es6扩展运算符作用,es6扩展运算符操作对象,下面大家一起来学习吧。

扩展运算符,即...运算符是es6新增的一个语法,其主要作用是将数组或对象进行展开(这种说法也许不太准确),希望通过下面的总结能让你明白其使用方法。

个人的理解和总结使用场景如下:

1、替代apply方法,一般在函数调用时处理参数

假设我们的参数刚好是一个数组(单个参数这里就不讨论了,逐个传入即可);

var args = [1, 2, 3];

然后我们需要返回这个参数数组中所有元素之和,那么ES5的做法如下:

function addFun(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

// 两种调用方式
// 1,这种方式在参数较少的情况下还能应付,但是参数一旦过多就不靠谱了,
addFun(args[0], args[1], args[2])

// 2,用apply方法直接传递数组
addFun.apply(null, args);

apply方法能很好的解决参数过多的问题,但是前提是你需要清除apply和call方法的区别,估计很多童鞋很少用apply方法。

ES6使用扩展运算符就简介多了:

function addFun(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

addFun(...args);

这里...运算符是将args数组拆开成单个元素进行计算。

2、剩余参数(rest运算符),主要针对函数形参

剩余参数运算符与扩展运算符都是...,但是使用起来却不一样,可以简单的理解为剩余运算符和扩展运算符是相反的,扩展运算符是把数组或对象进行展开,而剩余运算符是把多个元素‘合并'起来。

主要用于不定参数,可以理解为arguments的替代品,因此ES6开始不再使用arguments对象

let demoFun = function(...args) {
    for (let item of args) {
        console.log(item);
    }
}

demoFun(1, 2, 3) // 1, 2, 3
let demoFun = function(argA, ...args) {
    console.log(argA);
    console.log(args)
}

demoFun(1, 2, 3);
// 1
// [2, 3]

配合结构使用时,把他理解为整体为一个元素就行了

var [a, ...rest] = [1, 2, 3, 4];

// 这里把...rest整体看成一个元素
console.log(a) // 1
console.log(...rest) // [2, 3, 4]

3、数据连接、合并

连接数组,使用push将数组添加到另一个数组的尾部

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

// ES5处理方式
Array.prototype.push.apply(arr1, arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// ES6处理方式
arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

合并数组(代替concat方法)

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

// ES5 合并
var es5Arr = arr1.concat(arr2);
console.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

// ES6 合并
var es6Arr = [...arr1, ...arr2];
console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

4、数组和对象的拷贝

数组拷贝

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2) // false

arr2.push(4); // 修改arr2,不会影响arr1的值

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

对象也一样

var obj1 = {
    a: 1,
    b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不会影响obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

注意:扩展运算符拷贝是浅拷贝,只对数组或对象的第一层结构起作用

5、字符串转数组

var str = 'hello';

// ES5 处理方式
var es5Arr = str.split('');
console.log(es5Arr) // ["h", "e", "l", "l", "o"]

// ES6 处理方式
var es6Arr = [...str];
console.log(es6Arr) // ["h", "e", "l", "l", "o"]

6、在函数调用时使用拓展运算符。

以前如果我们想将数组元素迭代为函数参数使用,一般使用Function.prototype.apply的方式。

function myFunction(x, y, z) { 
  console.log(x+""+y+""+z);
} 
var args = [0, 1, 2]; 
myFunction.apply(null, args);

有了展开语法,我们可以这样写。

function myFunction(x, y, z) { 
  console.log(x+""+y+""+z); 
} 

var args = [0, 1, 2]; 
myFunction(...args);

提示: ...arr返回的并不是一个数组,而是各个数组的值。只有[...arr]才是一个数组,所以...arr可以用来对方法进行传值

总结

...运算符的常用方法和场景如上,其他的使用方法就不做过多介绍了,比如map、伪数组转化,有兴趣的朋友可以自己查查资料,其实本质上的用法都差不多,总结起来就是:三点放在形参或者等号左边为rest运算符;放在实参或者等号右边为spread运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符。

加载全部内容

相关教程
猜你喜欢
用户评论