?01-基本類型和引用類型

基本類型：Number, String, Null, Undefined, Boolean, Symbol(ES6數(shù)據(jù)類型)引用類型：Object、Array、RegExp、Date、Function、單體內(nèi)置對(duì)象(Global、Math)
區(qū)別：基本類型，操作和保存在變量的實(shí)際的值（保存在棧區(qū)）；引用類型，值指向內(nèi)存空間的引用，就是地址，所指向的內(nèi)存中保存著變量所表示的一個(gè)值或一組值，所以操作的是對(duì)象的引用（引用存放在棧區(qū)，實(shí)際對(duì)象保存在堆區(qū)）。

1.1 類型檢測(cè)

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

檢測(cè)數(shù)組和對(duì)象：（Array其實(shí)是Object 的子類）
var a = [];
console.log(a instanceof Array); // true
console.log(a instanceof Object); // true

var a = {};
console.log(a instanceof Array); // false
console.log(a instanceof Object); // 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ù)字會(huì)報(bào)錯(cuò)

數(shù)字轉(zhuǎn)字符串：
let str1 = num.toString();
let str2 = String(num);
let str3 = num + ?'';

String <=> Array:


字符串轉(zhuǎn)數(shù)組
let arr = str.split(',') // 一般是空格或者逗號(hào)

數(shù)組轉(zhuǎn)字符串
let str = arr.join('');

模板字符串

`Hello, ${變量}`

1.3 常用正則

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

1.4 Array操作

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

1.4.1 Array.from()

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

let arr = Array.from(str/new Set()/new map());

2.轉(zhuǎn)化數(shù)組后對(duì)每項(xiàng)進(jìn)行操作

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

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

Array.from(new Set(arr));

1.4.2 拷貝數(shù)組

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

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

深拷貝(對(duì)象也是如此)

let arr2 = 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ù)組排序

1.sort()

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

2.快排

1.4.5 其他方法

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

另：二分查找

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

let arr = [{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ù)組newArr
const newArr = [];
arr.forEach(item => {
?// 過濾，如果有重復(fù)項(xiàng)就添加到過濾數(shù)組，那么長(zhǎng)度就不為0就不會(huì)推入新數(shù)組。
?// 如果沒有重復(fù)項(xiàng)長(zhǎng)度就為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ù)模式、原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式。

工廠模式

function createObj(key) {
? ?const obj = new Object();
? ?obj.key = key;
? ?obj.sayKey = function(){ 方法 };
? ?return obj;
}
// 使用：const xuqingfeng = createObj('xuqingfeng');

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

// 構(gòu)造函數(shù)模式用于定義實(shí)例屬性
function Person(name) {
? ?this.name = name;
}
// 原型模式用于定義方法和共享的屬性
Person.prototype = {
? ?/* 默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor屬性，
? ?這個(gè)屬性是一個(gè)指向prototype屬性所在函數(shù)的指針,
? ?這里的Person.prototype.constructor指向Person */
? ?constructor : Person,
? ?sayName : function() { 方法 }
}

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

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

1.5.2 繼承

繼承方式：原型鏈、借用構(gòu)造函數(shù)、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承。

組合繼承

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

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

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

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

1.5.3 拷貝

淺拷貝：

const copyObj = Object.assign({}, obj);
const Obj2 = {...Obj1};

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

const firObj = { a: '1', s: { ss: 'sss' } };
const secObj = { ...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' }

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

const firObj = { a: '1', b: 'b', s: { ss: 'fir-s' } };
const secObj = { a: '2', c: 'c', s: { ss: 'sec-s' } }
const newObj = Object.assign({}, firObj, secObj);
console.log(newObj); // { a: '2', b: 'b', s: { ss: 'sec-s' }, c: 'c' }
const firArr = [1, 2, 3, 'a', 'b'];
const secArr = [1, 3, 5, 7];
const newArr = Object.assign([], firArr, secArr);
console.log(newArr); // [ 1, 3, 5, 7, 'b' ]深拷貝[ for循環(huán)遞歸深拷貝見上面數(shù)組，Object.assign合并對(duì)象和深拷貝移步MDN]：let obj2 = JSON.parse(JSON.stringify(obj1));

1.5.4 其他方法

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

1.6 Function操作

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

數(shù)組原型slice方法

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

?rest 參數(shù)

function fc(...arr) { console.log(arr); }

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

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

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

[].includes.call(arguments, sth)

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

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

1.7?Math?與?Date

Math方法：

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

獲取當(dāng)前時(shí)間

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

?02-

JS編程基本操作

∨

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

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

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

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

值為false：false、null、undefined、''(空字符串，空格不代表空)、0、NaN值為true：true、對(duì)象、字符串(包括空格)、任意非0數(shù)值(包括Infinity)

2.3 與或非運(yùn)算

&& ：如果第一個(gè)值為 true，則 && 后面的值將顯示在輸出中，否則值為第一個(gè)值。

let a = false && 123; // false
let b = ' ' && 123; // 123, 注意這里是空格不是空

|| ：如果第一個(gè)值為 false，則 || 后面的值將顯示在輸出中，否則值為第一個(gè)值。

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