ES6学习笔记

ES6学习

---

兼容性

ie10+,chrome,firefox,移动端,nodejs

编译,转换

1. 在线转换
2. 提前编译

babel==browser.js

ES6:

1. 变量
2. 函数
3. 数组
4. 字符串
5. 面向对象
6. Promise
7. generator,现在一般用async/await
8. 模块化=>组件化=>原件

变量

var

​ 1. 可以重复声明
​ 2. 无法限制修改
​ 3. 没有块级作用域({ } ,if(){ }, for(){ })

let 变量–可以修改,

 1. 没有变量提升
 2. 不可以重复声明
 3. 不会给window增加属性
 4. 变量私有

const 常量–不能修改,

 1. 一旦声明必须赋值
 2. 不能重复声明
 3. 可以添加属性

函数–>箭头函数

​ function 名字(){};
​ ()=>{};
​ 1. 如果只有一个参数,()可以省略;
​ 2. 如果只有一个return,{}可以省略;
​ 3. 函数的参数:参数扩展/数组展开;默认参数;
​ 4. 通常函数当做参数的时候使用箭头函数;(回调);
​ 5. 里面的this指向是上一级;
​ 6. 箭头函数没有arguments;//…parameter
​ 7. 箭头函数不可以作构造函数,英文不可以使用new执行;

参数扩展

1. 收集剩余的参数
   *Rest parameter 必须放在最后;
2. 展开数组
   展开后的效果,跟直接把数组的内容写在这儿一样;

默认参数

function show2(a,b=2,c=8){//默认参数
   		console.log(a,b,c);
   	}
 ​     show2(4,5,6);

解构赋值

​ 1. 左右两边解构必须一样;
​ 2. 右边必须是合法的数据解构;
​ 3. 声明和赋值不能分开(必须在一句话里完成);
​ 4. 如果变量名和属性名一样的,可以直接省略写法;
​ (let {name:name,age:age}={name:“小明”,age:12}
​ let {name,age}=={name:“小明”,age:12});
​ 5. 使用数组的解构赋值的形式,如果等号右边不是一个数组,默认将其转换为类数组(类似数组的对象,必须有一个length属性);
​ 6. 使用对象的解构赋值的形式,如果等号右边不是对象默认转换为对象;

字符串

两个新方法

1. startWidth:以什么开始
2. endsWidth:以什么结束
3. padStart按照字符串补全字符串的指定长度;参数:1.长度2.指定字符;会自动截取(往前补)
4. padEnd同上补全作用,(往后补)
5. repeat(num)将字符串重复num次,(num小数会取整但不可以是负数或者Infinity)

反单引号

1. 字符串连接a${变量}

数组

map 映射–>一个对一个

	[12,51,60,77,85]

	[不及格,不及格,及格,及格,及格]

reduce 汇总

filter 过滤器

forEach 循环(迭代)

所有数组上的实例方法,参数是从索引n到索引m的,都是包含n不包含m;顾头不顾尾

 let obj = {
      _name: "ES5",
      get name(){
         //只要通过obj获取name属性就会触发这个函数;
         //可以通过return 返回值;
		 return this._name;
      },
      set name(val){
         // 只要通过obj给name属性设置值就会触发这个函数;
         // val:设置的值
         this._name = val;
      }
    }
    console.log(obj.name);
    obj.name = "ES6";

1. console.log(Array(7));
​	   // [empty × 7] 七个空数组
​	2. console.log(Array.of(7));
​	   // [7]; 解决了上述问题
​	3. Array.from(数组/类数组);
​	   console.log(Array.from([1,2,3]));//[1,2,3]
​	   console.log(Array.from("123"));//["1","2","3"],可以用于获取dom列表
​	4. copyWithin;
​	    // 从原数组中读取内容替换数组的指定位置的内容
​	    // 参数(替换的目标起始位置target,查找的起始位置begin,查找的结果位置end[不包括])
​	    // 原数组长度不变,超出部分自动截取
​	5. fill;
​	    // 按照指定字符填充数组,将数组的每一项都变成指定字符
​	6. filter;
​	    // 遍历数组,根据返回值去过滤原数组
​	    // let arr.filter(function(item,index){//处理并return;})
​	    // 返回的新数组
​	7. find;
​	    // 传入函数的;先遍历数组,一旦参数返回true停止查找,返回当前项;
​	     findIndex;
​	    // 同find,只是返回的是索引;
​	8. includes;
​	    // 判断数组中有没有某一项
​	    // 第二个参数可以指定查找的位置的索引
​	9. every
​	    // 遍历数组,如果遍历每一项都返回true,最后结果为true,否则为false;
​	10. some
​	    // 遍历数组,只要有一项为true,最后结果就是true
​	11. reduce
​	    // 迭代(使用用function);参数(上一次的返回值,当前项)
​	12. reduceRight
​	    // 跟reduce一样只是顺序是从右开始
​    13. keys 
​        // 遍历每一项索引的接口,使用for...of 遍历
​        // for...of遍历不适用keys时遍历每一项的值
​    14. entries
​        // 遍历接口,可以遍历到索引和每一项;返回的是数组(索引,当前项)
​        for(let [index,item] of arr.entries()){console.log(index,item)}

扩展运算

​ 1. 将非数组变成数组;let arr=“123”;[…arr]
​ 2. 将数组变成非数组;let arr1=[1,2,3];let arr2=[4,5,6];//[…arr1,…arr2];
​ 3. 求数组最大值;let arr=[5,6,84,563];//Math.max.apply(null,arr);//Math.max([…arr]);
​

对象Object

