我的es6学习笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的es6学习笔记相关的知识,希望对你有一定的参考价值。
前两个月看了一套es6的教程,现在将当时我做的笔记分享出来,与大家一起分享,我的不足之初也希望大家可以指出来。虽然简单学过一遍,但是我项目中用到的也就const,let,解构赋值,默认参数,箭头函数,promiss,模板字符串差不多这几个吧,其他的还不是很了解。现在再拿出来结合阮一峰老师的书再重新的学习一遍。
ES6
-
npm install babel-cli -g
-
npm install babel-cli babel-preset-es2015 --save-dev
-
babel es6.js -w -o es5.js
es6项目构建
-
基础架构
-
任务自动化(gulp,减少人工操作,提高效率)
-
文件合并,项目依赖
-
-
编译工具(babel(es6->es5),webpack(模块化,项目依赖))
-
代码实现
基础架构
-
业务逻辑:页面交互
-
自动构建
-
编译 1.编译到es5/3,为了IE8要到es3
-
辅助
-
自动刷新:js修改->自动编译->刷新浏览器
-
文件合并
-
资源压缩: js ,css,图片转base64编码
-
-
-
服务接口
-
数据
-
接口
-
任务自动化gulp
-
什么是任务自动化
-
什么是gulp:通过流方式操作文件,快,用来解决自动化构建工具,增强构建流程,背后是nodejs,提供多种插件,通过不同task组合去完成更加复杂的东西。
-
glup作用
-
了解如何使用gulp完成任务自动化:看文档,API,插件
编译工具
-
babel(javascript编译器),webpack解决模块化
-
babel核心用法
-
了解webpack及webpack-stream作用,后者是webpack对于gulp的支持
代码实现
-
创建es6前端工程
-
完成目录结构,自动构建。服务器搭建
实践
-
三个板块,前端代码,css,js模板,服务器,前端编译,服务器定时刷新
-
npm install express -g //安装最新版
-
npm install -g express-generator
-
npm package.json
-
.babelrc babel
es6语法
let:
-
块儿级作用域
-
严格模式
-
es6强制严格模式
-
变量未声明不能引用,变量不可以重复声明
const
-
声明必须赋值,不可以更改
-
对象存储的是指针,值可以变
解构赋值
-
解构赋值
-
解构赋值分类
-
数组解构赋值(重点)
-
[a,b]=[1,2],两边都是数组
-
[a,b,c=3]=[1,2] 解构没有成功配对为undfine默认值
-
[a,b,...rest]=[1,2,3,4,5,6] reset为数组
-
({a,b}={a:1,b:2})
-
-
对象解构赋值(重点)
{ let o={p:43,q:true} let {p,q}=0 //p=43 ,q=true }
-
默认值
-
-
字符串解构赋值
-
布尔值解构赋值
-
函数参数解构赋值
-
数值解构赋值
-
-
应用场景
-
变量的交换
{ let a=1; let b=2; [a,b]=[b,a]; }
{ function f(){ return [1,2] } let a,b [a,b]=f(); }
{ function f(){ return [1,2,3] } let a,b [a,,b]=f(); //a=1,b=4 }
{ function f(){ return [1,2,3] } let a,b [a,...b]=f(); //a=1,b=4 }
块儿作用域隔离变量
-
对象解构赋值
{ let metaData={ title:‘abc‘, test:[{ title:‘test‘, desc:‘description‘ }] } let {title:esTitle,test:[{title:cnTitle}]}=metaData //abc test }
正则
-
构造函数的变化
{ //es5写法 let regex=new RegExp(‘xyz‘,‘i‘); let regex2=new RegExp(/xyz/i); console.log(regex.test(‘xyz123‘),regex2.test(‘xyz123‘)) //es6 let regex3=new RegExp(/xyz/ig,‘i‘); //第二个修饰符会覆盖前面正则的修饰符 console.log(regex3.flags); //flags新增属性,用于获取修饰符 }
-
正则的方法扩展
-
u修饰符(Unicode),正则在处理Unicode的特征值
{ console.log(‘u-1‘,/^\uD83D/.test(‘\uD83D\uDC2A‘)); //把四个字节当成两个字符字母 console.log(‘u-2‘,/^\uD83D/u.test(‘\uD83D\uDC2A‘)); //把四个自己当成一个字符 console.log(/\u{61}/.test(‘a‘)); //false console.log(/\u{61}/u.test(‘a‘)); //true 加u才可以使{}内编码被识别 //.只是可以识别小于0xffff的unicle字符,如果编码超过两个字节无法识别 console.log(‘\u{20BB7}’); let s=‘‘; console.log(‘u‘,/^.$/.test(s)) //false.没有直接匹配 console.log(‘u-2‘,/^.$/u.test(s)) //true }
-
字符串中有大于两个字节的,一定要加上u修饰符,才可以正确识别,否则无法处理
-
换行符,回车符,行分隔符,段分隔符,.也不可以识别
-
-
y修饰符
{ let s=‘bbb_bb_b‘; let a1=/b+/g; let a2=/b+/y; console.log(‘one‘,a1.exec(s),a2.exec(s)); console.log(‘two‘,a1.exec(s),a2.exec(s)); //g,y都是全局匹配,g是从上一次匹配的位置继续寻找,不强调必须在匹配的下一个,中间任何位置都可以,y必须是紧跟着的才算。 console.log(a1.sticky,a2.sticky);//判断是否开启了y修饰符的模式 }
-
s修饰符(只是题提案,没有真正实现)
-
. z在s修饰符下可以识别 换行符,回车符,行分隔符,段分隔符。 6.总结
-
-
构造函数
-
字符串原来使用的跟正则相关的方法,现在都是隐形调用的正则对象的方法
-
y和g的区别,以及y的点是下一个开始
-
u修饰符的使用情况
-
s修饰符作用
字符串扩展
-
Unicode表示法
{ console.log(‘a‘,`\u0061`); console.log(‘s‘,`\u20BB7`); //会当成两个字符前四个和7,用大括号抱起来解决 console.log(‘s‘,`\u{20BB7}`); } { let s= s.codePointAt(0) //取码值 Srtring.fromCharCode("0x20bb7"); //es5不能处理unicode乱码 String.fromCodePoint("0x20bb7") //es6 可以 }
-
遍历接口
{ let s= for 循环 //es6 for(let code of str){ console.log(code) } }
-
模板字符串
-
数据和模板拼成带结果的字符串
{
let name="list";
let info="hellow word";
let m=`i am $(name),$(info)`;
}
-
新增方法(10种)
-
str.includes("c");
-
str.startsWith("");
-
str.endsWith("");
-
str.repeat(2)
-
‘1‘.padStart(2,‘0‘) es7:要满足两个长度,不够用零部
-
‘1‘.padEnd(a,‘0‘)
//标签模板,过滤字符串,处理多语言转换 { let user={ name:‘list‘, info:‘hello word‘ }; console.log(abc`i am $(user.name),$(user.info)`); function adb(s,v1,v2){ console.log(s,v1,v2) return s+v1+v2; } }
-
String.raw
Hi\n$(1+2)
) //raw: 对所有//进行转意,使用频率不高
-
-
注意:有几个方法是es7提案,需要安装补丁库,npm install babel-polyfill --save-dev
数值扩展
-
新增方法
-
二进制以0b开头,b小写大写均可
-
八进制用0o开头;
-
Number.isFinite(15) //判断数是否有尽
-
Number.isNaN:判断是不是数
-
Number.isInteger(25) //25.0是整数,不是数返回false
-
Number.MAX_SAFE_INTEGER
-
Number.MIN_SAFE_INTEGER
-
Number.isSafeInteger(10)
-
Math.trunc(4.1) //取整数,知取整数部分
-
Math.sign(5) //返回+-1/0 判断是不是正数,尝试转换,NaN
-
Math.cbrt(-1) //返回立方根
-
三角函数,对数
-
-
方法调整
数组扩展
-
Array.from:把伪数组,集合转换为数组
-
Array.of(3,4,7,9,11):一组数据变量转换为数组类型
//1. let p=document.querySelectorAll(‘p‘); let pArr=Array.from(p); pArr.forEach(function(item){ console.log(item.textContent) }) //2.转换同时进行了白遍历 Array.from([1,3,5],function(item){return item*2})
-
copyWithin:频率不高
[1,2,3,4,5].copyWithin(0,3,4) //替换位置从零开始,读取数据从三开始,
-
find\findIndex
[1,2,3,4].find(function(item){ return item>3; //找到第一个就停止,返回的是value }) [1,2,3,4].findIndex(function(item){ return item>3; //找到第一个就停止,返回的是下标 })
-
fill
[1,‘a‘,undefined,fill(7)]:数组内被替换成7 [‘a‘,‘b‘,‘c‘].fill(7,1,3):数组,从第一个开始换到第三个
-
entries\keys\values
-
values需要开启兼容
for(let index of [‘1‘,‘c‘,‘ks‘].keys()){ console.log(index) //返回数组下标的集合,values是取值 } for(let [index,value] of [‘1‘,‘c‘,‘ks‘].entries()){ console.log(index,value) //返回数组下标的集合,values是取值 }
-
-
inludes
[1,2,NaN].includes(1); [1,2,NaN].include(NaN):可以做到
函数扩展
-
参数默认值
{ function test(x,y=‘world){ console.log(‘默认值‘,x,y) } test(‘hello‘) //默认值helloworld } //注意有默认值的必须在后面
-
rest函数:不确定输入参数时,将其转化为数组
{ function test3(...arg){ for(let v of arg){ console.log(‘rest‘,v) } } test3(1,2,3,4,‘a‘); }
-
扩展运算符:把数组转换成离散值
...[1,2,4]
-
箭头函数:定义时,es5是调用时 函数名 参数(没有的话用() 返回值 要注意this的绑定
{ let arrow = v => v*2; console.log(arrow(3)) }
-
this绑定:重点补充箭头函数this的指向
-
尾调用,存在于函数式编程,一点,函数的最后一句是不是函数,提升性能,建议如果在性能优化过程中觉得某一过程是不断嵌套别的函数,或者说依赖于另一个
{ function tail(x){ console.log(‘tail‘,x); } function fx(x){ return tail(x); } fx(123); }
对象扩展(指Object)
-
简洁表示法
{ //简洁表示法 let o=1; let k=2; let es5={o:o,k:k} let es6={o,k} let es5_method={ hello:function(){ } } let es6_method={ hello(){ } } }
-
属性表达式
let a=‘b‘; let es5_obj={ a:‘c‘ } //es6key可以用表达式,变量 let es6_obj={ [a]:‘c‘; }
-
扩展运算符:es7提案支持不好
let {a,b,...c}={a:‘test‘.b:‘kill‘,c:‘add‘,d:‘ccc‘}
-
Object新增方法
-
Object.is(‘abc‘,‘abc‘);功能上等同于===
-
Object.assign({a:‘a‘},{b:‘b‘}) //返回生成的一个新的对象,是浅拷贝,只拷贝地址,只拷贝自身的,继承的和不可枚举的不考呗
for(let [key,value] of Object.entries(test)){ }
-
Symbol数据 类型
-
Symbol概念:提供独一无二的值,声明的值不重复,不相等
let a1=Symbal(); let a2=Symbol.for(‘a3‘);
-
Symbol作用 for in let of拿不到,要通过Object.getOwnPropertySymbols()返回数组,或Reflect。ownKeys
数据解构
-
Set:相对于数组,key不可以重复,主要方法add delete ,clear,has
let list=new Set(); list.add(5); list.size(); let arr=[1,2,3,4,5]; let lisrt= new Set(arr); //添加重复的不会生效,可以用于数组的去重; let arr=[1,2,3,4,1,2]; let new=new Set(arr); for (let key of list.keys()){ } for (let value of list.values.value()){ } for (let value of list.values()){ } for (let value of list.entries()){ } list.forEach(function(item){ })
-
WeakSet:支持的数据类型不一样只可以是对象,是弱引用,添加的对象只是地址引用,不会检测地址是否被回收,没有clear方法 size属性,不可以遍历
-
Map:相对于Object,key可以不是string
let map=new Map(); let arr=[‘123‘]; map.set(arr,456); let map=new Map([[‘a‘,123],[‘b‘:456]]);
size(),get(),delete(),clear()
-
WeakMap:接受的key必须是对象,没有size,不能clear,不能遍历
数据解构2
-
Map和Array对比
-
增:push/unshift set
-
查 find返回值 has()返回布尔值
-
改 foreach判断存在->修改 set
-
删 findindex->删除 delete
-
-
Set与Array对比
-
增 push/ add对象
-
查 find has() 对象要先保存
-
改 forEach forEach
-
删 forEach forEach->delete item
-
-
Map,Set,Object 对比
-
增 map.set(‘t‘,1) set.add({‘t‘:1}) obj[‘t‘]=1
-
查 map.has(‘t‘) set.has(item) ‘t‘ in obj
-
改 set(‘t‘,2) item.t=2 obj[‘t‘]=2;
-
删 map.delete(‘t‘)成本最低 set.delete(item) delete obj[‘t‘]
-
-
总结:能用map不用数组,要求唯一性set ,放弃object和array
Proxy 和 Reflect
-
Proxy 和 Reflect的概念
-
Proxy 和 Reflect的适用场景
-
数据校验
类
-
基本语法
class Parent{
constructor(name=‘imooc‘){
this.name=name;
}
}
let v_parent=new Parent(‘v‘);
-
类的继承
class Child extends Parent{
construct(name=‘child){
super(name); //为空使用父类默认值,必须第一行
this.type=‘child‘;
}
}
-
静态方法:通过类去调用,而不是类的实例
class Parent{
constructor(name=‘imooc‘){
this.name=name;
}
static tell(){
}
}
Parent.tail();
-
静态属性
class Parent{
constructor(name=‘imooc‘){
this.name=name;
}
}
Parent.type="test";
console.log(Parent.type)
-
getter setter
class Parent{
constructor(name=‘imooc‘){
this.name=name;
}
get longName(){
return this.name;
}
set longName(value){
this.name=value;
}
}
Promise
-
什么是异步(回调和事件,Promise)
-
Promise的作用
-
Promise的基本用法
{
let ajax=function(){
console.log(‘执行‘);
return new Primise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000)
})
}
ajax().then(function(){
})
}
Iterator和for of
-
Iterator接口
{
let arr=[‘hello‘,‘word‘]
let map=arr[Symbol.iterator]();
map.next();
map.next();
}
-
Iterator基本用法
-
for of
Generaror
-
基本概念:异步编程的一种解决方案,返回的是Iterator接口 调用next()依此执行yield
{
let obj={};
obj[Symbol.iterator]=function*(){
yield 1;
yield 2;
yield 3;
}
for (let value of obj){
console.log()
}
}
-
next函数的用法
{
let atate=function*(){
while(1){
yield ‘A‘;
yield ‘B‘;
yield ‘C‘;
}
}
let status=state();
console.log(status.next())
}
-
yield*的语法
Decorator(修饰器是一个函数,修改类的行为)
-
需要额外插件:npm install babel-plugin-transform-decorators-legacy --save-dev .babelrc加入插件
-
基本概念
-
扩展类的功能
-
基本用法
{
let readonly=function(target,name,description){
description.writable=false;
return descriptor;
}
class Test{
@readonly
time(){
return ‘2018-03-11‘
}
}
}
以上是关于我的es6学习笔记的主要内容,如果未能解决你的问题,请参考以下文章