004--TypeScript变量声明之解构展开

Posted 2021-12-03 ccbest

1.解构

解构分为数组解构和对象解构

let input = [1,2]
let [first,second] = input
//上述写法相当于
// let first = input[0]
// let second = input[1]

let input: [number,number] = [1,2]
function f([first,second]: [number,number]){
  console.log(first)
  console.log(second)
}
f(input)  //1   2
//编译后
var input = [1, 2];
function f(_a) {
    var first = _a[0], second = _a[1];
    console.log(first);
    console.log(second);
}
f(input);

剩余变量

let [first,...rest] = [1,2,3,4]
console.log(first)//1
console.log(rest)//[ 2, 3, 4 ]
//编译后
// var _a = [1, 2, 3, 4], first = _a[0], rest = _a.slice(1);
// console.log(first);
// console.log(rest);

let [first] = [1,2,3,4]
let [, second,,fourth] = [1,2,3,4]
console.log(first)//1
console.log(second)//2
console.log(fourth)//4

对象解构

let o = {
  a: ‘foo‘,
  b: 12,
  c: ‘bar‘
}

let {a, b} = o
console.log(a)//foo
console.log(b)//12

let {a:f, ...passthrough} = o
console.log(passthrough)//{ b: 12, c: ‘bar‘}
let total = passthrough.b + passthrough.c.length
console.log(total)//15

编译后的如下所示

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var o = {
    a: ‘foo‘,
    b: 12,
    c: ‘bar‘
};
var a = o.a, b = o.b;
console.log(a); //foo
console.log(b); //12
var f = o.a, passthrough = __rest(o, ["a"]);
console.log(passthrough);
var total = passthrough.b + passthrough.c.length;
console.log(total);

let o = {
  a: ‘foo‘,
  b: 12,
  c: ‘bar‘
}

let {a: newName1, b: newName2} = o//重命名
//相当于
// let newName1 = o.a
// let newName2 = o.b
//其实这样很容易引起困惑,导致我们给参数指定类型只能这样指定
// let {a, b}: {a: string, b: number} = 0

//默认值的情况
function keepWholeObject(wholeObject: { a: string, b?: number }) {
  //上述b参数是个可选参数,传进来可能是个undefined
  //我们可以给b一个默认值
  let {a, b = 100} = wholeObject 
}

function f({ a, b = 0 } = { a: ‘ ‘ }): void {
  //给a定义了一个默认值,如果是对象必须传入a值
}
f({ a: ‘yes‘ });//这样是没问题的
f()//这样写也是没问题的
f({})//报错 类型推断里面b是个可选参数,a不是

展开

数组展开

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
console.log(bothPlus)//[ 0, 1, 2, 3, 4, 5 ]
//实际上这个过程是个浅拷贝的过程,不会影响原始数组
//编译后的文件
var first = [1, 2];
var second = [3, 4];
var bothPlus = [0].concat(first, second, [5]);
console.log(bothPlus);

对象展开

let defaults = {
  food: ‘spicy‘,
  price: ‘$10‘,
  ambiance: ‘noisy‘
}

let search = { ...defaults, food: ‘rich‘ }
console.log(search)//{ food: ‘rich‘, price: ‘$10‘, ambiance: ‘noisy‘ }
//后面的覆盖前面的 food
//编译成es2015
// let defaults = {
//   food: ‘spicy‘,
//   price: ‘$10‘,
//   ambiance: ‘noisy‘
// };
// let search = Object.assign({}, defaults, { food: ‘rich‘ });
// console.log(search); //{ food: ‘rich‘, price: ‘$10‘, ambiance: ‘noisy‘ }

2019-05-24  10:18:42