ES6的学习src：书写ES6代码的文件夹，写的js程序都放在这里。 dist：利用Babel编译成的ES5代码的文件夹

第一节 ES6的开发环境搭建

使用Babel把ES6编译成ES5

1.先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
<script src="./dist/index.js"></script>
需要注意的是在引入js文件时，引入的是dist目录下的文件
在src目录下，新建index.js文件，写js
命令行

npm init -y

npm install -g babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

在根目录下新建.babelrc文件，并打开录入下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。

babel src/index.js -o dist/index.js

第二节新的声明方式（var / let / const）

var 全局声明

let声明变量

是局部变量声明，let声明只在区块内起作用，外部是不可以调用的,

const声明常量

第三节变量的结构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰

数组的解构赋值

1.简单的数组解构

let a=0;
let b=0;
let c=0;

let [a,b,c]=[1,2,3]

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

如果等号两边形式不一样，很可能获得undefined或者直接报错

解构的默认值

1.解构赋值是允许你使用默认值

  let [foo =true] = [];
    console.log(foo) //控制台打印出true

let [a,b="JSPang"]=['技术胖']                 
console.log(a+b); //控制台显示“技术胖JSPang

let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”

let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”

null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。

对象的解构赋值

2.解构不仅可以用于数组，还可以用于对象。

let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
console.log(foo+bar); //控制台打印出了“JSPang技术胖”

注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

圆括号的使用

let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang

要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了

字符串解构

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e,f]="JSPang";

第四节扩展运算符和rest运算符

 **扩展运算符和rest运算符，它们都是…（三个点）**

扩展运算符的用处：

当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：

