.基本類型和引用類型

基本類型：Number, String, Null, Undefined, Boolean, Symbol(ES6數(shù)據(jù)類型)

引用類型：Object、Array弓千、RegExp对雪、Date扯键、Function、單體內(nèi)置對象(Global、Math)

區(qū)別：基本類型，操作和保存在變量的實際的值（保存在棧區(qū)）棘催；引用類型，值指向內(nèi)存空間的引用耳标，就是地址醇坝，所指向的內(nèi)存中保存著變量所表示的一個值或一組值，所以操作的是對象的引用（引用存放在棧區(qū)次坡，實際對象保存在堆區(qū)）呼猪。

1.1 類型檢測

使用typeof進(jìn)行基本類型檢測，使用instanceof檢測對象還是數(shù)組

類型結(jié)果

Undefined"undefined"

Null"object"

Boolean"boolean"

Number"number"

String"string"

Symbol（ECMAScript 6 新增）"symbol"

函數(shù)對象"function"

任何其他對象"object"

檢測數(shù)組和對象：（Array其實是Object的子類）vara = [];console.log(ainstanceofArray);// trueconsole.log(ainstanceofObject);// truevara = {};console.log(ainstanceofArray);// falseconsole.log(ainstanceofObject);// true

1.2 String操作

String <=> Number:

字符串轉(zhuǎn)數(shù)字：parseInt(str, 進(jìn)制)// 默認(rèn)十進(jìn)制, 轉(zhuǎn)化為整數(shù)砸琅，小數(shù)點(diǎn)后默認(rèn)不保留parseFloat(str)// 轉(zhuǎn)化為浮點(diǎn)數(shù)+str// 屌屌的轉(zhuǎn)化方法, 但字符串包含非數(shù)字會報錯數(shù)字轉(zhuǎn)字符串：letstr1 = num.toString();letstr2 =String(num);letstr3 = num +'';

String <=> Array:

字符串轉(zhuǎn)數(shù)組letarr = str.split(',')// 一般是空格或者逗號數(shù)組轉(zhuǎn)字符串letstr = arr.join('');

模板字符串

`Hello,${變量}`

1.3 常用正則

去逗號letnewStr = str.replace(/,/g,'');去空格(一般輸入框輸入都要做這個)letnewStr = str.replace(/(^\s*)|(\s*$)/g,'');// 去除左右空格letnewStr = str.replace(/\s+/g,"");// 去除所有空格用戶名letuserPattern =/^[a-zA-Z0-9_-]{4,16}$/;// 4到16位（字母,數(shù)字,下劃線,減號）userPattern.test(str);電話號碼letmPattern =/^1[34578]\d{9}$/;附：密碼/身份證號/E-mail/URL就不上了宋距，太長了背了沒意義，用的時候查就好了

1.4 Array操作

在阿里騰訊頭條的筆試機(jī)試中症脂，對數(shù)組的操作可以說是前端算法的核心谚赎，數(shù)組操作的基本方法全是必背的重中之重淫僻。

1.4.1 Array.from()

將偽數(shù)組對象和可迭代對象[見附錄]轉(zhuǎn)化為數(shù)組：

letarr =Array.from(str/newSet()/newmap());

轉(zhuǎn)化數(shù)組后對每項進(jìn)行操作

letarr =Array.from('123', item =>parseInt(item) +1);// 2, 3, 4

去重(可以說這是最精彩的地方了)

Array.from(newSet(arr));

1.4.2 拷貝數(shù)組

使用以下方法能復(fù)制數(shù)組保存在堆內(nèi)存中的值，但不能深拷貝數(shù)組(數(shù)組中的數(shù)組或者對象依舊只是復(fù)制了引用沒有復(fù)制到其在堆內(nèi)存中的值)沸版。[數(shù)組和對象的深淺拷貝以及for循環(huán)遞歸實現(xiàn)方式本文不涉及]

letarr2 = [...arr1];letarr2 = arr1.slice();letarr2 = arr1.concat([]);// 此方法不常用

深拷貝(對象也是如此)

letarr2 =JSON.parse(JSON.stringify(arr1));

1.4.3 找出最大最小值

