JS葵花寶典祕籍筆記，爲你保駕護航金三銀四

前端葵花寶典祕籍，爲你保駕護航金三銀四

Github來源： | 求星星 ✨ | 給個❤️關注，❤️點贊，❤️鼓勵一下做者

種草一句話：越努力，越幸運！以如今大多數人的努力程度之低，根本輪不到能夠拼天賦。

分享一下前端面試祕籍，但願可以幫助更多的小夥伴。加我😚便可交流問題（不是大佬，互相學習，創造良好的學習環境）。如下哪些你不懂呢？

• 首先關注公衆號：微信搜：程序員哆啦A夢
• QQ羣1：711613774（已滿）
• QQ羣2：634382181
• 微信號：xiaoda0423(備註發送：已關注掘金魔王哪吒)

一面

一面的問題不是很難，可是要獲得面試官比較高的評價，仍是須要必定的表達能力和對技術比較本質的認識的，若是在回答問題的時候可以作一些適當的擴展，天然會讓面試官對你有不同的評價。

回答問題的步驟：先回答問題本質，在回答具體細節，最後作一些平時編程中的擴展。面試官會以爲你確實是在這個技術上面下過功夫的。

二面

問題都比較直接，答案也是知道就知道，不知道就不知道。這些問題一部分是基礎，一部分是根據你的專業技能的來提問的。

在面試中有一些回答不出來很正常，可是若是可以作到出乎面試官的意料，也是面試官對你很重要的加分項。

三面

會問項目多一點，對本身作過的項目必定要深刻，包括使用使用到的技術原理、爲何要使用這些技術。

項目中某個比較重要的點是如何實現的（須要深刻技術的原理），遇到的最大困難是什麼（有哪些），你怎麼解決的？若是須要擴展某個功能，如何下降系統的耦合度，若是針對某個功能進行優化，你會怎麼設計和優化。

四面

主要看你的潛力（就是有沒有培養的價值），可是從你平時的學習中仍然是能夠看得出來的。

五面

誠信至上，因此在簡歷中不要存在任何虛假信息，企圖經過虛假信息獲得面試機會的後果得不償失。對本身的是否一個明確的職業規劃，表達能力、與同事相處的能力以及對工做的態度。

arguments[]函數參數數組

arguments[]數組只定義在函數體中。

在函數體中，arguments指代該函數的Arguments對象。該對象擁有數值屬性，可當作數組來用，含有傳入到該函數的全部參數。arguments標識符本質上是一個局部變量，在每一個函數中會自動聲明並初始化該變量。

arguments僅在函數體中時，才指代Arguments對象，在全局代碼中爲undefined。

Arguments函數的參數和其餘屬性。

Arguments對象只定義函數體中，從技術上來講，Arguments對象不是數組，但它擁有數值屬性和length屬性。

數值類型可當作是數組元素，length屬性則表示數組元素的個數，這些數組元素是傳遞給該方法的參數值。元素0是第一個參數，元素1是第二個參數等等。

全部做爲參數傳入的值都會變成Arguments對象的數組元素，即便在函數聲明中沒有指定參數名。

callee和length屬性。

1. callee屬性 指代當前正在執行的函數
2. length屬性 傳遞給函數的參數個數，以及Arguments對象中數組元素的個數

Arguments 對象

arguments 是一個對應於傳遞給函數的參數的類數組對象。

示例：

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);
複製代碼

能夠被轉換爲一個真正的Array：

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];
複製代碼

Arguments對象的主要用途：

• 用來判斷有多少個參數傳入函數，還能夠用來指代未命名的參數
• 除了數組元素和length屬性，還能夠經過callee屬性來指代匿名函數自己。

Arguments.callee當前正在執行的函數

arguments.callee，指代當前正在執行的函數，經過它能夠引用匿名函數自身。該屬性只定義在函數體中。

示例：

// 在匿名函數內使用callee屬性來引用匿名函數自身
var fn = function(x) {
 if(x<2) return 1;
 else return x * arguments.callee(x-1)
}
var y = fn(5); // 120
複製代碼

Arguments.length傳給函數的參數個數

arguments.length，Arguments對象的length屬性表示給當前函數的參數個數。該屬性只能定義在函數體中。

該屬性表示的是實際傳入的參數個數，不是聲明的參數個數。

示例：

alert("實參長度：" +arguments.length);
alert("形參長度： " +arguments.callee.length);

// 使用Arguments對象來檢查傳入參數個數的正確性
function check(args) {
 var actual = args.length; // 實際的參數個數
 var expected = args.callee.length; // 期待的參數個數
 if( actual != expected ) {
  throw new Error("參數個數有誤，指望值:" + expected + ";實際值:" + actual);
 }
}
function fn(x,y,z) {
 check(arguments); // 檢查參數個數的正確性
 return x+y+z;
}
複製代碼

Object.keys()

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和正常循環遍歷該對象時返回的順序一致 。

語法

Object.keys(obj)
複製代碼

參數

obj

要返回其枚舉自身屬性的對象。

返回值

一個表示給定對象的全部可枚舉屬性的字符串數組。

示例：

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
複製代碼

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一個由指定對象的全部自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值做爲名稱的屬性）組成的數組。

語法Object.getOwnPropertyNames(obj)

參數

obj

一個對象，其自身的可枚舉和不可枚舉屬性的名稱被返回。

返回值

在給定對象上找到的自身屬性對應的字符串數組。

示例：

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 類數組對象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach輸出屬性名和屬性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 輸出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚舉屬性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]
複製代碼

Object.create()

Object.create()方法建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"
複製代碼

語法Object.create(proto，[propertiesObject])

參數

proto

新建立對象的原型對象。

propertiesObject

可選。須要傳入一個對象，該傳入對象的自有可枚舉屬性(即其自身定義的屬性，而不是其原型鏈上的枚舉屬性)將爲新建立的對象添加指定的屬性值和對應的屬性描述符。

返回值

一個新對象，帶着指定的原型對象和屬性。

例外

若是propertiesObject參數是 null 或非原始包裝對象，則拋出一個 TypeError 異常。

用 Object.create實現類式繼承

// Shape - 父類(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父類的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子類(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子類續承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'
複製代碼

若是你但願能繼承到多個對象，則可使用混入的方式。

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 繼承一個類
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 從新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do a thing
};
複製代碼

Object.assign 會把 OtherSuperClass 原型上的函數拷貝到 MyClass 原型上，使 MyClass 的全部實例均可用 OtherSuperClass 的方法。

使用 Object.create 的 propertyObject參數

var o;

// 建立一個原型爲null的空對象
o = Object.create(null);


o = {};
// 以字面量方式建立的空對象就至關於:
o = Object.create(Object.prototype);


