JS进阶——解构赋值

数组解构

基本：

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3];
//let [a, b] = [1,2,3]
//a = 1
//b = [2, 3]

字符串

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

多维数组 

let [a,b] = [1,2,3]
//a=1
//b=[1,2]

[a,[b,c]] = [1,[2,3]]
//a=1
//b=2
//c=3

---

对象解构

基本

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名 相同的 变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4.对象中找不到与变量名一致的属性时变量值为 undefined

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

const name = [
    {
        foo: 'aaa', 
        bar: 'bbb'
    }
]
const[{ foo, bar }] = name

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值 

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

示例： 

const msg = {
  "code": 200,
  "msg"："获取新闻列表成功",
  "data":[
    {
      "id":1,
      "title"："5G商用自己，三大运用商收入下降",
      "count":58
    }, 
    {
      "id": 2,
      "title"："国际媒体头条速览",
      "count":56
    },
    {
      "id": 3,
      "title"："乌克兰和俄罗斯持续冲突",
      "count": 1669
    },
  ]
}

const { data } = msg 
console.log(data)
//需求, 请将上面对象只选出data数据,传递给另外一个函数 

function render({ data }) {
  // 內部处理
  console.log(data)
}
render(msg)

// 需求, 为了防止msg里面的data 名字混淆,要求渲染函数里面的数据名改为 myData
function render({ data: myData }) {
  // 內部处理
  console.log(myData)
}
render(msg)

注意：

let a=1
let b=2;
//这里必须要有分号
[a,b]=[b,a]

 js 前面必须加分号情况：

立即执行函数

数组解构