es6小结1

es6一般使用babelrc来转换成es5的来兼容低级版本的浏览器
 
 
1.循环迭代:
for...of循环是ES6中新加的一种遍历迭代器的语法,不能遍历对象
var arr = ['nick','freddy'];
arr.name = "数组";
for(var i in arr){
console.log(i+': '+arr[i]);//0:nick 1:freddy name:数组
}
for(var item of arr){
console.log(item);//nick freddy
}
给数组添加一个自定义属性name,并且赋值"数组"。然后进行遍历输出的,会发现新定义的属性也被for in输出来了,而for of并不会对name进行输出。
 
2.let,const:
let 的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
const 声明的变量都会被认为是常量,表示它的值被设置完成后就不能再修改了。
如果const的是一个对象,对象所包含的值是可以被修改的。就是对象所指向的地址没有变就行。
 
3.模板字符串
第一种,基本的字符串格式化。字符串的拼接
es5: var name = 'ff'
alert('hello'+name)
es6: const name = 'ff'
alert(`hello ${name}`)
第二种,在es5时我们可以通过反斜杠(\)来做多行字符串或者字符串一行行拼接,es6反引号(``)直接搞定。
es5: var msg = "\
<div>1231</div>\
<span>dfasd</span>"
es5: conse msg = `<div>
<span>wfdsf</span>
</div>`
此外还有一些比较厉害的方法:
1).includes: 判断是否包含然后直接返回布尔值
const str = 'hhhrty'
alert(str.includes('t)) //true
2).repeat: 获取字符串重复n次,如果带有小数按照Math.floor(num)处理
const str = 'he'
alert(str.repeat(3)) //hehehe
3).startsWith和endsWith判断是否以给定文本开始或者结束
const str = 'hello wwww!'
alert(str.startsWith('hello')) //true
alert(str.endsWith('!')) //true
 
4.函数
函数默认值
es5: function action(num) {
num = num || 200
return num
}
当传入num的时候,num为传入的num值,没有传参的时候就是200,但是当num=0的时候,此时num会为200,与我们实际想要的效果明显不一样。
es6为参数提供了默认值,在定义函数初始化时就初始化了这个参数,如:
function action(num = 200){
console.log(num)
}
action(0)//0
action()//200
action(300)//300

箭头函数:

直观的三个特点:不需要function关键字来创建函数;省略return关键字;继承当前上下文的this关键字。
当函数有且仅有一个参数的时候,是可以省略括号的;当函数返回有且只有一个表达式的时候可以省略{}和return;例如
let people = name => 'hello' +name 
let people = (name.age) => {
  const fullName = 'hello' + name
  return fullName
} 

未完待续加班中....

 

猜你喜欢

转载自www.cnblogs.com/luluyang/p/9841998.html