Javascript从ES5到ES7总结
_iorilan
10年以上软件工程经验,先后从事在线教育/IT金融/即时通信/政府/物流平台/零售/门禁/监控等领域。专注夯实基础/项目成本与架构平衡/框架调研/团队高效协同工作
展开
-
Javascript 从ES5到ES7 - 20高阶函数
1. bind value into 'this'const area = function() { return this.width * this.height;}; const boundArea = area.bind( { width: 2, height: 3 } );boundArea();2. format currency函数const forma...原创 2019-02-05 15:48:36 · 484 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 16 使用requestAnimationFrame代替setInterval完成动画效果
var globalID;function repeatOften() { $("<div />").appendTo("body"); globalID = requestAnimationFrame(repeatOften);}$("#start").on("click", function() { globalID = requestAnimationFr...原创 2019-02-05 15:44:45 · 675 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 17 Object.keys 和Object.entries进行集合遍历
array.includes:var arr = [1,2,3,4,5]arr.indexOf(3) >=0 //trueequalsarr.includes(3) //trueObject.values:var obj = {a:1,b:"2",c:3.0}console.log(Object.values(obj));//[1,"2",3.0]using Obj...原创 2019-02-05 15:45:49 · 475 阅读 · 0 评论 -
Javascript 从ES5到ES7总结 - 2 array-set-map-1
/*Array*/// foreacharray = ['first', 'second', undefined, 'fourth'];array.forEach(function(element) { console.log(element);});var myArray = new Array('1', '2', '3');myArray = myArray.con...原创 2019-02-05 15:20:09 · 449 阅读 · 0 评论 -
Javascript 从ES5到ES7总结 - 3 array-set-map-2
array :var arr = [{id: 1, name: "one"}, {id: 2, name: "two" }]array.find(object => object.id === 2); // {id:2, name:"two"}-sorting const arr = [ "sex", "age", "job"];arr.sort(); //re原创 2019-02-05 15:21:14 · 373 阅读 · 0 评论 -
Javascript 从ES5到ES7总结 - 4-promise与callback chain
function doSomething1(){ return new Promise((resolve, reject) => { if (Math.random() > 0.05) { resolve("step1 success"); } else { reject("step1 fail"); } })}fun...原创 2019-02-05 15:22:06 · 441 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 5 Promise与aync await
/_ ES6 _/const isMomHappy = true;// Promiseconst willIGetNewPhone = new Promise( (resolve, reject) => { // fat arrow if (isMomHappy) { const phone = { b...原创 2019-02-05 15:23:26 · 394 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 6 async await
1. sample load avatarasync function showAvatar() { // read our JSON let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); // read github use...原创 2019-02-05 15:25:00 · 879 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 7 类和继承
/*the old way*/function Person(first, last, age, gender, interests) { this.name = { 'first': first, 'last' : last }; this.age = age; this.gender = gender; this.interests = intere...原创 2019-02-05 15:28:16 · 697 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 15 浏览器api与调用栈
实例1function main(){ console.log('A'); setTimeout( function display(){ console.log('B'); } ,0); console.log('C');}main();// Output// A// C// B1.main 函数进入调用栈,console....原创 2019-02-05 15:42:32 · 416 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 14 类型运算
1. 数字,字符串,数组,布尔混合操作的几种情况3 * "3" //91 + "2" + 1 //121true + true //210 - true //9const foo = { valueOf: () => 2}3 + foo // 54 * foo // 8const bar = { toString: () => " promise ...原创 2019-02-05 15:37:58 · 350 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 18 __proto__
1. this vs prototypefunction Fn() {}Fn.prototype.print = function() { console.log("Calling Fn.prototype's print method");};var obj = new Fn();obj.print(); // -> Calling Fn.prototype's pri...原创 2019-02-05 15:46:55 · 335 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 19 map,reduce,filter
1. mapconst numbers = [2, 4, 8, 10];const halves = numbers.map(x => x / 2);2. filterconst words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];const longWords原创 2019-02-05 15:47:23 · 517 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 8 export和import
export function (export.js):export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div);}Export object (export-o...原创 2019-02-05 15:31:34 · 809 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 9 object factory
function createNewPerson(name) { var obj = {}; obj.name = name; obj.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); }; return obj;}var salva = createNewPerson('Salva');...原创 2019-02-05 15:32:53 · 518 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 10 函数闭包
/*Closure*/var createPet = function(name) { var sex; return { setName: function(newName) { name = newName; }, getName: function() { return name; }, ...原创 2019-02-05 15:34:45 · 409 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 11 fetch
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(JSON.stringify(myJson)); });原创 2019-02-05 15:35:38 · 619 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 12 Promise.All
Promise.all([GetResource1(),GetResource2()]) .then([json1,json2])=>{ //process json1 //process json2 } var promise1 = Promise.resolve(3);var promise2 = 42;var promise3 = n...原创 2019-02-05 15:36:23 · 486 阅读 · 0 评论 -
Javascript 从ES5到ES7 - 13 Call, apply , bind
Call :var obj = {name:"Niladri"};var greeting = function(a,b,c){ return "welcome "+this.name+" to "+a+" "+b+" in "+c;};console.log(greeting.call(obj,"Newtown","KOLKATA","原创 2019-02-05 15:37:00 · 356 阅读 · 0 评论 -
Javascript 从ES5到ES7总结 - 1 对象
var person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years o...原创 2019-02-05 15:18:56 · 401 阅读 · 0 评论