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
} 

未完待续加班中....