修炼js 6 es6新特性

1、解构赋值

es6能够让我们按照一定的模式,从数组或对象中提取值并赋值其他变量,这被称之为结构赋值,接下来让我们看看一个简单的例子。

var [a,b,c] = [1,2,3];
console.log(a); // 1

这段代码将右边的数组的值分别赋值给a,b,c三个变量,这只是最简单的应用,它可以更复杂,例如

var [a,[b],c] = [1,[2,3],4];
// 这也可以

既然数组可以结构复制,那么对象呢,答案是肯定的,对象也是可以的。例如

var {
    
    a, b} = {
    
    a:10,b:20 }

值得注意的是前面的变量名和后面的属性名称必须保持一致,这样才能访问到,若不一致则值为undefined,看到这突然觉得对象的解构赋值挺拉闸的,别急继续往下看,那么我们要想给他重新更改一个变量名怎么做呢,请看

var {
    
    a:name , b:age} = {
    
    a:10,b:20};

ok! 现在我们已经可以通过name,age来访问了,当然这也只是对象结构赋值最简单的应用。

2、generitor(生成器)

这是es6新增的,那么它是什么呢,他是ES6标准引入的新的函数,它的定义看起来与函数差别不大,让我们先看看它的样子和普通函数有什么区别

// 函数
function demo(){
    
    
	return "ok fine my name is function";
}

// generitor对象
function* gen(){
    
    
	 yield "ok this is generitor";
	 let name = yield "name is gen";
	 return name;
}

ok看起来其实差别也不大,不过是使用function* 定义在函数体内新增了一个关键字而已,事实真的这样吗,那么这个关键字是干什么的呢?当这个函数执行遇到yield时就会返回它后面的值,但是这个函数并没有真正意义上的执行完毕,只是将控制权让给其它函数去执行了当执行next()方法时回到刚才被中止执行的地方,next()函数可以传递参数,第一个next()传参无效,第一个next()更像是启动器。例如

let _increment = function* increment(){
    
    //
    let i = 1;
    while(i){
    
    
        yield i++;
    }
}
var _increment = increment()
console.log(_increment.next());
console.log(_increment.next());
// 无限自增函数

想要更深入的学习generitor 点这里这里

猜你喜欢

转载自blog.csdn.net/weixin_43889562/article/details/108126423