ES6 基本语法
ECMAScript 6 简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMA:国际标准组织
let 和 const 命令
ES6 新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
上面代码在代码块之中,分别用let
和var
声明了两个变量。然后在代码块之外调用这两个变量,结果let
声明的变量报错,var
声明的变量返回了正确的值。这表明,let
声明的变量只在它所在的代码块有效。
const
声明一个只读的常量。一旦声明,常量的值就不能改变。
const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
本质
const
实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const
只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
模板字符串
<script> var name = '小明', age = '83'; // var str = name+"今年"+age+",下午我们去吃鸡"; var str = `${name}今年${age},下午我们去吃鸡`; alert(str) </script>
箭头函数
伪代码: function 函数名(){} === var 函数名 = ()=>{}
<script> // es5 写法 function add1(x,y) { return x+y } alert(add1(1,2)); // es6 箭头函数 var add2 = (a,b)=>{ return a+b } alert(add2(2,3)); </script>
字面量方式创建对象以及对象的单体模式
<script> var person = { name:'小明', age:18, fav:function() { // es5的函数中的this指向了当前对象 alert(this.name) } }; person.fav() // 小明 </script> <script> var person2 = { name: '小明2', age: 18, fav: () => { // es6注意事项:箭头函数会改变this的指向 父级 alert(this) } } person2.fav() // [object Window] </script> <script> //对象的单体模式 // 使用对象的单体模式解决了this的指向问题 var person = { name: '小明', age: 18, fav() { alert(this.name) } } person.fav() // 小明 </script>
es6中的面向对象
es6使用class 类方式创建
<script> class Cat{ // constuctor 构造器 class方式创建 单体模式之间不要有逗号 constructor(name,age){ this.name = name; this.age = age } showName(){ console.log(this.name) } showAge(){ console.log(this.age) } } var c = new Cat('xiaohong',12) c.showName() </script>
阮一峰的es6教程:http://es6.ruanyifeng.com/#docs/intro
ES6 基本语法的更多相关文章
- 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号技术专家委 ...
- ES6新语法的介绍
对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring
- ES6最新语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- ES6新语法之let关键字;有别于传统关键字var的使用
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
- 让 Node.js 支持 ES6 的语法
为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- JavaScript ES6部分语法
ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且vue组件开 ...
- ES6常用语法简介import export
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
随机推荐
- ES6之Array数组
定义数组 ,]; const arr = new Array(1,2,3,4); const array1 = new Array(); array1[]="test"; 给数组不 ...
- yii框架通过http协议获取地址栏中的内容
//创建一个控制器 <?php namespace frontend\controllers; use frontend\models\Zhuce; use Yii; use yii\web\C ...
- Andorid Studio中运行模拟器--夜神模拟器
这样可以直接在夜神模拟器上运行app然后在androidstudio上查看log…. 1.下载夜神模拟器 2.修改配置 点击右上角的设置图标,对夜神模拟器的分辨率进行选择,手机版的480×800的就差 ...
- 使用mint-ui中弹框组件与原生弹框阻止父页面不滑动方法
1,使用mint-ui框架中<mt-popup></mt-popup>,在组件中加入 lockScroll="true" 阻止父页面不滑动. 2,原生弹框中 ...
- 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...
- Oracle判断周末
有些业务场景下会有择出周末的需求,具体判断语句如下: 1.SELECT TO_CHAR(TO_DATE(DATA_DATE,'YYYY-MM-DD),'D') FROM DUAL; 如果DATA_DA ...
- Win10系列:C#应用控件进阶1
线形 线形没有内部空间,若要呈现一条直线,需要用Line对象的Stroke和StrokeThickness 属性分别为其轮廓的颜色及轮廓的粗细赋值,若不设置这两个属性,线形将不会呈现.绘制一条线形图形 ...
- 使用IntelliJ IDEA开发java web
前言:由于本人接触java语言时间还比较短,IDE工具eclipse还比较熟悉点,想试试用IntelliJ IDEA来开发java web项目来练练手! 一.下载安装篇 1.安装IntelliJ ID ...
- jar 包启动
java -Xms256m -Xmx512m -Xmn256m -jar /home/apps/video/video.jar --spring.profiles.active=test #!/bin ...
- Master-Worker设计模式介绍
Master-Worker模式是常用的并行设计模式.核心思想是,系统由两个角色组成,Master和Worker,Master负责接收和分配任务,Worker负责处理子任务.任务处理过程中,Master ...