JavaScript語言精粹經(jīng)典實(shí)例(整理篇)
數(shù)據(jù)類型
JavaScript 是 弱類型 語言,但并不是沒有類型,JavaScript可以識別下面 7 種不同類型的值:
基本數(shù)據(jù)類型
1.Boolean
2.Number
3.String
4.null
5.undefined
6.Symbol
Object
1.Array
2.RegExp
3.Date
4.Math
5....
可以使用 typeof 判斷數(shù)據(jù)類型,操作符返回一個字符串,但并非返回的所有結(jié)果都符合預(yù)期
typeof false // "boolean" typeof .2 // "number" typeof NaN // "number" typeof '' // "string" typeof undefined // "undefined" typeof Symbol() // "symbol" typeof new Date() // "object" typeof [] // "object" typeof alert // "function" typeof null // "object" typeof not_defined_var // "undefined"
變量
在應(yīng)用程序中,使用變量來來為值命名。變量的名稱稱為 identifiers
聲明
1.使用關(guān)鍵字 var :函數(shù)作用域
2.使用關(guān)鍵字 let :塊作用域 (block scope local variable)
3.直接使用:全局作用域
var global_var = 1; function fn () { var fn_var = 2; if(fn_var > 10){ let block_var = 3; global_var2 = 4; } }
只聲明不賦值,變量的默認(rèn)值是 undefined
const 關(guān)鍵字可以聲明不可變變量,同樣為塊作用域。對不可變的理解在對象上的理解需要注意
const num = 1; const obj = { prop: 'value' }; num = 2; // Uncaught TypeError: Assignment to constant variable. obj['prop'] = 'value2'; obj = []; // Uncaught TypeError: Assignment to constant variable.
變量提升
JavaScript中可以引用稍后聲明的變量,而不會引發(fā)異,這一概念稱為變量聲明提升(hoisting)
console.log(a); // undefined var a = 2;
等同于
var a; console.log(a); a = 2;
函數(shù)
一個函數(shù)就是一個可以被外部代碼調(diào)用(或者函數(shù)本身遞歸調(diào)用)的 子程序
定義函數(shù)
1.函數(shù)聲明
2.函數(shù)表達(dá)式
3.Function 構(gòu)造函數(shù)
4.箭頭函數(shù)
function fn(){} var fn = function(){} var fn = new Function(arg1, arg2, ... argN, funcBody) var fn = (param) => {}
arguments
1.arguments: 一個包含了傳遞給當(dāng)前執(zhí)行函數(shù)參數(shù)的類似于數(shù)組的對象
2.arguments.length: 傳給函數(shù)的參數(shù)的數(shù)目
3.arguments.caller: 調(diào)用當(dāng)前執(zhí)行函數(shù)的函數(shù)
4.arguments.callee: 當(dāng)前正在執(zhí)行的函數(shù)
function foo() { return arguments; } foo(1, 2, 3); // Arguments[3] // { "0": 1, "1": 2, "2": 3 }
rest
function foo(...args) { return args; } foo(1, 2, 3); // Array[3] // [1, 2, 3] function fn(a, b, ...args){ return args; } fn(1, 2, 3, 4, 5); // Array[3] // [3, 4, 5]
default
函數(shù)的參數(shù)可以在定義的時候約定默認(rèn)值
function fn (a = 2, b = 3) { return a + b; } fn(2, 3); // 5 fn(2); // 5 fn(); // 5
對象
JavaScript 中對象是可變 鍵控集合 (keyed collections)
定義對象
1.字面量
2.構(gòu)造函數(shù)
var obj = { prop: 'value', fn: function(){} }; var date = new Date();
構(gòu)造函數(shù)
構(gòu)造函數(shù)和普通函數(shù)并沒有區(qū)別,使用 new 關(guān)鍵字調(diào)用就是構(gòu)造函數(shù),使用構(gòu)造函數(shù)可以 實(shí)例化 一個對象
函數(shù)的返回值有兩種可能
1.顯式調(diào)用 return 返回 return 后表達(dá)式的求值
2.沒有調(diào)用 return 返回 undefined
function People(name, age) { this.name = name; this.age = age; } var people = new People('Byron', 26);
構(gòu)造函數(shù)返回值
1.沒有返回值
2.簡單數(shù)據(jù)類型
3.對象類型
前兩種情況構(gòu)造函數(shù)返回構(gòu)造對象的實(shí)例,實(shí)例化對象正是利用的這個特性
第三種構(gòu)造函數(shù)和普通函數(shù)表現(xiàn)一致,返回 return 后表達(dá)式的結(jié)果
prototype
1.每個函數(shù)都有一個 prototype 的對象屬性,對象內(nèi)有一個 constructor 屬性,默認(rèn)指向函數(shù)本身
2.每個對象都有一個 __proto__ 的屬性,屬相指向其父類型的 prototype
function Person(name) { this.name = name; } Person.prototype.print = function () { console.log(this.name); }; var p1 = new Person('Byron'); var p2 = new Person('Casper'); p1.print(); p2.print();
this 和作用域
作用域可以通俗的理解
1.我是誰
2.我有哪些馬仔
其中我是誰的回答就是 this
馬仔就是我的局部變量
this 場景
普通函數(shù)
1.嚴(yán)格模式:undefined
2.非嚴(yán)格模式: 全局對象
3.Node: global
4.瀏覽器: window
構(gòu)造函數(shù):對象的實(shí)例
對象方法:對象本身
call & apply
1.fn.call(context, arg1, arg2, …, argn)
2.fn.apply(context, args)
function isNumber(obj) { return Object.prototype.toString.call(obj) === '[object Number]'; }
Function.prototype.bind
bind 返回一個新函數(shù),函數(shù)的作用域?yàn)?bind 參數(shù)
function fn() { this.i = 0; setInterval(function () { console.log(this.i++); }.bind(this), 500) } fn(); () => {}
箭頭函數(shù)是 ES6 提供的新特性,是簡寫的 函數(shù)表達(dá)式,擁有詞法作用域和 this 值
function fn() { this.i = 0; setInterval(() => { console.log(this.i++); }, 500) } fn();
繼承
在 JavaScript 的場景,繼承有兩個目標(biāo),子類需要得到父類的:
1.對象的屬性
2.對象的方法
function inherits(child, parent) { var _proptotype = Object.create(parent.prototype); _proptotype.constructor = child.prototype.constructor; child.prototype = _proptotype; } function People(name, age) { this.name = name; this.age = age; } People.prototype.getName = function () { return this.name; } function English(name, age, language) { People.call(this, name, age); this.language = language; } inherits(English, People); English.prototype.introduce = function () { console.log('Hi, I am ' + this.getName()); console.log('I speak ' + this.language); } function Chinese(name, age, language) { People.call(this, name, age); this.language = language; } inherits(Chinese, People); Chinese.prototype.introduce = function () { console.log('你好,我是' + this.getName()); console.log('我說' + this.language); } var en = new English('Byron', 26, 'English'); var cn = new Chinese('色拉油', 27, '漢語'); en.introduce(); cn.introduce();
ES6 class 與繼承
"use strict"; class People{ constructor(name, age){ this.name = name; this.age = age; } getName(){ return this.name; } } class English extends People{ constructor(name, age, language){ super(name, age); this.language = language; } introduce(){ console.log('Hi, I am ' + this.getName()); console.log('I speak ' + this.language); } } let en = new English('Byron', 26, 'English'); en.introduce();
語法
label statement
loop:
for (var i = 0; i < 10; i++) { for (var j = 0; j < 5; j++) { console.log(j); if (j === 1) { break loop; } } } console.log(i);
語句與表達(dá)式
var x = { a:1 }; { a:1 } { a:1, b:2 }
立即執(zhí)行函數(shù)
( function() {}() ); ( function() {} )(); [ function() {}() ]; ~ function() {}(); ! function() {}(); + function() {}(); - function() {}(); delete function() {}(); typeof function() {}(); void function() {}(); new function() {}(); new function() {}; var f = function() {}(); 1, function() {}(); 1 ^ function() {}(); 1 > function() {}();
高階函數(shù)
高階函數(shù)是把函數(shù)當(dāng)做參數(shù)或者返回值是函數(shù)的函數(shù)
回調(diào)函數(shù)
[1, 2, 3, 4].forEach(function(item){ console.log(item); });
閉包
閉包由兩部分組成
1.函數(shù)
2.環(huán)境:函數(shù)創(chuàng)建時作用域內(nèi)的局部變量
function makeCounter(init) { var init = init || 0; return function(){ return ++init; } } var counter = makeCounter(10); console.log(counter()); console.log(counter());
典型錯誤
for (var i = 0; i < doms.length; i++) { doms.eq(i).on('click', function (ev) { console.log(i); }); } for (var i = 0; i < doms.length; i++) { (function (i) { doms.eq(i).on('click', function (ev) { console.log(i); }); })(i); }
惰性函數(shù)
function eventBinderGenerator() { if (window.addEventListener) { return function (element, type, handler) { element.addEventListener(type, hanlder, false); } } else { return function (element, type, handler) { element.attachEvent('on' + type, handler.bind(element, window.event)); } } } var addEvent = eventBinderGenerator();
柯里化
一種允許使用部分參數(shù)生成函數(shù)的方式
function isType(type) { return function(obj){ return Object.prototype.toString.call(obj) === '[object '+ type +']'; } } var isNumber = isType('Number'); console.log(isNumber(1)); console.log(isNumber('s')); var isArray = isType('Array'); console.log(isArray(1)); console.log(isArray([1, 2, 3])); function f(n) { return n * n; } function g(n) { return n * 2; } console.log(f(g(5))); function pipe(f, g) { return function () { return f.call(null, g.apply(null, arguments)); } } var fn = pipe(f, g); console.log(fn(5));
尾遞歸
1.尾調(diào)用是指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)
2.函數(shù)調(diào)用自身,稱為遞歸
3.如果尾調(diào)用自身,就稱為尾遞歸
遞歸很容易發(fā)生"棧溢出"錯誤(stack overflow)
function factorial(n) { if (n === 1) return 1; return n * factorial(n - 1); } factorial(5) // 120
但對于尾遞歸來說,由于只存在一個調(diào)用記錄,所以永遠(yuǎn)不會發(fā)生"棧溢出"錯誤
function factorial(n, total) { if (n === 1) return total; return factorial(n - 1, n * total); } factorial(5, 1) // 120
柯里化減少參數(shù)
function currying(fn, n) { return function (m) { return fn.call(this, m, n); }; } function tailFactorial(n, total) { if (n === 1) return total; return tailFactorial(n - 1, n * total); } const factorial = currying(tailFactorial, 1); factorial(5) // 120
反柯里化
Function.prototype.uncurry = function () { return this.call.bind(this); };
push 通用化
var push = Array.prototype.push.uncurry(); var arr = []; push(arr, 1); push(arr, 2); push(arr, 3); console.log(arr);
以上內(nèi)容是小編給大家介紹的JavaScript語言精粹經(jīng)典實(shí)例(整理篇)的全部敘述,希望對大家有所幫助!
相關(guān)文章
JavaScript中發(fā)布/訂閱模式的簡單實(shí)例
這篇文章主要介紹了JavaScript中發(fā)布/訂閱模式的簡單實(shí)例,本文給出了一個簡單易懂的實(shí)現(xiàn)代碼,比較容易理解,需要的朋友可以參考下2014-11-11Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-10-10javascript驗(yàn)證手機(jī)號和實(shí)現(xiàn)星號(*)代替實(shí)例
在我們?nèi)粘i_發(fā)中經(jīng)常要驗(yàn)證客戶輸入的手機(jī)號是否正確,有的時候還需要將中間的四位或者前幾位用星號(*)代替,那該如何實(shí)現(xiàn)呢?下面跟著小編一起來看看。2016-08-08詳解ES6之a(chǎn)sync+await 同步/異步方案
這篇文章主要介紹了詳解ES6之a(chǎn)sync+await 同步/異步方案,本文以最簡明的方式來疏通 async + await,有興趣的可以了解下2017-09-09three.js創(chuàng)造時空裂縫特效實(shí)現(xiàn)示例
這篇文章主要為大家介紹了three.js創(chuàng)造時空裂縫特效實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11