ECMAScript6 ES6语法

2015年6月份，在es5的基础上扩展了很多新的功能，称为es6/es2015， ES7将在2017年6月份出来。我们要学习的仅仅只是es6中的部分常用新功能，这些功能在使用的时候一定要慎重，因为他们中有一部分js代码在部分浏览器不能兼容，但是所有写在服务器端的代码基本上都支持ES6的写法。

1.0开启严格模式

如何开启：

如果需要在函数中开启，在函数的第一行加上这段字符串”use strict”，如果需要整js代码中开启，在js第一行加上这段字符”use strict”。

;这是es5中的一个特性，设立"严格模式"的目的，主要有以下几个：

"use strict";//开启了严格模式

A.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

B.消除代码运行的一些不安全之处，保证代码运行的安全；

C.提高编译器效率，增加运行速度；

D.为未来新版本的Javascript做好铺垫。

注意：

1）正常模式下可以使用直接使用未声明的变量，但是严格模式不行

//1.0严格模式下变量必须定义以后才能使用name = "jhon";console.log(name);

2）正常模式下可以在一个函数中传入两个同名参数，但是严格模式下不行

//2.0严格模式下方法 不能定义多个同名参数function fn(aa,aa,bb){return aa + aa + bb;}fn("11","22","33");

2.0定义变量：let （类似于var）

在javascript一直有一个bug式的取在var：

1）var声明的变量会有变量提升

console.log(name);//undeinfed
var name = "jhon";

2）var 没有块级作用域

var name = "jhon";
{var name = "tom";
}
console.log(name);//tom
3）var 可以多次重复定义一个变量
var name = "jhon";
var age = 18;
var name = "tom";
var name = "rose";
console.log(name);

这些声明在后台开发语言中是绝对不被允许的，为了规范变量的声明es6推出新的关键字let代替var申明变量，let的特点：

1）let声明的变量不会有变量提升，只有在前面定义了在后面才能使用

console.log(name);//报错
let name = "jhon";

2）let存在块级作用域（当大括号结束时，块级作用域中的变量都会被销毁）

let name = "jhon";
{let name = "tom";
}
console.log(name);//jhon

3）let不能多次重复定义一个变量

let name = "jhon";
let age = 18;
let name = "tom";
console.log(name);

应用小案例：给多个li标签设置点击输入文本内容事件。

注意点：使用let最后加上”use strict”关键字

3.0定义常量const

常量：常量指的是不会改变的数据（Window Linux Unix）

作用：一旦申明一个常量：

1）值不能再改变

"use strict";const banben = "window";
banben = "linux";//会报错

2）常量具有块级作用域

{const banben = "window";
}
console.log(banben);//报错

3）不要在块中申明常量

4）没有变量提升，先声明后使用

console.log(banben);//报错
const banben = "window";

5）不可以算不算申明同名的常量

const banben = "window";
const banben = "linux";//报错

6）一定要赋初始值，否则报错

const banben;
banben = "window";//报错
console.log(banben);

7）如果声明的是对象，对象的地址不能改变，但是可以改变其内部的属性。

const obj = {name: "jhon",age: 18
};
console.log(obj.name);//jhon
obj.name = "tom";
console.log(obj.name);//tom

应用场景：

var path = require('path');
var path = "123";

在nodejs中加载完模块时，模块的指针一般是不会改变的，可以使用常量来接收，可以防止将来在导入模块时多次模块。

const path = require('path');

4.0字符串的扩展：

问题：如果要判断字符串”hello word”中是否存在”word”，用字符串中的方法只有indexOf：

var str = "hello word";var result = str.indexOf("word")console.log(result);//6

在ES6中又为我们提供了其它的方法：

Includes()：返回布尔值，用于判断字符串是否包含某些字符

var bool = str.includes('word');
console.log(bool);//true

startsWith(str[,num])：返回布尔值，用于判断字符串是否以某些字符开头

var bool = str.startsWith("hello");
console.log(bool);//true
//2.1给这个方法传入两个参数var bool = str.startsWith("word",6);console.log(bool);//true

endsWith(str[,num])：返回布尔值，用于判断字符串是否以某些字符结尾

var bool = str.endsWith("d");
console.log(bool);//true
//3.1给这个方法传入两个参数var bool = str.endsWith('o',5);console.log(bool);

repeat(num)：传入一串数字，将来这个方法会将字符串重复数字对应的次数

var str1 = "我爱我家\n";console.log(str1.repeat(10));

注意：

A.传入的数字可以是正小数，那么将来这个数字会被向下取整

console.log(str1.repeat(2.6));

B.不能传入负数，会报错

console.log(str1.repeat(-3));

C.可以传入一个字符串类型的数值

console.log(str1.repeat("12a"));

5.0模板语法：`模板字符串`

问题：通过对象完成一个自我介绍的方法：自我介绍中包含对象的年龄，姓名，性别，爱好，体重。

