JavascriptNext

Working With Es6

Function

Default Parameter Value

import {lazyload} from './jquery.lazyload.js';

var defaultOpt = {
    effect: 'fadeIn',
    effect_speed: 10,
    placeholder: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==',
    skip_invisible: false
};

function lazyLoad({$imgs = $('.lazy'), options = defaultOpt} = {}) {
    $imgs.lazyload(options);
}

export {lazyLoad};

with Destructuring

Rest Paramter

function fn(source, ...otherIsArray) {
    source.concat(otherIsArray);
    //return [...source, ...otherIsArray];
}

var sa = [1,2];
fn(sa,3,4);

arguments?arguments is array-like.So method of Array should be called use apply/call or use switch arguments to array use slice.call

...

replace .apply(ctx, [...])

Arrow Fn

var f = (x, y) => x + y;

var f = (x, y) => {
    let z = x + y;
    return z;
}

var f = function(x, y) {
    return x + y;
}

Less type function...

this!!!

var x = 1;
function foo() {
    setTimeout(() => {
        console.log(this.x);
    })
}

foo.call({x: 2});

Destructuring

var [a, b, c = 3] = [1, 2];

具有Iterator接口的/对象都可以使用解构

若结构默认值是表达式，则表达式惰性求值

模式 vs 变量

Let/Const

let.Block Level Scope

无变量提升

TDZ

不允许重复声明

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function() {
    console.log(i);
  };
}

a[1](); //10

//var->let
a[1](); //1

//Block Scope
{
    let i = 0;
    console.log(i);
}

//IIFE
(function(){
    var i = 0;
    console.log(i);
}())

String

Iterator Interface

inlcudes/startsWith/endsWith

repeat

padStart/padEnd

template string

var html = '<div>' +
    '<p>' + name + '</p>' +
    '<p>' + content + '</p>' +
'</div>';

//template string
var html = `
    <div>
        <p>${name}</p>
        <p>${content}</p>
    </div>
`;