快速轉入ES6開發

時間  2019-12-01
標籤 快速 轉入 es6 開發 欄目 JavaScript 简体版
原文   原文鏈接

ECMAScript 6.0簡介

ECMAScript 6.0咱們簡稱ES6,ES6的第一個版本是在2015年6月進行發佈，因此咱們把它稱爲《ECMAScript 2015 標準》（簡稱 ES2015）
JavaScript是ECMAScript的一種實現,也就是說JavaScript是遵循ECMAScript標準的。如今主流瀏覽器已經能夠完美使用ES6。html

babeljs.io/replvue

1.let 和 const

ES6新增了let和const來聲明變量，來解決之前var聲明變量所出現的問題。react

  • var能夠重複聲明變量
  • var擁有變量提高
  • var不支持塊級做用域
  • var不能用於定義常量

1.1 重複定義變量

let name = 'jw';
let name = 'jw'; // Identifier 'name' has already been declared
複製代碼

let和const都不支持在同一個做用域下重複定義變量es6

1.2 不存在變量提高

console.log(name);
let name = 'jw';// ReferenceError: name is not defined
複製代碼

在使用name變量時須要先定義才能進行使用ajax

1.3 塊級做用域

在用var定義變量的時候，變量是經過閉包進行隔離的，如今用了let，不單單能夠經過閉包隔離，還增長了一些塊級做用域隔離。 塊級做用用一組大括號定義一個塊,使用 let 定義的變量在大括號的外面是訪問不到的,而且let聲明的變量不會污染全局做用域json

if(true){
    let name = 'jw';
}
console.log(name); // ReferenceError: name is not defined
複製代碼

1.4 定義常量

const PI = 3.14;
PI = 3.15; // TypeError: Assignment to constant variable

const SCHOOL = {name:'jw'};
SCHOOL.name = 'jiang';
複製代碼

不能給常量從新賦值,若是是引用空間的話能夠進行修改數組

1.5 應用場景

for (let i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i);
    });
}// 1 2 3
複製代碼

咱們能夠將之前須要閉包實現的功能進行簡化。promise

2.解構賦值

分解一個對象的結構。瀏覽器

2.1 數組的解構

let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
// 等價於
let [a, b, c] = arr;
複製代碼

2.2 對象的解構

let { name, age } = { name: 'jw', age: 25 };
console.log(name, age); // jw 25
複製代碼

2.3 解構的重命名

let { name: myName, age: myAge } = { name: 'jw', age: 25 }
console.log(myName, myAge); // jw 25
複製代碼

2.4 複雜的解構

let [
    { name: myName, age: myAge },
    { hobby: [sleep] },
    address
] = [
        { name: 'jw', age: 25 },
        { hobby: ['sleep', 'coding'] },
        '回龍觀'
    ]
console.log(myName, myAge, sleep, address);
複製代碼

2.5 默認解構

let { name, age = 8 } = { name: 'jw' };
console.log(name, age);
複製代碼

當對象中沒有此屬性時會採用默認值bash

2.6 省略解構

let [, , address] = ['jw', 25, '回龍觀 '];
console.log(address);
複製代碼

2.7 應用場景

function ajax(options) {
    var method = options.method || "get";
    var data = options.data || {};
    //.....
}
function ajax({ method = "get", data }) {
    console.log(method, data);
}
ajax({
    method: "post",
    data: { "name": "jw" }
});
複製代碼

3.字符串

3.1 模板字符串

模板字符串用反引號(數字1左邊的那個鍵)包含，其中的變量用${}括起來

let name = 'JiangWen';
let age = 28;
let result = `My name is ${name} . I am ${age} years old`;
console.log(result); // My name is JiangWen . I am 28 years old
複製代碼

3.2 模板字符串實現

let name = 'JiangWen';
let age = 28;
let result = 'My name is ${name} . I am ${age} years old';
result = result.replace(/\$\{([^}]*)\}/g,function(){
    return eval(arguments[1]);
});
console.log(result);
複製代碼

3.3 模板字符串換行

let name = 'JiangWen';
let age = 28;
let userInfo = [name, age];
let lis = userInfo.map(function (info) {
    return `<li>${info}</li>`
});
let ul = `
    <ul>
        ${lis.join('')}
    </ul>
`;
console.log(ul);
複製代碼

3.4 模板標籤

let name = 'JiangWen';
let age = 28;
function tag(strings) {
    let values = Array.prototype.slice.call(arguments, 1);
    let result = '';
    for (let key in values) {
        result += strings[key] + values[key].toString().toUpperCase();
    }
    result += strings[strings.length - 1];
    return result;
}
let result = tag`My name is ${name} . I am ${age} years old`;
console.log(result);
複製代碼

咱們能夠自定義模板字符串的呈現方式

