ES6( ECMAScript 6.0)语法

一、let/const与var的区别

var 会进行预解析,let/const不会

var可以声明两个重名的变量,let/const不能

var没有块级作用域,let/const有块级作用域

二、箭头函数

1.普通函数

  1. //xxx.onclick=function(a=10,b=20){ } 可以为函数设置默认值,没传参数就用默认值
  2. xxx.onclick=function(){ }
  3. var xxx={fn:function(){} }
  4. xxx.forEach(function(){})
  5. setTimeout(function(){})
  6. var xxx=function(){}

2.箭头函数

格式:把普通函数的function去掉,再在小括号后面加上j箭头符号(=>)

  1. xxx.onclick=()=>{ }
  2. var xxx={fn:()=>{} }
  3. xxx.forEach(()=>{})
  4. setTimeout(()=>{})
  5. var xxx=()=>{}

三、结构赋值

1.以前数组

  1. let arr=['hello','world']
  2. let a=arr[0]
  3. let b=arr[1]

2.解构赋值

  1. let [a,b]=['hello','world']
  2. console.log(a)
  3. console.log(b)

四、解构赋值-解构对象(键值对)

1.以前获取对象

  1. let obj={
  2. name:"小明"
  3. age:20
  4. }
  5. let name=obj.nam
  6. let age=obj.nam

2.解构赋值

  1. let obj={
  2. name:"小明"
  3. age:20
  4. }
  5. //定义两个变量name和age,并获取obj里的name和age的值
  6. let{name,age}=obj //如同 let name=obj.nam ,let age=obj.nam
  7. console.log(name,age)
  8. //定义一变量a(为name取个别名a)
  9. let{name:a}=obj

五、E6_模板字符串反引号使用

作用:

  1. 给变量赋值时可以换行
  2. 可以配合${ 变量 }来解析变量
  1. //给变量赋值时可以换行
  2. var a=`hello
  3. world`
  4. //输出也保持换行
  5. console.log(a)
  6. //可以配合${ 变量 }来解析变量
  7. var name="小明"
  8. var s=`他的名字是${name}`
  9. console.log(s)
  10. //输出为:他的名字是小明

六、E6_展开运算符

格式: . . . 数组或 . . . 对象(键值对)

作用:把数组或键值对展开(把中括号和大括号去掉)

用途1:合并数组或键值对

  1. //数组合并
  2. var s1=[10,20]
  3. var s2=[30,40]
  4. var s3=[50,60,70]
  5. var s=[...s1,...s2,...s3]
  6. console.log(s)
  7. //输出结果:[10,20,30,40,50,60,70]
  8. //键值对合并
  9. var s1={name:"小明",age:12}
  10. var s2={sex:"男",hight:170}
  11. var s={...s1,...s2}
  12. console.log(s)
  13. //结果:{name: '小明', age: 12, sex: '男', hight: 170}

用途2:给函数传值

  1. //求数组里的最大值
  2. var s=[2,4,5,7,20,4]
  3. var max=Math.max(...s)//如同:max=Math.max(2,4,5,7,20,4)
  4. //结果为:20

七、E6_类语法

格式:

class 类名{

constructor( 形参列表 ){

this.属性名=形参1

this.属性名=形参2

}

//直接写方法就行

方法名( ){ 方法体 }

//静态属性和方法,加一个static

static a=100

static hi( ){ 方法体 }

}

  1. //E6的类
  2. class Person{
  3. constructor(name,age){
  4. this.name=name
  5. this.age=age
  6. }
  7. //方法
  8. sayHi(){ console.log("你好,世界!") }
  9. //静态属性和方法,加一个 static
  10. static a=100
  11. static to()function{ console.log("大家好") }
  12. }
  13. //创建对象
  14. var p1=new Person("小明",20)
  15. //执行方法
  16. p1.sayHi()
  17. //执行静态属性和方法
  18. Person.a
  19. Person.to()

Javascript——ES6( ECMAScript 6.0)语法的更多相关文章

  1. 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)

    ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  2. JavaScript ES6功能概述(ECMAScript 6和ES2015 +)

    JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScr ...

  3. ECMAScript 6.0 简介

    ECMAScript 6.0 在es6中有 许多语法.还有lambda的使用.以及 class 的使用 还有一些新的对象来解决一些事情 可以提高开发效率 但更重要的是 颠覆 javascript 在你 ...

  4. ECMAScript 6.0 简要学习

    由于在学习vue的时候有许多自己不懂的语法,于是简单的学习一下ES6. 1.ES简介 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ...

  5. ECMAScript 6.0基础入门教程

    ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...

  6. JavaScript | ES6 新增

    Evernote Export body, td { font-family: 微软雅黑; font-size: 10pt; } ES6 重点知识 this关键字以及bind let/const 变量 ...

  7. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  8. JavaScript 、ECMAScript、commonJS 发展历史 与标准化发展

    本文介绍下JavaScript和 ECMAScript的诞生及发展历史,以及标准化过程. 一.JavaScript诞生 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版. ...

  9. javascript(一):javascript基本介绍及基本语法

    什么是javascript? javascript是一种直译型脚本语言,是一种动态类型.弱类型.基于原型的语言.(所谓“脚本语言”:指的是它不具有开发操作系统的能力,只是用来编写大型运用程序的脚本!) ...

随机推荐

  1. LuoguP2382 化学分子式 题解

    Description 你的任务是编写一个能处理在虚拟的化学里分子式的程序,具体地说,给定你所有原子的相对原子质量,求出所有询问的分子的相对分子质量,或者报告不存在. 数据范围:原子质量 \(\leq ...

  2. tcping和tcpping工具使用

    tcping和tcpping工具 1.工具使用 1.1.windows版tcping 1.2.linux版tcpping 2.B站问题(linux版本tcpping探测ip,且ip无法解析到主机名) ...

  3. Linux使用docker安装zimg图片服务器

    官方地址:http://zimg.buaa.us/ 配置文件 zimg.lua --zimg server config --server config --是否后台运行 is_daemon = 1 ...

  4. 【linux项目】lichee nano linux烧写

    目录 前言 参考: 安装交叉编译链 搭建 SPI FLASH 烧录环境 让芯片进入烧写模式 sunxi 烧写命令 u-boot 裁剪 拉取 u-boot 源码 配置 u-boot 检查 flash 驱 ...

  5. 【LeetCode】191. Number of 1 Bits 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 右移32次 计算末尾的1的个数 转成二进制统计1的个 ...

  6. 【LeetCode】359. Logger Rate Limiter 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcode ...

  7. 【转】最短路径——Dijkstra算法和Floyd算法

    [转]最短路径--Dijkstra算法和Floyd算法 标签(空格分隔): 算法 本文是转载,原文在:最短路径-Dijkstra算法和Floyd算法 注意:以下代码 只是描述思路,没有测试过!! Di ...

  8. 【LeetCode】82. Remove Duplicates from Sorted List II 解题报告(Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/remove-du ...

  9. 更快的Maven来了,我的天,速度提升了8倍!

    周末被 maven-mvnd 刷屏了,于是我也下载了一个 mvnd 体验了一把.虽然测试的数据都是基于我本地项目,不具备普适性和权威性,但也足以说明问题.它的测试结果远远超出我的预期,下面一起来看. ...

  10. .NET 云原生架构师训练营(ASP .NET Core 整体概念推演)--学习笔记

    演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...