es6补充
es6对es5的补充:
1.变量的补充·
1)使用let声明的是局部变量,只在此申明域中有效,且不可重复声明,且声明不提前(var申明会提前),但变量的创建会提前.
2)关于let申明不提前,但它能检测到该作用域中有,优先使用自己作用域的,但如果申明在使用的后面会造成暂时性死区.
3)const申明为常量,除了不可更改只读,其他特性和let相似.
2.NPM Node包管理工具
下载包,删除包,更新包
包是项目的依赖
npm install -g 包名
cnpm install 包名
yarn add 包名
-g:全局安装,不加则为此目录下.
下载的包存放在node_modules目录里.
3.每个js文件都是一个模块,怎样才能模块互相访问.
Nodejs中的访问,先在模块中导出:module.exports.a=1,然后在到需要的模块中require('./url js文件')导入;
4.解构:模式匹配.
1)数组解构
//扩展运算符...
let[m,...n] = [1,2,3];
m=1 n=[2,3];
//申明时给默认值,默认值只有匹配到undefined才生效,默认值可以为函数.
let [e,f='hello'] = [1];
e = 1 ,f = hello
2)对象解构
let {name,age} = {name:'zhangsan',age:12};
let {name:Name,age:age} = {name:'zhangsan',age:12};
生成Name,和age变量,分别是对象中name属性的值.
//默认值同理.
3)字符串进行解构
let {length} = "hello"; 得到length为5
4)函数参数解构
function test([x='0',y=2]){
console.log(x,y);
}
test([1,2]);
function test({name:Name="哈哈“,age}){
console.log(Name,age);
}
test({name:"haha",age:23});
//rest运算符:... ...a,形参特点就是多余的自动转化成数组,
//或者将数组展开(...arr)
function test(x,...y){
console.log(x,y); //
}
test(1,2,3); x:1,y:[2,3];
5.es6对对象的修改:
1)当对象的属性值和属性名名字相同时可以简写:
let obj = {name};
2)方法也可简写:
sayName(){
}
3)如果属性名为变量时,
[str]:1 //str="gender";
["say"+str]:function(){ //saygender方法
console.log(this[str]); //输出为1
}
obj[str]; //访问对象的str
obj['saygender'] //得到obj的saygender函数
4)对原型对象的修改:
1.getPrototypeOf(obj):获取实例的原型对象
2.setPrototypeOf(obj,protoObj):obj更改实例的原型对象为protoObj,构造函数也随之改变;
5)obj新增的方法:
1.Object.keys(obj):返回对象所有的属性名
2.Object.values(obj):返回对象所有的属性值
3.Object.entries(obj):返回对象的属性键值对.
4.Object.is(a,b):判断a,b两个值是否相等.
6)obj中注意点:
1.定义了默认值的参数通常作为函数的尾参数,函数的length参数将返回没有指定默认值的参数个数.
6.对函数的补充(箭头函数):没有自己的this,所以不能作为构造函数,内部的arguments不保存实参,如果想获取实参,使用rest对象.
比如:普通函数的this指向global对象(全局对象),空模块的this是空对象,因为函数是存放在global对象里.
箭头函数写法：
((参数)=>{ //放的函数体.
console.log(this); //与普通函数不同,打印的是父作用域的this,在声明的时候就确定了,不会因为使用的地方而改变,所以不推荐使用this.
})(); //自动执行,因为是匿名函数
let fun = ()=>{
console.log("haha");
}
7.对数组的扩展:
1.将可遍历的类数组转换成数组: Array.from();
2.将一组值转换成数组: Array.of(1,2,3,5);
3.查找数组中的值
arr.find(item,index,arr); 找到返回元素,没找到返回undefined
arr.findIndex(参数同上); 通过元素有无,没有返回-1,有返回索引
4.fill(参数) :将原数组中的值进行填充成参数的值.
5.迭代器对象内部实现了iterator接口,可以使用for-of去遍历.
6.数组中也有keys(),values(),entries()
7.includes(value) :判断有无此元素,有为true,没有为false
8.对异步操作的补充Promise:里面存放了异步操作,将异步方法同步操作.
1.promise对象就是一容器,内部参数是用函数来构建,分别代表成功和失败的函数
2.此对象的then方法里面的参数函数(就是放进去的成功函数)就是对象里的函成功后自动执行的函数
3.此对象的catch方法就是对象里的函数失败后自动执行的函数(同理)
4.finally时最后无论如何都要执行的,以上三方法都是在promise申明时绑定的.
5.Promise.all([p1,p2]); 参数为promise数组,里面的关系为与关系.同时成功才成功.返回一个promise对象
6.Promise.race([p1,p2]): 赛跑,谁先结束用谁的状态,返回一个promise对象
7.Promise.resolve(obj) :返回一个resolve状态的promise对象,如果obj中有then则直接调用then独象
8.Promise.reject(obj) :同理.
9.集合的增加:set,Map
set的方法:(set集合的key和value值一样)
add(value);
delete(value);
clear();
has(value);
keys() 返回迭代器对象
or(let key of keys):遍历拿到单独的key值
map的方法:
new Map([[name:'张三'],[age:18]])
new Map(Object.entries(obj));
size
set(key,value);
has(key);
forEach(function(value,key,map))
10.js中的引用了类.(ED6的class本质还有用原型链实现的,当作构造函数的其他写法):
1.静态属性:直接通过类名去声明
11.ES6中的模块 CommonJS
导出
let name = '张三'.
export{name:name}
export default{
name
}
导入
import {name} from './module.js';
注意:babel转换只是转换语法,不转换功能(遇到不支持的用babel-polyfill垫片)
12.es6怎么转换成es5 (使用babel转换工具)
1、全局在安装babel-cli
npm install -g babel-cli //-g表示全局安装
2、创建根目录，并在根目录下创建src目录和dist目录
src目录用于存放并编辑ES6代码，index.js文件
dist目录用于存放解码后的代码
3、执行npm init -y,一路回车生成package.json,创建node项目,
4、根目录下创建.babelrc文件
{
"presets": [
"es2015"
],
"plugins": []
}
5、安装ES5转换：//在本目录下载依赖,将下载的依赖保存到package.json中
执行npm install --save-dev babel-preset-es2015
--save-dev ：开发阶段用到的依赖,
--save : 产品阶段用到的依赖.
6、转换代码：
babel src --out-dir dist
将src中的index.js转换成ES5并输出到dist目录中
