VUE入門準備------>ES6
聲明變量的方式： var let const
let 和 var的區別
var定義的變量是全局的會覆蓋全局的定義
var i = 6; for(var i = 0;i<5;i++){ console.log(i) } 0 1 2 3 4 undefined i 5 這個時候已經覆蓋了全局的變量
let定義的變量是局部的變量
let i = 6; for(let i = 0;i<5;i++){ console.log(i) } 報錯 VM144:1 Uncaught SyntaxError: Identifier ‘i‘ has already been declared at <anonymous>:1:1 (anonymous) @ VM144:1
let在一個作用域只能定義一次不能重復
ES5中只有全局作用域和函數作用域，並沒有塊級作用域。 請看下面的示例：
var name = ‘Q1mi‘
function foo(){
console.log(name)
if (false){
var name = ‘Bob‘
}
}
foo() // undefined
出現上述現象的原因就是在函數內部，由於變量提升導致內存的name變量覆蓋了外層的name變量。
const
const用來聲明常量。const聲明變量必須立即初始化，並且其值不能再改變。 const聲明常量的作用域與let相同，只在聲明所在的塊級作用域內有效。 ES6規定：var命令和function命令聲明的全局變量依舊是全局對象的屬性；let命令、const命令和class命令聲明的全局變量不屬於全局對象的屬性。 const雖然是聲明常量 （常量必須大寫）但是它的使用和let一樣都是只對塊級起作用並且同一個作用域只能有一個常量constP1 = 3.14; undefined P1 3.14 for(const P1 = 0;P1 < 5; P1++){ console.log(P1) } 報錯 同一個常量不能聲明兩個 VM163:2 0 VM163:1 Uncaught TypeError: Assignment to constant variable. at <anonymous>:1:28
變量的解構賦值：
變量的解構賦值
ES6允許按照一定的模式，從數組或對象中提取值，對變量進行賦值，這種方式被稱為解構賦值。
就是按照位置一一賦值
var a = [11,22,33]; var [x,y,z] = a; undefined x 11 y 22 z 33
字典的一一賦值 （js中字典可以的key可以不用加引號）
var {x,y} = {x:10,y:20}; undefined x 10 y 20
var obj ={‘name‘:‘老王‘, ‘age‘:30}; undefined obj {name: "老王", age: 30} obj.name "老王" obj.age 30
字符串
include、startsWith、endsWith
在此之前，JavaScript中只有indexOf方法可用來確定一個字符串是否包含在另一個字符串中。
var b = ‘youaresb‘; b.indexOf(‘sb‘); 6
ES6中又提供了3種新方法：
includes()：返回布爾值，表示是否找到了參數字符串。
stratsWith()：返回布爾值，表示參數字符串是否在源字符串的開始位置。
endsWith()：返回布爾值，表示參數字符串是否在源字符串的結尾位置。
var a = ‘youaresb‘; a.includes(‘sb‘); true
var a = ‘youaresb‘;
a.startsWith(‘you‘);
true
var a = ‘youaresb‘;
a.endsWith(‘sb‘);
true
a.endsWith(‘a‘);
false
這三個方法都支持第2個參數，表示開始匹配的位置。
var a = ‘youaresb‘; a.includes(‘are‘,3); true a.startsWith(‘sb‘,6); true a.endsWith(‘you‘,0); false a.endsWith(‘are‘,3); false
endsWith();是直接找的長度並且算的是結尾的字符
var a = ‘youaresb‘; a.endsWith(‘you‘,1) false var a = ‘youaresb‘; a.endsWith(‘you‘,3) true 長度來找不是下標來找 並且以最後一個來找的
模板字符串：
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。在模板字符串中嵌入變量，需要將變量名寫入${}中。
var a = ‘男‘; var hobby = ‘女‘; l = `我是${a} 愛好${hobby}`; console.log(l) VM506:4 我是男 愛好女
模板就是用$(定義的變量) 然後用拼接符號：`` 來拼接的
pycharm修改esc6支持：
函數
箭頭函數有個特點：
- 如果參數只有一個，可以省略小括號
- 如果不寫return，可以不寫大括號
- 沒有arguments變量
- 不改變this指向
function foo(name,age){ return {‘name‘:name,‘age‘:age} }; var abc = foo(‘老王‘,17); abc {name: "老王", age: 17}
其中箭頭函數中this指向被固定化，不是因為箭頭函數內部有綁定this的機制。實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。
箭頭函數指向的是外層 使用this的時候不要用箭頭函數
var person = { name:‘老王‘, age:17, func:function(){ console.log(this); } }; person.func() VM591:5 {name: "老王", age: 17, func: ƒ} //打印的是當前你的func的對象 var person = { name:‘老李‘, age:16, func:()=>{ console.log(this); } }; person.func(); VM608:5 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} //打印的是windows對象
對象
屬性簡潔表示法
ES6允許直接寫入變量和函數作為對象的屬性和方法。
function (x, y){
return {x, y}
}
上面的寫法等同於：
function(x, y){
return {x: x, y: y}
}
對象的方法也可以使用簡潔表示法：
var o = {
method(){
return “Hello!”;
}
}
等同於：
var o = {
method: function(){
return “Hello!”;
}
}
對象的賦值是引用：
var zy = {‘name‘:‘趙雲‘,‘age‘:17};
var zy1 = zy;
zy1
{name: "趙雲", age: 17}
zy1.name
"趙雲"
zy1.age
17
zy.age = 18; //該變zy的age
zy.age
18
zy1.age //zy1的引用也跟著改變 這個就相當於 淺copy內的深層copy 指向都一樣
18
Object.assign()
Object.assign方法用來將源對象（source）的所有可枚舉屬性復制到目標對象（target）。它至少需要兩個對象作為參數，第一個參數是目標對象，第二個參數是源對象。
參數必須都是對象，否則拋出TypeError錯誤。
Object.assjgn只復制自身屬性，不可枚舉屬性（enumerable為false）和繼承的屬性不會被復制。
這個相當於深copy互不幹擾是指向兩個不同的內存地址
var zy = {‘name‘:‘趙雲‘,‘age‘:17}; var zyl = Object.assign({},zy); zyl {name: "趙雲", age: 17} zy {name: "趙雲", age: 17} zy.age = 18 18 zyl.age 17
面向對象
ES5的構造對象的方式 使用構造函數來創造。構造函數唯一的不同是函數名首字母要大寫。
Promise：
Promise 是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理、更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。
使用Promise的優勢是有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。
用法示例：
const promiseObj = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。
Promise實例生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數。
promiseObj.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為resolved時調用，第二個回調函數是Promise對象的狀態變為rejected時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受Promise對象傳出的值作為參數。
我們還可以將上面的代碼寫成下面這種方式：
promiseObj
.then(function(value) {
// success
})
.catch(function(error) {
// failure
});
其實Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。
想了解更多有關ES6標準內容，推薦閱讀：阮一峰的ECMAScript 6 入門
VUE入門準備------>ES6