es6笔记①

es6与es5对比

更多特性

解构赋值  箭头函数 set和map  异步操作  类与对象 模块化

浏览器不能直接访问es6代码

项目架构

babel webpack编译工具

创建目录

admin@admin-PC MINGW64 ~/Desktop
$ mkdir es6

admin@admin-PC MINGW64 ~/Desktop
$ cd es6/

admin@admin-PC MINGW64 ~/Desktop/es6
$ mkdir app

admin@admin-PC MINGW64 ~/Desktop/es6
$ mkdir server

admin@admin-PC MINGW64 ~/Desktop/es6
$ mkdir tasks

admin@admin-PC MINGW64 ~/Desktop/es6
$ cd app/

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ mkdir css

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ mkdir js

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ mkdir views

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ ls
css/  js/  views/



es6里有类的概念 创建一个class目录

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ mkdir js/class

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ touch js/class/test.js

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ touch js/index.js

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ touch views/error.ejs

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ touch views/index.ejs

ejs是为了方便node的引擎  模板文件

使用express脚手架

admin@admin-PC MINGW64 ~/Desktop/es6/app
$ cd ../server/

admin@admin-PC MINGW64 ~/Desktop/es6/server
$ express -e .
admin@admin-PC MINGW64 ~/Desktop/es6/server
$ npm install
admin@admin-PC MINGW64 ~/Desktop/es6/server
$ cd ../tasks/

admin@admin-PC MINGW64 ~/Desktop/es6/tasks
$ mkdir util

admin@admin-PC MINGW64 ~/Desktop/es6/tasks
$ touch util/args.js

admin@admin-PC MINGW64 ~/Desktop/es6/tasks
$ cd ../

admin@admin-PC MINGW64 ~/Desktop/es6
$ npm init

admin@admin-PC MINGW64 ~/Desktop/es6

$ touch .babelrc   不能改这个名字

admin@admin-PC MINGW64 ~/Desktop/es6
$ touch gulpfile.babel.js   这个也不能改

换成淘宝镜像

npm config set registry http://registry.npm.taobao.org/

查看node版本

admin@admin-PC MINGW64 ~/Desktop/es6/server
$ node -v
v6.11.2


安装express  才能创建ejs文件   npm install express和npm install ejs

http://www.cnblogs.com/dacheng/p/nodejs.html

yargs 处理命令行参数的

es6新增的块级作用域

执行工具 gulp --watch

let和var有类似的地方 但是也有区别

function test(){
    for (let a =1;a<3;a++){
        console.log(a);//1,2
    }
   console.log(a);//引用错误 而不是undefined    因为是强制严格模式
}
test();
let声明的变量只在自己的作用域有效

大括号包起来就是块级作用域

使用let声明变量不能重复声明！

const声明常量  不能修改  也是块级作用域   声明的时候一定要赋值

如果为const赋的是一个对象  那么这个对象里的属性可以修改   因为不能改的是指针

解构赋值

就是赋值的作用     左边一种结构  右边一种结构  两边一一对应赋值

数组解构赋值

{
    let a,b,rest;
    [a,b,...rest]=[1,2,3,4,5,6];
    console.log(a,b,rest);//打印1,2,[3,4,5,6]
}

对象解构赋值

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

关于默认值

{
    let a,b,c,rest;
    [a,b,c=3]=[1,2];
    console.log(a,b,c);//打印[1,2,3] 如果没给c赋值 那么就是undefined
}

用处

{
    let a =1;
    let b = 2;
    [a,b] =[b,a];//交换ab的值  没有解构赋值 需要创建一个中间变量
}

{
    function f() {
        return [1,2];
    }
    let a,b;
    [a,b] = f();
    console.log(a,b);
}

{
    function f() {
        return [1,2,3,4,5,6]
    }
    let a,b,c;
    [a,,,b,,c] =f();//1,4,6
}

{
    function f() {
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,...b] =f();//1, [2,3,4,5]
}

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b);//1  [3,4,5]
}

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}

