es6扩展运算符

Posted xinci

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6扩展运算符相关的知识,希望对你有一定的参考价值。

//   a.js 
export const a = 11;
export default {
    aa() {
        console.log(22)
    }
}

// b.js 
import {a} from ‘a.js‘; //  a -> 11;
import any from ‘a.js‘; //  any -> {aa() {console.log(22) }    }; 

// ---------------------------------------
// export 对应 import     以什么命名导出(export)就要对应去用什么接收(import)
// export default  -> import    default为默认导出   import接收时 可以取任意名字接收
// 相关文档链接:   https://www.cnblogs.com/pengaijin/p/7646524.html

// 花括号是‘解构赋值’的表现形式之一
// 解构赋值相关链接   https://blog.csdn.net/qq_36846234/article/details/78973402


// es6 之扩展运算符

// 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

// 如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

// 扩展运算符对对象实例的拷贝属于一种浅拷贝

// 数组的扩展运算符

function add(x, y) {
    return x + y;
}
  
const numbers = [4, 38];
add(...numbers) // 42

// 如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [...rest, last] = [1, 2, 3, 4, 5]; // 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5] // 报错

// 扩展运算符还可以将字符串转为真正的数组
let a = [...‘hello‘]
// [ "h", "e", "l", "l", "o" ]

 

以上是关于es6扩展运算符的主要内容,如果未能解决你的问题,请参考以下文章

扩展运算符不适用于基于 Redux/ES6 的示例

es6扩展运算符 (...)

es6~扩展运算符后续

js之es6

js之es6

ES6扩展——函数扩展之剩余函数