Object Oriented and Functional Programming

Construct JavaScript Objects with Functions

構(gòu)造函數(shù)通常使用大寫字母開頭华坦,以便把自己和其他普通函數(shù)區(qū)別開。

構(gòu)造函數(shù)

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};

構(gòu)造函數(shù)中,this 指向被此 構(gòu)造函數(shù) 創(chuàng)建出來的 對象 桦卒。所以诗箍,當我們在構(gòu)造函數(shù)中寫:

  this.wheels = 4;

這時,它創(chuàng)建出來的新對象將帶有wheels屬性脖苏,并且賦值為 4.

構(gòu)造函數(shù)描述了它所創(chuàng)建出來的對象程拭。


Make Instances of Objects with a Constructor Function

使用new 關(guān)鍵字 來調(diào)用構(gòu)造函數(shù)時,如下:

var myCar = new Car();

myCarCar的一個** 實例**(instance)棍潘,它被 構(gòu)造函數(shù) 描述成下面的樣子:

{
  wheels: 4,
  engines: 1,
  seats: 1
}

記资研:要使用 new 關(guān)鍵字 去調(diào)用構(gòu)造函數(shù)。因為只有這樣亦歉,Javascript才知道這是要去構(gòu)造一個新 對象 恤浪,并且把構(gòu)造函數(shù)中的 this 指向這個新對象。

現(xiàn)在肴楷,當 myCar (即 Car 的一個 實例 )創(chuàng)建后水由,他可以像普通對象一樣被使用,包括創(chuàng)建赛蔫、訪問绷杜、修改它的屬性等,就像我們使用其他對象一樣濒募。如下:

myCar.turboType = "twin";

我們的myCar變量現(xiàn)在有了一個 turboType屬性了鞭盟,且值為 "twin" 。

在編輯器中瑰剃,使用 Car 這個構(gòu)造函數(shù)去創(chuàng)建一個新的 實例 齿诉,并且把這個實例賦值給 myCar 。

然后給 myCar 創(chuàng)建一個 nickname 屬性,且屬性值為一個字符串.


Make Unique Objects by Passing Parameters to our Constructor

構(gòu)造函數(shù)加入?yún)?shù)后粤剧,就可以創(chuàng)建不同的對象歇竟。像下面這樣:

var Car = function(wheels, seats, engines) {
  this.wheels = wheels;
  this.seats = seats;
  this.engines = engines;
};

現(xiàn)在,我們可以在調(diào)用構(gòu)造函數(shù)時傳入一組 參數(shù)了抵恋。

var myCar = new Car(6, 3, 1);

創(chuàng)建出下面的對象:

{
  wheels: 6,
  seats: 3,
  engines: 1
}

Make Object Properties Private

對象擁有自己的特征焕议,稱為 屬性,對象還有自己的函數(shù)弧关,稱為方法 盅安。

在前面的課程(構(gòu)造函數(shù))中,我們使用了this 指向當前(將要被創(chuàng)建的)對象中的 公有屬性世囊。

我們也可以創(chuàng)建 私有屬性私有方法 别瞭,它們兩個在對象外部是不可訪問的。

為了完成這個任務(wù)株憾,我們在 構(gòu)造函數(shù) 中蝙寨,使用我們熟悉的 var關(guān)鍵字去創(chuàng)建變量,來替代我們使用 this創(chuàng)建 屬性 嗤瞎。

比如墙歪,我們想記錄我們的car行駛的 speed,但是我們希望外面的代碼對speed的修改只能是加速或減速(而不是變成字符串贝奇、直接賦值成某個速度等其他操作)虹菲,那么如何達到這類操作的目的呢?

編輯器中的 構(gòu)造函數(shù)展示了如何實現(xiàn)這種控制模式:

var Car = function() {
  // this is a private variable
  var speed = 10;

  // these are public methods
  this.accelerate = function(change) {
    speed += change;
  };

  this.decelerate = function() {
    speed -= 5;
  };

  this.getSpeed = function() {
    return speed;
  };
};

Iterate over Arrays with map

map方法可以方便的迭代數(shù)組弃秆,例子:

var timesFour = oldArray.map(function(val){
  return val * 4;
});

map方法會迭代數(shù)組中的每一個元素,并根據(jù)回調(diào)函數(shù)來處理每一個元素髓帽,最后返回一個新數(shù)組菠赚。注意,這個方法不會改變原始數(shù)組郑藏。

在我們的例子中衡查,回調(diào)函數(shù)只有一個參數(shù),即數(shù)組中元素的值 (val 參數(shù)) 必盖,但其實拌牲,你的回調(diào)函數(shù)也可以支持多個參數(shù),譬如:元素的索引index歌粥、原始數(shù)組arr塌忽。


Condense arrays with reduce

數(shù)組方法 reduce 用來迭代一個數(shù)組,并且把它累積到一個值中失驶。

使用 reduce方法時土居,你要傳入一個回調(diào)函數(shù),這個回調(diào)函數(shù)的參數(shù)是一個 累加器(比如例子中的 previousVal) 和當前值 (currentVal)。

reduce 方法有一個可選的第二參數(shù)擦耀,它可以被用來設(shè)置累加器的初始值棉圈。如果沒有在這定義初始值,那么初始值將變成數(shù)組中的第一項眷蜓,而currentVal將從數(shù)組的第二項開始分瘾。

下面的例子使用了 reduce 來讓數(shù)組中的所有值相減:

var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);

Filter Arrays with filter

filter方法用來迭代一個數(shù)組,并且按給出的條件過濾出符合的元素吁系。

filter方法傳入一個回調(diào)函數(shù)德召,這個回調(diào)函數(shù)會攜帶一個參數(shù),參數(shù)為當前迭代的項(我們叫它 val )垮抗。

