ES6 摘要

前端技术积累

---

• for of 支持break continue 跳出循环

for(var item of "hello"){
    if(item =="l"){
        break
    }
    console.log(item)
}
//console.log => h e

for(var item of "hello"){
    if(item =="l"){
        continue
    }
    console.log(item)
}
//console.log => h e o

• Map

let map = new Map([
    ['name', 'david'],
    [true, 'false'],
    [1, 'one'],
    [{}, 'object'],
    [function () {}, 'function']
]);
map.get('name'); // david
map.set('name', 'lefter');
map.get('name'); // lefter
map.has('name'); // true
map.delete("name") //true

for (let key of map.keys()) {
    console.log(typeof key);
    // > string, boolean, number, object, function
}

for (let [key, value] of map.entries()) {
    console.log(key, value);
}

• promises

function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;            3`
}

getNumber()
.then(
      function(data){
        console.log('resolved');
        console.log(data);
          console.log(somedata); //此处的somedata未定义
    }, 
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
)
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

• Generator

function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}

var generator = sillyGenerator();
> console.log(generator.next()); // { value: 1, done: false }
> console.log(generator.next()); // { value: 2, done: false }
> console.log(generator.next()); // { value: 3, done: false }
> console.log(generator.next()); // { value: 4, done: false }

• async

var asyncReadFile = async function () {
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async function getStockPriceByName(name) {
  var symbol = await getStockSymbol(name);
  var stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 5000);

• getter & setter

class Employee {
    constructor(name) {
        this._name = name;
    }
    get name() {
      if(this._name) {
        return 'Mr. ' + this._name.toUpperCase();  
      } else {
        return undefined;
      }  
    }
    set name(newName) {
      if (newName == this._name) {
        console.log('I already have this name.');
      } else if (newName) {
        this._name = newName;
      } else {
        return false;
      }
    }
}

var emp = new Employee("James Bond");
if (emp.name) {
  console.log(emp.name);  // Mr. JAMES BOND
}
emp.name = "Bond 007";
console.log(emp.name);  // Mr. BOND 007

• getBoundingClientRect

"sortablejs": "git://github.com/RubaXa/Sortable.git#dev",