{
  let {a=10,b=5}={a:3};
  console.log(a,b);
}

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);
}

3-3正则先略过


要安装这个
启动
打开浏览器 输入端口


超过16进制的unicode编码怎么办呢
用大括号包起来

{
  console.log('a',`\u0061`); //a的unicode编码 打印两个a
  console.log('s',`\u20BB7`);

  console.log('s',`\u{20BB7}`);


}
对比这俩s的打印结果

数值扩展

{
  console.log('B',0B111110111);//二进制开头0B
  console.log(0o767);//八进制0o
}

{
  console.log('15',Number.isFinite(15));
  console.log('NaN',Number.isFinite(NaN));//fasle
  console.log('1/0',Number.isFinite('true'/0));
  console.log('NaN',Number.isNaN(NaN));
  console.log('0',Number.isNaN(0));

}

{
  console.log('25',Number.isInteger(25));
  console.log('25.0',Number.isInteger(25.0));//true
  console.log('25.1',Number.isInteger(25.1));
  console.log('25.1',Number.isInteger('25'));//false
}

{
  console.log(Number.MAX_SAFE_INTEGER,Number.MIN_SAFE_INTEGER);//数字上限 下限
  console.log('10',Number.isSafeInteger(10));//判断这个数字是否在上下限范围内
  console.log('a',Number.isSafeInteger('a'));//false
}

{
  console.log(4.1,Math.trunc(4.1));//取整数部分
  console.log(4.9,Math.trunc(4.9));
}

{
  console.log('-5',Math.sign(-5));//-1
  console.log('0',Math.sign(0));//0
  console.log('5',Math.sign(5));//1   通过-1 0 1判断正数  负数 0
  console.log('50',Math.sign('50'));//1
  console.log('foo',Math.sign('foo'));//N
}


{
  console.log('-1',Math.cbrt(-1));//立方根
  console.log('8',Math.cbrt(8));//2
}

数组扩展

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

 Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个包含 7 个 undefined 元素的数组。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.of（）；//空数组





array.from

<p>dadadp>
<p>qwqqp>
<p>ererp>

{
  let p=document.querySelectorAll('p');
  let pArr=Array.from(p);
  pArr.forEach(function(item){
    console.log(item.textContent);//打印除了html标签以外的文本
  });

分别输出dadad
qwqq
erer

console.log(Array.from([1,3,5],function(item){return item*2}));//类似于map


array.fill 将数组中所有元素替换为fill中的内容

console.log('fill-7',[1,'a',undefined].fill(7));  //"fill-7",[7,7,7]

console.log('fill,pos',['a','b','c'].fill(7,1,3));//从1开始到3都要被7替换  结果为[‘a',7,7]

Array.keys（）；
补充for ..of

let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

keys、values、entries

{
  for(let index of ['1','c','ks'].keys()){
    console.log('keys',index); //keys  0   keys 1 keys 2  取到索引
  }
  for(let value of ['1','c','ks'].values()){
    console.log('values',value);//chrome不兼容 还取到值
  }
  for(let [index,value] of ['1','c','ks'].entries()){
    console.log('values',index,value);
  }
}

copyWithin

{
  console.log([1,2,3,4,5].copyWithin(0,3,4));//第0个位置也就是1 被替换成第三个位置4到第五个位置截止 但不取到第五个
    console.log([1,2,3,4,5].copyWithin(0,2,4));//[3,4,3,4,5]
}

 
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

{
  console.log([1,2,3,4,5,6].find(function(item){return item>3}));//4
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));//3
}

includes() 方法用来判断一个数组是否包含一个指定的值，如果是，酌情返回 true或 false。

{
  console.log('number',[1,2,NaN].includes(1));//true  
  console.log('number',[1,2,NaN].includes(NaN));//true
}

函数扩展
参数默认值

