写在前面的话： 宝妈一枚，发现自己的记忆力不好（一孕傻三年），希望通过总结JavaScript的知识，强化记忆。最近趁着项目不忙，系统的学习了一下，让自己有个全面的知识体系，以及跟进JavaScript的发展步伐。(内容是中英文混杂，有时间后续会重写，有错误不全的地方请指正)
一、基础JavaScript
Variable and Datatypes & variable mutation and type coercion Operators if/ else statements Boolean logic and Switch statements Functions Statements and Expressions Arrays Objects and Properties Object and Methods Loop and Iteration ES5, ES6/ ES2015 and ES2016 二、JavaScript运行原理
how code executed: JavaScript Parsers and Engines Execution Contexts and Execution Stack Execution Contexts in Detail: Creation and Execution Phases and Hoisting, hositing in practice Scoping and the Scope Chain 'this' keyword and 'this' in practice 三、浏览器中的JavaScript: DOM操作和事件
The DOM and DOM Manipulation Math.random, Math.floor
document.querySelector().textContent = document.querySelector().innerHTML = document.querySelector().style.display = document.querySelector().addEventListener(eventName, function () {}) document.querySelector().src document.getElementById() document.querySelector().classList.remove(className) document.querySelector().classList.add(className) document.querySelector().classList.toggle(className), if has class, delete, if not , add class HTML and CSS crash course Event and Event Handling: Rolling the Dice
四、高级JavaScript：Object和Function
Everything is an Object: Inheritance and the Prototype Chain
primitives(number, string, boolean, undefined, null) and Objects constructors and instances inheritance prototypes and prototype chains every JavaScript object has a prototype property, which makes inheritance possible in JavaScript The prototype property of an object is where we put methods and properties that we want other objects to inherit The constructor's prototype property is NOT the prototype of the Cosntructor itself, it's the prototype of ALL instances that are created through it When a certain method (or property) is called, the search starts in the Object itself, and if it cannot be found, the search moves on to the objects's prototype. This continues until the mehtod is found: prototype chain. Creating Objects: Function Constructors The prototype Chain in the console
_proto _ and prototype objectName.hasOwnProperty(propertyName) objectName instanceof Constructor console.info(objectName) Creating Objects: Object.create Object.create(objectPrototype) Object.create(objectPrototype, obj), obj = { arr1: {value: 'attr'}, attr2: { vlaue: 'attr2'} } Primitives vs Objects primitives contain the values objects point to the values First Class Function: Passing Functions as Arguments A function is an instance of the Object type A function behaves like any other object We can store function in a variable We can pass a function as an argument to another function We can return a function from a function Above all we see in js, first-class functions First Class Function: Functions Returning Functions Immediately Invkoed Function Expression(IIFE) 隔离作用域 写惰性载入（惰性函数) : 例如浏览器的环境监测只需要执行一次，可以用这个 Closures An inner function has always access to the variables and parameters of its outer function, even after the outer function has returned Bind, Call and Apply call(thisObj, otherArguments1, arguments2) apply(thisObj, otherArgumentsArray) bind(thisObj， arguments1), 不是立即调用，而是返回函数，参数可以分开设置，调用的时候在设第二个，函数curring 五、下一代JavaScript：ES6/ES2015
Variable Declarations with let and const var , function scope let, const , block scope, temporal dead zone
accessing a let or constbefore it is declared throws ReferenceError Blocks and IIFEs String in ES6/ ES2015
template literals (backtick (``) ) string method
str.startsWith('test') str.endsWith('test') str.includes('test') str.repeat(5) Arrow Functions: Basics, Lexical 'this' keyword
method call 'this' point to the object, function call 'this' point to the global object 'window' arrow function. sharing 'this' keywords with its surrounding Destructuring
[firstName, age] = ['claire', 20] {firstName, age } = { firstName: 'claire', age: 20} {firstName: a, age: b} = { firstName: 'claire', age: 20} Arrays in ES6/ ES2015
Array.from() el.className for ( el of arr)可以使用continue 和break forEach，map， continue，break不生效 arr.findIndex(cur => cur > 18) arr.find(cur => cur > 18) The spread operator
Rest parameters Default parameters Maps
new Map() map.set(key, value) map.get(key) map.size map.delete(key) map.has(key) map.clear() map.forEach for( let key of map) map.entries() Classes
static method in class class is no hosited, must first declared, then use only add method to class, not properties Classes with Subclasses
六、异步JavaScript：Promise, Async/Await和Ajax
UnderStanding Asynchronous JavaScript: The Event Loop
The Old Way: Asynchronous JavaScript with Callbacks From Callback hell to Promises Promise
Object that keeps track about whether a certain event has happened already or not Determines what happens after the event has happened. Implements the concept of a furture value that we're expecting Promise state: pending-> settled/resolved--> fulfilled(rejected) From Promises to Async/Await
Async/Await is used to consume Promise Async function 总是返回Promise Promise vs Generator Function vs Async Await Ajax and APIs
Ajax: Asynchronous javascript and xml
api: application programming interface own API, for data coming from you own server 3rd-party APIs:
Google Maps Embed Youtube videos Weather data Movies data Send email or SMS ..... 好用的跨域工具：https://crossorigin.me/: for cors when practice Making Ajax Calls with Fetch and Promises, and Fetch and Async/Await
fetch vs 传统Ajax(XMLHttpRequest)
Fetch 优点主要有：
语法简洁，更加语义化 基于标准 Promise 实现，支持 async/await 同构方便，使用 isomorphic-fetch Fetch 常见坑
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'}) 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。 七、现代JavaScript: 使用ES6, NPM, Babel and Webpack
A modern Setup: configuring webpack A modern Setup: the webpack Dev Server A modern Setup: Babel Planning Project with MVC How ES6 Modules work Implementing Persistent Data with localStorage
转载于:https://juejin.im/post/5af694ebf265da0b8d420136
扫一扫
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
