美文网首页
ES6 的语法糖

ES6 的语法糖

作者: sarah_wqq | 来源:发表于2019-01-17 16:09 被阅读0次

1.对象字面量的改进:

1)属性的简洁表示法


1.png

2)可计算的属性名


2.png

简写属性和计算的属性名不可同时使用

2.方法定义

3.png

3.箭头函数

var example = (parameters) =>{
    //function body
}

尽管箭头函数看起来类似于传统的匿名函数,他们却具有根本性的不同:
箭头函数不能被直接命名,不过允许它们赋值给一个变量;
箭头函数不能用做构造函数,你不能对箭头函数使用new关键字;
箭头函数也没有prototype属性;
箭头函数绑定了词法作用域,不会修改this的指向。

特性
1)词法作用域
在箭头函数的函数体内使用的this,arguments,super等都指向包含箭头函数的上下文,箭头函数本身不产生新的上下文。

function puzzle(){
    return function(){
        console.log(arguments)
    }
}
puzzle('a', 'b', 'c')(1, 2, 3)

打印出1,2,3,原因是对常规匿名函数而言,arguments指向匿名函数本身。

function puzzle(){
    return () => {
        console.log(arguments)
    }
}
puzzle('a', 'b', 'c')(1, 2, 3)

打印出a,b,c, 箭头函数其本身没有arguments对象,这里的arguments其实是其父函数puzzle的。

2)简写箭头函数
简写1:
当只有一个参数时,我们可以省略箭头函数参数两侧的括号:

var double = value => {
   return value * 2
}

简写2:
对只有单行表达式且,该表达式的值为返回值的箭头函数来说,表征函数体的{},可以省略,return 关键字可以省略,会静默返回该单一表达式的值。

var double = (value) => value * 2

简写3:
上述两种形式可以合并使用,而得到更加简洁的形式

var double = value => value * 2

4.解构赋值

1)对象解构

var { boots } = character

有默认值:

var { boots: footwear = { size: 10 } } = character

2)数组解构(使用中括号)

var  arr = ["hello", 1, 111]
var [x, y, z] = arr
//或者可留白
var [first,  , last] = arr
//可交换
var left=5, right=7;
[left, right] = [right, left] 

5.函数默认参数

var double = (input = 0) => input * 2

6.剩余参数rest

使用rest, 你只需要在任意JavaScript函数的最后一个参数前添加三个点...即可。


4.png

rest参数之前的命名参数不会被包含在rest中,


5.png

在箭头函数中使用rest参数时,即使只有这一个参数,也需要使用圆括号把它围起来,不然就会报错SyntaxError

7.拓展运算符

拓展运算符可以把任意可枚举对象转换为数组,使用拓展运算符可以高效处理目标对象,在拓展目前前添加...就可以使用拓展运算符了。下例中...arguments就把函数的参数转换为了数组字面量。


6.png

shift数组:


7.png

8.模板字符串

使用反撇号,可以在模板字符串中随意使用单双引号了,使用时不再需要考虑转义:

var text = `Hello, ${ name }!`

//多行:
var multiline =
`The first line
A second line
Then a third line`

9.let和const

var 存在变量提升的特性,ES6中引入了let和const只在块级作用域中有效

1)特性

1.不会被提升
2.重复声明报错
3.不绑定全局作用域
当在全局作用域中使用 var 声明的时候,会创建一个新的全局变量作为全局对象的属性。

var value = 1;
console.log(window.value); // 1

复制代码然而 let 和 const 不会:

let value = 1;
console.log(window.value); // undefined

2)区别

const 用于声明常量,其值一旦被设定不能再被修改,否则会报错。
但是const 声明不允许修改绑定,但允许修改已绑定对象的值。

const data = {
    value: 1
}
// 没有问题
data.value = 2;
data.num = 3;
// 报错
data = {}; // Uncaught TypeError: Assignment to constant variable.

相关文章

  • 简单总结ES6中的类定义语法和ES7的async/await

    学习ES6的类定义语法 基本知识点: ES6中定义类的方式, 就是ES5中定义类的语法糖,但虽然是语法糖,但是整体...

  • js继承 es6和es5

    es6 class是个语法糖,本质上是原型链 es6之前

  • ES6之面向对象

    关键词:面向对象 es6新增了类这个语法糖

  • ES6时代的JavaScript面向对象编程

    ES6时代的JavaScript面向对象编程 ES6带来的类语法糖 类的定义 ES6支持了class,extend...

  • ES6语法糖

    对象字面量是指以{}形式直接表示的对象,比如下面这样: ES6 为对象字面量的语法带来了一些改进:包括属性/方法的...

  • ES6语法糖

    参考 重新认识ES6中的语法糖 ES6入门-let 和 const 命令部分 对象字面量 字面量提供一种简写,我的...

  • es6语法糖

  • JS中的类

    如何定义一个类 ES5中定义一个类: ES6以后的语法(可以看做是ES5的语法糖): ES6的类,完全可以看作构造...

  • ES6 的语法糖

    1.对象字面量的改进: 1)属性的简洁表示法 2)可计算的属性名 简写属性和计算的属性名不可同时使用 2.方法定义...

  • js 中的类

    ES5 中定义一个类 ES6以后的语法(可以看做是ES5的语法糖) ES6 的类,完全可以看作构造函数的另一种写法...

网友评论

      本文标题:ES6 的语法糖

      本文链接:https://www.haomeiwen.com/subject/oylidqtx.html