JavaScript語言精粹經(jīng)典實(shí)例(整理篇)
數(shù)據(jù)類型
JavaScript 是 弱類型 語言，但并不是沒有類型，JavaScript可以識(shí)別下面 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ù)類型，操作符返回一個(gè)字符串，但并非返回的所有結(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)鍵字可以聲明不可變變量，同樣為塊作用域。對(duì)不可變的理解在對(duì)象上的理解需要注意
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中可以引用稍后聲明的變量，而不會(huì)引發(fā)異，這一概念稱為變量聲明提升(hoisting)
console.log(a); // undefined var a = 2;
等同于
var a; console.log(a); a = 2;
函數(shù)
一個(gè)函數(shù)就是一個(gè)可以被外部代碼調(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: 一個(gè)包含了傳遞給當(dāng)前執(zhí)行函數(shù)參數(shù)的類似于數(shù)組的對(duì)象
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ù)可以在定義的時(shí)候約定默認(rèn)值
function fn (a = 2, b = 3) {
return a + b;
}
fn(2, 3); // 5
fn(2); // 5
fn(); // 5
對(duì)象
JavaScript 中對(duì)象是可變 鍵控集合 (keyed collections)
定義對(duì)象
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í)例化 一個(gè)對(duì)象
函數(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.簡(jiǎn)單數(shù)據(jù)類型
3.對(duì)象類型
前兩種情況構(gòu)造函數(shù)返回構(gòu)造對(duì)象的實(shí)例，實(shí)例化對(duì)象正是利用的這個(gè)特性
第三種構(gòu)造函數(shù)和普通函數(shù)表現(xiàn)一致，返回 return 后表達(dá)式的結(jié)果
prototype
1.每個(gè)函數(shù)都有一個(gè) prototype 的對(duì)象屬性，對(duì)象內(nèi)有一個(gè) constructor 屬性，默認(rèn)指向函數(shù)本身
2.每個(gè)對(duì)象都有一個(gè) __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 場(chǎng)景
普通函數(shù)
1.嚴(yán)格模式：undefined
2.非嚴(yán)格模式: 全局對(duì)象
3.Node: global
4.瀏覽器: window
構(gòu)造函數(shù)：對(duì)象的實(shí)例
對(duì)象方法：對(duì)象本身
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 返回一個(gè)新函數(shù)，函數(shù)的作用域?yàn)?bind 參數(shù)
function fn() {
this.i = 0;
setInterval(function () {
console.log(this.i++);
}.bind(this), 500)
}
fn();
() => {}
箭頭函數(shù)是 ES6 提供的新特性，是簡(jiǎn)寫的 函數(shù)表達(dá)式，擁有詞法作用域和 this 值
function fn() {
this.i = 0;
setInterval(() => {
console.log(this.i++);
}, 500)
}
fn();
繼承
在 JavaScript 的場(chǎng)景，繼承有兩個(gè)目標(biāo)，子類需要得到父類的：
1.對(duì)象的屬性
2.對(duì)象的方法
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)建時(shí)作用域內(nèi)的局部變量
function makeCounter(init) {
var init = init || 0;
return function(){
return ++init;
}
}
var counter = makeCounter(10);
console.log(counter());
console.log(counter());
典型錯(cuò)誤
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)用是指某個(gè)函數(shù)的最后一步是調(diào)用另一個(gè)函數(shù)
2.函數(shù)調(diào)用自身，稱為遞歸
3.如果尾調(diào)用自身，就稱為尾遞歸
遞歸很容易發(fā)生"棧溢出"錯(cuò)誤（stack overflow）
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
但對(duì)于尾遞歸來說，由于只存在一個(gè)調(diào)用記錄，所以永遠(yuǎn)不會(huì)發(fā)生"棧溢出"錯(cuò)誤
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í)例(整理篇)的全部敘述，希望對(duì)大家有所幫助！
相關(guān)文章
這篇文章主要介紹了怎樣用JS模擬實(shí)現(xiàn)枚舉，對(duì)枚舉感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04
很棒的JavaScript選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了js中的如何定位固定層的位置,需要的朋友可以參考下2014-06-06
js實(shí)現(xiàn)HTML中Select二級(jí)聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇js實(shí)現(xiàn)HTML中Select二級(jí)聯(lián)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧
這篇文章主要為大家介紹了JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JavaScript實(shí)現(xiàn)form表單的多文件上傳
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)form表單的多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2013-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)隊(duì)列與堆棧的方法,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)隊(duì)列與堆棧的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
下面小編就為大家?guī)硪黄獪\談js中字符和數(shù)組一些基本算法題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
js獲取多個(gè)tagname的節(jié)點(diǎn)數(shù)組
寫了個(gè)獲取多個(gè)tagname節(jié)點(diǎn)集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按節(jié)點(diǎn)在原有文檔流中的順序返回的2013-09-09