es6常用新语法特性

ES6新语法特性:

ES6中包含了许多新的语法特性，它们将使JS变得更加强大，更富表现力,以下我就ES6的语法特性进行了一些针对性的总结:

1.let和const变量声明:

在ES6之前,声明变量通常是使用var,但是使用这个来声明变量有一个缺点,就是变量提升:
代码如下:

function f(){
    if(bool){
        var h = "hello";
    }else{
        console.log(h)
    }
}
f();
复制代码

在常规理解中,进行函数调用时,无论bool是true还是false,在进行if...else判定是在else中是不可能访问到变量h的,但是经过变量提升后:

function f(){
    var h ; // 变量提升
    if(bool){
        h = "hello";
    }else{
        //此处访问h值为undefined
        console.log(h)
    }
       //在此处访问h值为undefined
}
f();
复制代码

在ES6中,我们通常使用let和const来声明变量,其中let表示变量,const表示常量,他们都能够形成一个块级作用域,那么什么是块级作用域呢?我们可以理解为在{}使用let和const声明的变量,就形成了一个块级作用域,因为被声明的变量的作用域就仅仅是在这个{}中。
再来看下面一段代码:

function f(){
    if(bool){
        let h = "hello";
    }else{
        //此处不能够访问h这个变量
        console.log(h)
    }
}
f();
复制代码

let声明的变量,它的作用域仅仅是在它当前的代码段,不会被提升,另外,const声明的变量是不能够被重新赋值的:

const a = 110;
a = 120//再次赋值会报错
复制代码

2.箭头函数

ES6中新增了箭头函数的概念,我个人认为箭头函数非常好用,因为它不仅仅是减少了代码量,无形中也减少了敲写代码中可能出现的错误,为什么要叫它箭头函数呢?因为它的定义用的就是一个箭头"=>"。
下面我来敲写一段代码来看看两者有什么不同之处:
当你只需要声明一个只有一个参数的函数时,使用新标准中的箭头函数:标识符=>表达式,不需要再输入function和return,一些括号之类的也是可以省略不写的。

    //ES5
    let h = function (test){
        return test;
    }
    //ES6
    let h = test=> test;
复制代码

如果需要声明多个参数或者没有参数的函数,那么在使用箭头函数的时候就需要吧参数用小括号包起来了。

    //ES5
    let h = function (x,y){
        return x+y;
    }
    //ES6
    let h = (x,y) => x+y;
复制代码

箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式像上面两种只包含一个表达式的,{}和 return可以省略,但是如果包含多个表达式,那么{}和 return就不能够省略了。

x => {
    if(x>0){
        return x*x;
    }else{
        return x/x;
    }
}
复制代码

另外,写箭头函如果要返回一个对象的话,单表达式要这样写才不会报错:

x => ({foo: x})
复制代码

箭头函数与普通函数中this的区别:

普通函数中的this:

1.this总是代表它的直接调用者,例如obj.func,那么func中的this就是obj;
2.在默认情况下(未使用'usestrict'),没有找到直接调用者,那么它的this指的就是window;
3.在严格模式下,没有直接调用者的函数中的this是undefined;
4.使用call,apply,bind(ES5新增的)绑定的,this指的是绑定的对象。

箭头函数中的this:

默认指向定义它时,它所处的对象,而不是执行的对象,定义它的时候,可能环境是window(也就是继承父级的this)。
代码如下:

<script>
let obj = {
    say: function(){
        console.log(this)  //this指向的是obj这个对象
        }
    }
    obj.say()
</script>
复制代码

一般函数this指向它的直接调用者,在这里也就是obj这个对象。

<script>
let obj = {
    say: ()=>console.log(this),
    }
    obj.say();
</script>
复制代码

箭头函数中的this,继承自父执行上下文,而箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象是obj,而obj的父执行上下文就是window,因而这里的this实际上表示的是window。

3.模板字符串

在ES6中引入了一种新的字符串字面量,也就是模板字符串。
之前我们使用JS输出模板字符串,通常是下面这样的:

let name = "张三";
let age = 22;
console.log("我的名字叫"+name+"我今年"+age+"岁了")
复制代码

