es解构的一些方式

258 阅读2分钟

解构就是赋值的一种方式,数组,字符串,对象,函数的一些赋值的模式

//数组方式的一些
let [a,b] = [3,5]
a // 3
b // 5
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

// 剩余运算符 ... 可以用在函数传参
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

//可以允许默认值
let [a,b='2'] = ['1']
a // 1
b // 2
let [a=3,b=a] = [3,5]
a // 3
b // 3

//右侧有值可以取,不会执行默认赋值
function fn(){
    return 3
}
let [a = fn()] = [1]
a // 1

//对象也可以赋值,但是和数组的方式不同的是它有属性名称可选,且属性名称左右必须相同
let {ddd,fff} = {ddd:123,fff:456}
ddd //123
fff //456

//对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let {log} = console
//此时 log() 就等同于 console.log()
//函数的参数也可以解构
function test([x,y]) {
    return x+y
}
test([1,3]) //4

//这种默认赋值的方式使得定义的参数必须传入否则会变成undefined,当不传入任何参数时默认参数才会生效
function test2({x, y} = { x: 0, y: 0 }){
    return [x,y]
}
test2({x:3,y:5}) //[3,5]
test2({x:3}) //[3,undefined]
test2() //[1,2]
//这种默认赋值的方式使得定义的参数不是必须传入,会采用默认值的形式
function test3({x=1,y=2}={}){
    return [x,y]
}
test3({x:3,y:5}) //[3,5]
test3({x:3}) //[3,2]
test3({}) //[1,2]
test3() //[1,2]

//交换变量值
let x = 1
let y = 2
[x,y] =[y,x]

//从函数返回多个值
//数组方式
function arr() {
    return [1,2,3]
}
let [a,b,c] = arr()
a //1
b //2
c //3
//对象方式
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

//解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

//提取 JSON 数据
//解构赋值对提取 JSON 对象中的数据,尤其有用。
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]