es6扩展运算符

Posted 2021-02-11 xinci

//   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" ]