javascript in one pic

Get Started. It's Free
or sign up with your email address
Rocket clouds
javascript in one pic by Mind Map: javascript in one pic

1. Identifier

1.1. Case-sensitive

1.1.1. a != A

1.2. start with: letters, _, $

1.2.1. letters: [ascii, unicode]

1.3. key words

1.3.1. break; case; catch; continue; default; delete; do; else; finally; for; function; if; in; instanceof; new; return; switch; this; throw; try; typeof; var; void; while; with

1.4. Reserved words

1.4.1. Nonstrict

1.4.1.1. class; const; enum; export; extends; import; super;

1.4.2. 'use strict'

1.4.2.1. implements; interface; let; package; private; protected; public; static; yield;

1.5. Variables

1.5.1. var a; // local

1.5.2. a = 123; // global

2. comments

2.1. // single line

2.2. /* multi-line comments */

3. Data type

3.1. Number [Primitive like]

3.1.1. typeof

3.1.1.1. 'number'

3.1.2. value

3.1.2.1. 0

3.1.2.2. 1.2

3.1.2.3. 045

3.1.2.4. 0x56

3.1.2.5. 0.314e2

3.1.2.6. NaN

3.1.3. Number()

3.1.3.1. parseInt("2.7", 10); // 2

3.1.3.1.1. parseInt('10', 2); // 2

3.1.3.2. parseFloat('2.5'); // 2.5

3.1.3.3. isNaN(parseFloat('a')); // true

3.1.4. +-*/%

3.1.5. <, <=, >, >=, !=, ==

3.2. String [Primitive like]

3.2.1. typeof

3.2.1.1. 'string'

3.2.2. value

3.2.2.1. "Hello"

3.2.2.2. 'World'

3.2.3. String()/toString()

3.2.3.1. var a = 8;
a.toString(2); // '1000'

3.2.4. immutable

3.2.4.1. var a = 'ABC';
a[0]; // 'A'
a[0] = 'D';
a; // 'ABC'

3.2.4.2. var a = 'abc';
a = a + 'd';
a; // 'abcd'

3.2.5. +

3.2.6. <, <=, >, >=, !=, ==

3.3. Boolean [Primitive like]

3.3.1. typeof

3.3.1.1. 'boolean'

3.3.2. value

3.3.2.1. true

3.3.2.2. false

3.3.3. Boolean()

3.3.3.1. number

3.3.3.1.1. Boolean(0); // false

3.3.3.1.2. Boolean(NaN); // false

3.3.3.1.3. Boolean(!0); // true

3.3.3.2. string

3.3.3.2.1. Boolean(''); // false

3.3.3.2.2. Boolean('*'); // true

3.3.3.3. object

3.3.3.3.1. Boolean(null); // false

3.3.3.3.2. Boolean({}); // true

3.3.3.4. undefined

3.3.3.4.1. Boolean(undefined);// false

3.4. Undefined [Primitive like]

3.4.1. typeof

3.4.1.1. 'undefined'

3.4.2. value

3.4.2.1. undefined

3.4.3. undefined != Not defined

3.4.3.1. undefined == undefined; // true
var a;
a == undefined; // true
console.log(d); // Error

3.5. Object (basic)

3.5.1. typeof

3.5.1.1. 'object'

3.5.2. {}

3.5.2.1. var p = {
 name: 'Ad',
 'age': 24
};

3.5.2.2. var q = {};
q.name = 'Bob';
q.age = 24;

console.log(q.name); // 'Bob'
console.log(q['age']); // 24

3.5.3. new Object()

3.5.3.1. var p = new Object();
p.sayHi = function(){
 console.log('Hi!');
}
p.sayHi(); // 'Hi!'

3.5.4. Null //[Primitive like]

3.5.4.1. typeof

3.5.4.1.1. 'object'

3.5.4.2. value

3.5.4.2.1. null

3.5.4.3. "undefined object"

3.5.4.3.1. null == undefined; // true

3.6. Function (basic)

3.6.1. typeof

3.6.1.1. 'function'

3.6.2. create

3.6.2.1. var a = function(arg1, arg2){
 //func body;
}

3.6.2.2. function a(arg1, arg2){
 //func body;
}

3.6.2.3. (function(arg1,arg2){
 //func body;
})

3.6.3. inside function

3.6.3.1. arguments

3.6.3.1.1. // by order

3.6.3.1.2. undefined

3.6.3.1.3. arguments

3.6.3.2. return

4. Tips

5. Operators

5.1. +-*/%

5.1.1. casting

5.1.1.1. +