"use strict";
var obj = {name: "zhuiming",age: 18,sex: "男",hobby: "女",weight: 126,height: 180
};var str = "大家好，我叫" + obj.name + ",今年" + obj.age + ",性别" + obj.sex + ",爱好" +                     obj.hobby +".";console.log(str);

但是字符串的拼接太麻烦了，有没有简单的方法来解决这个问题呢，有的，模板字符串就可以了

结构：`模板内容${code}`;

1)定义一个模板，并且给模板加一些占位，注意占位有自己的格式：${}
var temp = `大家好，我叫${obj.name}，今年${obj.age}，性别${obj.sex}，爱好${obj.hobby}`;
//2)将模板中的一些变量赋值
console.log(temp);

注意：code可以是变量，可以是方法名，还可以是js表达式。

//1.0可以放变量let name = "jhon"let temp1 = `我叫${name}`;console.log(temp1);
//2.0可以放方法function getName(){return "jhon";}let temp2 = `我叫${getName()}`;console.log(temp2);
//3.0可以放表示式
let a = 1;
let b = 2;
let temp3 = `a + b 的和是${a + b}`;
console.log(temp3);

6.0箭头函数:()=>{}

js中使用匿名函数的位置太多了，固定结构为function(){}，为了方便书写，es6规定了一种新的写法来简化匿名函数：去掉function改为=>,结构为()=>{}

//箭头函数的演变规则

//箭头函数的演变规则
var arr = [2,3,5,1,24];
//最原始的匿名函数$(arr).each(function(index,item){console.log(item);});

演变过程：

//改造一：匿名函数中的funtion关键字我们可以省略，参数与方法体之间中=>$(arr).each((index,item)=>{console.log(item);})
//改造二：如果方法体中的代码只有一句我们可以去掉{},并且代码结尾的分号要去掉console.log("_--------------------------------_");$(arr).each((index,item)=>console.log(item));
//改造三：如果匿名函数中的参数只有一个可以将参数的括号去掉$(arr).each(index=>console.log(arr[index]));
//改造四：如果匿名函数中有返回值，并且只有一句代码，我们可以去掉return关键字。$(arr).sort(function(m,n){return n - m;});$(arr).sort((m,n)=>n-m);

总结：

参数特点：

1)参数只有一个，可以去掉()

2)参数多个，不能去掉

3)参数没有，不能去掉

方法体特点：

1)方法体只有一句，可以省略{}

2)方法体只有一句，如果有return，也可以省略return

3)如果有多句代码，不能省略

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

注意：

1）箭头函数中的this指向问题：

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

function aa(){
//this.b=1;
setTimeout(()=>{
//this.b=2;
console.log(this.b);
});
}
aa();

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

function foo(){this.name = "jhon";return ()=>{console.log(this.name);}
}
var fo = foo();//返回的是一个函数对象
foo.name = "tom";
fo();//jhon 说明一旦箭头函数声明完成以后，this指向不会发生改变

3）箭头函数不能作为构造函数：

var foo = function(name,age){this.name = name;this.age = age;
}
var foo = (name,age)=>{this.name = name;this.age =age;
}
var obj = new foo("jhon",18);

4)箭头函数中不存在arguments，箭头函数中的argument指向的是外层的arguments.

function foo(){setTimeout(()=>{console.log(arguments);})
}
foo("aa","bb","cc");//{ '0': 'aa', '1': 'bb', '2': 'cc' }

转载于:https://www.cnblogs.com/jolene/p/6067290.html

ECMAScript6 ES6语法相关推荐

浏览器环境兼容运行ES6语法
亲测可用,若有疑问请私信 ES6语言的普及 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.ES2015 是该语言的一个显著更新,也是自 2009年 ES5 标准确定 ...
李炎恢ECMAScript6 / ES6+(一)
开头这是根据李炎恢老师的视频,把es6走了一遍,这是我根据他的讲义整理成md格式的文档,同时贴有代码运行结果图,以及对他的文档整理成合理的目录方便快速找到相关的知识点,有需要的收藏,第二部分我到时候 ...
JavaScript (11) ES6语法
1. ES6 语法 ECMAScript 6 是继ECMAScript 5 之后发布的JavaScript 语言的新一代标准,加入了很多新的特性和语法,该标准于2015年6月17日发布了正式版本,并被 ...
React使用ES6语法重构组件代码
首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一.下面对于ES6语法重构组件的代码如下: (1)原始代码: <script type="text/ ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
React 项目 -ES6 语法类的继承（10）
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
React项目 --ES6 语法中的class （9）
上一篇的博客中我们介绍了,如何设置React项目的根目录连接地址:https://blog.csdn.net/datouniao1/article/details/119505562 要学习Reac ...
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
javascript创建类方法汇总（包含es6语法）
复制以下代码,使用node xxx.js 即可运行 /*********************************** * 使用class关键字定义类(ES6 语法) ************ ...

ECMAScript6 ES6语法

ECMAScript6 ES6语法相关推荐

最新文章

热门文章