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一樣都是只對塊級起作用並且同一個作用域只能有一個常量

 

const  P1 = 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支持：

 

 

 

函數

 

箭頭函數有個特點：

1. 如果參數只有一個，可以省略小括號
2. 如果不寫return，可以不寫大括號
3. 沒有arguments變量
4. 不改變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 入門