ES6( ECMAScript 6.0)语法

一、let/const与var的区别

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

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

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

二、箭头函数

1.普通函数

//xxx.onclick=function(a=10,b=20){ }  可以为函数设置默认值,没传参数就用默认值

xxx.onclick=function(){ }
var xxx={fn:function(){} }
xxx.forEach(function(){})
setTimeout(function(){})
var xxx=function(){}

2.箭头函数

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

xxx.onclick=()=>{ }
var xxx={fn:()=>{} }
xxx.forEach(()=>{})
setTimeout(()=>{})
var xxx=()=>{}

三、结构赋值

1.以前数组

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

2.解构赋值

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

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

1.以前获取对象

let obj={
name:"小明"
age:20
} let name=obj.nam
let age=obj.nam

2.解构赋值

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

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

作用:

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

六、E6_展开运算符

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

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

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

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

用途2:给函数传值

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

七、E6_类语法

格式:

class 类名{

constructor( 形参列表 ){

this.属性名=形参1

this.属性名=形参2

}

//直接写方法就行

方法名( ){ 方法体 }

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

static a=100

static hi( ){ 方法体 }

}

//E6的类
class Person{
constructor(name,age){
this.name=name
this.age=age
}
//方法
sayHi(){ console.log("你好,世界!") } //静态属性和方法,加一个 static
static a=100
static to()function{ console.log("大家好") } } //创建对象
var p1=new Person("小明",20)
//执行方法
p1.sayHi() //执行静态属性和方法
Person.a
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. CF749B Parallelogram is Back 题解

    Content 给出平行四边形的三个顶点 \((x_1,y_1),(x_2,y_2),(x_3,y_3)\),求出所有可能的第四个顶点. 数据范围:\(\forall i\in[1,3],-1000\ ...

  2. CF1454A Special Permutation 题解

    Content 给定一个整数 \(n\),请构造出一个长度为 \(n\) 的排列 \(\{a_i\}_{i=1}^n\),使得对于每个 \(a_i\),都有 \(a_i\neq i\). 我们称一个长 ...

  3. npm 包发布,自己本机发布,前端内部发布,全网发布

    第一步,安装 sinopia npm install -g sinopia 开启终端一: 第二步,启动 sinopia -l 127.0.0.1:4873 开启终端二: cd 到某个指定仓库 mkdi ...

  4. 『学了就忘』Linux日志管理 — 92、日志轮替

    目录 1.日志文件的命名规则 2.logrotate配置文件说明 3.logrotate配置文件的主要参数 1.日志文件的命名规则 日志轮替最主要的作用就是把旧的日志文件移动并改名,同时建立新的空日志 ...

  5. 报错:cannot access com.google.protobuf.GeneratedMessageV3

    引入依赖 <dependency> <groupId>com.google.protobuf</groupId> <artifactId>protobu ...

  6. js(JQuery)引入select2

    官方项目地址:https://select2.org/ 引入css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/sele ...

  7. Qt5读取系统环境变量和获取指定目录下的所有文件夹绝对路径

    头文件 /// 读取环境变量使用 #include <QProcessEnvironment> /// 遍历文件夹使用 #include <QDir> 核心代码 一个例子, 输 ...

  8. 【LeetCode】1023. Binary String With Substrings Representing 1 To N 解题报告(Python)

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

  9. leetcode 761. Special Binary String

    761. Special Binary String 题意: 一个符合以下两个要求的二进制串: \(1.串中包含的1和0的个数是相等的.\) \(2.二进制串的所有前缀中1的个数不少于0的个数\) 被 ...

  10. 【LeetCode】503. Next Greater Element II 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力解法 单调递减栈 日期 题目地址:https:/ ...