ES6语法特性

最近看blue老师的视频，自己整理了一下笔记

一、变量

1.新的声明方法

let: 防止重复声明，块级作用域，变量

const: 常量,防止重复声明，块级作用域

2.解构赋值

json={a:12,b:5}

let {a,b}=json

arr=[1,2,3]

let [a,b,c]=arr

注意：

1.两边的结构一定要一致

2.右边必须是个符合语法的东西

3.解构和赋值同时完成

 

let {a,b}=[12,6] =>不可

3.块级作用域

替代闭包

es5 的var作用域是函数级的，在函数里定义任何一个变量都是等价的

es6 的let（const）是块级的，即花括号内

变量:

var 可以重复声明，不能限制修改，函数级

二、函数

1、箭头函数：简写函数，修正this的指向两个作用
 

function (){

....

}

()=>{}

简写：

1.如果只有一个参数，()也可以不写

2,如果只有语句并且是return ，{}也可以不写

 

2.修正this：

箭头函数的作用就是将this固定到当前环境上。

普通的function函数，this的指向是不断变化的

 

3.参数扩展 ...

收集 function(a,b,...c){} 错误用法function(a,b,...c,d){ // }

展开

4.数组展开

let arr1=[1,3,5];

let arr2=[2,4,6];

let arr=[...arr1,...arr2]

alert(arr); //[1,3,5,2,4,6]

数组展开也可以用concat方法: arr.concat(arr1,arr2)

5.json展开

let json={a:12,b:4,c:55};

let json2={...json,d:99};

console.log(json2) //{a: 12, b: 4, c: 55, d: 99}

 

6.原生对象扩展

Array扩展: map(映射)、 reduce（n>1）、fiter(过滤)、forEach（遍历）

map 映射：一一对应 map(item,index)

[68,55,45,66,77,88]=>['及格','不及格','不及格','及格','及格']

应用：this.selectIds = data.map(({ id: i }) => i)

let arr=[68,55,45,66,77,88];

let arr3=arr.map((i)=>i)

let arr2=arr.map(function(item){

if(item>=60){

return '及格'

}else{

return '不及格'

}

});

console.log(arr);// [68, 55, 45, 66, 77, 88]

console.log(arr2);//["及格", "不及格", "不及格", "及格", "及格", "及格"]

console.log(arr3);// [68, 55, 45, 66, 77, 88]

reduce n=>1 如求和，求平均数

let arr=[68,55,45,66,77,88];

let result=arr.reduce(function(temp,item,index){

if(index==arr.length){

return (temp+item/arr.length)

}else{

return temp+item

}

});

alert(result);

fiter 过滤，根据条件筛选

let arr2=arr.filter(item=>return item%2==0);

forEach 遍历

let arr=[68,55,45,66,77,88];

let arr2=arr.forEach((item,index)=>{

alert(`第${index}个:${item}`)

})

 

7.模板字符串

反单引号

let arr=[68,55,45,66,77,88];

let arr2=arr.forEach((item,index)=>{

alert(`第${index}个:${item}`)

})

8.json对象,JSON写法

标准写法：{"a":"12","b":"5"} 带双引号

并且如果包含字符串的话，一定用双引号，不然会报错: json={a:12,b:5,name:"koala"};

JSON. stringify({a: 12, b: 5}) => '{"a":"12","b":"5"}'

JSON.parse('{"a":"12","b":"5"}') => {a: 12, b: 5}