Learn ES2015

Posted 2020-08-24

折腾了大半年的项目，用的angular折腾快疯了。 总算有个小结了。正好闲下来为新的项目做准备，学点新的玩意玩玩，以往ES6都没用过，感觉被大部队甩好远了,抓紧跟上大部队的脚步...

1.利用let和const引入块级作用域

通过ES6中定义的let关键字可以形成仅作用于该块作用域的局部变量

for(let i=0;i<10;i++){      
}
console.log(i);//输出ReferenceError(未定义)

console.log(a);//输出ReferenceError(未定义)，let声明的变量不会变量提升，规范了代码先声明后使用。
let a =2;
let a=3;//error let申明的变量不能重复定义。

与let类似const也能形成块作用域，不同点在于const声明的变量为常量，不可改变

if(true){
  const a =888;  
  a = 222;//error. const 声明的变量是常量。不可被修改     
}
console.log(a);//输出ReferenceError(未定义)。块级作用域、

//有一点要注意的是不能改变const类型变量存储的东西
const person = {};
person.nam = ‘Fink‘;
person = {};//error

 

 

2.变量解析与赋值

var [a,b,c] = [1,2,3];

var arr  = [1,2,3];
var [a,b,c] = arr;

//数量不对应
let [a,b,c] = [1,2];
console.log(a);//1
console.log(b);//2
console.log(c); // undefined

//多层数组
let [a,[b,c],d] = [1,[2,3],4];
      1,2,3,4

//多层不对应
let [a,[b,c],d] = [1,[2],3];
console.log(a) //1
console.log(b) //2
console.log(c) //undefined
console.log(d) //3

//对应值非数组
let [a,b,c] = 1;//error
let [a,b,c] = false;//error 等号右边必须是可遍历对象。


//了解映射的原理之后，一个很好的应用场景就是交换数值。
let [a,b] = [1,2];
[a,b] = [b,a]

//es6在映射赋值中还加入了默认值
let [a,b=2,c] = [1];
console.log(a); //1
console.log(b); //2
console.log(c); // undefined

//针对对象的映射赋值
var {a,b} = {a:‘1‘,b:‘2‘};
console.log(a); //1
console.log(b); //2
根据key查找value

//掌握这种方法，可以简化很多操作。如获取一个对象的某些属性
var person = {
    name:‘fink‘,
    ‘age‘:23,
    ‘sex‘:‘male‘  
}
let {name,age,sex}  = person;
console.log(name+age+sex); // fink23male

 

3.增加了模板字符串

let myName = ‘Fink‘;
document.getElementById("app").innerhtml = `wo name is ${myName}`;

//$(变量名) 不仅支持变量，还支持函数表达式
var result = `my name is ${(function(){return ‘fink‘})()}`;

 

4.数组的扩展

 

//1.Array.from();将伪数组对象转换为真正的数组
//什么是伪数组对象？具有数组的结构，但不是数组对象，不能使用数组的方法如forEach等

let arr1 = {
  ‘a‘: 1,
  ‘b‘: 2,
  ‘c‘: 3

};

function arr2(){
     let a2  = arguments;  
}

let arr3 = document.querySelectAll(‘div‘);
//上面三个都是伪数组对象。
‘forEach‘ in arr1;   //false
let arr = Array.from(arr1);// es5的写法: var arr = Array.slice.call(arr1);
‘forEach‘ in arr1;   //true;返回值是boolean。



//2.Array.find();在数组中检索第一个匹配到的元素。
// find()参数为一个函数，设置查找条件

let arr = [1,3,5,7];
var result  = arr.find(function(value,index,arr){return value >4});

var result2  = arr.find(function(value,index,arr){return value >10});
console.log(result);// 5
console.log(result2); // 没有找到的时候返回undefined
//findIndex()和find()类似，只不过是查找到的结果对应的下标


// 3. Array.fill();给定一个值来替换数组元素。
let arr = [1,2,3,4,5];
arr.fill(5); //[5,5,5,5,5];
// fill 也可以接收三个参数，第二个和第三个参数分别为开始个结束的位置

let arr2 = [1,2,3,4,5,6,7];
arr.fill(5,1,3);//[1,5,5,4,5,6,7];

 

 5.函数增加默认参数。

function show(name,age=23){
   console.log(name+","+age)  
}
show(‘fink‘); // fink,23

 

 6.函数新增rest参数(...)。为了不需要使用arguments对象。

function f(v,...vals){
  console.log(v);
  console.log(vals);
}
f(‘fink‘,1,2,3,4,5,6); //temp  1,2,3,4,5,6

//可以看成将arguments转换为数组，要比arguments更灵活。

// ***需要注意的一点。
function f(...vals,v){}//这种方式会报错，rest参数后不能再加别的参数

除了在函数中作为rest参数，“ ... ”本身可以作为一个运算符使用，用处与rest参数刚好相反，是将一个数组转为用逗号分隔的参数序列，看看栗子：