Math.max.apply(null, arr);Math.min.apply(null, arr);// ES6的寫法Math.max(...arr);

1.4.4 數(shù)組排序

sort()

1.數(shù)組排序functioncompare(a, b){returna-b; } arr.sort(compare);2.數(shù)組對象排序(開發(fā)中常用)functioncompare(property){return(obj1, obj2) =>{returnobj1[property] - obj2[property];? ? } }letstudents = [{name:"xx",age:20}, {name:"hh",age:19}]; students.sort(compare('age'));

快排

1.4.5 其他方法

push(item)// 末尾添加pop()// 刪除末尾shift()// 刪除開頭unshift()// 開頭添加sort()// 排序reverse()// 反轉(zhuǎn)slice(start, end)// 截斷拷貝, 接收起始和結(jié)束位置兩參數(shù)并返回相應(yīng)的數(shù)組嘁傀，不影響原數(shù)組splice(index, num)// 切片，取出從index位置開始的num個值视粮，原數(shù)組被截取splice(index,0, sth)// 插入sthsplice(index,1, sth)// 替換為sth▲? forEach(item, index,array)// 對每一項執(zhí)行某些操作▲? filter(item, index,array)// 返回滿足條件(true)的項組成的數(shù)組▲map(item, index,array)// 返回對每一項執(zhí)行某些操作組成的數(shù)組every(item, index,array)// 如果該函數(shù)對每一項都返回true，則返回truesome(item, index,array)// 如果該函數(shù)對某一項返回true橙凳，則返回truereduce()// 從頭到尾逐個遍歷蕾殴，迭代數(shù)組中的所有項includes(sth, index);// 檢測數(shù)組中是否含有sth，index代表開始查找的位置岛啸，返回布爾值

另：二分查找

1.4.5 對象數(shù)組根據(jù)對象某key值去重（日常工作常用）

letarr = [{showId:'C',age:'11'}, {showId:'A',age:'11'},{showId:'B',age:'11'}, {showId:'B',age:'11'},{showId:'B',age:'12'},{showId:'B',age:'13'}];// 根據(jù)showId去重到新數(shù)組newArrconstnewArr = [];arr.forEach(item=>{// 過濾钓觉，如果有重復(fù)項就添加到過濾數(shù)組，那么長度就不為0就不會推入新數(shù)組坚踩。// 如果沒有重復(fù)項長度就為0就推入新數(shù)組荡灾。newArr.filter(m=>m.showId === item.showId).length ===0&&? newArr.push(item);});

1.5 Object操作

1.5.1 創(chuàng)建

創(chuàng)建方式：工廠模式、構(gòu)造函數(shù)模式瞬铸、原型模式批幌、動態(tài)原型模式、寄生構(gòu)造函數(shù)模式嗓节、穩(wěn)妥構(gòu)造函數(shù)模式荧缘。

工廠模式

functioncreateObj(key){constobj =newObject();? ? obj.key = key;? ? obj.sayKey =function(){ 方法 };returnobj;}// 使用：const xuqingfeng = createObj('xuqingfeng');

構(gòu)造函數(shù)(對象屬性最好用構(gòu)造函數(shù)) + 原型(對象方法最好用原型)，這樣的話每個實例都會有自己的一份實例屬性的副本拦宣，同時又共享著對方法的引用截粗，最大限度地節(jié)省了內(nèi)存：

// 構(gòu)造函數(shù)模式用于定義實例屬性functionPerson(name){this.name = name;}// 原型模式用于定義方法和共享的屬性Person.prototype = {/* 默認(rèn)情況下，所有原型對象都會自動獲得一個constructor屬性鸵隧，

? ? 這個屬性是一個指向prototype屬性所在函數(shù)的指針,

? ? 這里的Person.prototype.constructor指向Person */constructor: Person,? ? sayName : function() { 方法 }}

ES6的簡寫(簡直不要太好用, 三大框架很多寫法基于此)：

屬性簡寫：letkeyVal ='xuqingfeng';constobj = {keyVal};// obj: { keyVal: 'xuqingfeng' }方法簡寫：constobj = {? ? method() {}};獲取對象屬性：const{ keyVal } = obj;// React的const { data } = this.props; 就是這么個原理绸罗，前提是對象中也有對應(yīng)屬性(key)

