ES6笔记

/**
 * Created by Administrator on 2017/4/13.
 */
/*---------------------Es6编码规范---------------------*/
//1、块级作用域
//let 取代 var
//在全局环境，不应该设置变量，只应设置常量 const优于let。
const a='1';
const b='1';
    {
        let a='2';
        let b='3';
    }

//2、静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号
const c='world';
console.info(`hello ${c}`); //hello world

//3、解构赋值
// 使用数组成员对变量赋值时，优先使用解构赋值。
const d=[1,2,3,4];
const [d1,d2,d3,d4]=d;
console.info(d1,d2,d3,d4); //1 2 3 4
//函数的参数如果是对象的成员，优先使用解构赋值
function e({e1,e2}){
 console.info(e1,e2);
}
e({e1:'hello',e2:'world'}); //hello world
//对象解构 注: 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
//const {name,petName}={"name":"leyi","petName":"jiucaiqiezi"};
//相当于
const {name:name,petName:petName}={"name":"leyi","petName":"jiucaiqiezi"};
console.info(name,petName);

//如果函数返回多个值，优先使用对象的解构赋值
function g(){
    return {g1:"1",g2:"2",g3:"3"};
}
 const {g1,g2,g3}=g();
 console.info(g1,g2,g3); //1 2 3

//4、定义对象 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
const h={h1:1,h2:2,h3:3};
const i={
    i1:1,
    i2:2,
};

//对象尽量静态化，一旦定义，就不得随意添加新的属性。。
const j={"name":"leyi",petName:null}; //petName预先定义好
j.petName='jiucaiqiezi';
//如果添加属性不可避免，要使用Object.assign方法
Object.assign(j,{'att3':"att3"});
console.info(j);// {name: "leyi", petName: jiucaiqiezi, att3: "att3"}

//如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义
function getKey(ag=true){
    return ag?'petName':'xxName';
}
const k={
    name:"leyi",
    [getKey(false)]:'jiucaiqiezi',
};
console.info(k);

//对象的属性和方法，尽量采用简洁表达法
const l={
    name:"leyi",
    getPetName(val){ //省略function
        return l.name+`-----${val}`;
    },
};
console.info(l.getPetName('qiezijiucai'));

//5、使用扩展运算符（...）拷贝数组
const m=[1,2,3,4,5];
const n= [...m];
console.info(n);

//6、立即执行函数可以写成箭头函数的形式
(() => {
    console.log('hello world');
})();

//简单的、单行的、不会复用的函数，采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。
const o=[1, 2, 3].map(x => x * x);
console.info("o--------",o);

function qq(params){
    for(let item of params){
        console.info(item);
    }
}
const q = (...params) => qq.apply(this,params);
q([7,8,9]); //7 8 9

/*---------------------let和const---------------------*/
//let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

//const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。
const obj1={"name":"leyi"};
//obj1={} 指向新的内存地址就会报错
obj1.petname="qiezijiucai"; //常量本身是可变的
console.info(obj1);

/*---------------------数组的扩展---------------------*/
//Array.from()用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象
const p = document.querySelectorAll('p');
Array.from(p).forEach(function (item,index) {
    console.info(item,index);
});
//任何有length属性的对象，都可以通过Array.from方法转为数组。
console.info(Array.from({ 0: "a", 1: "b", 2: "c", length: 3 }));//["a", "b", "c"]

//转换字符串为数组
console.info(Array.from('jiucaiqiezi'));//["j", "i", "u", "c", "a", "i", "q", "i", "e", "z", "i"]

//Array.of()方法用于将一组值，转换为数组。弥补原来数组构造函数Array()的不足
console.info(Array(1));//原先只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组
console.info(Array(),Array.of(1),Array.of(1,4,7));

//Array.prototype.copyWithin(target, start = 0, end = this.length)
//数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员）
console.info([1,2,3,4,5,6,7].copyWithin(0,2));//[3, 4, 5, 6, 7, 6, 7]

//find方法，用于找出第一个符合条件的数组成员,它的参数是一个回调函数，所有数组成员依次执行该回调函数
console.info([7,8,9,8].find(item=>item==8)); //8

//findIndex 返回第一个符合条件的数组成员的位置
console.info([7,8,9,8].findIndex(item=>item==8)); //1

//fill方法使用给定值，填充一个数组,fill方法一般用于空数组的初始化。数组中已有的元素，会被全部抹去。第二个和第三个参数，用于指定填充的起始位置和结束位置
console.info([1,2,3].fill('a',2)); //[1, 2, "a"]
console.info(Array.of(1).fill('a'));//["a"]

//ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组
for(let [index,value] of [3,4,5].entries()){ //entries()是对键值对的遍历
  console.info(index+'------'+value); //0------3  1------4 test.js:208 2------5
}
for(let item of [3,4,5].entries()){
    console.info(item); //[0, 3] [1, 4] [2, 5]
}
for(let item of [3,4,5].keys()){
    console.info(item); //0 1 2
}
//测试有问题 暂不知道什么原因 报错values is not a function
/*for(let item of [33,44,55].values()){
    console.info(item);
}*/

//includes 方法返回一个布尔值，表示某个数组是否包含给定的值
//对比map和set的has map的has 判断键名字 set判断值
//代替 indexOf console.info([7,8,9].indexOf(8)!=-1); //true
console.info([7,8,9].includes(8)); //true

//由于空位的处理规则非常不统一,数组避免出现空位,ES6明确将空位转为undefined

/*---------------------函数的扩展---------------------*/
//ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。
//定义了默认值的参数，必须是函数的尾部参数，其后不能再有其他无默认值的参数
function fn(x,y=2){
   console.info(x,y)
}
fn(1,undefined);//如果传入undefined，将触发该参数等于默认值，null则没有这个效果

//默认值所处的作用域，不是全局作用域，而是函数作用域。
const x=1;
function fn1(x,y=x){
   console.info(x); //10
}
fn1(10);

const xx=1;
function fn01(y=xx){ //let y=xx xx 参数y = xx形成一个单独的作用域。这个作用域里面，变量xx本身没有定义，所以指向外层的全局变量x。
    console.info(xx); //1
}
fn01();

//参数默认值可以与解构赋值，联合起来使用。
function fn2({x,y = 20}){
    console.log(x, y);
}
fn2({}); // undefined 20
fn2({x: 1}); // 1, 20

//rest参数是一个数组(...变量名),用于获取函数的多余参数，该变量将多余的参数放入数组中
function fn3(array,...list){ //rest参数之后不能再有其他参数
    console.info(list); //[4, 5, 6]
    list.forEach(function(item){
        array.push(item);
    });
    console.info(array);
}
fn3([1,2,3],4,5,6);//[1, 2, 3, 4, 5, 6]

//扩展运算符
//扩展运算符是三个点（...）。它好比rest参数的逆运算，将一个(数组)转为用逗号分隔的参数序列

function fn4(x,y,z){
    return x+y+z
}
const list=[1,2,3];
console.info(...list); //1 2 3
console.info([...list]); //[1, 2, 3]
console.info(fn4(...list)); //6

//代替apply方法
function fn04(x, y, z) {
   console.info(args); //[1, 2, 3]
   console.info(x,y,z); //1 2 3
}

var args = [1, 2, 3];
fn04.apply(null, args);

function fn040(x, y, z) {
    console.info(...args) //1 2 3
}
var args = [1, 2, 3];
fn040(...args);

//利用Math.max方法,求出一个数组最大元素的写法。
console.info(Math.max.apply(null,[1,2,3])); //3
console.info(Math.max(...args));//3

//扩展运算符与正常的函数参数可以结合使用
function fn5(a,b,c,d,e){
  console.info(a,b,c,d,e) //1 2 3 4 5
}
const fn5list=[3,4,5];
fn5(1,2,...fn5list);

//将一个数组添加到另一个数组的尾部
const fn6Arr=[7,8,9];
const fn6Arr2=[10,11,12];
fn6Arr.push(...fn6Arr2);
console.info(fn6Arr);

//扩展运算符还可以将字符串转为真正的数组,任何类似数组的对象，都可以用扩展运算符转为真正的数组。
console.log([..."hello"]); //["h", "e", "l", "l", "o"]

//扩展运算符的运用
//合并数组
const arr2=[1,2,3,4],arr3=[5,6,7],arr4=[8,9,10];
console.info([...arr2,...arr3,...arr4]); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//与解构赋值结合
const [aa,...bb]=[1,2,3,4,5,6];
console.info(aa,bb); //1 [2, 3, 4, 5, 6]
const [cc,...dd]=[];
console.info(cc,dd); //undefined []

/*箭头函数,ES6允许使用“箭头”（=>）定义函数。
 * 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
 不可以使用arguments对象，该对象在函数体内不存在
 * */
const fn7=ag1=>ag1;
//等同于
/*var fn7 = function(ag1) {
    return ag1;
};*/
console.info(fn7(1));

//箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
const fn8=(ag1,ag2)=> ag1+ag2;
console.info(fn8(1,2));

