博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
每天一个ES6新特性
阅读量:5764 次
发布时间:2019-06-18

本文共 4009 字,大约阅读时间需要 13 分钟。

hot3.png

参考资料: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();

180259_hKMl_2680178.png

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();

180327_MoHL_2680178.png

可以看到使用箭头函数,this的指向没有被改变。在使用箭头函数处,this和that都指向window.page对象

转载于:https://my.oschina.net/CrazyBoy1024/blog/1608231

你可能感兴趣的文章
Google发布Puppeteer 1.0
查看>>
.NET开源现状
查看>>
可替换元素和非可替换元素
查看>>
2016/08/25 The Secret Assumption of Agile
查看>>
(Portal 开发读书笔记)Portlet间交互-PortletSession
查看>>
搭建vsftpd服务器,使用匿名账户登入
查看>>
AMD改善Linux驱动,支持动态电源管理
查看>>
JAVA中循环删除list中元素的方法总结
查看>>
Java虚拟机管理的内存运行时数据区域解释
查看>>
人人都会深度学习之Tensorflow基础快速入门
查看>>
ChPlayer播放器的使用
查看>>
js 经过修改改良的全浏览器支持的软键盘,随机排列
查看>>
Mysql读写分离
查看>>
Oracle 备份与恢复学习笔记(5_1)
查看>>
Oracle 备份与恢复学习笔记(14)
查看>>
分布式配置中心disconf第一部(基本介绍)
查看>>
Scenario 9-Shared Uplink Set with Active/Active uplink,802.3ad(LACP)-Flex-10
查看>>
UML类图中的六种关系
查看>>
探寻Interpolator源码,自定义插值器
查看>>
一致性哈希
查看>>