今天查一个问题的时候, 去reivew 别人最近提交的代码, 发现有下面这个改动, 感觉很奇怪, 怎么去掉了为空的短路判断并且中间加了一个问号? 很是疑惑. 难道提交之前碰到键盘了?

再想想, 如果说这样, 本地测试应该就不会过吧, 于是开始怀疑自己. 果不其然, JavaScript 真的有这种操作符.

- 阅读剩余部分 -

1. var is function-scoped, let is block-scoped; //for (const x of ['a', 'b']) {} is ok

2. let/const 有emporal dead zone (TDZ), 其实这和Java生命使用变量一直, 未声明前不可用. 但var声明但变量一旦进入这个变量声明但function, 即使还没到声明这行代码, 但是这个变量已经有了, 并且赋值为 undefined;

   let tmp = true;
   if (true) { // enter new scope, TDZ starts

    // Uninitialized binding for `tmp` is created
    console.log(tmp); // ReferenceError
   
    let tmp; // TDZ ends, `tmp` is initialized with `undefined`
    console.log(tmp); // undefined
   
    tmp = 123;
    console.log(tmp); // 123

   }
   console.log(tmp); // true
   例子2

   if (true) { // enter new scope, TDZ starts

    const func = function () {
        console.log(myVar); // OK!
    };
   
    // Here we are within the TDZ and
    // accessing `myVar` would cause a `ReferenceError`
   
    let myVar = 3; // TDZ ends
    func(); // called outside TDZ

   }

3. always use const, let, 避免 var

1. From var to const/let;
2. From IIFEs(Immediately-Invoked Function Expression) to blocks;
3. From concatenating strings to template literals -> ``;
4. From function expressions to arrow functions, array function没有this;
5. Handling multiple return values
   --Multiple return values via arrays //const [, year, month, day] = [0, 2012, 2, 2]
   --Multiple return values via objects //const {foo, bar} = {'foo':'full', 'bar':3, 'name':'eric'}
6. From for and forEach() to for-of;
7. Handling parameter default values -> function foo(x=0, y=0) {};
8. From arguments to rest parameters (变长参数) foo(...args);
9. 通过spread operator (...) 去把Array 变成非数组序列;

10. From function expressions in object literals to method definitions;

    var obj = {

     foo: function () {
         ···
     },
     bar: function () {
         this.foo();
     }, // trailing comma is legal in ES5

    }

to

const obj = {
    foo() {
        ···
    },
    bar() {
        this.foo();
    },
}

11. 使用 class 和 extend 定义类和继承关系

    class Employee extends Person {}

12. From custom error constructors to subclasses of Error

    class MyError extends Error {}

13. From objects to Maps;
14. String 和 Array 新方法;

About ECMAScript 6

1. ECMA = European Computer Manufacturers Association, 是一个致力于信息和通讯标准化的组织. 更多信息
2. ES6 = ECMAScript 6 是一个脚本语言规范. 最早是用来规范JavaScript的, 现如今JavaScript也是这个规范最好的实现.其它实现比如 JScript 和 ActionScript. 更多信息,比如ECMAScript 2015, ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, 参见 wiki
3. ES6 compatibility table
4. ECMAScript 由TC39 (Ecma Technical Committee 39)委员会制定,它主要由大的浏览器厂商组成;
5. ES6 亦 ECMAScript 2015 是多年后憋的一个大的release, 之后的ECMAScript 2016,等每年都会发布一些新的小更新;
6. JavaScript是Oracle(从Sun继承而来)的一个商标,所以 JavaScript的官方名称是ECMAScript.
7. 围绕 JavaScript 有: 1) JavaScript规范,即 ECMAScript 2015,2016,...; 2)JavaScript的Engine, 即规范实现者, 如V8; 3)JavaScript的使用者, 即应用开发人员;
8. ES6是ES5的超集, 没有移除任何feature. 为什么? 难以控制的升级, 老旧代码,世界各地的各种不同的浏览器
9. ES6的主要的features分类
   a. 更好的语法 如: Class, Module;
   b. 标准库的新功能, 如: Strings, Arrays, Promise, Map, Set;
   c. 新feature, 如: Generator, Proxy, WeakMap;

10. Strict mode was introduced in ECMAScript 5 to clean up the language.

    'use strict';

The bodies of modules and classes are implicitly in strict mode in ECMAScript 6 – there is no need for the 'use strict' marker. Given that virtually all of our code will live in modules in the future, ECMAScript 6 effectively upgrades the whole language to strict mode.

动态加载JS

function loadScript(scriptUrl, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = scriptUrl;
    document.head.appendChild(script);
    callback();
}

loadScript("https://code.jquery.com/jquery-3.3.1.min.js", function() {
    console.log("loading script");
    setTimeout(function () {
        console.log("loading done");
            //部分DIV 变为整个页面
        $("body").html($('#sbo-rt-content').wrap('<p/>').parent().html());
            //动态添加CSS
        $(document.head).append(`<style>
            @media print {
                #sbo-rt-content {
                    background-color: white;
                    height: 100%;
                    width: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    margin: 0;
                    padding: 15px;
                    font-size: 14px;
                    line-height: 18px;
                }
            }
        </style>`);
            //打印
        window.print();
    }, 3000);
});