3.5 字符串的新方法

  • startsWith()
let url = 'http://www.zhufengpeixun.cn';
console.log(url.startsWith('http'));
複製代碼
  • endsWith()
let img = 'file.jpg';
console.log(img.endsWith('jpg'));
複製代碼
  • includes()
let str = 'jwjwjw';
console.log(str.includes('jw'));
複製代碼
  • repeat();
let my = 'handsome';
console.log(my.repeat(10));
複製代碼
  • padStart()/padEnd()
let start = '0';
console.log(start.padStart(8,7));
console.log(start.padEnd(8,7));
複製代碼

4.函數

4.1 默認參數

function ajax(url, method = 'GET', dataType = "json") {
    console.log(url);
    console.log(method);
    console.log(dataType);
}
複製代碼

4.2 剩餘運算符

let rest = function(a,...b){
    console.log(a,b);
}
rest(1,2,3);
複製代碼

4.3 箭頭函數

箭頭函數簡化了函數的的定義方式，通常以 "=>" 操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值inputs=>output

[1,2,3].forEach(val => console.log(val));
複製代碼

輸入參數若是多於一個要用()包起來，函數體若是有多條語句須要用{}包起來。

箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。 正是由於它沒有this，從而避免了this指向的問題。而且箭頭函數中沒有arguments

var person = {
    name:'jw',
    getName:function(){
- setTimeout(function(){console.log(this);},1000); //在瀏覽器執行的話this指向window
+ setTimeout(() => console.log(this),1000);//在瀏覽器執行的話this指向person
    }
}j
person.getName();
複製代碼

4.4 對象不是做用域

let result = 'jw'
let obj = {
    result: 'jw',
    fn: () => {
        console.log(this.result);// undefined
    }
}
let fn = obj.fn;
fn();
複製代碼

這裏的this指代的是window,let聲明的變量不會放在window上

5.展開運算符

5.1 展開數組

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2];
console.log(result); // [ 1, 2, 3, 4, 5, 6 ]
複製代碼

5.2 對象展開

let name = {name:'jw'};
let age = {age:8};
let result = {...name,...age}
console.log(result);// { name: 'jw', age: 8 }
複製代碼

5.3 應用場景

function max() {
    console.log(Math.max(...arguments));
}
max(1, 3, 4);
複製代碼

將類數組進行展開,固然咱們也能夠用這種方式將類數組轉化成數組

6.對象的拷貝

6.1 淺拷貝

  • Object.assign
var nameObj = { name: { school: 'jw' } };
var ageObj = { age: 25 };
var obj = {};
Object.assign(obj, nameObj, ageObj);
console.log(obj);
複製代碼
  • 對象展開
var nameObj = { name: { school: 'jw' } };
var ageObj = { age: 25 };
console.log({ ...nameObj, ...ageObj });
複製代碼

6.2 深拷貝

  • JSON.parse&&JSON.stringify
var nameObj = { name: { school: 'jw' } };
var ageObj = { age: 25 };
console.log(JSON.parse(JSON.stringify({ ...nameObj, ...ageObj })));
複製代碼
  • 遞歸拷貝
let obj = {
    name: 'jw',
    home: ['1', 2, { name: 1 }],
    address: { name: '回龍觀' }
}
function deepClone(parent, c) {
    let child = c || {}
    for (let key in parent) {
        if (typeof parent[key] === 'object') {
            child[key] = Object.prototype.toString.call(parent[key]) === '[object Array]' ? [] : {}
            deepClone(parent[key], child[key])
        } else {
            child[key] = parent[key]
        }
    }
    return child
}
let cloneObj = deepClone(obj);
console.log(cloneObj);
複製代碼

7.數組的新方法

7.1 Array.from()

將一個數組或者類數組變成數組,會複製一份(淺拷貝)

let newArr = Array.from(oldArr);
複製代碼

7.2 Array.of()

of是爲了將一組數值,轉換爲數組

console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);
複製代碼

7.3 copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length) 覆蓋目標的下標 開始的下標 結束的後一個的下標,原數組改變

[1, 2, 3, 4, 5].copyWithin(0, 1, 2);
複製代碼

7.4 fill()

就是填充數組的意思 會更改原數組 Array.prototype.fill(value, start, end = this.length);

let arr = [1, 2, 3, 4, 5, 6];
arr.fill('a', 1, 2);
console.log(arr);
複製代碼

7.5 經常使用方法

find/map/reduce/filter/forEach/findIndex/every/some

8.對象

8.1 屬性簡寫

若是你想在對象裏添加跟變量名同樣的屬性，而且屬性的值就是變量表示的值就能夠直接在對象里加上這些屬性,對象中的函數屬性能夠進行簡寫