o = Object.create(Object.prototype, {
  // foo會成爲所建立對象的數據屬性
  foo: {
    writable:true,
    configurable:true,
    value: "hello"
  },
  // bar會成爲所建立對象的訪問器屬性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});


function Constructor(){}
o = new Constructor();
// 上面的一句就至關於:
o = Object.create(Constructor.prototype);
// 固然,若是在Constructor函數中有一些初始化代碼,Object.create不能執行那些代碼


// 建立一個以另外一個空對象爲原型,且擁有一個屬性p的對象
o = Object.create({}, { p: { value: 42 } })

// 省略了的屬性特性默認爲false,因此屬性p是不可寫,不可枚舉,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

//建立一個可寫的,可枚舉的,可配置的屬性p
o2 = Object.create({}, {
  p: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
});
複製代碼

vue準備工做

• 學習認識flow，Vuejs源碼目錄設計，Vuejs源碼構建，從入口開始（瞭解Vue準備）。
• Flow是facebook出品的JavaScript靜態類型檢查工具。
• Vue的源碼利用了flow作了靜態類型檢查。

flow的工做方式：

一般類型檢查分爲2種：第一種：類型推斷；第二種：類型註解。

什麼是類型推斷呢？

經過變量的使用上下文來推斷出變量類型。

什麼是類型註解呢？

事先註解好想要的類型，flow會基於這些註解來判斷。

在Vuejs的主目錄下有.flowconfig文件，是flow的配置文件，[libs]部分是用來描述包含指定庫定義的目錄。

flow文件夾目錄：

1. compiler.js編譯相關
2. component.js組件數據結構
3. global-api.jsglobal api結構
4. modules.js第三方庫定義
5. options.js選項相關
6. ssr.js服務端渲染相關
7. vnode.js虛擬node相關

瞭解Vue.js源碼目錄src下：

1. compiler編譯相關
2. core核心代碼
3. platforms不一樣平臺的支持
4. server服務端渲染
5. sfc-.vue文件解析
6. shared共享代碼

Vuejs源碼是基於Rollup構建的。

Vue 初始化過程

推薦：Vue 初始化過程

init流程圖

Vue的本質：其實就是一個用Function實現的Class，經過它的原型prototype以及它自己擴展的一系列的方法和屬性。

對數據渲染的過程有了更深的一層理解，從new Vue()開始，建立了一個vue是對象，會先進行init初始化——>$mount()——>compile(若已是render則該過程不須要)——>render——>建立VNode——>patch過程——>生成真實的DOM

null

若是想要任意類型T能夠爲null或者是undefined，只需寫爲?T的格式。

var foo: string = null
// 能夠是字符串，也能夠是null
複製代碼

Vue項目中爲何要在列表組件中寫key，其做用是什麼

key是給每一個vnode的惟一的id，能夠依靠key，更準確，更快的拿到oldVnode中對應的vnode節點。

['1','2','3'].map(parseInt)

答案是[1,NaN,NaN]，爲何不是[1,2,3]呢？

map函數的第一個參數callback，這個callback一共能夠接收三個參數，其中第一個參數表明當前被處理的元素，而第二個參數表明該元素的索引。

arr.map(callback: (value:T, index: number, array: T[]) => U, thisArg?:any);
複製代碼

• parseInt是用來解析字符串的，使得字符串成爲指定基數的整數。接收兩個參數，第一個表示被處理的值（字符串），第二個表示爲解析時的基數。

parseInt(string, radix);
複製代碼

parseINT('1', 0) 表示 radix 爲0時，且string參數不以"0x"和"0"開頭時，按照10爲基數進行處理，返回爲1。

parseInt('2',1)，基數爲1，（1進制），表示的數中，最大值小於2，因此沒法解析，返回爲NaN。

什麼是防抖和節流

防抖，字面意思放置的手抖再次觸發。

onReachBottom() {
    this.timer && clearTimeout(this.timer)
    this.timer = setTimeout(this.getMoreList, 300)
},
複製代碼

觸發高頻事件後n秒後函數只會執行一次，若是n秒內高頻事件再次被觸發，則須要從新計算時間。

// 掘金：魔王哪吒
// 實現input實時搜索

function debounce(fn) {
 let timeout = null
 // 建立一個標記用來存放定時器的返回值
 return function() {
  clearTimeout(timeout)
  // 每當用戶輸入的時候把前一個setTimeout clear掉
  timeout = setTimeout(() => {
   // 建立一個新的setTimeout，這樣就能保證輸入字符串後的interval間隔內若是還有字符輸入的話，就不會執行fn函數
   fn.apply(this, arguments);
  },500)
 }
}

function sayHi() {
 console.log('防抖成功')
}
var inp = document.getElementById('inp');
inp.addEventListener('input',debounce(sayHi)); // 防抖
複製代碼

節流，字面節約流量，高頻事件觸發，但在n秒內只會執行一次，因此節流會稀釋函數的執 行頻率。

// 掘金：魔王哪吒
function throttle(fn) {
 let canRun = true; // 經過閉包保持一個標記
 return function() {
  if(!canRun) return
  // 在函數開頭判斷標記是否爲true，不爲true則return
  canRun = false // 當即設置爲false
  setTimeout(() => {
   fn.apply(this,argument);
   // 最後在setTimeout執行完畢後再把標記設置爲true表示能夠執行下一次循環了，當定時器沒有執行的時候標記爲false
   canRun = true
  },500)
 }
}

function sayHi(e) {
 console.log(e.target.innerWidth, e.target.innerHeight)
}
window.addEventListener('resize', throttle(sayHi));
複製代碼

Set, Map, WeakSet, WeakMap

set，對象容許你存儲任何類型的惟一值，不管是原始值或者是對象引用

weakset，成員都是對象，成員都是弱引用，能夠被垃圾回收機制回收，能夠用來保存DOM節點，不容易形成內存泄漏。

Map，本質上是鍵值對的集合，相似集合，能夠遍歷，方法不少，能夠跟各類數據格式轉換。

WeakMap，只接收對象爲鍵名（null除外），不接收其餘類型的值做爲鍵名，鍵名是弱引用，鍵值能夠是任意的，鍵名所指向的對象能夠被垃圾回收，此時鍵名是無效的，不能遍歷，方法有get，set，has，delete

深度優先遍歷和廣度優先遍歷

深度優先遍歷

指從某個頂點出發，首先訪問這個頂點，而後找出剛訪問 這個結點的第一個未被訪問的鄰結點，而後再以此鄰結點爲頂點，繼續找它的 下一個頂點進行訪問。重複此步驟，直至全部結點都被訪問完爲止。

廣度優先遍歷

是從某個頂點出發，首先訪問這個頂點，而後找出剛訪問這個結點全部未被訪問的鄰結點，訪問完後再訪問這些結點中第一個鄰結點的全部結點，重複此方法，直到全部結點都被訪問完爲止。

//1.深度優先遍歷的遞歸寫法
function deepTraveral(node) {
 let nodes = []
 if(node != null) {
  nodes.push[node]
  let childrens = node.children
  for(let i=0; i<childrens.length; i++) deepTraversal(childrens[i])
 }
 return nodes
}
複製代碼

//2.深度優先遍歷的非遞歸寫法
function deepTraversal(node) {
 let nodes = []
 if(node != null) {
  let stack = []
  // 用來存放未來要訪問的節點
  stack.push(node)
  while(stack.length != 0) {
   let item = stack.pop()
   // 正在訪問的節點
   nodes.push(item)
   let childrens = item.children
   for(let i = childrens.length-1; i>=0; i--) stack.push(childrens[i])
   // 將如今訪問點的節點的子節點存入stack，供未來訪問
  }
 }
 return nodes
}
複製代碼

//3.廣度優先遍歷的遞歸寫法
function wideTraversal(node) {
 let nodes = [], i = 0
 if(node != null) {
  nodes.push(node)
  wideTraversal(node.nextElementSibling)
  node = nodes[i++]
  wideTraversal(node.firstElementChild)
 }
 return nodes
}
複製代碼

//4.廣度優先遍歷的非遞歸寫法
function wideTraversal(node) {
 let nodes = [], i=0
 while(node != null) {
  nodes.push(node)
  node = nodes[i++];
  let childrens = node.children
  for(let i=0; i<childrens.length; i++) {
   nodes.push(childrens[i])
  }
 }
 return nodes
}
複製代碼

實現一個拷貝函數？

Object.prototype.toString()

toString() 方法返回一個表示該對象的字符串。

function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('掘金魔王哪吒');

Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};

console.log(dog1.toString());
// expected output: "掘金魔王哪吒"
複製代碼

語法

obj.toString()
// 返回值
// 一個表示該對象的字符串。
複製代碼

每一個對象都有一個 toString() 方法，當該對象被表示爲一個文本值時，或者一個對象以預期的字符串方式引用時自動調用。默認狀況下，toString() 方法被每一個 Object 對象繼承。若是此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]"，其中 type 是對象的類型。

