参考资料:es6.ruanyifeng.com
https://www.cnblogs.com/Wayou/p/es6_new_features.html
2018/1/17
1. 默认参数
在C#中一般可以通过置顶void的默认值来定义可选参数和默认值
public void test(param="test"){ }
即test()方法可以不传递参数,如果不传递param则默认值为"test".
在之前的js中,参数一直都是可以不传的,但是没有办法直接设定默认值。如果要实现参数默认值则需要如下代码
var test = function(param1){ param1 = param1||"test"; console.log("param1="+param1); }test();//输出结果:param1=test
ES6中,js的function也可以像C#一样直接在定义参数时声明默认值。
var test = function(param1="test"){ console.log("param1="+param1); }test();//输出结果:param1=test
2. 模版字符串
同样在C#中可以使用${}来连接字符串和变量,在ES6之前的js不行,只能用+连接。
在ES6中可以可以用反单引号和${}把变量拼接到字符串内。
var str1="test";var str2= "测试"+str1; //ES5拼接var str3= `测试${str1}`; //ES6 模版语法${} 注意要用``反引号,tab键上边那个~键console.log(str2); //输出"测试test"console.log(str3);//输出"测试test"
3.多行字符串
在拼接多行字符串的时候,ES6之前只能拼接字符串 or 用续行符'\'实现。在ES6中可以反引号内直接写多行字符串
//ES5 拼接var str1="test1";str1+="test2";//ES5 续航符\var str2 = "test1\test2";//ES6 反引号`var str3= `test1test2`;console.log(str1);//输出"test1test2"console.log(str2);//输出"test1test2" 保留换行和空格console.log(str3);//输出"test1test2" 保留换行和空格
2018/1/18
解构
ES6中js允许使用类似数组和对象的语法 对应数组和对象中的值,并且允许跳过某些值(如demo2)。
//demo1 返回数组var test = function(){ return ["test1","test2"]; }var [a,b]= test();console.log(`a的值为${a},b的值为${b}`);//输出 "a的值为test1,b的值为test2"//demo2 解构一个数组var demoArr=[1,2,3];var [test1, ,test3]=demoArr;console.log(`test1的值为${test1},test3的值为${test3}`);//test1的值为1,test3的值为3//demo3 解构一个对象var demoObj = {test1:"test1",test2:"test2"};var { a: test1,b:test2 }=demoObj console.log(`a的值为${a},b的值为${b}`);//输出"a的值为test1,b的值为test2"//demo3 解构一个对象简写 如果赋值的属性名和对象名一致,可简写var demoObj={test1:"test1",test2:"test2"};var {test1, test2}=demoObj;//demo4 尝试用数组方式解构一个对象的值 var demoObj={test1:"test1",test2:"test2"};var [test1, test2]=demoObj;console.log(`test1的值为${test1},test2的值为${test2}`);//demoObj is not iterable//demo5尝试解构对象里一个未定义的值,报undefined var { a } = {}; console.log(a); // undefined//demo6 尝试解构nullvar {a} = null;console.log(a);//报错 TypeError: null has no properties(null没有属性)//demo7 尝试解构其他特殊类型 布尔值、数值、字符串,都会返undefinedvar {a} = NaN;console.log(a);//undefinedvar {b}="stringStr";console.log(b);//undefinedvar {c}=true;console.log(c);//undefined
2018/1/19
const和let
let就是块级作用域,只在当前作用域内有效。在for循环中使用很方便。
for (let i=0;i<2;i++){ console.log(i)}
在for循环结束后i变量即被销毁。
const是常量,类似各种后端语言的常量,定义以后不能被改变。
2018/1/23
箭头函数
这个在后端的表达式中应用已经非常频繁了。。好在es6中也支持了这种写法。
就是之前的function(){} 改成了()=>{} 省略了function关键字。
展示几个常见的用法。
/** *点击事件 *///es5$("#id").click(function(){ console.log("es5");});//es6$("#id").click(() => console.log("es6"));//只有一句话执行语句的的话可以省略{}括号/** *遍历和循环 *///ES5data.length && data.forEach(function(item){ strHtml += "" strHtml +=""+item.name+""; strHtml +=""+item.age+""; strHtml +=""+item.address+""; strHtml +=""})//ES6data.length && data.forEach(item => { strHtml += ` ${item.name} ${item.age} ${item.address} `});
箭头函数实际中常见的用处并不只是写起来简便、可读性好 这点好处。有一个很重要的用处是不会改变this的指向。
ES6之前,如果在点击事件里想引用外部的this,只能通过外部一个变量保存this才可以。
window.page = function () { this.val = 1, this.arr = ["数组value1"], this.getVal = function () { var that = this; this.arr.forEach(function(item){ console.log(this); console.log(that); console.log(that.val); console.log(this.val); }) } } var p = new page(); p.getVal();
ES6使用箭头函数
window.page = function () { this.val = 1, this.arr = ["数组value1"], this.getVal = function () { var that = this; this.arr.forEach(item=>{ console.log(this);//window.page console.log(that);//window.page console.log(that.val);//1 console.log(this.val);//1 }) } } var p = new page(); p.getVal();
可以看到使用箭头函数,this的指向没有被改变。在使用箭头函数处,this和that都指向window.page对象