​ 1. Object.is(n,m);判断两个值是否相等;
​ 2. Object(true);//将参数变为对象;
​ 3. Object.assign(obj1,obj2);合并对象;将obj2合并到obj1上并返回obj1;
​ 4. ES7提供了对象的扩展运算符:let ALL={…obj1,…obj2};
​ 5. Object.getOwnPropertyDescriptor;//获取一个对象某个属性的描述;(configurable是否可配置,是否可以删除这个属性,enumerable是否可枚举,value,writable是否可修改);
​ 6. Object.keys();//返回值是一个数组,里面放着所有可枚举的属性;
​ 7. Object.values();返回值是一个数组,里面放着所有可枚举的属性的键值;
​ 8. Object.entries();返回值是一个数组,里面每一项也是一个数组[键,值];

Object中的set和get​

ES6的面向对象

1. class关键字,构造器和类分开了
2. class里面直接加方法

继承:

• super–超类==父类

面向对象应用–React

react

1. 组件化–class
2. JSX
   JSXbabelbrowser.js

JSON

JSON中的方法直接写,可以不写:function

Symbol

​ 1. 是一个新的基本数据类型,而且是一个值类型;
​ 2. 使用Symbol函数执行得到一个Symbol数据类型;
​ 3. Symbol跟字符串差不多,但是使用Symbol函数得到一个数据是独立的每一个都是完全不同的;
​ 4. let sy1 = Symbol();console.log(typeOf sy1);//symbol
​ 5. Symbol可以接收一个参数,是对这个symbol数据的描述;
​ 6. 即使描述一样,但是值也是不同的;
​ 7. 一般当做对象的属性;任意一个Symbol()得到的值都是不同的;
​ 8. Symbol值不可以跟其他值进行计算;不可以转换为数字;不可以进行字符串拼接;但是可以转换为boolean值;
​ 9. 可以toString变成显示字符串;
​ 10. Symbol.for() 如果之前有相同参数的Symbol的值,找到这个值并返回,如果没有就创建一个新的Symbol值;
​ 11. Symbol.keyFor(symbol值);//找到使用Symbol.for创建的值的描述;如果使用的事Symbol创建的值是获取不到的;

Set

​ 1. 类似数组,只有value没有键key;
​ 2. 通过构造函数方式创建一个Set实例;new Set();
​ 3. 参数是一个数组(或者类似数组只要是有iterable接口);
​ 4. 有interable接口:数组,arguments,元素集合,Set,Map,字符串;
​ 5. 会默认去重;
​ 6. 属性size,Set实例的大小;
​ 7. 属性add,增加;如果之前没有加上,有就不加,返回增加后的Set实例;可以使用链式写法;参数一次加一个
​ 8. 属性delete,删除,返回Boolean值;true删除成功,false没有此项删除失败;
​ 9. 属性clear,清空,没有返回值 undefined,不需要参数;
​ 10. 属性has,判断有没有此项,返回Boolean值;
​ 11. 属性forEach,遍历

• Set的用法

  • 数组去重

  • let arr1 = [4,2,5,8,3,9];
    let arr2 = [5,7,6,3,4];
    //两个数组的并集
    function add(arr1,arr2){
       return [...new Set([...arr1,...arr2])];
    }
    console.log(add(arr1,arr2));
    //交集
    function common(arr1,arr2){
       return arr1.filter(item=>arr2.includes(item));
    }
    console.log(common(arr1,arr2));
    //差集
    function different(arr1,arr2){
    ​	return add(arr1,arr2).filter(item=>!common(arr1,arr2).includes(item));
    }
    console.log(different(arr1,arr2));
    

Map

• Map用法
  • 构造函数方式创建一个Map实例
  • 参数是一个数组,数组每一项也是一个数组,有两项key和value;
  • 一个对象属性名必须是字符串或symbol,如果你写的不是字符串也默认转为字符串;
  • Map实例的key可以是任意数据类型;

Proxy

• 对目标对象默认操作的拦截/改写
  • new Proxy({目标对象target},{拦截的方法})
  • get只要是获取,例如:(proxy.name)就会触发
  • 拦截操作参考 阮一峰教程;

Promise

• 异步:操作之间没啥关系,同步进行多个操作
• 同步:同时只能做一件事
• 异步:代码更复杂
• 同步:代码简单

Promise怎么用

模块化

• node 自带模块化,规范commonjs
  • 三种 (一个js就是一个模块)
  • 导入 require
  • 导出 module.exports{x,x,x}或者exports.xx=xxx;
  • 引用自定义模块时(放到node_modules中或者使用./)
• cmd sea.js/amd require.js
  • 民间的
  • 代码写入define
• umd 为了做一个兼容处理(综合各种规范的处理)
• ESmodule 是ES6提供的
  • 如何定义模块 (一个js就是一个模块)
  • 如何导出模块 (export)
  • 如何引入模块 (import)

自己创建Npm包(nodeJS)

1. 创建一个包信息npm init
2. 将包直接复制到node_modules
3. 在要引入的地方require(‘包的名字’);

ES6转换工具

• babel
  • 全局安装npm i -g babel-cli
  • npm init创建package.json
  • 创建.babelrc文件(复制官网)
  • “build”: “babel (要编译的文件名字) -d (生成的文件名)”
• webpack—一站式开发

http

• form最重要
  • action提交到哪
  • method–get/post/put/delete/head
  • name–名字
  • enctype
    • application/x-www-form-urlencoded 名字=值&名字=值&…/默认,小数据
    • multipart/form-data 分块/文件上传,大数据
• ajax,jsonp都是模拟
• websocket–双工,跨域