var o = new Object();
o.toString(); // returns [object Object]
複製代碼

使用 toString() 檢測對象類型

能夠經過 toString() 來獲取每一個對象的類型。爲了每一個對象都能經過 Object.prototype.toString() 來檢測，須要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象做爲第一個參數，稱爲 thisArg。

示例：

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]
複製代碼

Function.prototype.call()

call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。

call() 方法接受的是一個參數列表

示例：

// 掘金：魔王哪吒
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"
複製代碼

語法

function.call(thisArg, arg1, arg2, ...)
複製代碼

thisArg

可選的。在 function 函數運行時使用的 this 值。請注意，this可能不是該方法看到的實際值：若是這個函數處於非嚴格模式下，則指定爲 null 或 undefined 時會自動替換爲指向全局對象，原始值會被包裝。

arg1, arg2, ...

指定的參數列表。

返回值

使用調用者提供的 this 值和參數調用該函數的返回值。若該方法沒有返回值，則返回 undefined。

描述

call() 容許爲不一樣的對象分配和調用屬於一個對象的函數/方法。

call() 提供新的 this 值給當前調用的函數/方法。你可使用 call 來實現繼承：寫一個方法，而後讓另一個新的對象來繼承它（而不是在新對象中再寫一次這個方法）。

使用 call 方法調用父構造函數

示例：

// 掘金：魔王哪吒
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
複製代碼

Function.prototype.apply()

apply() 方法調用一個具備給定this值的函數，以及以一個數組（或類數組對象）的形式提供的參數。

語法

// 掘金：魔王哪吒
func.apply(thisArg, [argsArray])
複製代碼

參數

thisArg

必選的。在 func 函數運行時使用的 this 值。請注意，this可能不是該方法看到的實際值：若是這個函數處於非嚴格模式下，則指定爲 null 或 undefined 時會自動替換爲指向全局對象，原始值會被包裝。

argsArray

可選的。一個數組或者類數組對象，其中的數組元素將做爲單獨的參數傳給 func 函數。若是該參數的值爲 null 或 undefined，則表示不須要傳入任何參數。從ECMAScript 5 開始可使用類數組對象。

返回值

調用有指定this值和參數的函數的結果。

描述

在調用一個存在的函數時，你能夠爲其指定一個 this 對象。 this 指當前對象，也就是正在調用這個函數的對象。 使用 apply， 你能夠只寫一次這個方法而後在另外一個對象中繼承它，而不用在新對象中重複寫該方法。

用 apply 將數組各項添加到另外一個數組

// 掘金：魔王哪吒
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
複製代碼

Function.prototype.bind()

bind() 方法建立一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定爲 bind() 的第一個參數，而其他參數將做爲新函數的參數，供調用時使用。

// 掘金：魔王哪吒
const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42
複製代碼

語法

// 掘金：魔王哪吒
function.bind(thisArg[, arg1[, arg2[, ...]]])
複製代碼

返回值

返回一個原函數的拷貝，並擁有指定的 this 值和初始參數。

建立綁定函數

// 掘金：魔王哪吒
this.x = 9;    // 在瀏覽器中，this 指向全局的 "window" 對象
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 返回 9 - 由於函數是在全局做用域中調用的

// 建立一個新函數，把 'this' 綁定到 module 對象
// 新手可能會將全局變量 x 與 module 的屬性 x 混淆
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81
複製代碼

在默認狀況下，使用 window.setTimeout() 時，this 關鍵字會指向 window （或 global）對象。當類的方法中須要 this 指向類的實例時，你可能須要顯式地把 this 綁定到回調函數，就不會丟失該實例的引用。

將一個相似於數組的對象轉換成一個真正的數組

// 掘金：魔王哪吒
var slice = Array.prototype.slice;

// ...

slice.apply(arguments);
複製代碼

Array.prototype.slice()

slice() 方法返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。原始數組不會被改變。

// 掘金：魔王哪吒
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
複製代碼

語法

// 掘金：魔王哪吒
arr.slice([begin[, end]])
複製代碼

返回值

一個含有被提取元素的新數組。

描述

slice 不會修改原數組，只會返回一個淺複製了原數組中的元素的一個新數組。原數組的元素會按照下述規則拷貝：

若是該元素是個對象引用 （不是實際的對象），slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變，則新的和原來的數組中的這個元素也會發生改變。

對於字符串、數字及布爾值來講（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值，將不會影響另外一個數組。

若是向兩個數組任一中添加了新元素，則另外一個不會受到影響。

類數組（Array-like）對象

slice 方法能夠用來將一個類數組（Array-like）對象/集合轉換成一個新數組。你只需將該方法綁定到這個對象上。 一個函數中的 arguments 就是一個類數組對象的例子。

// 掘金：魔王哪吒
function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
複製代碼

除了使用 Array.prototype.slice.call(arguments)，你也能夠簡單的使用 [].slice.call(arguments) 來代替。

可使用 bind 來簡化該過程

// 掘金：魔王哪吒
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
複製代碼

環狀數據

// 掘金：魔王哪吒
const obj = {
  foo: {
    name: 'foo',
    bar: {
      name: 'bar'
      baz: {
        name: 'baz',
        aChild: null  //待會讓它指向obj.foo
      }
    }
  }
}
obj.foo.bar.baz.aChild = obj.foo // foo->bar->baz->aChild->foo 造成環
JSON.stringify(obj) // => TypeError: Converting circular structure to JSON
複製代碼

拷貝這樣封閉的環狀數據結構，會致使死循環

先說說什麼是深拷貝與淺拷貝

淺拷貝：也就是拷貝A對象裏面的數據，可是不拷貝A對象裏面的子對象

深拷貝：會克隆出一個對象，數據相同，可是引用地址不一樣（就是拷貝A對象裏面的數據，並且拷貝它裏面的子對象）

淺拷貝和深拷貝的區別

推薦: 請分別用深度優先思想和廣度優先思想實現一個拷貝函數？ 每日一題系列(六)

uniapp實現小程序微信登陸

推薦：企業微信開放平臺註冊流程

推薦：uniapp實現小程序微信登陸

<button open-type="getUserInfo"/>
複製代碼

補充：app生成簽名證書

testalias 和 test.keystore中的'test'都是能夠修改的，能夠替換爲本身項目中的名字。輸入下面的keytool -genkey命令就能夠生成證書了

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
複製代碼

用簽名生成工具生成簽名

