es6笔记①

最新推荐文章于 2024-08-24 08:29:27 发布

花江夏树

最新推荐文章于 2024-08-24 08:29:27 发布

阅读量6.5k

点赞数 1

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78151589

版权

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>dadad</p>
<p>qwqq</p>
<p>erer</p>

{
  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