//如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
const fn9=(ag1,ag2)=>{
    return ag1+ag2
}
console.info(fn9(3,4)); //7

//如果箭头函数直接返回一个对象，必须在对象外面加上括号。
const fn10=(ag1,ag2)=>({ag1:ag1,ag2,ag2});
console.info(fn10(9,10));//{ag1: 9, ag2: 10}

//箭头函数的一个用处就是简化回调函数写法
const fn11=[1,2,3,4,5].map(item=>item+1);
console.info(fn11);//[2, 3, 4, 5, 6]

/*---------------------Set和Map数据结构---------------------*/
//ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
const s = new Set();
[1,2,3,4,5,5,5,6].forEach(item => s.add(item));
for (let i of s) {
    console.log(i);
}
console.info(...s); //1 2 3 4 5 6

const set = new Set([1, 2, 3, 4, 4]);
console.info(...set,set.size); //1 2 3 4 4

console.info(...document.getElementsByTagName('p')); //把类数组转成数组

console.info(...new Set([1,2,3,4,4,4,4])); //可以用于数组去重

console.info(set.add(7)); //添加某个值，返回Set结构本身
console.info(set.has(7)); //返回一个布尔值，表示该值是否为Set的成员。
console.info(set.delete(7));//删除某个值，返回一个布尔值，表示删除是否成功。
set.clear(); //清除所有成员，没有返回值。
console.info(set);

//Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5,5,5]);
const array = Array.from(items);
console.info(array);

//Set结构的实例有四个遍历方法
const set2 = new Set(['red', 'green', 'blue']);
for(let item of set2.values()){
    console.info(item); //由于 Set 结构没有键名，只有键值，所以keys方法和values方法的行为完全一致。
}
//返回键值对的遍历器
for(let item of set2.entries()){
    console.info(item);
    /*
    * ["red", "red"]
     test.js:228 ["green", "green"]
     test.js:228 ["blue", "blue"]
    * */
}

//使用Set实现并集（Union）、交集（Intersect）和差集
const set3=new Set([1,2,3,4,5]);
const set4=new Set([1,3,4,6,7]);
//并级
console.info(new Set([...set3,...set4]));

//交集
var intersect=[...set3].filter((item)=>set4.has(item))
console.info(intersect);

//差集
const difference= [...set3].filter((item)=>!set4.has(item));
console.info(difference);

//ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
const map=new Map([['name','leyi'],["petName",'qiezi']]);
console.info(map.size);//2
console.info(map.has('name'));//true
console.info(map.get('name'));//leyi
console.info(map.get('name'));//leyi
map.set({"obj":"halo"},'hallo');
console.info(map);//{"name" => "leyi", "petName" => "qiezi", Object {obj: "halo"} => "hallo"}

//Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。
const map2 = new Map();
const k1 = {'a':"a"};
const k2 = {'a':"a"};
map2.set(k1, 111).set(k2, 222);
console.info(map2.get(k1)); // 111
console.info(map2.get(k2));// 222

//Map构造函数接受数组作为参数,执行的过程是
const mapItems3 = [
    ['name', 'leyi'],
    ['color', 'red']
];
const map3 = new Map();
mapItems3.forEach(
    ([key, value]) => map3.set(key, value)
);
console.info(map3); //{"name" => "leyi", "color" => "red"}

//数组转为map
const map4 =new Map( [
    ['name', 'leyi'],
    ['color', 'red']
]);
console.info([...map4]);//Map 转为数组

//Map 转为对象,如果所有 Map 的键都是字符串，它可以转为对象。
function strMapToObj(map){
   let obj={};
   for(let [key,value] of map){
       obj[key]=value
   }
    return obj;
}
const map5=new Map().set('name',"leyi").set('color','red');
console.info(strMapToObj(map5)); // {name: "leyi", color: "red"}

//对象转为map
function objToMap(obj){
    let map6=new Map();
    for(let item of Object.keys(obj)){
        map6.set(item,obj[item]);
    }
    return map6;
}
console.info(objToMap({"name":"leyi",'color':"red"}));//{"name" => "leyi", "color" => "red"}

//Map 转为 JSON  Map 的键名都是字符串，这时可以选择转为对象JSON,Map 的键名有非字符串时，先通过扩展运算符转成数组
const map7=new Map().set('name','leyi');
function mapToJson(map){
    let obj={};
    for(let [key,value] of map){
        obj[key]=value
    }
    return JSON.stringify(obj);
}
console.info(mapToJson(map7));//{"name":"leyi"}