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. Landsat 现有 Analysis Ready Data (ARD) 数据介绍

    Global Web-Enabled Landsat Data (GWELD)[1] NASA 原先的 Web-Enabled Landsat Data Conterminous U.S. Seaso ...

  2. LuoguP6857 梦中梦与不再有梦 题解

    Update \(\texttt{2020.10.20}\) 增加了证明.感谢@东北小蟹蟹(dbxxxqwq)的提醒. Content 有一个 \(n\) 个点的无向图,每两个点之间都有一条边直接相连 ...

  3. flink启动报错:java.lang.NoSuchMethodError: org.apache.flink.api.java.ClosureCleaner.clean(Ljava/lang/Object;Z)V

    这是因为pom文件引入的flink相关依赖设置成了provided 作用域 要嘛把这个去掉 但是如果是IDEA的话 可以更简单的操作 把这个打勾保存 接着重新启动main方法即可

  4. 【LeetCode】1171. Remove Zero Sum Consecutive Nodes from Linked List 解题报告 (C++)

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

  5. 【LeetCode】295. Find Median from Data Stream 解题报告(C++)

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

  6. 【LeetCode】81. Search in Rotated Sorted Array II 解题报告(Python)

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

  7. 【LeetCode】46. Permutations 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 方法一:库函数 方法二:递归 方法三:回溯法 日期 题目地址:h ...

  8. python学习第三天:python基础(数据类型和变量)

    注释 以  # 开头的语句是注释,如,注释不会被编译运行: 格式 当语句以冒号:结尾时,缩进的语句视为代码块.按照约定俗成的管理,应该始终坚持使用4个空格的缩进(在文本编辑器中,需要设置把Tab自动转 ...

  9. 对XSS的插入的新了解,灵感来自天驿安全

    此次针对的是通过Get请求进行插入的XSS语句,或者dom型的xss,也算是了解到的新的插入方式 首先,JavaScript语言中存在拼接性 可以通过代审后闭合前置语句进行self测试是否可以拼接 s ...

  10. [炼丹术]使用Pytorch搭建模型的步骤及教程

    使用Pytorch搭建模型的步骤及教程 我们知道,模型有一个特定的生命周期,了解这个为数据集建模和理解 PyTorch API 提供了指导方向.我们可以根据生命周期的每一个步骤进行设计和优化,同时更加 ...