ES6新特性之变量和字符串用法示例

网友投稿 260 2023-05-27


ES6新特性之变量和字符串用法示例

本文实例讲述了ES6新特性之变量和字符串用法。分享给大家供大家参考,具体如下:

一、变量

1. LET

我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中。http://(在ES5中是没有块的概念的)。

if(true){

let a=1;

}

console.log(a);//undifined

这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历:

for(let i=0;i

//do somthing with lists[i]

}

console.log(i)l//undifined

通常情况下,我们在同一作用域里使用变量J来完成另一个遍历,但是现在有了let,可以安全的再一次声明i变量,因为它只在被声明的块中有效。

2.CONST

const也是用于声明块作用域变量的方法,使用const可以声明一个值得只读引用,必须直接给一个变量赋值,如果尝试该变量或者没有立即给变量赋值,都将报错:

const MY_CONSTENT=1;

MY_CONSTENT=2;//error

const MY_CONSTENT;//error

注意对象的属性或数组成员还是可以改变的

const MY_OBJECT={some:1};

MY_OBJECT.some='body';

3.箭头函数

箭头函数使得js代码更加简洁。下面将箭头函数和ES5版本的函数写法:

//箭头函数

let books=[{"title":"X","price":20},{"title":"Y","price":40}];

let titles=books.map(item=>item.title);

//ES5函数

var titles=books.map(function(item){

return item.title;

});

观察箭头函数的语法,会发现其中并没有出现function关键字,只保留零或多个参数、“胖箭头”(“=>”)和函数表达式,return声明被隐式加入。带有零或者多个参数时必须使用括号:

//no arguments

books.map(()=>1);//[1,1]

//Mutiple arguments

[1,2].map((n,index)=>n*index);//[0,2]

如果需要写更多的逻辑或更多的空格,可以把函数表达式放在({})块中:

let result=[1,2,3,4,5].map(n=>{

n=n%3;

retutn n;

})

箭头函数不单是为了输入更少的字符,它们的表现也和一般的函数不同。它的继承了当前上下文的this和arguments,这就意味着你可以避免写var that=this这样的代码,也不需要把函数绑定到正确的上下文了:

//ES6

let books={

title'X',

sellers:['A','B'],

printSellers(){

this.sellers.forEach(sellehttp://r=>console.log(seller+'seller'+this.title))

}

};

//ES5

var books={

title='X',

sellers:['A','B'],

printSellers:function(){

var that=this;

this.sellers.forEach(function(seller){

console.log(seller+'seller'+that.title)

})

}

};

二、字符串

1.方法

字符串String原型中增添了几个新方法,用于简化需要用indexOf()方法来解决的问题的复杂度,并达到同样的效果:

'my string'.startsWith('my');//true

'my string'.endsWith('my');//false

'my string'.includes('str');//true

添加了另一个方法,用于创建重复字符串:

'my'.repeat(3);//'my my my'

2. 模板字符串

模板字符串提供提供一个简洁的方式来实现字符串插值,它基于美元符号和花括号${...},模板字符串置于引号之中:

//ES6

let name='json',

apples=5,

pears=7,

bananas=function(){return 3};

console.log('this is${name}');

console.log('he carries ${apples} apples,${pears} pears,and ${bananas()} bananas');

//ES5

console.log('he carries'+ ${apples}+' apples,'+${pears}+' pears,and '+${bananas()}+' bananas');

以上形式对比ES5仅仅是便于字符串的拼接,实际上,模板字符串还可以用于多行字符串(空格也是字符串的一部分):

let x='1...

2...

3 lines long!';

//ES5

var x='1...'+

'2...'+

'3 lines long!';

var x="1...2...3 lines long!';

希望本文所述对大家ECMAScript程序设计有所帮助。

//do somthing with lists[i]

}

console.log(i)l//undifined

通常情况下,我们在同一作用域里使用变量J来完成另一个遍历,但是现在有了let,可以安全的再一次声明i变量,因为它只在被声明的块中有效。

2.CONST

const也是用于声明块作用域变量的方法,使用const可以声明一个值得只读引用,必须直接给一个变量赋值,如果尝试该变量或者没有立即给变量赋值,都将报错:

const MY_CONSTENT=1;

MY_CONSTENT=2;//error

const MY_CONSTENT;//error

注意对象的属性或数组成员还是可以改变的

const MY_OBJECT={some:1};

MY_OBJECT.some='body';

3.箭头函数

箭头函数使得js代码更加简洁。下面将箭头函数和ES5版本的函数写法:

//箭头函数

let books=[{"title":"X","price":20},{"title":"Y","price":40}];

let titles=books.map(item=>item.title);

//ES5函数

var titles=books.map(function(item){

return item.title;

});

观察箭头函数的语法,会发现其中并没有出现function关键字,只保留零或多个参数、“胖箭头”(“=>”)和函数表达式,return声明被隐式加入。带有零或者多个参数时必须使用括号:

//no arguments

books.map(()=>1);//[1,1]

//Mutiple arguments

[1,2].map((n,index)=>n*index);//[0,2]

如果需要写更多的逻辑或更多的空格,可以把函数表达式放在({})块中:

let result=[1,2,3,4,5].map(n=>{

n=n%3;

retutn n;

})

箭头函数不单是为了输入更少的字符,它们的表现也和一般的函数不同。它的继承了当前上下文的this和arguments,这就意味着你可以避免写var that=this这样的代码,也不需要把函数绑定到正确的上下文了:

//ES6

let books={

title'X',

sellers:['A','B'],

printSellers(){

this.sellers.forEach(sellehttp://r=>console.log(seller+'seller'+this.title))

}

};

//ES5

var books={

title='X',

sellers:['A','B'],

printSellers:function(){

var that=this;

this.sellers.forEach(function(seller){

console.log(seller+'seller'+that.title)

})

}

};

二、字符串

1.方法

字符串String原型中增添了几个新方法,用于简化需要用indexOf()方法来解决的问题的复杂度,并达到同样的效果:

'my string'.startsWith('my');//true

'my string'.endsWith('my');//false

'my string'.includes('str');//true

添加了另一个方法,用于创建重复字符串:

'my'.repeat(3);//'my my my'

2. 模板字符串

模板字符串提供提供一个简洁的方式来实现字符串插值,它基于美元符号和花括号${...},模板字符串置于引号之中:

//ES6

let name='json',

apples=5,

pears=7,

bananas=function(){return 3};

console.log('this is${name}');

console.log('he carries ${apples} apples,${pears} pears,and ${bananas()} bananas');

//ES5

console.log('he carries'+ ${apples}+' apples,'+${pears}+' pears,and '+${bananas()}+' bananas');

以上形式对比ES5仅仅是便于字符串的拼接,实际上,模板字符串还可以用于多行字符串(空格也是字符串的一部分):

let x='1...

2...

3 lines long!';

//ES5

var x='1...'+

'2...'+

'3 lines long!';

var x="1...2...3 lines long!';

希望本文所述对大家ECMAScript程序设计有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java语言实现简单FTP软件 FTP连接管理模块实现(8)
下一篇:详解Spring通过@Value注解注入属性的几种方式
相关文章

 发表评论

暂时没有评论,来抢沙发吧~