let name = 'jw';
let age = 8;
let person = {
    name,
    age,
    getName(){
        console.log(this.name);
    }
}
person.getName();
複製代碼

8.2 Object.is

對比兩個值是否相等

console.log(Object.is(NaN,NaN));
複製代碼

8.3 Object.setPrototypeOf

將一個指定的對象的原型設置爲另外一個對象或者null

let obj = { name: 'jw' }
let obj2 = {};
Object.setPrototypeOf(obj2, obj);
let obj3 = {
    __proto__: obj
}
console.log(obj2.name);
console.log(obj3.name);
複製代碼

8.4 super

經過super能夠調用prototype上的屬性或方法

let obj = { name: 'jw' }
let obj2 = {
    __proto__: obj,
    name: 'jw',
    getName() {
        return super.name
    }
}
console.log(obj2.getName());
複製代碼

25.類

25.1 類的定義

在之前咱們定義類是經過構造函數來定義,es6新增了class關鍵字

class Parent {
    constructor(name) {
        this.name = name;
    }
    getName(){
        return this.name
    }
}
let p = new Parent('jw');
console.log(p.getName())
複製代碼

25.2 靜態屬性

類上的屬性,經過類來調用

class Parent {
    constructor(name) {
        this.name = name;
        return {}
    }
    static a() {
        console.log('abc')
    }
    getName() {
        return this.name
    }
}
Parent.a();
複製代碼

25.3 類的繼承

class Parent {
    constructor(name) {
        this.name = name;
    }
    static a() {
        console.log('abc')
    }
    getName() {
        return this.name
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age
    }
    getAge() {
        return this.age
    }
}
let c = new Child('jw','25');
console.log(c.getName())
複製代碼

10.Generator

Generator是一個特殊的函數，執行它會返回一個Iterator對象。 經過遍歷迭代器， Generator函數運行後會返回一個遍歷器對象，而不是普通函數的返回值。

10.1 Iterators模擬

迭代器有一個next方法，每次執行的時候會返回一個對象 對象裏面有兩個屬性，一個是value表示返回的值，還有就是布爾值done,表示是否迭代完成

function readBook(books) {
    let index = 0;
    return {
        next() {
            return {
                value: books[index++],
                done: index <= books.length ? false : true
            }
        }
    }
}
let it = readBook(['vue','angular','react']);
let flag = true
do {
    let { done, value } = it.next();
    console.log(value,done)
    flag = done;
} while (!flag)
複製代碼

10.2 使用Generator

function * readBook(books) {
    for(let key in books){
        yield books[key]
    }
}
let it = readBook(['vue','angular','react']);
let flag = true
do {
    let { done, value } = it.next();
    console.log(value,done)
    flag = done;
} while (!flag)
複製代碼

11.Proxy&&Reflect

這裏來講一下如何利用Proxy實現雙向數據劫持，咱們利用Proxy攔截對象的set方法,利用Reflect給對象賦值。

function $set(obj, fn) {
    let p = new Proxy(obj, {
        set(target, property, value, r) {
            if (obj[value] !== value) {
                console.log('數據變化');
                return Reflect.set(target,property,value,r)
            }
            return true
        }
    })
    fn(p);
}

let obj = { name: 'jw', age: 25 ,arr:[1,2,3]};
$set(obj.arr, function (o) {
    o.push('hello')
    console.log(o);
});
複製代碼

12.集合

12.1 Set

一個Set是一堆東西的集合,Set有點像數組,不過跟數組不同的是，Set裏面不能有重複的內容

var books = new Set();
books.add('js');
books.add('js');//添加劇復元素集合的元素個數不會改變
books.add('html');
books.forEach(function(book){//循環集合
    console.log(book);
})
console.log(books.size);//集合中元數的個數
console.log(books.has('js'));//判斷集合中是否有此元素
books.delete('js');//從集合中刪除此元素
console.log(books.size);
console.log(books.has('js'));
books.clear();//清空 set
console.log(books.size);
複製代碼

12.2 Map

可使用 Map 來組織這種名值對的數據

var books = new Map();
books.set('js',{name:'js'});//向map中添加元素
books.set('html',{name:'html'});
console.log(books.size);//查看集合中的元素
console.log(books.get('js'));//經過key獲取值
books.delete('js');//執照key刪除元素
console.log(books.has('js'));//判斷map中有沒有key
books.forEach((value, key) => { //forEach能夠迭代map
    console.log( key + ' = ' + value);
});
books.clear();//清空map
複製代碼

到此咱們介紹了es6基本經常使用的功能,後續咱們再來介紹es6中的模塊以及promise的使用！而且很快我會附上視頻地址供你們更方便的學習!喜歡的點個贊吧^_^!
支持個人能夠給我打賞哈

打賞
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程