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

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-js模板:es6模板编译

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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(‘foo’);

var s2 = Symbol(‘bar’);

s1 // Symbol(foo)

s2 // Symbol(bar)

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

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

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

var mySymbol = Symbol();

var a = {};

a.mySymbol = ‘Hello!’;

a[mySymbol] // undefined

a[‘mySymbol’] // “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(‘debug’),

INFO: Symbol(‘info’),

WARN: Symbol(‘warn’)

};

log(log.levels.DEBUG, ‘debug message’);

log(log.levels.INFO, ‘info message’);

下面是另外一个例子。

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(‘Undefined color’);

}

}

常量使用 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中几乎是一样的)

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-js模板:es6模板编译

全部内容,希望文章能够帮你解决

javascript代码实例教程-js模板:es6模板编译

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过