function add(x,y){ return x + y; } 
var arr = [23,12]; add(...arr); //35 
Math.max(...[4, 13, 15]) // 等同于Math.max(4, 13, 15); 
//结合rest使用 function f(...vals){ vals //[1,2,3] } var arr = [1,2,3]; f(...arr); //当然上面这样用是多次一举，转换为参数再转回来，目的是为了理解两者是互为逆操作的
 //其它用法 var nodeList = document.querySelectorAll(‘div‘);
 var array = [...nodeList]; 
var arr1 = [1,2,3],arr2 = [4,5,6]; 
var arr3 = [...arr1,...arr2]; //合并数组，在ES5中我们一般是这样用的arr1.concat(arr2);

 

 7.=>箭头函数

 

var f = a =>b
//a为参数，b为返回值

//当传入多个参数或对象时，要用（）包裹
var add = (a,b) => a + b

//传入对象
    var plus = ({name,age}) => name + age;
    var person = {
        name:‘Vicfeel‘,
        age:23
    };
    plus(person); //Vicfeel23

//this对象的指向是可变的，但是在箭头函数中，它是固定的

var show  = {
   init : function(){
      document.addEventListener(‘click‘,e = >this.doThing(e),false);
   }
    ,
  dothing: function(e){
   console.log(‘do something‘)
}

}     

 

8.第七种数据类型。Symbol();

该类型通过 Symbol()来创建。(不能使用new)。表示独一无二的。

 

9.新的数据结构Set

 Set数据结构和数组类似，区别在于Set内元素是唯一不重复的,Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化，可以通过add方法添加元素

   //ES6环境下
   
   //Set的方法
   //Set - 构造函数，参数为一个数组
   let arr = [1,2,3,3,4,4];
   let s = new Set(arr);//Set{1,2,3,4}
   
   //add - 添加一个值,返回结构本身
   s.add(5); //Set{1,2,3,4,5}
   s.add(2); //Set{1,2,3,4,5}
   s.add(6).add(7);//Set{1,2,3,4,5,6,7}
   
   //delete - 删除一个值，返回一个布尔值表明删除是否成功
   s.delete(6); //true,Set{1,2,3,4,5,7}
   
   //has - 判断是否包含该值，返回一个布尔值
   let ok = s.has(6);//false,Set{1,2,3,4,5,7}
   
   //clear - 清空Set
   s.clear();//Set{}
   
   //Set的属性
   s.size; //0,与数组不同set通过size获取大小
   s.add(5);
   s.size; //1

 

 Set内元素具有唯一性，因此最直观的用途便是数组去重，现在我们可以这样实现数组去重：

 function unique(arr){
        return [...new Set(arr)]; //...运算符参看ES6系列（二）
        
        //或者 return Array.from(new Set(arr));
    }

 

 10.新数据结构Map

 

map一词本身就有映射的意思，Map数据结构提供了一种完善的键值对结构，之所以称之为完善是相对于之前而言，我们知道JS中的对象Object本身就是一种键值对hash结构,然而这种键值对确是不完善的。

Object中只能将字符串作为键，无法使用对象作为键，Map数据结构的提出就是为了解决这个问题

 

//来看一下Map数据结构的基础用法:
    //构造函数
    var m = new Map();
    var p = {name:‘vicfeel‘};
    //添加键值对
    m.set(p,‘val‘);
    //获取键值对
    m.get(p); //"val"
    m.get(‘name‘); //undefined
    //返回大小
    m.size; //1
    //重复添加相同键会覆盖先前的
    m.set(p,‘newVal‘);
    m.get(p); //"newVal"
    
    //利用包含键值对的数组初始化Map,相同键后面也会覆盖前面
    var arr = [{‘name‘:‘vicfeel‘},{‘age‘:23},{‘age‘:25}];
    var m2 = new Map(arr);
    m2.get(‘age‘); //25
    
    //判断是否含有某个键
    m2.has(‘name‘);  //true
    //删除某个键
    m2.delete(‘name‘);
    m2.has(‘name‘); //false
    
    //清空
    m2.clear();
    m2.size; //0


另外，另外Map数据结构也有一个forEach方法用于遍历：

    let m = new Map();
    m.set(‘name‘,‘vicfeel‘).set(‘age‘,25);
    m.forEach(function(val,key,map){
        console.log("Key: %s, Value: %s", key, val);
        //Key: name, Value: vicfeel
        //Key: age, Value: 25
    });

 

 11.Iterator(遍历器)

ES新提供的遍历方法for...of的遍历方式便是自动寻找该对象的Iterator接口,一些数据结构是默认部署Iterator接口的，包括数组、Set和Map结构、伪数组（比如arguments对象、DOM NodeList对象）、后文的Generator对象，以及字符串，因此这些数据结构是可以直接使用for...of进行遍历的