首页 > 程序开发 > web前端 > JavaScript >

js模板:es6模板编译

2017-09-13

js模板:es6模板编译。像大多数模板引擎相似,js模板使用的方法是在中放置js代码,使用输出js表达式:

es6模板编译

像大多数模板引擎相似,js模板使用的方法是在<%…..%>中放置js代码,使用<%=….%>输出js表达式:

Symbol

symbol被用来保证属性的名字都是独一无二的,es6引入了一种新的原始数据类型Symbol,用来表示杜伊无二的值,它是js语言的地七种数据类型,前六种是undefined ,null ,Boolean,String,Number,Object

symbo值通过Symbo函数生成,这就是说对象的属性明显在可以有两种类型,一种是字符串,一种是Symbol类型,注意Symbol函数前面不能使用new,因为Symboil是一个原始数据类型的值,不是对象。Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述。

var s1 = Symbol(&lsquo;foo&rsquo;);

var s2 = Symbol(&lsquo;bar&rsquo;);

s1 // Symbol(foo)

s2 // Symbol(bar)

s1.toString() // “Symbol(foo)”

s2.toString() // “Symbol(bar)”

由于Symbol值都是不相等的,这意味着Symbol值可以作为标识符。注意,Symbol值作为对象属性名是,不能用点运算符。

var mySymbol = Symbol();

var a = {};

a.mySymbol = &lsquo;Hello!&rsquo;;

a[mySymbol] // undefined

a[&lsquo;mySymbol&rsquo;] // “Hello!”

上面代码中,因为点运算符后面总是字符串,所以不会读取mySymbol作为标识名所指代的那个值,导致a的属性名实际上是一个字符串,而不是一个 Symbol 值。

同理,在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。

let s = Symbol();

let obj = {

[s]: function (arg) { … }

};

objs;

上面代码中,如果s不放在方括号中,该属性的键名就是字符串s,而不是s所代表的那个 Symbol 值。

采用增强的对象写法,上面代码的obj对象可以写得更简洁一些。

let obj = {

s { … }

};

Symbol 类型还可以用于定义一组常量,保证这组常量的值都是不相等的。

log.levels = {

DEBUG: Symbol(&lsquo;debug&rsquo;),

INFO: Symbol(&lsquo;info&rsquo;),

WARN: Symbol(&lsquo;warn&rsquo;)

};

log(log.levels.DEBUG, &lsquo;debug message&rsquo;);

log(log.levels.INFO, &lsquo;info message&rsquo;);

下面是另外一个例子。

const COLOR_RED = Symbol();

const COLOR_GREEN = Symbol();

function getComplement(color) {

switch (color) {

case COLOR_RED:

return COLOR_GREEN;

case COLOR_GREEN:

return COLOR_RED;

default:

throw new Error(&lsquo;Undefined color&rsquo;);

}

}

常量使用 Symbol 值最大的好处,就是其他任何值都不可能有相同的值了,因此可以保证上面的switch语句会按设计的方式工作。

还有一点需要注意,Symbol 值作为属性名时,该属性还是公开属性,不是私有属性。

rest参数

rest参数形式为(…变量名),将参数放在一个数组中进行传递。

function add(…values) {

let sum = 0;

for (var val of values) {

sum += val;

}

return sum;

}

add(2, 5, 3) // 10

因为函数参数先于函数体执行,而只有在函数体中才能知道函数是否采用了严格模式,所以规定,只要函数参数使用了默认值,结构复制,或者扩展运算,那么函数内部就不能现实的设定为严格模式。

箭头函数

箭头函数使用=>来定义。

var f = v =>v

上面的代码等同于:

var f function(v){

return v

}

如果箭头函数不需要参数或需要多个参数,就是用一个圆括号代表参数部分。

var f = () =>5;

如果箭头函数的代码块部分多余一条语句,就要使用大括号括起来,并且使用return语句返回。

var sum = (num1,num2)=>{return num1+num2;}

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号

// 报错

let getTempItem = id => { id: id, name: “Temp” };

// 不报错

let getTempItem = id => ({ id: id, name: “Temp” });

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数的一个用处是简化回掉函数:

// 正常函数写法

[1,2,3].map(function (x) {

return x * x;

});

// 箭头函数写法

[1,2,3].map(x => x * x);

// 正常函数写法

var result = values.sort(function (a, b) {

return a - b;

});

// 箭头函数写法

var result = values.sort((a, b) => a - b);

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。

尾调用

尾调用是函数式编程中的重要概念,是指某个函数最后一步调用另一个函数

function f (x) {

return g(x);

}

尾调用之所以和其它调用不同,是因为它特殊的调用位置。

我们知道,函数调用会在内存形成一个调用记录,又称调用帧,保存内部变量和调用位置等信息。如果在函数a内部调用函数b,那么在a的调用帧上方还会形成b的调用帧,等到b结束才会将b的运行结果返回给a,b、的调用帧才会消失。所以尾调用优化指的就是只保留内存函数的调用帧,如果所有函数都是尾调用,那么完全可以到每次执行时,调用帧只有一项,这样可以节省内存。

注意,只有内层函数不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否者就无法进行优化。

总结,递归本质上是一种循环操作,而纯粹的函数式编程语言是没有循环操作命令的,所有的循环都用递归实现。

ES6 的尾调用优化只在严格模式下开启,正常模式是无效的。

这是因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。

func.arguments:返回调用时函数的参数。

func.caller:返回调用当前函数的那个函数。

尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效。

函数式编程的另一个概念是柯里化:

意思是讲多参数的函数转换成单参数的形式:

function currying(fn, n) {

return function (m) {

return fn.call(this, m, n);

};

}

function tailFactorial(n, total) {

if (n === 1) return total;

return tailFactorial(n - 1, n * total);

}

const factorial = currying(tailFactorial, 1);

factorial(5) // 120

上面代码通过柯里化,将尾递归函数tailFactorial变为只接受一个参数的factorial。

第二种方法就简单多了,就是采用 ES6 的函数默认值。

function factorial(n, total = 1) {

if (n === 1) return total;

return factorial(n - 1, n * total);

}

factorial(5) // 120

上面代码中,参数total有默认值1,所以调用时不用提供这个值。

总结一下,递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令,所有的循环都用递归实现,这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言(比如Lua,ES6),只需要知道循环可以用递归代替,而一旦使用递归,就最好使用尾递归。

es6中的set

es6提供了新的数据解构set,类似数组,但是成员的值是唯一的,无重复。

set本身是一个够着函数,用来生成set数据结构

(set的特性在python,java中几乎是一样的)

相关文章
最新文章
热点推荐