ES6 变量、箭头函数、参数扩展、数组方法、字符串、JSON、结构赋值随笔

1.变量（之前的变量var能重复声明、无法限制修改、没有块级作用域是函数级作用域，所以新增了两个变量 let、const）：

1.1：let  不能重复声明，变量（可以修改），块级作用域

1.2:  const  不能重复声明，常量（不能修改），块级作用域

 

2.箭头函数：

2.1：可以将function省略不写，在（）后面换成 =>

2.2:：如果（）只有一个参数，（）也可以省略不写

2.3：如果{ }里只有一个return操作，{ }和return都可以省略不写

// 演示1：
// var $ = function(id){ return document.getElementById(id) }

var $ = id => document.getElementById(id)

$('tsDiv').style.color = 'red'

// 演示2：
// function aa(a){ console.log(a) }

var aa = (a)=> console.log(a)

aa(555)    

 

3.参数扩展：

3.1：...收集：

function show(a, b, ...c){
  alert(a); //1
  alert(b); //6
  alert(c); //4,12,22,38,12
}

show(1,6,4,12,22,38,12); 

3.2： ...扩展：

let arr = [22,9,28]
let arr2 = [...arr]; //22,9,28
let arr3 = [...arr, ...arr]; //22,9,28,22,9,28

 

3.3：默认参数：

function show(a, b=5){}

 

4.数组方法：

4.1: map（映射 -- 一个对一个）:

let arr = [9, 11, 16];
let arr1 = arr.map(function (item) {
  return item
});
alert(arr1); // 9, 11, 16 （item形参就是数组arr里的所有项）

简写：let arr1 = arr.map(item=>item);
应用：let arr1 = arr.map(item=>item>=10?'及格':'不及格')；//不及格，及格，及格

4.2：reduce (汇总 -- 一推出来一个) ：

let arr = [1,2,3]; //求和
let arr1 = arr.reduce(function(tmp, item, index){
return tmp+item;
});
alert(arr1); //6 (tmp是上一次运算的中间结果，最后一次为最终结果，item是下一项，index是索引)

let arr = [1,2,3]; //求平均数
let arr1 = arr.reduce(function(tmp,item,index){
 if(index != arr.length-1){  //不是最后一次
  return tmp+item
}else{  //最后一次
  return(tmp+item)/arr.legth;
}
});
alert(arr1); //3

4.3：filter（过滤器）：

let arr = [12,5,6,8,79,56]
let arr1 = arr.filter(function(item){
 if(item%3==0){
  return true;  //能被3整除的留下
}else{
  return false;  //否则消失
}
});

alert(arr1);

简写： let arr1 = arr.filter(item=>item%3==0) //都是true和true或false和false没必要都写

4.4：forEach（循环、迭代）：

let arr = [1,2,3]
arr.forEach(function(item,index){
 alert(index+ ' : ' +item);  //依次出现0:1/1:2/2:3
}); 

 

5.字符串：

5.1：多了两个新方法（startSwitch / endSwitch）：

let str = 'abcde'; alert(str.startSwith('a')); //true （判断是否以a开头）
let str = 'abcde'; alert(str.endSwith('a')); //false （判断是否以a结尾）

5.2：字符串模板（支持换行）：

let a = 12; let a1 = `a${a}bc`; aleart(a1); //a12bc（${}可把变量直接塞进去）
例子：
let title = '标题'; let comtent = '内容'; 
let arr = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;

6.JSON（json标准写法：所有key和value需用双引号包住，value是数字除外）：

6.1：JSON对象：

        JSON.stringify() // 转为json

        JSON.parse() //解析json为object

6.2：JSON简写：

         json对象里key和value值一样留一个即可

         json对象里有方法 : function 都可以省略不写 // 如：show: function(){} 省略为 show(){}

 

7.结构赋值：

例子：

let [a, b, c] = [1,2,3]; console.log(a,b,c);  // 1 2 3

let {a, b, c} = {a:1, b:2, c:3}; console.log(a, b, c);  //1 2 3

let [ { a1, a2 }, [b1, b2, b3], c, d] = [ { a1:1, a2:2 }, [3, 4,5], 6, 'abcd' ]

 console.log(a1, a2, b1, b2, b3, c, d)  // 1 2 3 4 5 6 "abcd"

注意：

左右两边结构必须一样// 错误示范：let [a,b]={a:1,b:2} 

右边必须是个合法格式的东西// 错误示范：let {a,b}={1,2}

声明赋值不能分开// 错误示范：let[a,b]; [a,b]=[1,2]

8