uniapp的mainfest.json文件配置中，appid必須是'_UNI_'開頭，因此你的配置文件中得是'_UNI_'開頭的。

推薦：小程序靜默登陸方案設計

推薦：小程序用戶登陸架構設計

登陸方案

• Cookie + Session 登陸
• Token 登陸
• SSO 單點登陸
• OAuth 第三方登陸

SSO 單點登陸，適用於中大型企業，想要統一內部全部產品的登陸方式的狀況。

實現垂直居中

// 掘金：魔王哪吒
flex
margin: 0 auto
複製代碼

canvas如何實現按比例沾滿全屏

• document.documentElement.clientWidth: 可見區域寬度;
• document.documentElement.clientHeight: 可見區域高度。
• canvas.width = document.documentElement.clientWidth
• canvas.height = document.documentElement.clientHeight
• screen.availWidth：屏幕可用寬度；
• screen.availHeight：屏幕可見高度。
• canvas.width = screen.availWidth;
• canvas.height = screen.availHeight;
• screen.width：屏幕顯示寬度
• screen.height：屏幕顯示高度
• canvas.width = screen.width
• canvas.height = screen.height
• window.innerWidth：窗口的寬度
• window.innerHeight：窗口的高度
• canvas.width = window.innerWidth
• canvas.height = window.innerHeight

Vue2.0

Vue源碼根目錄下文件夾：

• build打包相關的配置文件，根據不一樣的入口，打包爲不一樣的文件
• dist打包以後文件所在位置
• examples部分示例
• flow，因Vue使用了Flow來進行靜態類型檢查，這裏是定義了聲明一些靜態類型
• packages，分別生成其餘的npm包
• src，主要源碼所在位置
• compiler模板解析的相關文件
• codegen根據ast生成render函數
• directives通用生成render函數以前須要處理的指令
• parser模板解析
• core核心代碼
• components全局組件
• global-api全局方法
• instance實例相關內容，包括實例方法，生命週期，事件等
• observer雙向數據綁定相關文件
• util工具方法
• vdom虛擬dom相關
• entries入口文件，也就是build文件夾下config.js中配置的入口文件
• platforms平臺相關的內容
• web，web端獨有文件
• compiler編譯階段須要處理的指令和模塊
• runtime運行階段須要處理的組件，指令和模塊
• server服務端渲染相關
• util工具庫
• weex，weex端獨有文件
• shared共享的工具方法
• test測試用例

從入口文件查看Vue源碼

先看package.json文件，有項目的依賴，有開發環境，生產環境等編譯的啓動腳本，有項目的許可信息等。來看看：npm run dev：

// 掘金：魔王哪吒
"dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev"
複製代碼

rollup是一個相似於webpack的打包工具，入口文件：/src/entries/web-runtime-with-compiler.js

// 掘金：魔王哪吒
/src/entries/web-runtime-with-compiler.js   
--> /src/entries/web-runtime.js    
--> /src/core/index.js    
--> /src/core/instance/index.js
複製代碼

定義Vue對象它的構造函數及其簡單：

// 掘金：魔王哪吒
function Vue (options) {
 // 判斷是否是生產環境
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    //若是不是經過new關鍵字來建立對象的話
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
複製代碼

Vue的靜態方法和實例方法:

// src/core/index.js
Vue.version = '__VERSION__'

// src/entries/web-runtime-with-compiler.js
Vue.compile = compileToFunctions    
// 把模板template轉換爲render函數

// src/core/global-api 
// 在目錄結構中，Vue的靜態方法大多都是在該文件夾中定義的

// src/core/global-api/index.js
Vue.config 
Vue.util 
Vue.set
Vue.delete
Vue.nextTick
Vue.options = {
  components: {KeepAlive: KeepAlive}
  directives: {},
  filters: {},
  _base: Vue
}

// src/core/global-api/use.js
Vue.use

// src/core/global-api/mixin.js
Vue.mixin

// src/core/global-api/extend.js
Vue.extend

// src/core/global-api/assets.js
Vue.component
Vue.directive
Vue.filter
複製代碼

vm._uid // 自增的id
vm._isVue // 標示是vue對象，避免被observe
vm._renderProxy // Proxy代理對象
vm._self // 當前vm實例

vm.$parent // 用於自定義子組件中，指向父組件的實例
vm.$root // 指向根vm實例
vm.$children // 當前組件的子組件實例數組
vm.$refs 

vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false // 標識是否已掛載
vm._isDestroyed = false // 標識是否已銷燬
vm._isBeingDestroyed = false // 標識是否正在銷燬

vm._events // 當前元素上綁定的自定義事件
vm._hasHookEvent // 標示是否有hook:開頭的事件

vm.$vnode // 當前自定義組件在父組件中的vnode，等同於vm.$options._parentVnode
vm._vnode // 當前組件的vnode
vm._staticTrees // 當前組件模板內分析出的靜態內容的render函數數組
vm.$el // 當前組件對應的根元素

vm.$slots // 定義在父組件中的slots，是個對象鍵爲name，值爲響應的數組
vm.$scopedSlots = emptyObject
// 內部render函數使用的建立vnode的方法
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// 用戶自定義render方法時，傳入的參數
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

vm._props // 被observe的存儲props數據的對象
vm._data // 被observe的存儲data數據的對象
vm._computedWatchers // 保存計算屬性建立的watcher對象
複製代碼

鉤子函數：

• beforeCreate，建立以前
• created，建立
• beforeMount，掛載前
• mounted，掛載
• beforeUpdate，更新前
• updated，更新
• activated，觸發
• deactivated，停用
• beforeDestroy，銷燬前
• destroyed，毀壞

// vm.$options
declare type ComponentOptions = {
  // data
  data: Object | Function | void;  // 傳入的data數據
  props?: { [key: string]: PropOptions }; // props傳入的數據
  propsData?: ?Object;  // 對於自定義組件，父級經過`props`傳過來的數據
  computed?: {  // 傳入的計算屬性
    [key: string]: Function | {
      get?: Function;
      set?: Function;
      cache?: boolean
    }
  };
  methods?: { [key: string]: Function }; // 傳入的方法
  watch?: { [key: string]: Function | string };  // 傳入的watch

  // DOM
  el?: string | Element;  // 傳入的el字符串
  template?: string;  // 傳入的模板字符串
  render: (h: () => VNode) => VNode;  // 傳入的render函數
  renderError?: (h: () => VNode, err: Error) => VNode;
  staticRenderFns?: Array<() => VNode>;

  // 鉤子函數
  beforeCreate?: Function;
  created?: Function;
  beforeMount?: Function;
  mounted?: Function;
  beforeUpdate?: Function;
  updated?: Function;
  activated?: Function;
  deactivated?: Function;
  beforeDestroy?: Function;
  destroyed?: Function;

  // assets
  directives?: { [key: string]: Object }; // 指令
  components?: { [key: string]: Class<Component> }; // 子組件的定義
  transitions?: { [key: string]: Object };
  filters?: { [key: string]: Function }; // 過濾器

  // context
  provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };
  inject?: { [key: string]: string | Symbol } | Array<string>;

  // component v-model customization
  model?: {
    prop?: string;
    event?: string;
  };

  // misc
  parent?: Component; // 父組件實例
  mixins?: Array<Object>; // mixins傳入的數據
  name?: string; // 當前的組件名
  extends?: Class<Component> | Object; // extends傳入的數據
  delimiters?: [string, string]; // 模板分隔符

  // 私有屬性，均爲內部建立自定義組件的對象時使用
  _isComponent?: true;  // 是不是組件
  _propKeys?: Array<string>; // props傳入對象的鍵數組
  _parentVnode?: VNode; // 當前組件，在父組件中的VNode對象
  _parentListeners?: ?Object; // 當前組件，在父組件上綁定的事件
  _renderChildren?: ?Array<VNode>; // 父組件中定義在當前元素內的子元素的VNode數組（slot）
  _componentTag: ?string;  // 自定義標籤名
  _scopeId: ?string;
  _base: Class<Component>; // Vue
  _parentElm: ?Node; // 當前自定義組件的父級dom結點
  _refElm: ?Node; // 當前元素的nextSlibing元素，即當前dom要插入到_parentElm結點下的_refElm前
}
複製代碼

