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是一种直译型脚本语言,是一种动态类型.弱类型.基于原型的语言.(所谓“脚本语言”:指的是它不具有开发操作系统的能力,只是用来编写大型运用程序的脚本!) ...
随机推荐
- iNeuOS工业互联网操作系统,发布3.6.4版本:云端安全控制和实时日志功能,附Chrome、Firefox和Edge浏览器测试性能对比
目 录 1. 概述... 2 2. 平台演示... 2 3. 云端控制和实时日志设计和技术... 2 4. 实时日志测试... 2 1. 概述 ...
- 【大咖直播】Elastic 企业搜索实战工作坊(第二期)
借助 App Search 提供的内置功能,您可轻松打造卓越的搜索体验.直观的相关度调整以及开箱即用的搜索分析,不仅可以优化所提供的内容,其提供的 API 还可帮助您将位于各处的所有内容源关联在一起. ...
- 分布式文件系统fastdfs安装以及python调用
fastfds的安装和使用 一.所需依赖 操作系统:centos7.x(注意的是centos使用yum安装相关依赖) fastdfs:V6.06.tar.gz libfastcommon:V1.0.4 ...
- 复杂SQL案例:用户授权渠道查询
供参考: SELECT r.course_id 课程id, r.user_id 用户ID, u.user_full_name 姓名, u.province_name 省名, u.city_name 城 ...
- 【LeetCode】1006. Clumsy Factorial 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 直接eval 日期 题目地址:https://lee ...
- 【LeetCode】472. Concatenated Words 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetc ...
- light oj 1100 - Again Array Queries(暴力,鸽巢原理)
http://lightoj.com/volume_showproblem.php?problem=1100 刚一看到这题,要询问这么多次,线段树吧,想多了哈哈,根本没法用线段树做. 然后看看数据范围 ...
- Git reflog 引用日志使用详解
本章节主要介绍 git reflog 命令. Git 使用一种称为引用日志或"reflogs"的机制来跟踪分支顶端的更新. 许多 Git 命令接受用于指定引用或"ref& ...
- js处理复杂数据格式数组嵌套对象,对象嵌套数组,reduce处理数据格式
let list=[ {id:1,name:'a'}, {id:1,name:'b'}, {id:1,name:'c'}, {id:2,name:'A'}, {id:2,name:'B'}, {id: ...
- CH7511|LT7211|PS8625替代方案 CS5211 设计EDP转LVDS优势方案原理图+PCB板设计
CH7511|LT7211|PS8625这三款都是专门用于设计EDP转LVDS转接板或者屏转换方案板,CH7511.LT7211.PS8625目前这几款都是出于缺货状态,台湾瑞奇达Capstone 新 ...