ES6/ES2015,,在ES5的基础上扩展了很多新的功能,在使用的时候要慎重,因为有一部分js代码在部分浏览器是不兼容的,但是所有写在服务器端的代码基本上都支持ES6的写法.

新特性:

一.开启严格模式

在函数的第一行加上"use strict"字符串,如果需要整个js代码中开启,就在js第一行加上这一段字符.

设置"严格模式"的目的,主要有:

  • 清除javascript语法的一些不合理,不严谨之处,减少怪异行为
  • 清楚代码运行的一些不安全之处,保证代码运行的安全.
  • 提高编译效率,增加运行速度
  • 为未来新版本的javascript做好铺垫.

注意:

在正常模式下可以直接使用为未声明的变量 严格模式不行

name="jhon";
console.log(name);
//输出jhon

在正常模式下一个方法可以有很多个同名参数 严格模式不行

function fn(aa,aa,bb){
return aa+aa+bb;
}
console.log(fn("11","22","33"));
//输出222233

二.定义变量使用let(类似var)

javascript中的var:

  • var声明的变量会有变量提升
  • var没有块级作用域
  • var可以多次重复定义一个变量

这些声明在后天开发语言是不允许的,为了规范变量的声明ES6退出了新的关键字let代替var的声明变量.

let的特点:

  • let声明的变量不会有变量提升
  • let存在块级作用域
  • let不能多次重复定义变量

三.定义常量const

常量是指不会改变的数据.

常量const的特点:

  • 值不能再改变
  • 常量具有块级作用域
  • 不要在块级作用域中声明常量
  • 没有变量提升,要先声明后使用
  • 不可以声明同名的常量
  • 一定要赋初始值,否则会报错
  • 如果声明的是常量是一个对象,只要对象的地址不改变,其内部的属性可以改变

四.字符串的扩展

如果要判断字符串”hello word”中是否存在”word”,用字符串中的方法只有indexOf,在ES6中又为我们提供了其它的方法:

  • includes()->返回布尔值,用于判字符串是否包含某些字符串
  • startsWith()->返回布尔值,用于判断字符串是否以某些字符开头
  • endWith()->返回布尔值,用于判断字符串是否以缪谢字符结尾.有两个参数(字符串,数值)->("o",3)用于判断下标3的字符串是否是"0".
  • repeat()->传入一个数字,将字符串重复数字对应的次数返回.

注意:传入的是正小数,数字会被向下取整;传入字符串类型的数值("5"),可以,传入("5a")不可以当空处理;不能传入负数.

五.模块语法:"模块字符串"

结构:`模板内容${code}`

注意:code可以是变量,方法名,js表达式

 //变量
let name='jack';
let temp=`我叫${name}`;
//temp==>我叫jack //表达式
let a=1;
let b=1;
let temp=`a+b的和是$(a+b)`;
//temp==>2 //方法
function getName(){
return 'jack';
}
let temp=`我叫${getName()}`;
//temp==>jack

六.箭头函数 0=>{}

为了方便书写,es6规定了一种新的写法来简化匿名函数:去掉function改为=>,结构为()=>{}

过程一:去掉function关键字

arr.each(function(m,n){
              console.log(n)

});

得到:arr.each((m,n)=>{console.log(n);});

过程二:如果只有一句代码可以去掉大括号和return关键字

得到: arr.each((m,n)=>console.log(n));

过程三:如果参数只一个,可以将参数中的小括号去掉。

得到: arr.each(n=>console.log(n))

过程四:如果代码只有一句,并且代码中return,可以去掉return.

得到: arr.sort((n,m)=>n-m);

注意:箭头函数没有固定的写法,它是根据当前方法的参数和方法的返回值来的

箭头函数中this指向问题:

  • 箭头函数没有自己的this,函数体内部写的this,会顺着作用域去找最近真实存在的this。

  • 箭头函数内部的this是定义时所在的对象,而不是使用时所在的对象,并且不会改变。

  • 箭头函数不能作为构造函数
  • 箭头函数中不存在arguments,箭头函数中的argument指向的是外层的arguments.

未完,待续...

ECMAscript6(ES6)新特性语法总结(一)的更多相关文章

  1. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  2. 浅谈ES6新特性

    ES6的了解 新增模板字符串(为JavaScript提供了简单的字符串插值功能).箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs.).for-o ...

  3. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  4. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  5. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  6. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  7. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  8. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  9. ES6新特性概览1

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

随机推荐

  1. w3schools juerymobile

    http://www.w3schools.com/jquerymobile/jquerymobile_examples.asp <!DOCTYPE html> <html> & ...

  2. eclipse中使用git下载项目

    准备工作: 目的:从远程仓库github上down所需的项目 eclipse使用git插件下载github上项目 eclipse版本:eclipse4.5  64位 jdk版本:jdk-1.7 64位 ...

  3. css实现高度垂直居中

    1:单行文字垂直居中: 如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可. 如:<div style="height:25px;lin ...

  4. Missing artifact jdk.tools:jdk.tools:jar:1.6

    今天从svn上面下载了一个mavan项目,出现Missing artifact jdk.tools:jdk.tools:jar:1.6 这个错误. 怎么解决了,在我的根pom.xml 下加入这个依赖就 ...

  5. php 设置虚拟目录

    php 设置虚拟目录两个步骤,很简单. 第一,打开安装apache目录下的conf下面的httpd.conf文件.   找到IfModule 标记, 再它下面添加红色方框中的内容.注意不能少东西.   ...

  6. 浅谈移动优先的跨终端Web 解决方案

    1.基准 我们定义测试基准和开发基准,也就是说我们定义我们在哪些浏览器上去进行调试. 左侧图主要是定义PC上的基准,其中A级项目中必须支持,B级可选,C级观察. 2.检测 主要是终端检测 这是一张架构 ...

  7. HCNA配置浮动静态路由

    1.拓扑图 2.配置IP R1 Please press enter to start cmd line! ############ <Huawei> Dec ::-: Huawei %% ...

  8. php 调用微信虚拟支付

    摘要:小游戏对接微信虚拟支付,需要自己的后台调用微信的虚拟支付接口,微信的文档实在烂,总结走过的坑. 1.报错{errcode:90007,errmsg:invalid openid} 无效的open ...

  9. 笨办法学Python(三十四)

    习题 34: 访问列表的元素 列表的用处很大,但只有你能访问里边的内容时它才能发挥出作用来.你已经学会了按顺序读出列表的内容,但如果你要得到第 5 个元素该怎么办呢?你需要知道如何访问列表中的元素.访 ...

  10. API:什么是API?API与interface的区别

    我们都知道,API就是接口,那是什么鬼呢? 1.什么是API? api接口开发,其实和平时开发逻辑差不多:但是也有略微差异: 平时使用mvc开发网站的思路一般是都 由控制器 去 调用模型,模型返回数据 ...