拿到一個函數的返回值類型，使用TS

const func = (): number => 1;
// 聲明一個泛型類型別名，返回值與泛型類型相同，入參類型不限制。
type Reverse<T> = (arg: any) => T;
// 聲明一個泛型方法，入參arg繼承泛型約束，返回空對象並斷言其類型爲T
function returnResultType<T>(arg: Reverse<T>): T {
 return {} as T;
}
// 調用returnResultType,傳入方法(arg: any) => 3，得到result返回值
const result = returnResultType((arg:any) => 3);
// 獲取result類型並重名爲ResultType
type ResultType = typeof result;
複製代碼

Array

構造函數：

new Array()
new Array(size)
new Array(element0, element1, ..., elementn)
複製代碼

• size設定的數組元素個數。返回數組的length屬性等於size。
• 參數列表,element0,..,elementn,當Array()構造函數用這些參數調用時，新建立的數組實例會用指定的參數值來初始化，並將length屬性設置爲參數個數。
• 當不帶參數調用Array()時，返回的數組爲空，length屬性爲0。
• concat()，把元素銜接到數組中。
• every()，測試斷言函數是否對每一個數組元素都爲真。
• filter()，返回知足斷言函數的數組元素。
• forEach()，爲數組的每個元素調用指定函數。
• indexOf()，在數組中查找匹配元素。
• join()，將數組的全部元素轉換爲字符串，並銜接起來。
• lastIndexOf()，在數組中反向查找。
• map()，從數組的元素中，計算出新的數組元素。
• pop()，移除數組最後一個元素。
• push()，把元素添加到數組尾部。
• reduce()，從數組的元素中，計算出一個值。
• reduceRight()，從右到左縮減數組。
• reverse()，在原數組中顛倒元素的順序。
• shift()，移除數組的第一個元素。
• slice()，返回數組的一部分。
• some()，測試是否至少有一個數組元素能讓斷言函數爲真。
• sort()，在原數組中對數組元素進行排序。
• splice()，插入，刪除，或替換數組元素。
• toLocaleString()，將數組轉換爲本地字符串。
• toString()，將數組轉換爲字符串。
• unshift()，在數組頭部插入元素。

Array.concat()

array.concat(value, ...)
複製代碼

返回值，一個新數組，包含array的元素，以及銜接的新元素。

concat()會將參數銜接到array中獲得一個新數組並返回，它不會修改array，若是傳給concat()的某個參數自己是一個數組，則會將該數組的元素銜接到array中，而不是數組自己。

var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5];
複製代碼

Array.every()測試斷言函數是否對每一個元素爲真

array.every(predicate)
array.every(predicate,o)
複製代碼

參數：

• predicate，用來測試數組元素的斷言函數。

• o，調用predicate時的可選this值。

返回值：若是對array的每個元素調用predicate時都返回真值，則返回true，若是有任何一個元素調用predicate時返回假值，則返回false。

every()方法用來測試數組的全部元素是否都知足某些條件。若是predicate的每一次調用都返回true，則every()返回true，不然，爲false。

當遍歷的數組爲空時，every()返回true

[1,2,3].every(function(x) { return x<5 ;}) // true
[1,2,3].every(function(x) { return x<3 ;}) // false
[].every(function(x) {return false;}); // true []老是返回true
複製代碼

Array.filter()返回經過斷言的數組元素

• array.map(predicate)
• array.map(predicate, o)
• predicate，用來判斷array中的元素是否須要包含在返回數組中的調用函數
• o，調用predicate時的可選this值

返回值：

一個新數組，只包含那些讓predicate返回真值的數組元素

filter()會建立一個新數組，包含那些讓predicate函數返回真值的array的元素。filter()方法不會修改arrry自己，注意predicate函數有可能會修改。

返回新建立的數組。

Array.forEach()爲每個數組元素調用一個函數

array.forEach(f)
array.forEach(f,o)
複製代碼

參數

f 爲array的每個元素調用的函數
o 調用f時的可選this值
複製代碼

返回值：該方法無返回值，注意forEach()沒有返回值，特別注意，它不會返回array。

forEach(), map(), filter(), every(), some()接受函數做爲第一個參數，並接受可選的第二個參數。在函數體內，this值等於o。

若是沒有指定第二個參數，this值在非嚴格模式下是全局對象，在嚴格模式下則爲null。

var a = [1,2,3];
a.forEach(function(x,i,a){ a[i]++; }); // [2,3,4]
複製代碼

Array.indexOf()查找數組

array.indexOf(value)
array.indexOf(value,start)
複製代碼

參數：

value 要在array中查找的值

start 開始查找的可選數組序號，能夠省略，則爲0
複製代碼

返回值，所在index，若是不存在匹配元素時，返回-1

判斷是否相等使用的是"==="操做符

['a', 'b', 'c'].indexOf('b'); // 1
['a', 'b', 'c'].indexOf('d', 1); // -1
複製代碼

Array.join()，將數組元素銜接爲字符串

array.join()
array.join(separator)
複製代碼

• separator，在返回的字符串中，用來分隔數組的某個元素與下一個元素的可選字符或字符串。若是省略，默認是英文逗號。

返回值，一個字符串。

a = new Array(1,2,3,"test");
s = a.join("+"); // 1+2+3+test
複製代碼

Array.lastIndexOf()反向查找數組

array.lastIndexOf(value);
array.lastIndexOf(value,start);
複製代碼

• value，要在array中查找的值
• start，開始查找的可選數組序號，若是省略，則從最後一個元素開始查找

Array.length數組大小

length屬性表示數組中的元素個數

若是設置的length大於原值，數組會變大，新添加到末尾處的元素的值爲undefined。

Array.map()從數組元素中計算新值

array.map(f);
array.map(f,o);
複製代碼

• f爲array的每個元素調用的函數，它的返回值會成爲返回數組的元素。
• o-f調用時的可選this值。

返回值：一個新數組，由函數f計算出的元素組成。

[1,2,3].map(function(x) { return x*x }); // [1,4,9]
複製代碼

Array.pop()移除並返回數組的最後一個元素

array.pop()
複製代碼

返回值：array的最後一個元素

pop()會移除array的最後一個元素，縮短數組的長度，並返回所移除元素的值。若是數組已經爲空，pop()不會修改該數組，返回值爲undefined。

pop()和push()，先進後出的棧功能：

var stack = []; // stack: []
stack.push(1,2); // stack: [1,2] 返回2
stack.pop(); // stack: [1] 返回2
stack.push([4,5]); // stack: [1, [4,5]] 返回2
stack.pop(); // stack: [1] 返回[4,5]
stack.pop(); // stack: [] 返回1
複製代碼