1.5.2 繼承

繼承方式：原型鏈、借用構(gòu)造函數(shù)豆瘫、組合繼承珊蟀、原型式繼承、寄生式繼承靡羡、寄生組合式繼承系洛。

組合繼承

這種方式既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用，又能夠保證每個實例都有它自己的屬性略步。

functionA_Obj(name){this.name = name;}A_Obj.prototype.sayName =function(){ A_Obj的方法 };functionB_Obj(name, age){? ? A_Obj.call(this, name);// 繼承屬性this.age = age;}B_Obj.prototype =newA_Obj();// 繼承A_Obj的所有方法B_Obj.prototype.constructor = B_Obj;// 改變指向非常關(guān)鍵B_Obj.prototype.sayAge =function(){ B_Obj的方法 };

object.create()實現(xiàn)對象繼承- 特別地提及下這個方法描扯，它可以直接使用創(chuàng)建一個新對象

// 實現(xiàn)繼承 - 方法letextend =(Child, Parent) =>{? ? Child.prototype =Object.create(Parent.prototype);// 拷貝Parent原型對象Child.prototype.constructor = Child;// 將Child構(gòu)造函數(shù)賦值給Child的原型對象}// 實例constPar =function(){this.name ='xuqingfeng'; }Par.prototype.getName =function(){returnthis.name; }// 繼承constCld =function(){ Par.call(this); }extend(Cld, Par);// 使用lettestChild =newCld();console.log(testChild.getName())

1.5.3 拷貝

淺拷貝：

constcopyObj =Object.assign({}, obj);constObj2 = {...Obj1};

淺拷貝并修改key的value或添加key與value:const Obj2 = {...Obj1, ['key']: 'newOrCover'},示例如下

constfirObj = {a:'1',s: {ss:'sss'} };constsecObj = { ...firObj, ['b']:'2'}secObj.a ='777';firObj.a ='666';secObj.s.ss ='secObj-s';firObj.s.ss ='firObj-s';console.log(firObj, secObj);// { a: '666', s: { ss: 'firObj-s' } } { a: '777', s: { ss: 'firObj-s' }, b: '2' }

并集-合并兩個對象/數(shù)組，后者覆蓋前者(深度覆蓋)趟薄，最終形成并集：const Obj3 = Object.assign({}, Obj1, Obj2);绽诚，示例如下

constfirObj = {a:'1',b:'b',s: {ss:'fir-s'} };constsecObj = {a:'2',c:'c',s: {ss:'sec-s'} }constnewObj =Object.assign({}, firObj, secObj);console.log(newObj);// { a: '2', b: 'b', s: { ss: 'sec-s' }, c: 'c' }constfirArr = [1,2,3,'a','b'];constsecArr = [1,3,5,7];constnewArr =Object.assign([], firArr, secArr);console.log(newArr);// [ 1, 3, 5, 7, 'b' ]

深拷貝[ for循環(huán)遞歸深拷貝見上面數(shù)組，Object.assign合并對象和深拷貝移步MDN]：

letobj2 =JSON.parse(JSON.stringify(obj1));

1.5.4 其他方法

Object.freeze()// 凍結(jié)對象：其他代碼不能刪除或更改任何屬性。Object.keys()// 返回一個包含所有給定對象自身可枚舉屬性名稱的數(shù)組恩够。Object.values()// 返回給定對象自身可枚舉值的數(shù)組卒落。Object.entries()// 返回給定對象自身可枚舉屬性的[key, value]數(shù)組Object.defineProperty()// vue數(shù)據(jù)雙向綁定的核心方法，建議上 MDN 一觀

1.6 Function操作

1.6.1 參數(shù)轉(zhuǎn)化為數(shù)組(不知參數(shù)個數(shù))

數(shù)組原型slice方法

functionfc(){Array.prototype.slice.call(arguments) ;// 這個方法可以將只要具有l(wèi)ength屬性的對象轉(zhuǎn)成數(shù)組}

▲ rest 參數(shù)

functionfc(...arr){console.log(arr); }

參數(shù)cancat為數(shù)組

functionfc(){return[].concat.apply([],arguments); }

1.6.2 檢測函數(shù)參數(shù)是否含有某個值(sth)

[].includes.call(arguments,sth)

1.6.3 函數(shù)設(shè)置可改的默認(rèn)參數(shù)

functionfunc1(a, b='123123',c={id:1}){console.log(a,b,c)}func1('徐清風(fēng)','xuqingfeng',44)// 徐清風(fēng), xuqingfeng, 44

1.7Math與Date

Math方法：

Math.ceil()// 執(zhí)行向上舍入Math.floor()// 執(zhí)行向下舍入Math.round()// 執(zhí)行標(biāo)準(zhǔn)舍入▲Math.random()// 返回大于等于0小于1的隨機(jī)數(shù)

獲取當(dāng)前時間：

letnow =newDate();console.log(now.toLocaleString());// 2018-8-23 17:48:47console.log([now.getFullYear(), now.getMonth()+1, now.getDate()].join('-'));// 2018-8-23

2.JS編程基本操作

2.1 三元運(yùn)算 - 用起來超刺激

公式：條件1 ? 真結(jié)果1 : ( 條件1.1 ? 真結(jié)果1.1 : (條件1.1.1 ? 真結(jié)果1.1.1:假結(jié)果1.1.1)), 一個常用示例：

node.style.display = (node.style.display ==="block"?"none":"block");

2.2 在做JS判斷時的true與false(if判斷蜂桶、與非判斷儡毕、三元運(yùn)算判斷等)

值為false：false、null扑媚、undefined腰湾、''(空字符串，空格不代表空)疆股、0费坊、NaN

值為true：true、對象旬痹、字符串(包括空格)附井、任意非0數(shù)值(包括Infinity)

2.3 與或非運(yùn)算

&& ：如果第一個值為 true，則 && 后面的值將顯示在輸出中两残，否則值為第一個值永毅。

leta =false&&123;// falseletb =' '&&123;// 123, 注意這里是空格不是空

|| ：如果第一個值為 false，則? ||? 后面的值將顯示在輸出中磕昼，否則值為第一個值卷雕。

let a =false||123;//123let b =' '||123;//' '

附錄：

偽數(shù)組對象和可迭代對象：

偽數(shù)組對象（擁有一個length屬性和若干索引屬性的任意對象）

可迭代對象（可以獲取對象中的元素,如Map和Set等）

福利-今年春秋招阿里騰訊頭條機(jī)試(遠(yuǎn)程視頻直接擼代碼)題：

1.正則電話號碼2.兩個超過JS數(shù)值范圍的數(shù)字相加3.一片英文文章重復(fù)出現(xiàn)次數(shù)最多的單詞及其出現(xiàn)次數(shù)4.創(chuàng)建一個 Person 類，其包含公有屬性 name 和私有屬性 age 以及公有方法 setAge票从；? ? 創(chuàng)建一個 Teacher 類漫雕，使其繼承 Person ，并包含私有屬性 studentCount 和私有方法 setStudentCount5.兼容的事件監(jiān)聽方法6.快排7.拖拽一個方塊隨機(jī)移動8.事件觀察者9.promise按序執(zhí)行三個函數(shù)10.封裝一個flat方法峰鄙，將多維數(shù)組扁平化為一維數(shù)組11.實現(xiàn)一個簡易的JQ選擇器功能（要求能夠獲取標(biāo)簽浸间、類、Id）12.實現(xiàn)簡易的虛擬DOM（意味著用對象構(gòu)造DOM）吟榴，然后生成DOM結(jié)構(gòu)魁蒜，? ? 只要求屬性值（比如class、id等屬性能夠正常獲取和調(diào)用）吩翻，? ? 不要求節(jié)點(diǎn)增刪查改（這涉及到diff算法）兜看。13.對象數(shù)組根據(jù)某個屬性去重【這個上面有提到】

作者：徐丶清風(fēng)

鏈接：http://www.reibang.com/p/ca6110ebabb9

來源：簡書

簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處狭瞎。