ES6基本语法入门
一、用let代替var声明变量
ES5中,我们可以在代码中任意位置声明变量,甚至可以重写已经声明的变量,ES6引入了一个let关键字,它是新的var。
let language = 'javascript';
let language = 'zj'; //此处会报错
console.log(language);
因为同一作用域中let已经声明过了,所以再次声明会报错
二、常量
ES6还引入了const关键字,和let用法一样,唯一的区别就是,const变量是只读的
三、模板字符串拼接
用反引号拼接字符串
let language = 'javascript';
console.log(language); let lan = `此处写字符串 ${language}`;
console.log(lan) //此处写字符串 javascript
只要把变量写在${}里面就好了;模板字符串也可以识别空格,可可以用于多行的字符串,再也不用写\n了。
四、箭头函数
let circle = (x) => {
const PI = 3.14;
let area = PI * r * r;
return area;
}
可以省略掉关键字function,如果函数只有一条语句,可以连关键字都省略掉
let circle2 = (x) => 3.14 * r * r;
五、函数参数的默认值
let sum = (x = 1, y = 2, z = 3) => x + y + z;
console.log(sum());
可以声明函数参数的默认值
六、声明展开和剩余参数
ES6展开操作符 ...
let params = [1,2,3];
console.log(...params); //1 2 3 let pro = {
one:0,
two:1,
three:2,
};
console.log({...pro}); //{ one: 0, two: 1, three: 2 }
七、数组解构
var [a, b] = ['x', 'y'];
以上代码和下面的代码效果是一样的
a = 'x';
b = 'y';
数组解构也可以进行值的互换
[x, y] = [y, x];
八、使用面向对象biancheng
//ES5语法
function Book (title, page, isbn) {
this.title = title;
this.page = page;
this.isbn = isbn;
}
Book.prototype.printTitle = function () {
console.log(this.title);
};
//ES6语法
class Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
}
ES6只需要使用class关键字,声明一个有constructor函数和诸如printIsbn等其他函数的类;
我们可以用extends扩展一个类并继承它的行为
//ES6语法
class ITDesk extends Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
} }
更多es6细节请看: http://es6.ruanyifeng.com/#docs/array
ES6基本语法入门的更多相关文章
- ES6入门五:箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- ES6常用语法简介import export
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
- Vue小白篇 - ES6的语法
为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...
- 14 微服务电商【黑马乐优商城】:day04-ES6语法入门
day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) :day02-springcloud(理论篇二) :day ...
- [独孤九剑]持续集成实践(二)– MSBuild语法入门
本系列文章包含: [独孤九剑]持续集成实践(一)- 引子 [独孤九剑]持续集成实践(二)– MSBuild语法入门 [独孤九剑]持续集成实践(三)- Jenkins安装与配置(Jenkins+MSBu ...
- ES6常用语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- ES6新语法
ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...
- Java基础语法入门01
Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...
随机推荐
- JavaScript之基本概念(二)
今天主要介绍两个东西:JS标识符和数据类型 一 变量和常量 在介绍标识符之前有必要先了解一下JS中的变量和常量. 变量:程序执行期间可操作的临时存储数据的内存空间. 声明方式: var:函数作用域,变 ...
- 【linux】【tomcat】tomcat8.5安装
系统环境:Centos7 1.下载tomcat8.5 wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8/v8.5.45/b ...
- 理解Vue.mixin,带你正确的偷懒
关于Vue.mixin在vue官方文档中是这么解释的: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有 ...
- [python]OS文件系统
1.getcwdd() 获得应用程序当前的工作目录 #getcwd() 获取应用程序当前的工作目录 import os print(os.getcwd()) 2.chdir(path) 改变当前工作目 ...
- gym102201E_Eat Economically
题意 给\(2n\)个物品,分别有\(a,b\)属性,对于\(i=1...n\),选择\(i\)个\(a\)属性和\(i\)个\(b\)属性,且每个物品只能作为一种属性的贡献,求最小的值. 分析 看了 ...
- html标签和css基础语法与浏览器兼容性等相关基础学习
<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...
- 读取unicode日志文件并清除记录的垃圾文件
//读取unicode文件,并清除记录的垃圾文件 //参数1:日志文件路径 bool ReadFilePath(const wchar_t *DataFilePath) { wchar_t ChBuf ...
- 正睿OI国庆DAY2:图论专题
正睿OI国庆DAY2:图论专题 dfs/例题 判断无向图之间是否存在至少三条点不相交的简单路径 一个想法是最大流(后来说可以做,但是是多项式时间做法 旁边GavinZheng神仙在谈最小生成树 陈主力 ...
- 从React-Native坑中爬出,我记下了这些
吐槽 如果React-Native是个人,我估计已经想要打死他了... 上一篇文章 当React开发者初次走进React-Native的世界 前言 最近因为业务需要,做了一些关于React-Nativ ...
- [Note] Clipboard.js 使用
clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素 据作者说,由于浏览器相关安全策略的缘故,无法使用下面这种方式来设置剪切板 clipboard.co ...