Javascript——ES6( ECMAScript 6.0)语法
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_模板字符串反引号使用
作用:
- 给变量赋值时可以换行
- 可以配合${ 变量 }来解析变量
//给变量赋值时可以换行
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)语法的更多相关文章
- 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)
ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...
- JavaScript ES6功能概述(ECMAScript 6和ES2015 +)
JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScr ...
- ECMAScript 6.0 简介
ECMAScript 6.0 在es6中有 许多语法.还有lambda的使用.以及 class 的使用 还有一些新的对象来解决一些事情 可以提高开发效率 但更重要的是 颠覆 javascript 在你 ...
- ECMAScript 6.0 简要学习
由于在学习vue的时候有许多自己不懂的语法,于是简单的学习一下ES6. 1.ES简介 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ...
- ECMAScript 6.0基础入门教程
ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...
- JavaScript | ES6 新增
Evernote Export body, td { font-family: 微软雅黑; font-size: 10pt; } ES6 重点知识 this关键字以及bind let/const 变量 ...
- [转]JavaScript ES6 class指南
[转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...
- JavaScript 、ECMAScript、commonJS 发展历史 与标准化发展
本文介绍下JavaScript和 ECMAScript的诞生及发展历史,以及标准化过程. 一.JavaScript诞生 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版. ...
- javascript(一):javascript基本介绍及基本语法
什么是javascript? javascript是一种直译型脚本语言,是一种动态类型.弱类型.基于原型的语言.(所谓“脚本语言”:指的是它不具有开发操作系统的能力,只是用来编写大型运用程序的脚本!) ...
随机推荐
- LuoguP2382 化学分子式 题解
Description 你的任务是编写一个能处理在虚拟的化学里分子式的程序,具体地说,给定你所有原子的相对原子质量,求出所有询问的分子的相对分子质量,或者报告不存在. 数据范围:原子质量 \(\leq ...
- tcping和tcpping工具使用
tcping和tcpping工具 1.工具使用 1.1.windows版tcping 1.2.linux版tcpping 2.B站问题(linux版本tcpping探测ip,且ip无法解析到主机名) ...
- Linux使用docker安装zimg图片服务器
官方地址:http://zimg.buaa.us/ 配置文件 zimg.lua --zimg server config --server config --是否后台运行 is_daemon = 1 ...
- 【linux项目】lichee nano linux烧写
目录 前言 参考: 安装交叉编译链 搭建 SPI FLASH 烧录环境 让芯片进入烧写模式 sunxi 烧写命令 u-boot 裁剪 拉取 u-boot 源码 配置 u-boot 检查 flash 驱 ...
- 【LeetCode】191. Number of 1 Bits 解题报告(Java & Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 右移32次 计算末尾的1的个数 转成二进制统计1的个 ...
- 【LeetCode】359. Logger Rate Limiter 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcode ...
- 【转】最短路径——Dijkstra算法和Floyd算法
[转]最短路径--Dijkstra算法和Floyd算法 标签(空格分隔): 算法 本文是转载,原文在:最短路径-Dijkstra算法和Floyd算法 注意:以下代码 只是描述思路,没有测试过!! Di ...
- 【LeetCode】82. Remove Duplicates from Sorted List II 解题报告(Python&C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/remove-du ...
- 更快的Maven来了,我的天,速度提升了8倍!
周末被 maven-mvnd 刷屏了,于是我也下载了一个 mvnd 体验了一把.虽然测试的数据都是基于我本地项目,不具备普适性和权威性,但也足以说明问题.它的测试结果远远超出我的预期,下面一起来看. ...
- .NET 云原生架构师训练营(ASP .NET Core 整体概念推演)--学习笔记
演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...