{
  function test(x, y = 'world'){//默认值后面的参数都要赋值 例如在y后面加一个参数一定也要有默认值
    console.log('默认值',x,y);
  }
  test('hello');//hello world
  test('hello','kill');//hello kill
}

  let x='test';
  function test2(x,y=x){
    console.log('作用域',x,y);
  }
  test2('kill');//kill kill
    test2();//undefined undefinded
}
function test22(c,y=x) {
    console.log('作用域',x,y);
}
test22('kill');//kill test

rest参数

{
  function test3(...arg){//把参数转为数组 在不确定要传多少参数 rest参数之后不能再有参数了
    for(let v of arg){
      console.log('rest',v);
    }
  }
  test3(1,2,3,4,'a');
}

扩展运算符

{
  console.log(...[1,2,4]);//1,2,4 把数组转为离散的值
  console.log('a',...[1,2,4]);//a 1 2 3 4
}

箭头函数

{
  let arrow = v => v*2;//是个函数  arrow函数名 v参数  v*2返回值
  let arrow2 = () => 5;//()代表没有参数
  console.log('arrow',arrow(3));//6
  console.log(arrow2());

}

this绑定
使用"=>"进行函数的定义，在它的内部，this的指针不会改变，永远指向最外层的词法作用域。
尾调用
http://www.jb51.net/article/104875.htm



对象扩展
简洁表达式

{
  // 简洁表示法
  let o=1;
  let k=2;
  let es5={
    o:o,
    k:k
  };
  let es6={
    o,
    k
  };
  console.log(es5,es6);

  let es5_method={
    hello:function(){
      console.log('hello');
    }
  };
  let es6_method={
    hello(){
      console.log('hello');
    }
  };
  console.log(es5_method.hello(),es6_method.hello());
}

属性表达式

{
  // 属性表达式
  let a='b';
  let es5_obj={
    a:'c',
    b:'c'
  };

  let es6_obj={
    [a]:'c'//[a]相当于是上面的b  b:'c'  运用在如果这个变量是因为另外一个key值而变化
  }

  console.log(es5_obj,es6_obj);

}

扩展运算符（不怎么用到 babel对其支持也不好）



Object新增方法

{
  // 新增API
  console.log('字符串',Object.is('abc','abc'),'abc'==='abc');//判断两个参数是否相等 true,true
  console.log('数组',Object.is([],[]),[]===[]);//false  false 指针不一样  object.is和===没有区别

  console.log('拷贝',Object.assign({a:'a'},{b:'b'}));//两个合并  是浅拷贝  只拷贝自身的属性 继承和不可枚举不能拷贝

  let test={k:123,o:456};
  for(let [key,value] of Object.entries(test)){
    console.log([key,value]);
  }
}



symbol数据类型

{
  // 声明
  let a1=Symbol();
  let a2=Symbol();//symbol为独一无二的  不会相等
  console.log(a1===a2);//false
  let a3=Symbol.for('a3');//检测全局变量中有没有a3 如果有就调用 没有就用symbol创建
  let a4=Symbol.for('a3');
  console.log(a3===a4);//true
}

{
  let a1=Symbol.for('abc');
  let obj={
    [a1]:'123',//会打印symbol abc  123  for ..in拿不到这个属性的 下面的console.log可以
    'abc':345,
    'c':456
  };
  console.log('obj',obj);

  for(let [key,value] of Object.entries(obj)){
    console.log('let of',key,value);//abc 345  c 456没有symbol
  }

  Object.getOwnPropertySymbols(obj).forEach(function(item){
    console.log(obj[item]);//123 专门拿到symbol变量
  })

  Reflect.ownKeys(obj).forEach(function(item){
    console.log('ownkeys',item,obj[item]);//都能拿到
  })
}

set-map数据结构

 set

WeakSet


map

WeakMap

{
  let list = new Set();//集合中的元素不能重复  可以看做数组
  list.add(5);//set增加元素要用add
  list.add(7);

  console.log('size',list.size);//2  集合的长度
}
//set另一种定义方式
{
  let arr = [1,2,3,4,5];
  let list = new Set(arr);

  console.log('size',list.size);
}