5.1.1.1.1. string > number > boolean

5.1.1.2. -

5.1.1.2.1. number > string > boolean

5.2. ++a a-- a+=1 a-=1

5.3. compare

5.3.1. >, >=, <, <=

5.3.2. ==, !=

5.3.2.1. // only value

5.3.3. ===, !==

5.3.3.1. // both value & type

5.3.4. casting

5.3.4.1. a > b; // a - b > 0

5.4. ! && ||

5.4.1. !true; // false

5.4.2. true && false; // false

5.4.3. false || true; // true

6. Scope

6.1. Execution context

6.1.1. global

6.1.1.1. +-------------+ +-----------------------+ |Node +------+ |Execution Context | +-------------+ | +-----------------------+ |global = { | +--> |[Variable Object] = { | | | | | | |}; | | | variables | +-------------- | | | | | data | | | | | | functions | +-------------- | | | |Browser +------+ | objects | +-------------+ | | |window = { | | ... | | | | | |}; | |}; | +-------------+ +-----------------------+

6.1.2. context stack

6.1.2.1. +-----------------------------------+ |function b() // create new context +-----+ +-----------------------------------+ | |Variable Object = { | | +---------------+ | arguments = ...; | | | | | | | | | | | | | | |}; | | | | |Scope chain = | | | . | | +-------------------------------+ | | | . | | |global | | | | . | | | +---> f = 'no'; | | | | | | | | | | | | | | | +---> function a() | | | | | | | +---> f = 'ye' | | | +---------------+ | | | | | +-> |function b | | | +---> function b() | | +---------------+ | | +---> | | |function a | | | | | | +---------------+ | | +---> | | |global context | | | | | +---------------+ | +-------------------------------+ | Context Stack |this = {Object owns b}; | +-----------------------------------+ http://rainy.im

6.2. Scope chain

6.2.1. +--------------------------------------------+ |Scope Chain | +--------------------------------------------+ +-+global [Variable Object] | | | | | +-> var x; | | | | | | <---------------+ | | | + | | +-> function a() [Variable Object]<+ | | | + | | | | | | | | | +--> var x; | | | | | | | | | | + | | | +--> function b() [Variable Object] | | | | | | <---------------+ | | | + | | +-> function c() [Variable Object]<+ | | | + | | | | | | | | | +--> var x; | | | | | | | | | | + | | | +--> function d() [Variable Object] | | | | | v | | | +--------------------------------------------+

6.3. Closure

6.3.1. +-------------------+ +-----------------+ |Execution context | +---+[Scope chain] | +-------------------+ | +-----------------+ +> | var x = 100; | | |[Function inc] | | | var inc1 = inc(); +--+ | + | | | var inc2 = inc(); +--+ | +-> x; | | | | | | | | | inc1(); | | +-> [Function] | | | inc1(); | | + | | | inc2(); | | +-> x++; | | | inc1(); | | | | | inc2(); | +-----------------+ +--+ x; | http://rainy.im | | +-------------------+

7. Reference type

7.1. Function

7.1.1. typeof

7.1.1.1. 'function'

7.1.2. properties

7.1.2.1. f.length;

7.1.3. as value (callback)

7.1.3.1. var api = function(){
 return {
 name: 'rainy',
 age: 24
 };
};
var handler = function(d){
 console.log('Name: '+d.name+', Age: '+d.age);
};
var request = function(api, callback){
 callback(api());
};

request(api, handler); // Name: rainy, Age: 24

7.1.4. methods

7.1.4.1. apply/call/bind

7.1.4.1.1. // func.apply(thisObj, [arg1, arg2, ...]);
// func.call(thisObj, arg1, arg2, ...);
// func.bind(thisObj, arg1, arg2, ...);
// about thisObj, see `Scope`

7.1.4.1.2. var sayHi = function(name){
 console.log('Hello, ' + name + '!');
};
sayHi.call(this, 'rainy'); // Hello, rainy!
sayHi.apply(this, ['rainy']); // Hello, rainy!
sayHi.bind(this, 'rainy')(); // Hello, rainy!

7.2. Array

7.2.1. typeof

7.2.1.1. 'object'

7.2.2. var a = [1, 2, '3', [4, true]];

7.2.3. var a = new Array(1, 2, '3', [4, true]);

7.2.4. properties

7.2.4.1. a.length; // 4

7.2.5. methods

7.2.5.1. a[0] == 1; // true

7.2.5.2. a[3][1] == true; // true

7.2.5.3. a.slice(0, 2); // [1, 2]

7.2.5.4. a.indexOf(1); // 0

