ECMAScript6新方法（1）

ECMAScript6

ECMAScript 6 也稱為ECMAScript2015，是2015年出版的ECMAScript新的版本。ES6是繼ES5之后的一次主要改進(jìn)。ES6增添了許多必要的特性，例如模塊和類，塊級作用域，常量與變量。

支持情況：node.js幾乎完全支持ECMAScript 6 ,標(biāo)準(zhǔn)瀏覽器支持大部分語法

變量：let

es6新增的用于變量申明的關(guān)鍵字

  1. 通過let申明的變量，不允許重復(fù)申明

    var a = 1;
var a = 2;
console.log(a); //2

let a = 2;
let a = 2;
console.log(a); //error 已經(jīng)被申明了

    ?

  2. 不支持變量申明的預(yù)解析，let變量，必須先申明后使用，我們把當(dāng)前作用域最開始到let申明的變量之間的區(qū)域稱為 - 暫存死區(qū)

    console.log(a); //預(yù)解析 undefined
var a = 1;

console.log(b); //error 找不到
let b = 1;

  3. let支持塊級作用域

    1. 全局
    2. 函數(shù)
    3. 塊 - 一對{}包含的部分，稱為一個塊，在這樣的塊中就會有獨立的一個作用域，var不支持塊作用域
{
  let a = 1;
  var b = 2;
  console.log(a); //1
  console.log(b); //2
}
console.log(a); //error
console.log(b); //2

常量：const

常量申明，和var與let不一樣，var,let申明的值是可以變化的（后期改變的），但是通過const申明的值是固定的，不能在后期去改變它

const其他的特性與let一致

因為const定義的是常量值，所以通過const定義一個常量的時候，一定需要初始化

const a = 1;
const a = 2;
console.log(a); //error a已經(jīng)被定義

const a = 1;
a = 2;
console.log(a); //error a是一個常量，不能再重新賦值

const b; //如果不初始化
console.log(b) //那么b就是一個沒有值的申明

當(dāng)用常量申明一個對象的時候，對象本身不能重新修改賦值，但里面的內(nèi)容是可以修改的

const obj = {x: 1};
/obj = {y: 2}; //不允許
obj.x = 10;
console.log(obj) //Object {x: 10}

如果希望一個對象本身以及子數(shù)據(jù)都不能變化，那么通過const和freeze（凍結(jié)對象）同時使用

const obj = {x: 1};
Object.freeze(obj);
obj.x = 10;
console.log(obj) //Object {x: 1}

變量的解構(gòu)賦值

ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

/之前獲取一個對象的值
var obj = {x: 100,y: 200};
console.log(obj.x);
console.log(obj.x);

let left = getConmputedStyle(document.body).left;
let top = getConmputedStyle(document.body).top;

解構(gòu)賦值

對象
  1. 申明{}中的變量
  2. 根據(jù){}中的變量，去=后面的對象中提取對應(yīng)的屬性，并把該屬性對應(yīng)的值賦值給前面對應(yīng)的變量，如果沒有該屬性，返回undefined
var obj = { foo: "aaa", bar: "bbb" };
var {foo,bar} = obj; //相當(dāng)與是申明了foo,bar兩個變量
console.log(foo) //aaa 去找=號后面里面對應(yīng)變量名的屬性

如果我們希望解構(gòu)出來的屬性名在使用的時候是用的另外一個名稱，那么這個時候需要給需要使用的變量名設(shè)置一個別名

let {left,top} = getComputedStyle(document.body);
console.log(top) //error top是一個關(guān)鍵字，不能用作變量名

let {left: L, top: T, a} = getComputedStyle(document.body);
console.log(T) //auto
console.log(a) //undefined
數(shù)組

數(shù)組的解構(gòu)賦值和對象的解構(gòu)賦值：

  • 數(shù)組使用[]，對象使用{}
  • 數(shù)組解構(gòu)賦值是一一對應(yīng)的，而對象解構(gòu)賦值是按照名稱來進(jìn)行的
let [x,y,z,w] = ["a","b","c"];
console.log(x) // a
console.log(y) // b
console.log(y) // b

函數(shù)參數(shù)擴(kuò)展

函數(shù)參數(shù)的默認(rèn)值

在es6之前，如果一個函數(shù)的參數(shù)是可選，那么我們通常需要手動在該函數(shù)的內(nèi)部處理該參數(shù)的默認(rèn)值

function fn(a,b) {
  var a = a||10;
  var b = b||10;
  console.log(a+b)
}
fn(); //20
fn(20,30) //50

在es6之后，函數(shù)在定義的時候，可以直接在參數(shù)上處理默認(rèn)

注意：必傳參數(shù)一般寫在前面，可選參數(shù)一般寫在最后

function fn(a=20, b=10){
  console.log(a+b)
}
fn(); //30
fn(20,20); //40
rest參數(shù)（剩余參數(shù)）

我們通常會一個函數(shù)定義一些參數(shù)，有些參數(shù)是確定的，而有些參數(shù)是不確定（個數(shù)）的,如arr.splice方法中，前2個參數(shù)是固定的值，第2個后面參數(shù)數(shù)量可以不確定

var arr = ["a","b","c"];
arr.splice(1,1,"e","f","g") //

es6之前，如果一個函數(shù)的參數(shù)個數(shù)不確定，我們原來是通過anguments,不定參來處理

function push() { //創(chuàng)建一個方法，用來給第一個參數(shù)（arr）,添加剩余參數(shù)的內(nèi)容到里面
  for (var i=1; i<arguments.length; i++) {
    arguments[0].push(arguments[i]);
  }
}
var arr = ["a","b","c","d"];
push(arr,1,2,3,4);
console.log(arr); //["a", "b", "c", "d", 1, 2, 3, 4]

