ES6/7可能经常用到的新特性

ES6/7有很多的新的特性,下面只介绍了一部分,还有几个重要的单独讲,很多的地方都写的不是很详细,主要做一个大概的方向的了解,一篇文章也是写不完的

let 和 const

两个新的关键字用来声明变量
let用来声明一个块级变量,作用域只在块级内部,有几个不同于var的特性:

  1. 块级作用域
  2. 不能重复声明
  3. 不存在变量提升
  4. 但是存在变量暂时性锁死

example:

var ex = 1;
(function () {
    console.log(ex); // ex is not defined
    let ex = 2;
})()

(function () {
    let ex = 2;
    console.log(ex); // 2
})()
console.log(ex) // 1

const用来声明一个不可改变的变量,特性与let相同

example:

var ex = 1;
(function () {
    const ex = 2;
    console.log(ex) // 2
    ex = 1 // error
})()
console.log(ex) // 1

解构赋值

可以很方便的通过数组(是具有Iterator借口的数据结构)或者对象赋值给单个的变量
最简单也是最好用的用法

let list = [1,2]
let [a,b] = list
console.log(a) // 1
console.log(b) // 2

而且支持默认值

let list = [1, 2]
let [a, b, c = 3] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

也可以嵌套

let list = [1, [2, 3]]
let [a, [b, c], d = 4] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 3

简单的用法,数据交换

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

对象的结构赋值,语法与数组大致相同,同样支持嵌套

let obj = {
    name: 'bulesyk',
    age :'22'
}
let {name:name,age:age} = obj 
console.log(name) // bulesyk
console.log(age) // 22

看一下对应关系

let obj = {
    name: 'bulesyk',
    age: '22'
}
let {name: first, age: second, sex: third = 'mail'} = obj
console.log(first) // bulesyk
console.log(second) // 22
console.log(third) // mail

函数的默认参数对象

function fn({a=1,b=2}) {
    console.log(a)
    console.log(b)
}
// 当需要配置的参数为对象时
fn({
    a:3
})
// 3
// 2

字符串

新的includes方法,返回true/false

let ex = 'hello world'
console.log(ex.includes('hello')) // true

新的startsWith和endsWith,返回true/false

console.log(ex.startsWith('hello')) // true
console.log(ex.endsWith('world')) // true

上面的三种方法都支持第二个参数,以为着从第几位(不包括起始位置)开始计算
endsWith的第二个参数是只计算前多少位

console.log(ex.includes('hello',1)) //false
console.log(ex.startsWith('llo',2)) // true
console.log(ex.endsWith('llo',5)) // true

函数

函数参数默认值

function fn(a=1,b=2) {
    console.log(a)
    console.log(b)
}
// 和解构的不同之处是之前传入的是对象参数
fn(3)
// 3
// 2

rest表示法

function fn(a,b,...params) {
    console.log(a)
    console.log(b)
    console.log(params)
}
fn(1,2,3,4,5)
// 1
// 2
// [3,4,5]

还可以用来合并数组

let a = [1]
let b = [2,3,4]
let c = [5]
console.log([...a,...b,...c])
// 或者 console.log([1,...b,5])
// [1,2,3,4,5]

箭头函数
用来替代匿名函数,并且this指的就是定义时的对象

let ex = {
    name: 'example',
    fn: function () {
        console.log(this);
        (function () {
            console.log(this);
        })();
        (()=>{
           console.log(this); 
        })();
    }
}
ex.fn();
// Object
// Window
// Object

语法

// () => {}
// function () {}

// para => {} // 或者(para) => {}
// function (para) {}

// (a,b) => {}
// function (a,b) {}

// 形式上,上面两两相同

对象

对象的属性简写

var a= 1;
var b= 2;

var ex = {a,b}
// 等于var ex = {a:a,b:b}
console.log(ex)
// object{a:1,b:2}

方法的简写

var ex = {
    fn(){
        console.log('fn')
    }
    // 等于
    // fn:function () {
    //     console.log('fn')
    // }
}
ex.fn() // 'fn

数组

Array.from(params)根据类数组返回一个新的数组

var ex = {
    0:'a',
    1:'b',
    length:2
}
var arr = Array.from(ex)
console.log(arr) // ['a','b']
console.log(arr instanceof Array) // true

Class

这相当于构造函数的语法糖

class Fn {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    fn(){
        console.log('fn')
    }
}
var ex = new Fn(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // fn
console.log(typeof Fn) // function

function Fn1(a,b) {
    this.a = a
    this.b = b
}
Fn1.prototype.fn = function(){
    console.log('fn')
}
var ex1 = new Fn1(1,2)
console.log(ex1.a) // 1
console.log(ex1.b) // 2
ex1.fn() // fn

上面Fn大致与Fn1相同,部分不同之处有:

  • Fn中的方法是不可枚举的
  • 创建实例时要用new关键词,不可以当做一个普通函数来用,会抛出错误
  • 继承机制的不同
class Fn {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    fn(){
        console.log('fn')
    }
}
class FnInner extends Fn{
    constructor(a,b) {
        super(a,b)
        // 必须要super如果没有super创建实例时会抛出错误
        // super相当于父类的this
    }
    fn(){
        console.log('inner')
    }
}
var ex = new FnInner(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // inner

Set

Set是一个内部不能有重复值的对象,使用new Set()创建

var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}

这个可以很方便的数组去重

var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}
var arr = Array.from(set)
console.log(arr) // [1,3,4,2]
    原文作者:吴立宁
    原文地址: https://www.jianshu.com/p/789907366411
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