美文网首页
ES2015概述

ES2015概述

作者: zp蜚声 | 来源:发表于2020-05-23 19:02 被阅读0次

ES2015的目标

-解决原有语法上的一些问题或者不足
-对原有语法进行增强
-全新的对象、全新的方法、全新的功能
-全新的数据类型和数据结构

ES2015 let与块级作用域

1.在这之前ES只有两种作用域,分别是全局作用域和函数作用域,在ES2015中新增了块级作用域。
2.使用let声明变量
3.var声明的是全局变量,例如

var elements = [{}, {}, {}]
for (var i = 0; i < elements.length; i++){
  elements[i].onclick = function () {
    console.log(i)  
  }
}
elements[2].onclick();
// 无论是哪个elements的数组成员调用onclick()打印结果是3

const 恒量/常量

-声明过后不允许修改
-不能改变内存指向,但是可以对其进行添加属性

数组的解构

const arr = [100, 200, 300]
const [first, second, third] = arr
const [, , four] = arr
const [f1, ...rest] = arr
const [f1, f2, f3, more] = arr
const [f1, f2, f3, defaultValue = 'default value'] = arr
console.log(first, second, third) // 100 200 300
console.log(four) // 300
console.log(rest) // [200 ,300]
console.log(more) // undefined
console.log(defaultValue ) // default value

对象的解构

const obj = {name: 'zce', age: 18}
const {name} = obj
console.log(name) // zce

避免名称重复进行重命名

const name = 'tom'
const {name : objName} = obj
console.log(objName) // zce

解构方法简化代码编写

const {log} = console
log('test')
log('test1')
log('test2')

模板字符串

-字符串换行直接回车即可无需使用\n转义字符

const str = `this is 
my word`

-通过插值表达式嵌入对应数值

const name = 'tom'
const msg = `Hey, ${name}`

-带标签模板字符串

const name = 'tom'
const gender = true
function myTagFunc(string) {
const sex = gender ? 'man' : 'woman'
  return string[0] + name + string[1] + sex + string[2]
}
const result = myTagFunc`hey, ${name} is a ${gender}.`
console.log(result) // hey, tom is a man.

-字符串扩展方法
include()、startsWith()、endsWith()

const message = 'Error: foo is not defined.'
console.log(message.startsWith('Error')) // true
console.log(message.endsWith('.')) // true
console.log(message.include('foo')) // true

相关文章

  • ES2015概述

    ES2015的目标 -解决原有语法上的一些问题或者不足-对原有语法进行增强-全新的对象、全新的方法、全新的功能-全...

  • ES2015(ES6)

    阮一峰 ES2015给 JavaScript 初心者的 ES2015 实战 ECMAScript 6(以下简称ES...

  • React学习日记

    es2015版本:

  • 浏览器环境 兼容运行ES6语法

    ES6语言的普及 2015年6月, ES2015(即 ECMAScript 6、ES6) 正式发布。ES2015 ...

  • ES6 实现自己的 Promise

    一、JavaScript 异步编程背景 从去年 ES2015 发布至今,已经过去了很久,ES2015 发布的新的语...

  • 对象字面量扩展

    ES2015之前的ECMAScript标准中,对象字面量只是一种用于表达对象的语法。而在ES2015中,ECMAS...

  • 关于node 你需要学习的内容(转)

    使用 ES2015。在 Node.js v6 版本已经支持 99% 的 ES2015 语法,这样你就可以放心去掉对...

  • ES2015

    Rest Parameter, Spread Oprator, Arrow Func Rest Parameter...

  • react issue

    A: 配置.babelrc { "presets":["es2015","stage-0","react"]}

  • 在ES2015标准之前,我们利用函数原型来实现类: ES2015类定义语法: 类方法内的第一层所引用的this指向...

网友评论

      本文标题:ES2015概述

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