function jspang(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
jspang(1,2,3); //1,2,3,undefined

    function ggx(...arg){
        console.log(arg[0]+arg[1]);
    }
    ggx(1,4,8);  //5

let arr1=['乖乖熊','学前端','有耐心']
    let arr2=arr1;
    console.log(arr2);
    arr2.push('好脾气');
    console.log(arr1);
    //输出  ["乖乖熊", "学前端", "有耐心"]
    //输出   ["乖乖熊", "学前端", "有耐心", "好脾气"]

改变arr2的值，发现arr1的值也改变了，因为这是对内存堆栈的引用，而不是真正的赋值，这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现我们对代码进行改造。

let arr1=['乖乖熊','学前端','有耐心']
    // let arr2=arr1;
    let arr2=[...arr1];
    console.log(arr2);
    arr2.push('好脾气');
    console.log(arr1);
    console.log(arr2);

(3)["乖乖熊", "学前段", "有耐心"]
(3)["乖乖熊", "学前段", "有耐心"]
(4)["乖乖熊", "学前段", "有耐心", "好脾气"]

rest运算符

它也用…（三个点）来表示

function jspang(first,...arg){
    console.log(arg.length);
}
jspang(0,1,2,3,4,5,6,7);

第五节字符串模版

1.字符串模版

let jspang='技术胖';                                       
let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
document.write(blog);

**ES5下必须用+jspang+这样的形式进行拼接  **

ES6
1.字符串模板

let jspang='技术胖';
    let blog = `非常高兴你能看到这篇文章，我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
    document.write(blog);

2.对运算符的支持

let a=1;
    let b=2;
    let result=`${a+b}`;
    document.write(result); //输出3

3.查找是否存在
es5

let jspang='老朋友';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友。这节课我们学习字符串模版。';
document.write(blog.indexOf(jspang)); //输出索引18

ES6直接用includes就可以判断，不再返回索引值，

let jspang='技术胖';  
let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.includes(jspang)); //true

判断开头是否存在

blog.startsWith(jspang);

判断结尾是否存在

blog.endsWith(jspang);

第六节 ES6数字操作

二进制声明：

二进制的英文单词是Binary,二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。

let binary = 0B010101;
console.log(binary);  //21

八进制声明

八进制的英文单词是Octal，也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。

let b=0o666;
console.log(b);  //438

数字判断和转换

数字验证Number.isFinite( xx )

let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false

NaN验证 (NaN是特殊的非数字，可以使用Number.isNaN())

console.log(Number.isNaN(NaN));

判断是否为整数Number.isInteger(xx)

let a=123.1;
console.log(Number.isInteger(a)); //false

整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)

let a='9.18';
console.log(Number.parseInt(a)); 
console.log(Number.parseFloat(a));

整数取值范围操作

整数的操作是有一个取值范围的，它的取值范围就是2的53次方

let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991

最大安全整数

consolec .log(Number.MAX_SAFE_INTEGER);

最小安全整数

console.log(Number.MIN_SAFE_INTEGER);

安全整数判断isSafeInteger( )

let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false

第7节：ES6中新增的数组知识（1）

JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式

let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}

这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性

  let  json = {
        '0': 'jspang',
        '1': '技术胖',
        '2': '大胖逼逼叨',
        length:3
    }
    let arr=Array.from(json);
    console.log(arr)

实际开发中这种方法还是比较常用的，毕竟节省了我们代码行数，也让我们的程序更清晰

Array.of()方法：

它负责把一堆文本或者变量转换成数组

let arr =Array.of('技术胖','jspang','大胖子');
console.log(arr);

find( )实例方法:

find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：
value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

第8节：ES6中新增的数组知识（2）

fill( )实例方法：

1.fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr);

数组的遍历

for…of循环：

let arr=['jspang','技术胖','大胖逼逼叨']
    for (let item of arr){
        console.log(item);
    }

for…of数组索引:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。

 let arr=['乖乖熊','学技术','废话多']
    for(let index of arr.keys()){
        console.log(index);
    }

同时输出数组的内容和索引：**我们用entries()这个实例方法，配合我们的for…of循环就可以同时输出内容和索引了。

let arr=['乖乖熊','学技术','有耐心']
for(let [index,val] of arr.entries()){
    console.log(index+':'+val);
}
// 输出 0:乖乖熊    
        1:学技术   
        2:有耐心

entries( )实例方法:
entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值

let arr=['乖乖熊','学技术','有耐心']
let list=arr.entries();
console.log(list.next().value); //数组 [0, "乖乖熊"]
console.log(list.next().value); //数组 [1, "学技术"]
console.log(list.next().value); //数组 [2, "有耐心"]
console.log(list.next().value); //undefined

第9节：ES6中的箭头函数和扩展

回顾ES5

function add(a,b){
    return a+b;
}
console.log(add(2,3));  //输出5

声明了一个add函数，然后传入a和b两个值，返回a+b的值。然后在控制台打印了这个函数的返回结果

es6中增加了默认值

- 传递一个参数也可以正常运行，其中一个给默认值

    function add(a,b=1){
        return a+b;
    }
    console.log(add(1)); //输出2

主动抛出错误

function add(a,b=1){
    if(a == 0){
        throw new Error('This is error')
    }
     return a+b;
}
console.log(add(0));

v-for必须有:key值,ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

函数中的严格模式

function add(a,b=1){
    'use strict'
    if(a == 0){
        throw new Error('This is error')
    }
    return a+b;
}
console.log(add(1));

会出现报错，原因用了严格模式，同时使用了默认值，两者冲突

获得需要传递的参数个数

不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).

function add(a,b){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}
console.log(add.length) //2

如果去掉严谨模式，给第二个参数加上默认值的话，这时候add.length的值就变成了1，也就是说它得到的是必须传入的参数。

箭头函数

function add(a,b=1){
        return a+b;
    }
    console.log(add(1)); //输出2

** vs **

add=(a,b=1) =>a+b;
console.log(add(1))

{}的使用, 在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{}括号

var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
};
console.log(add(1));

箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。

第十节：es6中的函数和数组补漏

对象的函数解构

let json = {
      a:'jspang',
      b:'学技术'
  }
  function fun({a,b='jspang'}){
      console.log(a,b)
  }
  fun(json);  // jspang 学技术

数组的函数解构

let arr= ['乖乖熊','学技术','免费教程'];
  function fun(a,b,c){
      console.log(a,b,c);
  }
  fun(...arr);

in的用法

-in判断对象里是否有某个值

  let obj={
      a:'乖乖熊',
      b:'学技术'
  }
  console.log('a' in obj)  //true

in判断数组里面是否有某个值

let arr=[,,,,,];
console.log(0 in arr); //false
 
let arr1=['jspang','技术胖'];
console.log(0 in arr1);  // true

**** 注意：这里的0指的是数组下标位置是否为空。 ****

数组的遍历方法

1.forEach

let arr=['jspang','技术胖','前端教程'];
arr.forEach((val,index)=>console.log(index,val));

forEach循环的特点是会自动省略为空的数组元素，自动过滤掉为空的元素

2.filter

let arr=['乖乖熊','技术胖','静心'];
arr.filter(x=>console.log(x));

3.some

let arr=['乖乖熊','技术胖','静心'];
arr.some(x=>console.log(x));

4.map

let arr=['乖乖熊','技术胖'];
arr.map(x=>console.log(x));

let arr=['jspang','技术胖','前端教程'];
console.log(arr.map(x=>'web'));

map可以起到一个替换的作用

数组转换成字符串

jion()方法

let arr=['乖乖熊','技术胖','静心'];
let str= arr.join('|');
console.log(typeof(str));  //string
console.log(str);  // 乖乖熊|技术胖|静心

-toString()方法

let arr=['乖乖熊','技术胖','静心'];
let str= arr.toString();
console.log(str);
console.log(typeof(str));

数组转换成字符串，join(''),toString()

第11节：ES6中对象

对象赋值

ES6允许把声明的变量直接赋值给对象
-对象赋值

let name='jspang';
let skill='web';
var obj={name,skill};
console.log(obj);

对象key值构建

let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);  //web

自定义对象方法

var obj={
    add:function(a,b){
        return a+b;
    }
}
console.log(obj.add(1,2));//3

Object.is()对象比较

对象的比较方法，以前进行对象值的比较，经常使用===来判断

var obj1={name:'jspang'};
var obj2={name:'jspang'};
console.log(obj1.name === obj2.name) //true
console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

===为同值相等，is()为严格相等
Object.assign()合并对象
操作数组时我们经常使用数组合并，对象也有合并的方法，assign()

   var a={a:'jspang'};
        var b={b:"技术胖"};
        var c={c:"web"};
        let d=Object.assign(a,b,c);
        console.log(d);

第12节：Symbol 在对象的作用

 var jspang=Symbol();
       var obj={
           [jspang]:'乖乖熊'
       }
       console.log(obj[jspang]);
       obj[jspang]='web';
       console.log(obj[jspang]);

声明Symbol

var f= Symbol();

Symbol的打印

 var g=Symbol('jspang');
 console.log(g);
console.log(g.toString());

没有toString()的是红字,toString的是黑字

Symbol 在对象中的应用

Symbol构建对象的Key,并调用和赋值

var jspang = Symbol();
        var obj={
            [jspang]:'技术胖'
        }
        console.log(obj[jspang]);
        obj[jspang] ='web';
        console.log(obj[jspang]);

Symbol对象元素的保护作用

在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护。没有进行保护

var obj={name:'jspang',skill:'web',age:18};
      for(let item in obj){
          console.log(obj[item]);
      }

将年龄用symbol进行循环保护

let obj={name:'jspang',skill:'web'};
     let age=Symbol();
     obj[age]=18;
        for(let item in obj){
            console.log(obj[item]);
        }
        console.log(obj);

第13节：Set和WeakSet数据结构

Set的数据解构是以数组的形式构建

Set声明

 let setArr = new Set(['jspang','乖乖熊','web','jspang']);
     console.log(setArr);
     console.log(typeof(setArr)); //object

Set和Array的区别是Set不允许内部有重复值，如果有只显示一个，相当于去重，set虽很像数组，但不是数组，

Set值的增删查

追加add:

在使用Array的时候，可以用push进行追加值，set更加语义化的add进行追加

  let setArr = new Set(['jspang','乖乖熊','web']);
    setArr.add('前端职场');
    console.log(setArr);

删除delete:

 let setArr = new Set(['jspang','guaiguai','jspang']);
    console.log(setArr);
    setArr.add('前端职场');
    setArr.delete('前端职场');

查找has:

用has进行值的查找。返回的是true或者false

   let setArr = new Set(['jspang','guaiguai','jspang']);
        console.log(setArr);
        console.log(setArr.has('jspang'));  //true

删除clear:

 let setArr = new Set(['jspang','guaiguai','jspang']);
 setArr.clear();

set的循环 for...of...循环

let setArr = new Set(['jspang','guaiguai','jspang']);
        for(let item of setArr){
            console.log(item);
        }

size属性

size属性可以获得set值的数量

 let setArr = new Set(['jspang','guaiguai','jspang']);
    console.log(setArr.size); //2

forEach 循环

 let setArr = new Set(['jspang','guaiguai','jspang']);
 setArr.forEach((value) =>console.log(value));

WeakSet 的声明

   let weakObj =new WeakSet();
       let obj={
           a:'jspang',
           b:'技术胖'
       }
       weakObj.add(obj);
       console.log(weakObj);

注意：如果直接在new的时候放入值，将报错。WeakSet里面的值也是不允许重复的
总结：在实际开发中Set用的比较多，WeakSet用的不多，但是他对传入值必须是对象做了很好的判断

第14节：map数据结构

之前了解的数据结构有json和set,map是es6新加的数据结构
json和map格式的对比
map的效率和灵活性更好

 let json ={
           name:'jspang',
           skill:'web'
       }
       console.log(json.name);
       var map = new Map();
       map.set(json,'iam');
    //    map.set('jspang',json);
       console.log(map)

json的反应速度要低于数组和map结构，map的灵活性更好，map重key可以设置成字符串，或者数组，json

map的增删查

增 set()

map的增值即是set方法

取值get

    console.log(map.get(json))
    console.log(map.get('jspang'))

删除delete

   let json ={
           name:'jspang',
           skill:'web'
       }
       let hh='sdf';
       var map = new Map();
       map.set(json,'iam');
       map.set(hh,'翻跟斗');
       map.delete(json);
       console.log(map);

size属性

       console.log(map.size);

查找是否存在has

       console.log(map.has('jspang'))

清楚所有元素

map.clear()

总结：map在开发中经常使用，有灵活性，高效性

第15节：用Proxy进行预处理

vue中有钩子函数，在运行一些初始数据，在改变对象或者方法时会有几种动作，Proxy的存在就可以让我们给加函数上这样的钩子函数，可以理解为预处理，简单理解为函数的生命周期
回顾一下之前的定义对象的放发：

 var obj ={
           add:function(val){
               return val+10;
           },
           name:'I am peipei'
       };
       console.log(obj.add(10));

声明了一个obj对象，增加了一个对象方法add和一个对象属性name,然后在控制台打印

声明Proxy

用new的方法进行声明，两个花括号，第一个花括号是方法主体，第二个花括号是Proxy的代理区域，相当于钩子函数

 new Proxy({},{});

现在把上面的obj对象改成我们的Proxy形式

 var pro=new Proxy({
         add:function(val) {
             return val+10;
         },
         name:'I am peipei'
     },{
         get:function(target,key,property){
             console.log('come in get');
             return target[key];
         }
     })
     console.log(pro.name); //come in get I am peipei
     console.log(pro.add(10));  //com in get 20

可以在输出结果中看出，先调用第二个{}里面的函数，相当于在方法调用前的钩子函数

get属性

get属性是在得到某处对象属性值时预处理的方法，接受三个参数

ES6的学习

第一节 ES6的开发环境搭建

使用Babel把ES6编译成ES5

第二节 新的声明方式（var / let / const）

var 全局声明

let声明变量

const声明常量

第三节 变量的结构赋值

数组的解构赋值

解构的默认值

对象的解构赋值

圆括号的使用

字符串解构

第四节 扩展运算符和rest运算符

扩展运算符的用处：

rest运算符

第五节 字符串模版

1.字符串模版

第六节 ES6数字操作

二进制声明：

八进制声明

数字判断和转换

整数取值范围操作

第7节：ES6中新增的数组知识（1）

JSON数组格式转换

Array.of()方法：

find( )实例方法:

第8节：ES6中新增的数组知识（2）

fill( )实例方法：

数组的遍历

第9节：ES6中的箭头函数和扩展

回顾ES5

es6中增加了默认值

主动抛出错误

函数中的严格模式

获得需要传递的参数个数

箭头函数

第十节：es6中的函数和数组补漏

对象的函数解构

数组的函数解构

in的用法

数组的遍历方法

数组转换成字符串

第11节：ES6中对象

对象赋值

对象key值构建

自定义对象方法

Object.is()对象比较

第12节：Symbol 在对象的作用

声明Symbol

Symbol的打印

Symbol 在对象中的应用

Symbol对象元素的保护作用

第13节：Set和WeakSet数据结构

Set声明

Set值的增删查

追加add:

删除delete:

查找has:

删除clear:

set的循环 for...of...循环

size属性

forEach 循环

WeakSet 的声明

第14节：map数据结构

json和map格式的对比

map的增删查

增 set()

取值get

删除delete

size属性

查找是否存在has

清楚所有元素

第15节：用Proxy进行预处理

声明Proxy

get属性

第二节新的声明方式（var / let / const）

第三节变量的结构赋值

第四节扩展运算符和rest运算符

第五节字符串模版