javascript 快速複習 2017q1
TRANSCRIPT
-
JavaScript2017Q1byAyshSu2017/02/08
-
orz
-
1.
2. [].map().lter().sort()
3. ECMAScript 6 7 ()
4.
5. callbackES6 Promiseasync/await
-
^o^
-
2
var arr = [1,2,3];var arr2 = [];for (var i = 0; i < arr.length; i++) { arr2.push(arr[i] * 2);}console.log(arr2); //[ 2, 4, 6 ]
for push
-
code
-
var arr = [1, 2, 3];var arr2 = arr.map(function (value) { return value*2;});// with ES6// let arr2 = arr.map(value => value * 2);console.log(arr2); //[ 2, 4, 6 ]
for push
-
[].map()
[].lter()
[].sort()
[].reduce()
-
[].map()
1. .map() [] (Array)
2. :MDN
JavaScript
3. Google MDN array map MDN Array.prototype.map
-
HTMLDOM
-
jQuery
Submit
$('#new-todo').click(function () { var newTodo = $('#todo-input').val(); $('#todo-list').append('' + newTodo+ ''); $('#todo-input').val(''); });
-
selector
id
HTML JS
HTMLselector
'' + value + ''
-
hps://goo.gl/dwyQQE
Vue.js
https://goo.gl/dwyQQE
-
:HTML
Submit {{ todo }}
Vue.js v- v-
JS
JS
-
:JSvar app = new Vue({ el: '#app', data: { todoInput: '', todos: [] }, methods: { newTodo: function () { this.todos.push(this.todoInput); this.todoInput = ''; }});
DOM
-
var arr = [1, 3, 5, 4, 2];
var tempArr1 = arr.map(function (value) { return value * 2; } );var tempArr2 = tempArr1.filter(function (value) { return value > var tempArr3 = tempArr2.sort(function (a, b) { return a - b; });
var arr2 = tempArr3;
-
[].map().filter().sort()rz
-
(chaining)var arr = [1, 3, 5, 4, 2];var arr2 = arr .map(function (value) { return value * 2; } ) .filter(function (value) { return value > 5; }) .sort(function (a, b) { return a - b; });
1. arr.map()
2. .lter()
3. .sort()
-
(chaining)var arr = [1, 3, 5, 4, 2];var arr2 = arr .map(function (value) { return value * 2; } ) .filter(function (value) { return value > 5; }) .sort(function (a, b) { return a - b; });
1. arr.map() // [2, 6, 10, 8, 4]
2. .lter()
3. .sort()
-
(chaining)var arr = [1, 3, 5, 4, 2];var arr2 = [2, 6, 10, 8, 4] .filter(function (value) { return value > 5; }) .sort(function (a, b) { return a - b; });
1. arr.map() // [2, 6, 10, 8, 4]
2. .lter() // [6, 10, 8]
3. .sort()
-
(chaining)var arr = [1, 3, 5, 4, 2];var arr2 =
[6, 10, 8] .sort(function (a, b) { return a - b; });
1. arr.map() // [2, 6, 10, 8, 4]
2. .lter() // [6, 10, 8]
3. .sort() // [6, 8, 10]
-
return
-
return1.
2.console.log()
3.
-
ES6
-
ES6JavaScript ECMAScript (ES)
ECMAScript
IE9 ECMAScript 5 (ES5)
[].indexOf() ES5
ES6
-
95% ES6
Firefox
Chrome
Safari
Node.js
ES6 ES5
Babel
-
ES6BlockScopedVariable var
const
let
const PI = 3.14; // PI = 3; //
let id = 123;let name; // let var
const
-
ES6BlockScopedVariableconst let (scope) {}
var function-scoped
// for (var i = 0; i < 5; i++) { setTimeout(function () {console.log('i = ' + i)}, 0);}
for (let j = 0; j < 5; j++) { setTimeout(function () {console.log('j = ' + j)}, 0);}
for () let scope for {}
-
ES6ArrowFuncon () => {}
function () {}
() {}
setTimeout(function () { console.log('yay')});setTimeout(() => { console.log('yay')});
-
ES6ArrowFuncon
return {} return
[1,2,3].map( (val) => { return val * 2;});[1,2,3].map( (val) => val * 2 );[1,2,3].map( val => val * 2 );
bindthis
this
-
ES6~ shift
`` ${}
const name = 'John';`${name}` === '' + name + '' //true
-
ES6 function =
// : ()=>function hello(name = 'world') { console.log(`Hello ${name}!`);}
hello(); // Hello world!
undened
-
ES6
// : ()=>const f = function ({ id }) { console.log(id);};const obj = { id: 123, name: 'John Doe',};f(obj); // 123
{ id: idOfObj } .id idOfObj
-
ES6
const obj = { id: 123, name: 'John Doe',};const { id, name } = obj; // const id = obj.id;// const name = obj.name;const { id: idOfObj } = obj; // const idOfObj = obj.id;
/
const [a, b] = [1, 2]; // a === 1 && b === 2
-
ES6import/export
webpack
js export
js import js
require() module.exports
-
ES6const obj = { method1: function () { // }, method2() { // }, prop1: 'value'};
-
ES6Object.assign(, 1, ...)
key value
key value key
value
shallow merge
deep merge
deep merge
-
ES6 function ...
const f = function (...args) { console.log(args);};f(1,2,3); // [1, 2, 3]
-
ES6Classextends
es6-feature.org
http://es6-features.org/#ClassDenition
http://es6-feature.org/http://es6-features.org/#ClassDefinition
-
A B
A B
-
JS
JS
JS A B JS
JS AJS B Bcallback(B)
-
JS
-
Event Loop
Event Loop
Event Loop JS
JS JS
JS
JS
API
-
APIXMLHttpRequest
jQuery $.ajax()
setTimeout()setInterval()
-
:console.log(1);
$.get(url, function (res) { console.log(2)});
console.log(3);
:132
-
:1: 1
: 1
======1 ======console.log(1);$.get(url, callback);console.log(3);======1 ======
JS:
-
:2:
: 1JS
JS: 1
console.log(1);$.get(url, callback);console.log(3);
1 console.log(1);
-
:3:
:
JS: 1
console.log(1);$.get(url, callback);console.log(3);
2JSAJAXAJAXcallback
-
:4:
:
JS: 1
console.log(1);$.get(url, callback);console.log(3);
$.get() AJAX JS 2JS3 console.log(3);
-
:5: ajax 2
: 2JS
======2 ======callback(ajaxResponse);======2 ======
JS: 1
console.log(1);$.get(url, callback);console.log(3);
-
:6:
: JS
======2 ======callback(ajaxResponse);======2 ======
JS:
-
:7:
:
JS: 2 callback
callback(ajaxResponse);
-
:
var answer;
$.ajax(url, function (res) { answer = res;});
console.log(answer); // undefined
-
: setTimout callback
function sleepFor(sleepDuration) { var now = new Date().getTime(); while(new Date().getTime() < now + sleepDuration) {}}
setTimeout(function () { // 1 console.log('1?');}, 1000);
sleepFor(5000); //JSwhile5
JSEventLoopJS
-
callback,Promise,
async/await
-
CallbackHella.k.a. callback
$.get(url1, (res1) => { const param2 = res1.returnValue; $.get(url2, { param2 }, (res2) => { const param3 = res1.returnValue; $.get(url3, (res3) => { const param4 = res1.returnValue; // ... }); });});
-
ES6Promise callback
fetch(url1) .then((res1) => { const param2 = res1.returnValue; return $.get(url2, { param2 }); }) .then((res2) => { const param3 = res2.returnValue; return $.get(url3, { param3 }); }) .then((res3) => { const param4 = res3.returnValue; return $.get(url4, { param4 }); }) // ...
-
Promisecallback1. Promise library
fetch():AJAXAPI
fetch(url) .then((res)=>res.json()) .then((res)=>console.log(res));
axios AJAX library
jQuery 3.0 Promise/A+
-
Promisecallback2. new Promise((resolve, reject)=>{})
const p = new Promise((resolve, reject) => { setTimeout(()=> { resolve('yay'); }, 1000);});
p.then((res)=>console.log(res)); // yay
newPromisefuncon
-
ES7async/await Promise
fetch(url) .then((res)=>res.json()) .then((res) => { console.log(res); }); // callback Promise resolve
-
ES7async/await async/await Promise
async function f() { const res = await fetch(url).then((res)=>res.json()); console.log(res);}f(); // Promise magic!
-
async/await async function () {}
async function await Promise Promise resolve callback
Promise
IIFE
(async () => { })();
async function return Promise
-
Quesons?JS
-
YouDon'tKnowJSJS
GitHub