Array.push()給數組追加元素

array.push(value,...);
複製代碼

返回值：把指定值追加到數組後數組的新長度。(它會直接修改array，而不會建立一個新的數組）

push()和pop()，先進後出的棧功能。

Array.reduce()從數組元素中計算一個值

array.reduce(f);
array.reduce(f,initial);
複製代碼

• f一個函數，能夠合併兩個值，並返回一個「縮減」的新值。
• initial，用來縮減數組的可選初始值，若是指定該參數，reduce()的行爲會像把該參數插入array的頭部同樣。

返回值：數組的化簡值

示例：

[1,2,3,4].reduce(function(x,y) { return x*y; }) // 24
複製代碼

Array.reduceRight()從右到左縮減數組

array.reduceRight(f)
array.reduceRight(f, initial)
複製代碼

• f一個函數，能夠合併兩個值，並返回一個「縮減」的新值。
• initial用來縮減數組的可選初始值，若是指定該參數，reduceRight()的行爲會像是把該參數插入aray的尾部同樣。

返回值：數組的縮減值，該值是最後一次調用f時的返回值。

[2,10,60].reduceRight(function(x,y) { return x/y; }) // 3
複製代碼

Array.reverse()顛倒數組中的元素順序

array.reverse()
複製代碼

Array對象的reverse()方法能夠顛倒數組元素的順序。它會在原數組中進行操做，而不會建立一個新數組。

a = new Array(1,2,3);
a.reverse();
複製代碼

Array.shift()移除數組的第一個元素

array.shift()
複製代碼

返回值：數組原來的第一個元素。

若是數組爲空，shift()什麼也不幹，返回undefined值，沒有建立新數組。

var a = [1,[2,3],4];
a.shift(); // 1
複製代碼

Array.slice()返回數組的一部分

array.slice(start, end)
複製代碼

返回值：一個新數組，包含array中從start一直到end之間的全部元素（包含start指定的元素，但不包含end指定的元素），若是沒有指定end，返回的數組包含從start到array尾部的全部元素。

var a = [1,2,3,4,5];
a.slice(0,3); // 返回 [1,2,3]
a.slice(3); // 返回 [4,5]
複製代碼

Array.some()測試是否有元素知足斷言函數

array.some(predicate)
array.some(predicate,o)
複製代碼

• predicate用來測試數組元素的斷言函數
• o調用predicate時的可選this值

返回值：若是array中有至少一個元素調用predicate時返回真值，則返回true，若是全部元素調用predicate時都返回假值，則返回false。

[1,2,3].some(function(x) { return x>5; }); //false
[1,2,3].some(function(x) { return x>2; }); // true
[].some(function(x) { return false; }); // false
複製代碼

Array.sort()對數組元素進行排序

array.sort()
array.sort(orderfunc)
複製代碼

• orderfunc用來指定如何排序的可選函數

返回值：該數組的引用。注意是在原數組中進行排序，沒有新鍵數組。數組中的undefined元素會始終排列在數組末尾。

function numberorder(a,b) {return a-b;}
a = new Array(3,2,4);
a.sort(); // 字母排序
a.sort(numberorder); // 數值排序
複製代碼

Array.splice()插入，刪除或替換數組元素

array.splice(start,deleteCount,value,...)
複製代碼

• start開始插入和刪除處的數組元素的序號。
• deleteCount要刪除的元素個數，從start開始，幷包含start處的元素，若是指定爲0，表示插入元素，而不用刪除任何元素。
• value,...要插入數組中的零個或多個值，從start序號開始插入。

返回值：

若是從數組中刪除了元素，則返回一個新數組，包含這些刪除的元素，splice()會直接修改數組。

var a = [1,2,3,4,5,6];
a.splice(1,2);
複製代碼

Array.toLocaleString()將數組轉換爲本地字符串

array.toLocaleString()
複製代碼

返回值：數組的本地化字符串表示。（異常，調用該方法時，若是對象不是數組，會拋出異常。）

Array.toString()將數組轉化成字符串

array.toString()
複製代碼

返回值：array的字符串表示。（異常，調用該方法時，若是對象不是數組，會拋出異常。）

Array.unshift()在數組頭部插入元素

array.unshift(value,...)
複製代碼

參數：value,...，要插入array頭部的一個或多個值。

返回值：數組的新長度。unshift()不會建立新數組，而是直接修改數組自己。

var a = [];
a.unshift(1); // a:[1];
複製代碼

Boolean對布爾值的支持

構造函數：

new Boolean(value) // 構造函數
Boolean(value) // 轉換函數
複製代碼

參數：value，Boolean對象存放的值，或要轉換成布爾值的值。

• Boolean()會將參數轉換成布爾值，並返回一個包含該值的Boolean對象。
• 0,NaN,null,空字符串""和undefined都會轉成false。
• toString()根據Boolean對象表明的布爾值返回"true"或"false"字符串。
• valueOf()返回Boolean對象中存放的原始布爾值。
• Boolean對象時一個封裝布爾值的對象。

Boolean.toString，將布爾值轉換成字符串

b.toString()
複製代碼

• 調用該方法時，若是對象不是Boolean類型，會拋出異常.

Boolean.valueOf()，Boolean對象的布爾值

Date操做日期和時間

new Date()
new Date(milliseconds)
new Date(datestring)
new Date(year, month, day, hours, minutes, seconds, ms)
複製代碼

不帶參數時，Date()構造函數將根據當前日期和時間建立一個Date對象。

Date.getDate()返回一個Date對象的月份中的日期值

返回：給定Date對象date的月份中的日期值，使用本地時間。返回值1~31之間

Date.getDay() ，返回值0(星期天)~6(星期一)

Date.getFullYear()，返回值是一個完整的4位數字的年份

Date.getHours()，返回一個Date對象的小時值，返回值0~23

Date.getMilliseconds()，返回一個Date對象的毫秒值

Date.getMinutes()，返回一個Date對象的分鐘值，返回值在0~59之間

Date.getMonth()，返回一個Date對象的月份值，0(1月)~11(12月)之間

Date.getSeconds()，返回一個Date對象的秒鐘值，0~59之間

Date.getTime()，將一個Date對象以毫秒形式返回

Date.getYear()，返回一個Date對象的年份值

Date.now()，以毫秒的形式返回當前時間

Date.parse()，解析一個日期或時間字符串

Date.setDate()設置一個Date對象的一月中的日期值

Date.setFullYear()設置一個Date的年份值

Date.setHours()設置一個Date的小時，分鐘，秒以及毫秒值

Date.setMilliseconds()設置一個日期的毫秒值

Date.setMinutes()設置一個Date的分鐘，秒鐘，以及毫秒值

Date.setMonth()設置一個Date的月份以及日期值

Date.setSeconds()設置一個Date的秒鐘以及毫秒值

Date.setTime()使用毫秒值設置一個時間

Date.setYear()設置一個Date的年份值

decodeURI()節碼一個URI中的字符

decodeURI(uri)
// uri
一個包含已編碼的URI或其餘待解碼的文本的字符串
複製代碼

encodeURI()轉義一個URI中的字符

轉義一個URI中的字符

Function函數

// 構造函數
new Function(argument_names..., body)

// arguments_names...
任意多個字符串參數

// body
指定函數體的字符串

// 返回
新建立的Function對象

// 異常
SyntaxError
表示在body參數或某個argument_names參數中存在JavaScript語法錯誤
複製代碼

屬性

arguments[]
傳遞給函數的參數數組，不推薦使用

caller
調用該函數的Function對象的引用，若是是全局調用，則該屬性爲null，不推薦使用
複製代碼

方法：

apply()
將函數做爲指定對象的方法來調用。傳遞給它的是指定的參數數組。

bind()
返回一個新函數。

call()
將函數做爲指定對象的方法來調用。傳遞給它的是指定的參數。

toString()
返回函數的字符串表示。
複製代碼

Function.apply()

function.apply(調用function的對象/函數體中this/若是參數爲null，則使用全局對象，一個值數組)
// 返回
調用函數function的返回值
// 異常
若是調用該函數的對象不是函數，或者參數args不是數組和Arguments對象，會拋出異常
複製代碼

示例：

Object.prototype.toString.apply(o);

var data=[1,2,3,4,5,34];
Math.max.apply(null,data);
複製代碼

Function.bind()，返回一個做爲方法調用的函數

function.bind(o)
function.bind(o,args...)
// o 
要綁定到函數上的對象
// args...
要綁定到函數上的零個或多個參數值
// 返回
一個新函數
複製代碼

示例：

var g = f.bind(o, 1,2);

f.call(o, 1,2,3);
複製代碼

Function.arguments[]傳遞給函數的參數，不建議使用

Function.call()將函數做爲對象的方法調用

function.call(thisobj, args...)

// thisobj
調用function的對象，在函數體中，thisobj是關鍵字this的值，若是這個參數爲null，則使用全局對象
// args..
任意多個參數
// 返回
調用函數function的返回值
複製代碼

示例：

Object.prototype.toString().call(o);
複製代碼

Function.caller()調用當前函數的函數，該屬性不是必需的，不該該使用它

Function.length()聲明的參數的個數

Function.prototype()對象類的原型

Function.toString()將函數轉換成字符串

返回：表示函數的字符串

Global全局對象

全局屬性

全局對象不是一個類，注意，全部全局變量也都是全局對象的屬性：

• Infinity表示正無窮大的數值
• NaN表示不是數值的值
• undefined表示undefined值

全局函數

• decodeURI()解碼使用encodeURI()轉義的字符串
• decodeURIComponent()解碼使用encodeURIComponent()轉義的字符串
• encodeURI()經過轉義特定字符對URI編碼
• encodeURIComponent()經過轉義特定字符對URI的組成部分編碼
• escape()用轉義序列替換特定字符來對字符串編碼
• eval()執行JavaScript代碼字符串，返回結果
• isFinite()判斷一個值是否無窮大
• isNaN()判斷一個值是不是非數值
• parseFloat()從字符串中解析數值
• parseInt()從字符串中解析整數
• unescape()解碼使用escape()編碼的字符串

全局對象

• Array
• Boolean
• Date
• Error
• EvalError
• Function
• JSON
• Math
• Number
• Object
• String
• TypeError
• URIError

NaN非數字屬性

NaN是一個全局屬性，指向一個特殊的非數字值。NaN屬性不可用for/in循環枚舉，也不能用delete操做符刪除。NaN不是常量，不可將它設置爲任何其餘值。

檢查一個值是不是數字，使用isNaN()，NaN老是與其餘值不相等，它自己也不相等。

Object包含全部JavaScript對象的特性的超類

new Object()
new Object(value)
複製代碼

屬性：constructor，引用當前對象的構造函數。

方法：

• hasOwnProperty()

檢查對象是否擁有一個指定名字的本地定義的屬性

• isPrototypeOf()

檢查當前對象是否是指定對象的原型

• propertyIsEnumerable()

檢查指定名字的屬性是否存在而且能夠用for/in循環枚舉

• toLocaleString()

返回該對象的一個本地化的字符串表示

• toString()

返回該對象的一個字符串表示

• valueOf()

返回當前對象的原始值，若是存在原始值的話。

靜態方法：

• Object.create()

使用指定的原型及屬性建立一個新的對象

• Object.defineProperties()

建立或配置指定對象的一個或多個屬性

• Object.defineProperty()

建立或配置指定對象的某個屬性

• Object.freeze()

將指定對象設置爲不可改變

• Object.getOwnPropertyDescriptor()

查詢指定對象的指定屬性的特性

• Object.getOwnPropertyNames()

返回要給包含指定對象的全部非繼承屬性名的數組，包含不可枚舉屬性

• Object.getPrototypeOf()

返回指定對象的原型

• Object.isExtensible()

檢查當前對象是否能添加到新的屬性中

• Object.isFrozen()

檢查當前對象是否已凍結

• Object.isSealed()

檢查指定對象是否爲封閉的

• Object.keys()

返回一個包含指定對象的全部非繼承可枚舉屬性名的數組

• Object.preventExtensions()

阻止像指定對象添加新的屬性

• Object.seal()

阻止向指定對象添加新屬性或刪除現有屬性

Object類是JavaScript語言的內置數據類型。它是全部其餘JavaScript對象的超類，所以，Object類的全部方法和行爲都被其餘對象繼承了。

Object.constructor對象的構造函數

全部對象的constructor屬性都指向用作當前對象的構造函數的那個函數。若是使用Array()構造函數建立一個數組a，則a.constructor是一個Array：

a = new Array(1,2,3); //建立一個對象
a.constructor == Array // 值爲true
複製代碼

檢測是不是一個數組：

function isArray(x) {
 return ((typeof x == "object") && (x.constructor == Array));
}
複製代碼

constructor屬性常常用於檢測未知對象的類型。給定一個未知的值，可使用typeof操做符來檢查它是一個原始值仍是一個對象。

若是它是一個對象，則可使用constructor屬性來檢查對象的類型。

Object.create()使用指定的原型和屬性來建立一個對象

Object.create(proto)
Object.create(proto,descriptors)
複製代碼

參數：

// proto
新建立對象的原型，可爲null
// descriptors
一個可選對象，把屬性名映射到屬性描述符
// 返回
一個新建立的對象，繼承自proto，同時擁有descriptiors所描述的屬性
複製代碼

示例：

// 建立一個對象，有x,y屬性，同時繼承屬性z
var p = Object.create({z:0},{
 x: {value:1,writable: false, enumerable: true, configurable: true},
 y: {value:2,writable: false, enumerable: true, configurable: true},
});
複製代碼

Object.defineProperties();

建立或配置對象的多個屬性

// o
要在其上建立或配置屬性的對象
// descriptors
將屬性名映射到屬性描述符的對象
// 返回
對象o
複製代碼

示例：

// 把只讀屬性x和y添加到新建立的對象中
var p = Object.defineProperties({},{
 x: {value:1,writable: false, enumerable: true, configurable: true},
 y: {value:2,writable: false, enumerable: true, configurable: true},
});
複製代碼

Object.defineProperty()

建立或配置對象的一個屬性

Object.defineProperty(o, name, desc)
複製代碼

參數：

// o
將在其上建立或配置屬性的對象
// name
將建立或配置的屬性的名字
// desc
一個屬性描述符對象，描述要建立的新屬性或現有屬性的修改
// 返回
對象o
複製代碼

示例：

function constant(o, n, v) {
 // 定義一個值爲v的常量o.n
 Object.defineProperty(o, n, {value: v, writable: false, enumerable: true, configurable: false});
}
複製代碼

Object.freeze()

將一個對象設置爲不可改變，凍結對象是一個永久性的操做，一旦凍結，就不能解凍。Object.freeze()只設置數據屬性的可寫特性，那些有對應setter函數的屬性不會受到影響，Object.freeze()不會影響繼承屬性。

Object.getOwnPropertyDescriptor()

查詢一個屬性的特性

Object.getOwnPropertyDescriptor(o,name)
複製代碼

參數：

// o 
待查詢其屬性特性的對象
// name
待查詢的屬性名
// 返回
指定對象指定屬性的一個屬性描述符對象，若是不存在指定屬性則返回undefined
// 描述
屬性描述符是一個對象，描述該屬性的特性和值
複製代碼

數據屬性有一個值以及三個性質：

1. 可枚舉型
2. 可讀寫型
3. 可配置性

訪問器屬性有一個getter和setter方法，以及可枚舉性和可配置性。

數據屬性的描述符：

{
 value:
 writable:
 enumerable:
 configurable:
}
複製代碼

訪問器屬性的描述符：

{
 get:
 set:
 enumerable:
 configurable:
}
複製代碼

Object.getOwnPropertyNames()

返回非繼承屬性的名字

Object.getOwnPropertyNames(o);
// o 一個對象
複製代碼

返回，一個包含o的多有非繼承屬性的名字的數組，包含那些不可枚舉的屬性

Object.getOwnPropertyNames([]) // ["length"]: "length" 不可枚舉
複製代碼

Object.getPrototypeOf()

返回一個對象的原型

var p = {}, // 一個原始對象
Object.getPrototypeOf(p); // Object.prototype
var o = Object.create(p); // 一個繼承p的對象
Object.getPrototypeOf(o); // p
複製代碼

Object.hasOwnProperty()

檢查一個屬性是不是繼承的

示例：

var o = new Object(); // 建立一個對象
o.x = 3.14; // 定義一個非繼承的本地屬性
o.hasOwnProperty("x"); //返回true，x是o的本地屬性
o.hasOwnProperty("y"); // false , o沒有屬性y
o.hasOwnProperty("toString"); //返回false，該屬性是繼承屬性
複製代碼

Object.isExtensible()

判斷某個對象上是否能夠添加新屬性

示例：

var o = {}; // 新建立一個對象
Object.isExtensible(o); // true,它是可擴展的
Object.preventExtensions(o); // 將它設置爲不可擴展的
Object.isExtensible(o); // false
複製代碼

Object.isFrozen()判斷對象是否不可改變

• 若是一個對象的全部非繼承屬性都是隻讀的，或者它是封閉的，表示它是凍結的
• 若是能夠向一個對象添加新的屬性，而且不可刪除現有的屬性，則稱它爲封閉的
• Object.isFrozen()檢測它的參數是否爲凍結狀態
• 對象一旦凍結就不能再解凍了

Object.isPrototypeOf()判斷當前對象是否爲另外一個對象的原型

• 若是object是o的原型則返回true，若是o不是一個對象，或object不是o的原型則返回false。

var o = new Object();
Object.prototype.isPrototypeOf(o); // true: o是一個對象
Function.prototype.isPrototypeOf(o.toString); // true，toString是一個函數
Array.prototype.isPrototypeOf([1,2,3]); // true
o.constructor == Object // true
複製代碼

Object.isSealed()判斷一個對象的屬性是否可添加或刪除

• 對象一旦封閉，將沒有辦法解封
• 封閉一個對象：Object.seal()或Object.freeze()

Object.keys()返回自有的可枚舉的屬性名

Object.keys({x:1,y:2}); // ["x","y"]
複製代碼

Object.preventExtensions()

禁止在一個對象上添加新的屬性

• Object.preventExtensions()將o的可擴展性設置爲false，以後將不能向它添加新的屬性
• 這是一個永久性的改變

Object.propertyIsEnumerable()

檢測某個屬性是否在for/in循環中可見

var o = new Object();
o.x=12;
o.propertyIsEnumerable("x"); // true
o.propertyIsEnumerable("y"); // false
o.propertyIsEnumerable("toString"); // false
複製代碼

Object.seal()阻止添加或刪除對象的屬性

Object.toLocaleString()返回對象的本地化的字符串表示

Object.toString()定義一個對象的字符串表示形式

Object.valueOf()給定對象的原始值

parseFloat()將一個字符串轉爲數字

parseInt()將一個字符串轉爲整數

String()字符串支持

方法：

• charAt()

取出一個字符串中指定位置的字符

• charCodeAt()

返回一個字符串中指定位置的字符的編碼

• concat()

將一個或多個值鏈接成一個字符串

• indexOf()

在指定字符串中尋找一個字符或字串

• lastIndexOf()

在指定字符串中向後尋找一個字符或字串

• localCompare()

使用本地定義的順序比較字符串

• replace()

使用正則表達式執行查找與替換操做

• search()

在一個字符串中查找匹配某個正則表達式的字串

• slice()

返回字符串的一個切片或子串

• split()

在指定的分隔符字符串或正則表達式處斷開，將一個字符串分隔爲由字符串組成的數組

• substr()

提取字符串的一個字串，subString()的一個變體

• substring()

提取字符串的一個字串

• toString()

返回原始的字符串值

• valueOf()

返回原始的字符串值

回看筆者往期高贊文章，也許能收穫更多喔！

• TypeScript趁早學習提升職場競爭力
• 一個合格的初級前端工程師須要掌握的模塊筆記
• 前端模擬面試字數過23477萬內容
• Vue.js筆試題解決業務中常見問題
• 【初級】我的分享Vue前端開發教程筆記
• 長篇總結之JavaScript，鞏固前端基礎
• 前端面試必備ES6全方位總結
• 達達前端我的web分享92道JavaScript面試題附加回答
• 【圖文並茂，點贊收藏哦！】重學鞏固你的Vuejs知識體系
• 【思惟導圖】前端開發-鞏固你的JavaScript知識體系
• 14期-連肝7個晚上，總結了計算機網絡的知識點！（共66條）
• 這是個人第一次JavaScript初級技巧
• localStorage和sessionStorage本地存儲
• HTML5中的拖放功能
• 挑戰前端知識點HTTP/ECMAScript
• 必學必會-音頻和視頻
• 前端170面試題+答案學習整理（良心製做）
• 前端HTML5面試官和應試者一問一答
• 哪吒鬧海，席捲圖文學習前端Flex佈局
• 騰訊位置服務開發應用
• 【進階】面試官問我Chrome瀏覽器的渲染原理（6000字長文）
• 面試官一上來就問我Chrome底層原理和HTTP協議（萬字長文）
• 熬夜總結了 「HTML5畫布」 的知識點
• this/call/apply/bind（萬字長文）
• HTTP/HTTPS/HTTP2/DNS/TCP/經典題
• 執行上下文/做用域鏈/閉包/一等公民
• Web頁面製做基礎
• 學習總結之HTML5劍指前端（建議收藏，圖文並茂）

❤️關注+點贊+收藏+評論+轉發❤️

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一塊兒學習了)

咱們下期見！

文章持續更新，能夠微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回覆【資料】有我準備的一線大廠資料，本文 www.dadaqianduan.cn/#/ 已經收錄

github收錄，歡迎Star：github.com/webVueBlog/…