• 从C#到TypeScript - 变量

    发布:51Code 时间: 2018-06-01 10:10

  • 很多前端工程师会把自己比作魔法师,而对于JavaScript这门语言,我也想把它唤作一门有魔力的语言。因为这群有无限想法的人,真的在用它创造各种让你惊叹的事物。 一、前言 几年前...

  • TypeScript的变量声明和ES6差不多,相比之前主要是多了let和const。

    为什么不用var?

    不管是TypeScript还是ES6都会兼容以前的javascript,所以在TypeScript里var也还是保留了。

    虽然C#里也有var,但和JavaScript的可不一样,var在javascript里会有一些奇怪的表现。

    比如会置前,而且作用域是整个函数,可以不写var来声明变量,然后变量变成全局。

    这些都可能会带了一些不容易注意到的问题。

    比如经典的:

    for (var i = 0; i < 10; i++) {

        setTimeout(function() { console.info(i); }, 100);

    }

    结果并不是期望的0, 1, 2, 3...,跑出来的结果全是10,这是因为var出来的i的作用域是整个函数。

    这就导致循环完成后i变成10,setTimeout内的函数才被执行,所以结果都是10了。

    虽然可以用立即完成函数把重新构建一个作用域,但毕竟用起来麻烦,而且不符合人的思维,所以就有了let。

    使用let声明变量

    let主要是对var的一个代替,用let更符合人思考的过程,这才和C#var的功能是差不多。

    let的用法和var是一样的:

    let str = 'string';

    let的作用域是块级作用域,比如上面的循环,用let声明i的话就可心得到期望的值。

    for (let i = 0; i < 10; i++) {

        setTimeout(function() { console.info(i); }, 100);

    }

    这里得到的结果就是0, 1, 2....9。

    所以建议还是抛弃var,选择let。

    const

    C#也有const,意义上差不多,都是常量,不想变量被改变。

    const str = 'string';

    str = 'new string'; // 编译不了

    一般情况下,主张确定不变的变量用const声明来增加代码健壮性和可读性。

    解构

    所谓解构,就是把对象或数组里的成员分解出来。

    比如数组:

    let [first, second] = [1, '2', false];

    console.info(`first: ${first}`);

    这里就把数组的第一个成员和第二个成员分别用first和second解构出来,就省去了分别声明两个变量,并用下标取数组里的值来赋值了。

    这也可以方便的提供一些功能,比如交换数组里的两个值,按以前的做法需要借助下中间变量,现在就不需要了:

    let [first, second] = [second, first];

    可以利用...扩展符号来解开数组,再并入其他数组。

    let arr = [1, 2, 3];

    let newArr = [...arr, 4, 5];

    console.info(newArr); // 1, 2, 3, 4, 5

    对象同样可以被解构:

    class Test{

        str = "string";

       int = 1;

       bool = false;

       func(){        

            console.info('func');

        }

    }

    let {str, bool, func} = new Test(); //名字必须和类里的保持一致

    let {str: newStr} = new Test(); //通过这种方式可以把str改为newStr

    console.info(`${str}, ${bool}`);

    func();

    ...符号同样可以用于对象,不过只能解开可枚举的变量,所以函数不会解出来。

    延用上面的class:

    let {str, ...other} = new Test();

    console.info(other.int); // 输出1

    console.info(other.func()); // 编译错误,...符号不能解出函数

    还可以加上默认值,当解出来的值是undefined时会用上默认值。

    class Test{

        empty;

        str = '';

    }

    let {empty='empty', str='str'} = new Test();

    console.info(`${empty}, ${str}`); // 输出 empty, ,因为str有值,所以用原始的''

    以上就是常用的变量声明及赋值的使用方法,不过基本都是ES6的标准语法,TypeScript本身并没有在上面多做什么。

    文章来源:网络
    上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8103),我们将立即处理。
  • 上一篇:JavaWeb与Asp.net工作原理比较分析

    下一篇:干货:一文看懂.NET的各种变体

网站导航
Copyright(C)51Code软件开发网 2003-2018 , 沪ICP备16012939号-1