当前位置:首页 > 编程教程 > javascript技术文章 > ES6新特性之变量和字符串用法示例

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

  • 发布时间:
  • 作者:码农之家
  • 点击:121

这篇文章主要知识点是关于ES6、新特性、变量、字符串、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript函数式编程指南
  • 类型:js函数大小:12.79 MB格式:PDF作者:路易斯·阿泰西奥
立即下载

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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.637638

ES6中字符串的使用方法扩展

字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。 "\u0061"// "a" 但是,这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表达。 "\uD842\uDFB7"// """\u20BB7"// " 7" 上面代码表示,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成\u20BB+7。由于\u20BB是一个不可打印字符,所以只会显示一个空格,后面跟着一个7。 ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。 下面代码中,最后一个例子表明,大括号表示法与四字节的UTF-16编码是等价的。 "\u{20BB7}"// """\u{41}\u{42}\u{43}"// "ABC"let hello = 123;hell\u{6F} // 123'\u{1F680}' === '\uD83D\uDE80'// true 有了上述表示法之后,JavaScript共有6种方法可以表示一个字符。 '\z' === 'z' // true'\172' === 'z' // true'\x7A' === 'z' /……

网友NO.116063

ES6中字符串string常用的新增方法小结

本文实例讲述了ES6中字符串string常用的新增方法。分享给大家供大家参考,具体如下: ES6为js新增了很多方法,包括遍历、查询、替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法。 for…of: let str="wbiokr";for(let s of str){ console.log(s)}//结果:w, b, i, o, k, r 由于es5并没有为js制定字符串相关遍历方法,for…of无疑会是接下来前端开发中的一个很重要角色。 includes: let str="wbiokr";str.includes('wb');//结果:truestr.includes('wbiokr');//结果:truestr.includes('w',1);//falsestr.includes('b',1);//true string.includes(s,i)方法参数1为需要查询字符(串),参数2为查询的起始位置,返回布尔值,而indexOf返回查询的位置。 startsWith: let str="wbiokr";str.startsWith('wb');//结果:truestr.startsWith('w');//结果:truestr.startsWith('w',1);//结果:falsestr.startsWith('b',1);//truestr.startsWith('kr');//结果:fa……

网友NO.634777

ES6新特性之字符串的扩展实例分析

本文实例讲述了ES6新特性之字符串的扩展。分享给大家供大家参考,具体如下: 一、ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串。 indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。 charAt: 返回指定位置的字符。 lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。 match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。 substring: 返回字符串的一个子串,传入参数是起始位置和结束位置。 substr: 返回字符串的一个子串,传入参数是起始位置和长度 replace: 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。 search: 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com