{
  let list = new Set();
  list.add(1);
  list.add(2);
  list.add(1);

  console.log('list',list);//2

  let arr=[1,2,3,1,'2'];
  let list2=new Set(arr);

  console.log('unique',list2);//1,2,3,'2'  不会做数据类型转换
}

{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);

  console.log('has',list.has('add'));
  console.log('delete',list.delete('add'),list);
  list.clear();
  console.log('list',list);
}

{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);

  for(let key of list.keys()){
    console.log('keys',key);//key和value一样都是四个字符串
  }
  for(let value of list.values()){
    console.log('value',value);
  }
  for(let [key,value] of list.entries()){
    console.log('entries',key,value);
  }

  list.forEach(function(item){console.log(item);})//也返回value
}


{
  let weakList=new WeakSet();//和set支持的数据类型不一样  不会检测引用的变量地址是否被垃圾回收

  let arg={};

  weakList.add(arg);

  // weakList.add(2);//报错 weakset区别与set  ①只支持对象 ②不会检测引用变量地址是否被垃圾回收③没有clear方法 、size 属性 不能遍历


  console.log('weakList',weakList);
}

{
  let map = new Map();//可以看做object
  let arr=['123'];

  map.set(arr,456);//map特性是可以用任何数据类型做key   set添加元素用add map添加元素用set

  console.log('map',map,map.get(arr));//[123 456] 456
}

{
  let map = new Map([['a',123],['b',456]]);//接受一个数组 数组每个元素还是数组 key和value两项
  console.log('map args',map);
  console.log('size',map.size);
  console.log('delete',map.delete('a'),map);
  console.log('clear',map.clear(),map);
}

{
  let weakmap=new WeakMap();//接受的key必须是对象  没size没clear 不能遍历

  let o={};
  weakmap.set(o,123);
  console.log(weakmap.get(o));
}


//map set与array区别 

  {
        let map = new Map();
        let array = [];
        //增
        map.set('t',1);
        array.push({t:1});
        console.info('map-array',map,array);

        //查找
        let map_exist = map.has('t');
        let array_exist = array.find(item => item.t);
        console.info('map-array',map_exist,array_exist);
        //改
        map.set('t',2);
        array.forEach(item =>item.t?item.t=2:'');
        console.info('map-array-modify',map,array);
        //删除
        map.delete('t');
        let index = array.findIndex(item=>item.t);
        array.splice(index,1);
        console.info('map-array-empty',map,array);
    }

    //set和array对比
    {
        let set = new Set();
        let array  = [];
        //增
        set.add({t:1});
        array.push({t:1});
        console.info('set-array',map,array);
        //查找
        let set_exist = set.has({t:1});
        let array_exist = array.find(item => item.t);
        console.info('set-array',set_exist,array_exist);
//g改
        set.forEach(item=>item.t?item.t=2:'');
        array.forEach(item =>item.t?item.t=2:'');
        console.info('set-array-modify',set,array);
        //删
        set.forEach(item=>item.t?set.delete(item):'');
        let index = array.findIndex(item=>item.t);
        array.splice(index,1);
        console.info('set-array-empty',set,array);
    }
//与object对比
    {
        let item = {t:1};
        let map = new Map();
        let set = new Set();
        let obj  = {};

        //增
        map.set('t',1);
        set.add(item);
        obj['t'] = 1;
        console.info('map-set-obj',obj,map,set);

        //查
        console.info({
            map_exist:map.has('t'),
            set_exist:set.has(item),
            obj_exist:'t' in obj
        });
        //改
        map.set('t',2);
        item.t = 2;//如果只存储了数据结构用这个快一点 不然用上面的
        obj['t'] = 2;
        console.info('map-set-obj',obj,map,set);
//杉删除
        map.delete('t');
        set.delete(item);
        delete obj['t'];
        console.info('map-set-obj',obj,map,set);

    }
    //能使用map不使用数组  如果考虑唯一性 使用set