每天一个ES6新特性

最新推荐文章于 2025-09-10 21:32:29 发布

转载最新推荐文章于 2025-09-10 21:32:29 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/CrazyBoy1024/blog/1608231

文章标签：

#c# #后端 #python

2019独角兽企业重金招聘Python工程师标准>>>

参考资料：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= `test1
test2`;
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 尝试解构null
var {a} = null;
console.log(a);//报错 TypeError: null has no properties（null没有属性）

//demo7 尝试解构其他特殊类型  布尔值、数值、字符串，都会返undefined
var {a} = NaN;
console.log(a);//undefined
var {b}="stringStr";
console.log(b);//undefined
var {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"));//只有一句话执行语句的的话可以省略{}括号

/**
 *遍历和循环
 */
//ES5
data.length && data.forEach(function(item){
                              strHtml += "<tr>"
                              strHtml +="<td data-type="name">"+item.name+"</td>";
			                  strHtml +="<td data-type="age">"+item.age+"</td>";
			                  strHtml +="<td data-type="address">"+item.address+"</td>";
			                  strHtml +="</tr>"
})

//ES6
data.length && data.forEach(item => {
		           strHtml += `<tr>			
			                   <td data-type="name">${item.name}</td>
			                   <td data-type="age">${item.age}</td>
			                   <td data-type="address">${item.address}</td>
			                  </tr>`
});

箭头函数实际中常见的用处并不只是写起来简便、可读性好这点好处。有一个很重要的用处是不会改变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();