es6的rest參數(shù)，如果一個函數(shù)定義了剩余參數(shù)，那么在調(diào)用該的函數(shù)的時候傳入的實參會賦值給對應(yīng)形參，剩下沒有對應(yīng)的實參會全部賦值給剩余參數(shù)

function push(arr,...data) { //注意3個點
  for (var i = 0; i < data.length; i++) {
    arr.push(data[i])
  }
}
var arr = ["a","b","c"];
push( arr, 1,2,3,x );
console.log(arr);
//...data 就是實參后，剩余沒有對應(yīng)實參全部 [1,2,3,x]

注意： 剩余參數(shù)必須是尾參數(shù)，最后面

擴(kuò)展運算符

擴(kuò)展運算符（spread）是三個點（...）。它好比rest參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。該運算符主要用于函數(shù)調(diào)用。

例如在之前，想要把一個數(shù)組里的內(nèi)容用來做為參數(shù)調(diào)用

function area(w,h) {
  console.log(w * h)
}
area(10,10) //100
var arr = [20,30];
area(arr[0],arr[1]) //600 

var arr1 = ["a","b","c"];
var arr2 = [1,2,3];
arr1.splice(1,1,arr2); 
console.log(arr1) 
//這個時候，就會是["a",[1,2,3],"c"],要想顯示為正常就要

arr1.splice(1,1,arr[0],arr[1],arr[2]) //['a',1,2,3,'c']

es6方法

var arr3 = ["a","b","c"];
var arr4 = [1,2,3];
arr3.splice(1,1,...arr4) //注意三個點
console.log(arr3) //['a',1,2,3,'c']

//之前把2個數(shù)組組合在一起
var arr5 = arr3.concat(arr4);
//現(xiàn)在
var arr6 = [...arr3,arr4];

//取最大值
var arr = [5,45,7,8,71,5];
console.log(Math.max(...arr)) //省略了循環(huán)

箭頭函數(shù)

在es6中，提供了一種新的函數(shù)格式：箭頭函數(shù)

之前的定義函數(shù)方法

//函數(shù)申明
function fn(a,b){
  console.log(a+b);
}
//函數(shù)表達(dá)式
var fn2 = funciton(a,b) {
  console.log(a - b)
}

箭頭函數(shù)

格式要是表達(dá)式方式

var fn3 = (a,b) => {
  console.log(a * b)
};
fn3(10,20) //200  省略了function

//*有幾種有條件的簡化寫法,有且僅有一個形參的時候，可以省略參數(shù)的小括號
//當(dāng)參數(shù)只有一個的時候,可以不要()
var fn4 = a => {
  console.log(a)
}

//當(dāng)沒有參數(shù)的時候，要有()
var fn5 = () => {
  console.log(1)
}

//只有一條語句的時候，可以省略{}，同時該條語句的結(jié)果將作為該函數(shù)的返回值
var fn6 = r => {
  return r * r * Math.PI;
}
//簡化
var fn7 = r => r * r * Math.PI;

//但是，如果有多條語句或者返回值是一個對象，則必須使用{}

注意：

  1. 箭頭函數(shù)不能作為構(gòu)造函數(shù)，也就是箭頭函數(shù)不能使用new運算符
  2. 箭頭函數(shù)的this永遠(yuǎn)指向當(dāng)前申明作用域?qū)ο?
    • 普通函數(shù)this指向取決于調(diào)用
    • 箭頭函數(shù)this指向取決于申明
  3. 箭頭函數(shù)沒有arguments對象
var todo = function(){
  console.log(this)
}
var todo1 = () => {
  console.log(this)
}
document.onclick = todo; //this是document
document.onclick = todo; //this是window

//例如我們有個按鈕
<input type="button" value="看我的顏色"/>
var btn = document.querySelector('input');

btn.onclick = function(){
  var _this = this //定時器里的this是指向window，要存一下當(dāng)前點擊btn
  setTimeout(function(){
    _this.style.color = "red"
  },1000)
}
btn.onclick = function(){
  setTimeout(() =>{
    this.style.color = 'red' //this是btn 是在它下面的作用域中聲明的
  },1000)
}

對象擴(kuò)展

對象屬性簡潔表示法

當(dāng)一個對象的key和對應(yīng)的值（必須是一個變量名稱）同名的話，那么可以簡寫成一個key

var a = 1;
var b = 2;
var obj = {
  left:  100,
  top: 100,
  a: a,
  b: b
};
console.log(obj) //var a = 1;
var b = 2;
var obj = {
  left:  100,
  top: 100,
  a: a,
  b: b
};
console.log(obj) //Object {left: 100, top: 100, a: 1, b: 2}

//*簡寫 ，對象名和對應(yīng)的值是同名，可以省略名
var obj = {
  left:  100,
  top: 100,
  a,
  b
};
對象方法的簡潔表示法
var a = 10;
let obj2 = {
  a: a,
  fn: function(){
    console.log(1)
  }
} 

//簡潔寫法,對象里的方法可以省略掉function
let obj3 = {
  a,
  fn() {
    console.log(1)
  }
}
屬性名表達(dá)式

ES6允許字面量定義對象時，用表達(dá)式作為對象的屬性名，即把表達(dá)式放在方括號內(nèi)。

var x = "usename";
let obj = {
  x: "小明" 
}
console.log(obj); //Object {x: "motao"}

//es6
let obj1 = {
  [x]: "小明" 
}
console.log(obj1); //Object {usename: "motao"}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容