7.2.5.5. a.push({}); // return a.length(Mod)

7.2.5.6. a.pop(); // return popped element(Mod)

7.2.5.7. a.join('-'); // ?

7.2.5.7.1. a.toString() == a.join(',');

7.2.5.7.2. var s = 'a,b,c,d';
s.split(','); // ['a', 'b', 'c', 'd']

7.2.5.8. a.concat(['a', 'b']); // VS push()

7.2.5.9. map/reduce

7.2.5.9.1. // arr.map(callback, thisObj)

/* callback = function(element, index, arr){
 * return element to the same pos of (returned)arr;
 * };
 */

[55, 44, 33, 22, 11].map(function(e, i, arr){
 return e/(arr.length-i);
}); // [ 11, 11, 11, 11, 11 ];

7.2.5.9.2. // arr.reduce(callback, init);

/* callback = function(prev, curr, index, arr){
 * curr walk through 
 * arr.slice(init != undefined ? 0 : 1, arr.length);
 * prev cache last returned value start with: 
 * (init != undefined ? init : arr[0]);
 * };
 */

[55, 44, 33, 22, 11].reduce(function(p, c, i, arr){
 return p + c/(arr. length-i);
}, 55); // 0;

7.2.5.10. filter/some/every

7.2.5.11. shift/unshift/sort/reverse/splice

7.2.5.11.1. // will change the array

7.2.6. iteration

7.2.6.1. for(var i = 0; i < a.length; i++){
 console.log(a[i]);
}

7.2.6.2. a.forEach(function(ele){
 console.log(ele);
});

7.3. Object (OOP)

7.3.1. root of everything.

7.3.2. Constructor

7.3.2.1. function Person(name){
 this.name = name;
 this.sayHi= function(){
 console.log('Hi ' + this.name + '!');
 };
};

var p1 = new Person('Ad');
var p2 = new Person('Bob');

p1.name // 'Ad'
p2.sayHi(); // 'Hi Bob!'

p1.constructor === Person // true
p1 instanceof Person // true
p1.sayHi == p2.sayHi // false

7.3.3. prototype chain

7.3.3.1. function Person(){};
Person.prototype.name = 'Person';

var p1 = new Person();
var p2 = new Person();
p2.name = 'rainy';

console.log(p1.name); // 'Person'
console.log(p2.name); // 'rainy'

7.3.3.1.1. Person

7.3.3.1.2. p1 = new Person();

7.3.3.1.3. p2 = new Person();

7.3.3.2. p1 instanceof Person // true
p1.age = 24;

p1.hasOwnProperty('name'); // false
Person.hasOwnProperty('name'); // true

p1.hasOwnProperty('age'); // true
'name' in p1 // true
'age' in Person // false

7.3.3.3. // All properties on the prototype are shared among instances
Person.prototype.friends = ['Ad', 'Bob'];

p1.friends.pop(); // 'Bob'
console.log(p2.friends); // ['Ad']

// Combine constructor & prototype
function Person(){
 this.friends = ['Ad', 'Bob'];
};
Person.prototype.name = 'Person';

7.3.4. Inheritance

7.3.4.1. prototype chain

7.3.4.1.1. function Father(){};
Father.prototype.familyName = 'Good';

function Child(){};
Child.prototype = new Father();

var c = new Child();
console.log(c.familyName); // 'Good'

7.3.4.2. constructor

7.3.4.2.1. function Father(){
 this.familyName = 'Good';
};

function Child(){
 Father.call(this);
};

var c = new Child();
console.log(c.familyName); // 'Good'

8. Flow control

8.1. if

8.1.1. if(cond){
 state1;
}else if(cond2){
 state2;
}else{
 state3;
}

8.1.2. false ? a : b

8.2. switch

8.2.1. switch (day) {
 case MON:
 break;
 case TUE:
 break;
 case WEN:
 break;
 default:
}

8.3. while

8.3.1. do {
 state1;
} while(cond)

8.3.2. while(cond){
 state1;
}

8.3.3. break; continue

8.4. for

8.4.1. for(var i = 0; i < len; i++){
 state1;
}

8.4.2. for(var k in Obj){
 // if Obj.hasOwnProperty(k){
 console.log('Obj[' + k + '] = ' + Obj[k]);
 // }
}

8.5. try/catch/finally

8.5.1. var a = {};
try{
 a.f();
}catch(e){
 console.log(e instanceof TypeError); // true
 (function(){
 console.log('a.f()'); // 'a.f()'
 })();
}finally{
 console.log('always'); // 'always'
}