但是我们可以看到:这样的传统做法需要大量的 "" 和 + 来进行拼接才能够得到我们想要的结果,十分的麻烦。 于是ES6提供了模板字符串,用 ` 标识,用 ${} 将变量包起来:

let name = "张三";
let age = 22;
console.log(`我的名字是${name},我今年${age}岁了`)
复制代码

这样的做法简洁了很多,不再需要大量的 "" 和 + 来进行连接字符串和变量了。
更强大的是模板字符串还可以调用函数:

function string(){
    return "Hello,World"
}
console.log(`${string()}`)
复制代码

4.for-in && for-of

我们暂且以数组为例,JavaScript提供了很多遍历数组的方法,其中我们可能最早接触到的是for循环,但是这种方法比较麻烦,于是数组中提供了forEach方法,以上两种方法我们就不一一详细说明了,在这里我们主要讲解一下 for...in 和 for...of 方法:
for..in 循环 (其实for...in循环是为了遍历对象而设计的,并不适合遍历数组,用来遍历数组绝对是一个糟糕的选择,切记,切记,切记!重要的事情讲三遍!!!)

let arr = [1,2,3,4,5,6,7,8,9];
for (let index in arr){  //千万不要这样做
    console.log(index)
}
复制代码

在这段代码中,赋给index的值不是实际上的数字,而是字符串"0","1","2",很可能会在无意之间进行字符串算数计算,给编码过程带来很大的不便。它不仅仅遍历数组元素,还会遍历自定义属性,甚至可能按照随机顺序遍历属性。
强大的for...of循环
这是最简洁,最直接的遍历数组的方法,避开了for...in循环的所有缺陷,和forEach()不同的是,它可以正确响应break,conti和return语句。

let arr = [1,2,3,4,5,6,7,8,9];
for (let value of arr){
    console.log(value)
}
复制代码

5.Spread Operator 展开运算符

ES6中还有一个特性就是Spread Operator(...)
可以合并数组:

let arr1 = [1,2,3];
let arr2 = [...arr1,4,5,6] //[1,2,3,4,5,6]
复制代码

可以用在push函数中:

let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr1.push(...arr2); //[1,2,3,4,5,6]
复制代码

可以用于解构赋值:

let [arg1,arg2,arg3] = [1,2,3,4];
console.log(arg1)  //1
console.log(arg2)  //2
console.log(arg3)  //[3,4]
复制代码

展开运算符既能够合并数组,也能够拆分数组,不过展开运算符要用在最后。
在对象中也同样使用

6.参数默认值(Default)

写一小段代码应该就能够理解了

function f(x,y=10){
    return x+y;
}
console.log(f(2))   //12
console.log(f(2,4)) //6
复制代码

应该要注意的是,带默认值的参数应该放在后面。

7.class

我们知道,JavaScript不想Java是面向对象的语言,而只是基于对象编程的语言,所以在js中,我们通常是通过function和prototype来模拟类这个概念的。但是现在有了ES6,我们也可以像Java那样来创建一个类:

class People{
    constructor(name) {
        this.name = name;
      }
    say(){
        console.log(`我的名字是${this.name}`)
        //模板字符串不了解的可以往上面翻一下
    }
}
let people = new People("张三");
people.say();//我的名字是张三
复制代码

可以看到,我们可以像Java那样的去创建一个类,另外,js的继承父类,需要用到prototype来实现,那么在ES6中又新增了什么方法来实现类的继承呢?

class Man extends People{
    constructor(name,sex){
        super(name);
        this.sex = sex;
    }
    info(){
        console.log(`${this.name}是${this.sex}的`)
    }
}
let man = new Man("张三","男");
man.say();  //我的名字是张三
man.info(); //张三是男的
复制代码

8.对象字面量扩展

在ES6中通过使用属性简写特性可以消除这种属性名称和局部变量之间的重复书写,当对象的属性和变量同名时，可以不必再写冒号和值。

function People(name,age){
    return{
        name,//name : name
        age  //age : age
    };
}console.log(People("张三","22")) //{name: "张三", age: "22"}
复制代码

方法名简写，消除了冒号和方法名。

let People = {
    name : "张三",
    say(){
        console.log(this.name);
    }
}
People.say(); //张三
复制代码

总结

ES6的特性当然远远不止这些,但是对于我们日常的开发来说,这已经是足够的了,我们需要及时的了解这些新的前沿知识,才能跟上时代的步伐。

转载于:https://juejin.im/post/5b6eaca9518825625529c08b