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",