ES6 的新增特性以及简单语法 

  • let 和 const
  • 模板字符串
  • 箭头函数
  • 对象单体模式
  • es6面向对象
  • 模块化

 let 和 const

  之前一直用 var 来声明变量,ES6 新增 let 和 const

script type="text/javascript">

    // let声明变量块级作用域,不能重复声明
// let声明的变量 是块级作用域,不能重复声明
// {
// // let a = 12;
// let a = 12;
// let a = 13;
// } // console.log(a);    // var 的坑 ,循环的时候会按照最后一次的赋值
// var a = [];
// for (var i = 0; i < 10; i++) { //这里的 var i 换成 let i 即可解决
// a[i] = function () {
// console.log(i);
// };
// }
// a[6](); // var 10 ,let 6 // var 会发生变量提升
console.log(foo); // 输出undefined
var foo = 2;
// let 不发生变量提升
console.log(foo); // 报错 ReferenceError
let foo = 2; // const 声明常量,一旦声明,立即初始化,不能重复声明。
const foo; // 没立即赋值,会报错
// const 声明是只读常量,不可更改
const P = 1
P = 2 // 报错无法更改
</script>

模板字符串

  更加的简单的拼接字符串 用 ${} 来填入

<script>
var a = 1;
var b = 2; // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
// ` xxx${}xxxx${}xxx` 注意反引号
var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
console.log(str);
</script>

 箭头函数

  操作更加简单了,但是改变了特性造成了不便

<script>
// function(){} --等同于--- ()=>{} // 1.this的指向发生改变,指向了定义对象时的对象
// function(){} 的时候相当于 self
// ()=>{} 的时候相当于 windows对象
// 2.arguments不能使用,无法再通过 arguments 拿所有的参数
    var person = {
name:'张三',
age: 18, fav:()=>{
            console.log(this);     // windows
            console.log(arguments); // 报错不存在
            }
          }
          person.fav();
</script>

 对象单体模式

  为了解决箭头函数的问题

  (){} 完全等同于 function(){} 不再有上面的困扰了

<script>
var person = {
name:'张三',
age: 18, fav(){
console.log(this);
console.log(arguments);
}
}
person.fav();
</script>

 ES6的面向对象

<script>
// 构造函数的方式创建对象
// function Animal(name,age){
// this.name = name;
// this.age = age; // }
// Animal.prototype.showName = function(){
// console.log(this.name);
// }
// Animal.prototype.showName2 = function(){
// console.log(this.name);
// }
// Animal.prototype.showName3 = function(){
// console.log(this.name);
// }
// Animal.prototype.showName4 = function(){
// console.log(this.name);
// }
// var dog = new Animal('日天',18) class Animal{
constructor(name,age){ // 必须要 constructor 初始化属性 类似于 init
this.name = name;
this.age = age;
} // 这一行一定不要加逗号
showName(){
console.log(this.name)
}
}
var d = new Animal('张三',19);
d.showName();
</script>

10.1 ES6 的新增特性以及简单语法的更多相关文章

  1. hive 0.10 0.11新增特性综述

    我们的hive版本升迁经历了0.7.1 -> 0.8.1 -> 0.9.0,并且线上shark所依赖的hive版本也停留在0.9.0上,在这些版本上有我们自己的bug fix patch和 ...

  2. ES6/ES2015的一些特性的简单使

    1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...

  3. ES6(函数新增特性)

    ES6(函数新增特性) 1.函数参数默认值 没有 y 时,默认就是world 有 y 时,输出值即可 (错误) (C有默认值,正确) 默认值后面不能再有没有默认值的变量 2.作用域 y 取其前面的 x ...

  4. Java SE 10 新增特性

    Java SE 10 新增特性 作者:Grey 原文地址:Java SE 10 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new ...

  5. ES6相关新特性介绍

    你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...

  6. ES6常用新特性

    https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...

  7. ES6 && ECMAScript2015 新特性

      ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...

  8. 前端开发者不得不知的es6十大特性(转)

    转载自AlloyTeam:http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten ...

  9. 前端开发者不得不知的ES6十大特性

    前端开发者不得不知的ES6十大特性 转载 作者:AlloyTeam 链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will- ...

随机推荐

  1. Android 通过反射获取DatePicker 中的控件,并改变其颜色

    到最后也只是成功改变了中间部分的颜色. private void setDatePickerDividerColor(DatePicker datePicker) { // Divider chang ...

  2. Docker for Win10中文乱码问题

    environment:win10  docker+centos7+nginx1.9.9 issue:在docker运行nginx(centos),volume本地html目录挂载到nginx的htm ...

  3. 记一次与iframe之间的抗争

    iframe这个标签之前了解过这个东西,知道它可以引入外来的网页,但是实际开发中没有用到过.这一次有一个需求是说准备要在网页中嵌套另外一个网站,用iframe这个标签,让我测试一下这个可不可以在自己的 ...

  4. [20190415]11g下那些latch是共享的.txt

    [20190415]11g下那些latch是共享的.txt http://andreynikolaev.wordpress.com/2010/11/23/shared-latches-by-oracl ...

  5. 微信小程序发红包

    背景: 近期一个朋友公司要做活动,活动放在小程序上.小程序开发倒是不难,不过要使用小程序给微信用户发红包,这个就有点麻烦 确定模式: 小程序目前没有发红包接口,要实现的话,只能是模拟红包,即小程序上做 ...

  6. c/c++ 多线程 std::lock

    多线程 std::lock 当要同时操作2个对象时,就需要同时锁定这2个对象,而不是先锁定一个,然后再锁定另一个.同时锁定多个对象的方法:std::lock(对象1.锁,对象2.锁...) 额外说明: ...

  7. 【Python 24】52周存钱挑战4.0(函数)

    1.案例描述 按照52周存钱法,存钱人必须在一年52周内,每周递存10元.例如,第一周存10元,第二周存20元,第三周存30元,直到第52周存520元. 记录52周后能存多少钱?即10+20+30+. ...

  8. SkylineGlobe7.0.1版本 通过鼠标左右平移模型对象

    帮同事写了一段测试代码,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  9. windows 下mysq安装之后的数据恢复案例

    1.进入mysql的安装目录 cd C:\Java\mysql--winx64\bin 2.以默认的账号root,无密码登录mysql默认数据库 mysql -u root mysql 3.查询表us ...

  10. vs2015第二次装安装不能选择路径问题解决方法

    vs2015卸载后注册表还会存在vs2015的信息,下次安装的时候会读注册表里面记录的路径,不能自己选择路径. 解决方法: 1.在vs安装文件的路径打开命令,shift+鼠标右键 2.输入命令:cn_ ...