当前位置:主页 > javascript教程 > ES6新特性之变量和字符串用法示例

实例分析ES6新特性之变量和字符串使用方法

发布:2020-03-19 20:42:50 121


给网友们整理javascript相关的编程文章,网友姚嘉惠根据主题投稿了本篇教程内容,涉及到ES6、新特性、变量、字符串、ES6新特性之变量和字符串用法示例相关内容,已被130网友关注,相关难点技巧可以阅读下方的电子资料。

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

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

一、变量

1. LET

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

if(true){
  let a=1;
}
console.log(a);//undifined

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

for(let i=0;i<lists.length;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(seller=>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程序设计有所帮助。


参考资料

相关文章

  • C++11新特性之右值引用与完美转发详解

    发布:2023-03-01

    C++11标准为C++引入右值引用语法的同时,还解决了一个短板,即使用简单的方式即可在函数模板中实现参数的完美转发。本文就来讲讲二者的应用,需要的可以参考一下


  • js的变量提升和函数提升知识点总结

    发布:2019-10-04

    下面小编就为大家带来一篇基于js的变量提升和函数提升(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    发布:2022-07-12

    给网友朋友们带来一篇关于javascript的教程,这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 关于jdk环境变量配置以及javac不是内部或外部命令的解决

    发布:2023-03-04

    这篇文章主要介绍了关于jdk环境变量配置以及javac不是内部或外部命令的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


  • ES6小技巧整理

    发布:2020-03-24

    ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用


  • ES6语法重构React组件代码知识点

    发布:2020-01-02

    这篇文章主要介绍了利用ES6语法重构React组件的相关资料,文中通过示例代码介绍的很详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。


  • python类定义全局变量的方法

    发布:2021-05-27

    声明法,在python类或当前模块中使用global的声明方式,表示为全局变量。模块法,该方法是把全局变量定义在一个单独模块中,然后在需要使用的全局模块中将定义的全局变量模块导入。


  • Python实现随机森林回归与各自变量重要性分析与排序

    发布:2023-04-05

    这篇文章主要为大家详细介绍了在Python环境中,实现随机森林(Random Forest,RF)回归与各自变量重要性分析与排序的过程,感兴趣的小伙伴可以了解一下


网友讨论