回調(diào)函數(shù)返回true的項會保留在數(shù)組中氏捞,返回 false 的項會被過濾出數(shù)組。

下面的代碼示例展示了使用 filter 來移除數(shù)組中值等于5的項:

注意: 我們忽略了第二參數(shù)和第三參數(shù)冒版,因為例子中我們只需要第一參數(shù)就夠了液茎。

array = array.filter(function(val) {
  return val !== 5;
});

Sort Arrays with sort

使用sort方法,你可以很容易的按字母順序或數(shù)字順序?qū)?shù)組中的元素進行排序辞嗡。

與我們之前用的數(shù)組方法僅僅返回一個新數(shù)組不同捆等,sort方法將改變原數(shù)組,返回被排序后的數(shù)組续室。

sort 可以把比較函數(shù)作為參數(shù)傳入栋烤。比較函數(shù)有返回值,當 a小于b挺狰,返回一個負數(shù)明郭;當a大于b ,返回一個正數(shù)丰泊;相等時返回0薯定。

如果沒有傳入比較函數(shù),它將把值全部轉(zhuǎn)成字符串瞳购,并按照字母順序進行排序话侄。

下面的例子將展示sort的使用,傳入的比較函數(shù)把元素按照從小到大的順序進行排列:

var array = [1, 12, 21, 2];
array.sort(function(a, b) {
  return a - b;
});

Reverse Arrays with reverse

你可以使用 reverse方法來翻轉(zhuǎn)數(shù)組学赛。

var myArray = [1, 2, 3];
myArray.reverse();

結(jié)果myArray 變成了 [3, 2, 1]


Concatenate Arrays with concat

concat方法可以用來把兩個數(shù)組的內(nèi)容合并到一個數(shù)組中年堆。

concat方法的參數(shù)應(yīng)該是一個數(shù)組。參數(shù)中的數(shù)組會拼接在原數(shù)組的后面盏浇,并作為一個新數(shù)組返回变丧。

下面是一個拼接數(shù)組的例子,用concatotherArray拼接在 oldArray的后面:

newArray = oldArray.concat(otherArray);

Split Strings with split

你可以使用split 方法按指定分隔符將字符串分割為數(shù)組绢掰。

你要給 split方法傳遞一個參數(shù)锄贷,這個參數(shù)將會作為一個分隔符译蒂。

下面的例子展示了split方法的使用,按照 s字母進行分割:

var array = string.split('s');

Join Strings with join

我們還可以使用join方法來把數(shù)組轉(zhuǎn)換成字符串谊却,里面的每一個元素可以用你指定的連接符來連接起來柔昼,這個連接符就是你要傳入的參數(shù)。

下面展示了使用join來將數(shù)組中的每一項放入字符串炎辨,并用 and進行連接:

var veggies = ["Celery", "Radish", "Carrot", "Potato"];
var salad = veggies.join(" and ");
console.log(salad); // "Celery and Radish and Carrot and Potato" 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末捕透,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子碴萧,更是在濱河造成了極大的恐慌乙嘀,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件破喻,死亡現(xiàn)場離奇詭異虎谢,居然都是意外死亡,警方通過查閱死者的電腦和手機曹质,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門婴噩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人羽德,你說我怎么就攤上這事几莽。” “怎么了宅静?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵章蚣,是天一觀的道長。 經(jīng)常有香客問我姨夹,道長纤垂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任磷账,我火速辦了婚禮峭沦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘够颠。我一直安慰自己熙侍,他們只是感情好榄鉴,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布履磨。 她就那樣靜靜地躺著,像睡著了一般庆尘。 火紅的嫁衣襯著肌膚如雪剃诅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天驶忌,我揣著相機與錄音矛辕,去河邊找鬼笑跛。 笑死,一個胖子當著我的面吹牛聊品,可吹牛的內(nèi)容都是我干的飞蹂。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼翻屈,長吁一口氣:“原來是場噩夢啊……” “哼陈哑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起伸眶,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤惊窖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后厘贼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體界酒,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年嘴秸,在試婚紗的時候發(fā)現(xiàn)自己被綠了毁欣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡赁遗,死狀恐怖署辉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情岩四,我是刑警寧澤哭尝,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站剖煌,受9級特大地震影響材鹦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜耕姊,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一桶唐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧茉兰,春花似錦尤泽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至莫鸭,卻和暖如春闹丐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背被因。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工卿拴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留衫仑,地道東北人。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓堕花,卻偏偏與公主長得像文狱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缘挽,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容

  • FreeCodeCamp - Object Oriented and Functional Programming...
    付林恒閱讀 2,938評論 0 2
  • 【1】可以使用構(gòu)造函數(shù)來創(chuàng)建對象如贷。構(gòu)造函數(shù) 通常使用大寫字母開頭,以便把自己和其他普通函數(shù)區(qū)別開到踏。下面便是一個 構(gòu)...
    Marks閱讀 776評論 0 0
  • 選取事件:陳赫前妻外籍新歡 1杠袱、內(nèi)容 滿足受眾好奇心:明星人物還是前妻,有著名人效應(yīng)光環(huán)窝稿,居然還是外籍友人楣富,涉奇心...
    張文武貝閱讀 297評論 0 0
  • 世界上妹子漂亮的好多,漂亮的男的卻……早晚會變成女的伴榔?纹蝴?至少從身邊來講,當然有個人環(huán)境因素踪少。
    善水嗯君閱讀 165評論 0 0
  • 俞敏洪在創(chuàng)業(yè)之處援奢,也是沒有什么太多的創(chuàng)業(yè)經(jīng)驗的兼犯,但是他在不斷的完成小目標的時候,這個經(jīng)驗就慢慢的積累起來了集漾,其實創(chuàng)...
    元氏銷法閱讀 919評論 0 1