JavaScript 快速複習 2017Q1

JavaScript2017Q1byAyshSu2017/02/08

1.

2. [].map().lter().sort()

3. ECMAScript 6 7 ()

4.

5. callbackES6 Promiseasync/await

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

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.

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)

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


2JSAJAXAJAXcallback

:4:

:

JS: 1


$.get() AJAX JS 2JS3 console.log(3);

:5: ajax 2

: 2JS

======2 ======callback(ajaxResponse);======2 ======

JS: 1


: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

JavaScript 快速複習 2017Q1

Technology

Transcript of JavaScript 快速複習 2017Q1