快速转入ES6开发

ECMAScript 6.0简介

ECMAScript 6.0咱们简称ES6,ES6的第一个版本是在2015年6月进行发布，因此咱们把它称为《ECMAScript 2015 标准》（简称 ES2015）
JavaScript是ECMAScript的一种实现,也就是说JavaScript是遵循ECMAScript标准的。如今主流浏览器已经能够完美使用ES6。

babeljs.io/repl

1.let 和 const

ES6新增了let和const来声明变量，来解决之前var声明变量所出现的问题。

• var能够重复声明变量
• var拥有变量提高
• var不支持块级做用域
• var不能用于定义常量

1.1 重复定义变量

let name = 'jw';
let name = 'jw'; // Identifier 'name' has already been declared
复制代码

let和const都不支持在同一个做用域下重复定义变量

1.2 不存在变量提高

console.log(name);
let name = 'jw';// ReferenceError: name is not defined
复制代码

在使用name变量时须要先定义才能进行使用

1.3 块级做用域

在用var定义变量的时候，变量是经过闭包进行隔离的，如今用了let，不单单能够经过闭包隔离，还增长了一些块级做用域隔离。 块级做用用一组大括号定义一个块,使用 let 定义的变量在大括号的外面是访问不到的,而且let声明的变量不会污染全局做用域

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
复制代码

咱们能够将之前须要闭包实现的功能进行简化。

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);
复制代码

当对象中没有此属性时会采用默认值

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的使用！而且很快我会附上视频地址供你们更方便的学习!喜欢的点个赞吧^_^!
支持个人能够给我打赏哈