前言:ECMAScript和JavaScript是什么关系？
JavaScript由ECMAScript，BOM,DOM组成，前者是后者的规范，后者是前者的实现
一.let和const命令
1）let用于声明变量，声明的变量是块级作用域
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
2)var声明的变量有变量提升的现象，let声明的变量没有
console.log(foo); //输出undifined
var foo = 2;
console.log(bar); //报错RefrenceError
let bar = 2;
3)暂时性死区
var tmp = 123;
if(true){
tmp = '123'; //referenceError
let tmp;
}
4）不允许重复声明
5）允许在块级作用域中声明函数，声明的行为类似let,在块级作用域之外不可应用
6）do表达式，使得块级作用域可以有返回值
let x = do { let t = f(); t = t * t + 1; }
//x的返回值为（t*t+1）
const命令
const声明一个常量，一旦声明，常量的值不能改变
const实际上保证的不是变量的值不能改动，而是变量指向的那个内存地址不得改动
二、变量的解构赋值
1）数组的解构复制
let [a,b,c] = [1,2,3]; //匹配模式
let [head, ...tail] = [1,2,3,4,5]; //head=1,...tail=[2,3,4,5];
//解构不成功，变量的值会等于undefined
//解构赋值允许指定默认值
let [x=1,y=x] = []; //x=1,y=1
let [x=1,y=x] = [2] //x=1,y=2
2)对象的解构赋值
let {foo,bar} = {foo: "aaaa",bar:"bbb"};
foo //"aaaa"
bar //"bbb"
let { foo:baz } = {foo: "aaa",bar: "bbb"}
baz //aaa
对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者
//如果将一个已经申明的变量用于解构赋值，需要将整个解构赋值语句放在一个圆括号里面
let x;
({x} = {x:1} );
3)字符串的解构赋值
const [a,b,c,d,e] = 'hello';
let {length: len} = 'hello'
len //5
三、函数的扩展
1）指定参数默认值，参数变量默认是申明的，所以不能用let或const再次申明
function log(x,y='world'){
console.log(x,y)
}
console.log(log.length); //1 length指必须传入的参数的个数
log('hello) // hello world
log('hello','china') //hello china
log('hello','') //hello
2)rest参数运算符...，用于获取多余的参数
//arguments变量的写法
function soortNumbers(){
return Array.prototype.slice.call(arguments).sort();
//arguments是一个类似数组多的对象，Array.prototype.slice.call先将其转化为数组
}
//rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
3）对象扩展运算符...
//数组操作的应用
let arr1 = [1,2,3];
let arr2 = [...arr1]; 用扩展运算符只会复制数据
arr2.push(4);
console.log(arr2); [1,2,3,4]
console.log(arr1); [1,2,3]
let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr2); [1,2,3,4]
console.log(arr1); [1,2,3,4]
3)箭头函数
var sum = (num1,num2) => num11 + num2;
var sum = (num1,num2) =>{
return num1+ num2;
}
箭头函数中this指向定义时所在的对象
四、Promise是实现异步编程的一种解决方案，有pending,fulfilled,rejected三种状态
Promise对象的状态只能从pending——>fulfilled( resolved )或从pending——>rejected
const promise = new Promise(function(resolve,reject){
if(/异步操作成功/){
resolve(value);
}else{
reject(error);
}
})
//Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
promise.then(function(value){
console.log(value); //异步操作成功的回调函数
},function(err){
console.log(err); //异步操作失败的回调函数
})
let state = 1;
function step1(resolve,reject){
console.log('开始第一步');
if(state == 1){
resolve('第一步完成了');
}else{
reject('第一步完成失败')
}
}
function step2(resolve,reject){
console.log('开始第二步');
if(state == 1){
resolve('第二步完成了');
}else{
reject('第二步完成失败')
}
}
function step3(resolve,reject){
console.log('开始第三步'); if(state == 1){ resolve('第三步完成了');
}else{
reject('第三步完成失败')
}
}
new Promise(step1)
.then(function(val){
console.log(val);
return new Promise(step2)
})
.then(function(val){
console.log(val);
return new Promise(step3))
})
.then(function(val){
console.log(val);
})
五、class类和继承//定义类
//定义类
class People{
constructor(name,type){
this.name = name;
this.type = type;
}
toString(){
return `${this.name} + ${this.type}`;
}
}
let p1 = new People('wpy',‘nv');
//Object.assign方法可以很方便的一次向类添加多个方法
Object.assign(Point.prototype,{
toString(){},
toValue(){},
})
//类的继承
class Dog extends People{
constructor(name,type,age){
super(name,type); //调用父类的constructor(name,type);子类必须在constructor方法中调用super
this.age = aage;
}
toString(){
return this.age + '' + super.toString(); //调用父类的toString()
}
}
六、for...of和for...in的区别
let arr = ['a','b','c'];
for (let val of arr){ //遍历的是属性值
console.log(val); //输出a,b,c
}
for(let val in arr){ //for in 遍历的实际上是对象的属性名称
console.log(val); //输出下标值0 1 2
}
arr,forEach(function(element,index,arr){
console.log(element); //指向当前元素
console.log(index); //当前元素的下标值
console.log(arr); //当前数组
})
//in的用法
let obj={
a: '1',
b: '2'
}
console.log(a in obj); true
console.log(c in obj); false 判断对象中是否有某属性，返回true和false
七、模版字符串
`
<ul>
<li>${items}</li>
</ul>
`
es6新增字符串方法
let jspang = "技术胖"
let blog = "很高兴认识你，技术胖"
console.log(blog.includes(jspang)); 判断blog中是否含有jspang所包含的字符串，返回true或false
console.log(blog.startWidth(jspang)); 判断开头是否包含...
console.log(blog.endWidth(jspang));判断结尾是否包含...
console.log(jspang.repeat(21));复制字符串
八、模块化
es6实现了模块功能，完全可以取代ComminJS和AMD规范，成为浏览器和服务器通用多的模块解决方案
es6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令输入
1）如果你希望外部能够读取模块内部的某个变量，就必须用export关键字输出该变量
export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year}; //推荐使用这种写法，因为这样就可以在脚本尾部一眼看出输出了哪些变量
2）一般情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名
function v1(){...}
function v2(){...}
export {
v1 as streamV1,
v2 as streamV2
}
export命令规定的是对外的接口，必须与模块内部的变量建立 一一对应的关系
3）模块的整体加载
impoort {arear,circumference} from './circle';
console.log('圆面积:' + area(4));
console.log('圆周长'+ circumference(14));
整体加载
impoort *as circle from './circle';
console.log('圆面积:' + circle.area;
console.log('圆周长'+ circle.circumference(14));4)export和export default的区别
export default function crc32(){ //export default输出，用于指定模块的默认输出，一个模块只能有一个默认输出，所以export default命令只能用一次
}
import crc32 from 'crc32';import输入语句不需要使用大括号
export function crc32(){ //export输出
}
import {crc32} from 'crc32'; //import输入语句需要使用大括号export default 42;//正确
export 42;//报错
export var a=1; //正确
export default var a = 1; //错误
4）模块的加载实现
//传统方法
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
默认情况下，浏览器是同步加载javascript脚本，加入defer或async属性，脚本就会异步加载，渲染引擎遇到这一行命令就会开始下载外部脚本，但不会等它下载和执行，而是执行后面的命令
async和defer的区别：
defer是渲染完再执行，即DOM解构完全生成，以及其他脚本执行完成，如果有多个defer脚本，会按照它们再页面出现的顺序加载
async是下载完再执行，即一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染
//es6的加载规则
<script tyope="module" src="./foo.js"></script>
//浏览器中对于带有type="module"的script,都是异步加载，不会造成堵塞浏览器，等同于打开了浏览器的defer属性
5）es6模块的转码
//命令行傻瓜模式
npm init -y 生成package.json文件
npm install -g babel-cli 全局安装babel命令行
cnpm install --save-dev babel-preset-es2015 babel-cli xi
新建.babelrc文件
{
"presets":[
"es2015"
],
"plugins":[]
}
//改成命令行自动模式
在package.json中配置
"scripts":{
"build": "babel src/index.js -o dist/index.js
}
九.set和map数据结构
1）Set类似于数组，但成员的值唯一，没有重复的值
const s = new Set(); //只能放数组，不能放对象
[2,3,5,4,2,2].forEach(x = >s.add(x)); // [].forEach(function(value,index,array){})
for(let i of s){ //of结构遍历数组
console.log(i);
}
for(let key in object){ //遍历对象
console.log(key);
console.log(object[key]);
}
//数组去重
[...new Set(array)]
//Set实例的属性和方法
操作方法：
add(value) 添加某个值，返回Set结构本身
delete(value) 删除某个值，返回一个布尔值，表示删除是否成功
has(value) 返回一个布尔值，表示该值是否为Set的成员
clear() 清除所有成员，没有返回值
Array.from()方法可以将Set结构转为数组
function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,2,3,3,4,4]);
遍历操作
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对对的遍历器
forEach() 使用回调函数遍历每个成员
2）WeakSet结构与Set类似，也是不重复的值的集合
//weakset的成员只能是对象，不能是其他类型的值
//weakset中的对象都是弱引用
//没有size属性
const ws = new WeakSet();
let obj = {a:'jspang',b:'技术胖'};
ws.add(obj); //需要通过add（）添加元素，不能直接通过new WeakSet({});
方法：
WeakSet.prototype.addd(value) 向WeakSet实例添加一个新成员
WeakSet.prototype.delete(value) 清楚WeakSet实例对的指定成员
WeakSet.prototype.has(value) 返回一个布尔值，表示某个值是否存在
3）Map
1）Map的实例和操作方法
//1.size属性
const map = new Map();
map.set('foo',true);
map.set('bar',false);
map.size //2
//2.set(key,value) 设置键名key对应的键值为value
const m = new Map();
m.set('edition',6);
m.set(262,'standard');
m.set('wpy','dmn');
//3.get(key) 获取key对应的键值
//4.has(key) 返回一个布尔值，表示某个键是否在当前Map对象之中
//5.delete() 删除某个键值对，返回true,删除失败，返回false
//6.clear() 清楚所有成员，没有返回值
2）遍历方法
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回所有成员的遍历器
forEach() 遍历map的所有成员
3）与其他数据结构的相互转换
//map转为数组用扩展运算符...
const myMap = new Map()
.set(true,7)
.set({foo: 3},['abc']);
[...myMap]
//数组转为Map,将数组传入Map构造函数
4）WeakMap
WeakMap结构与Map结构类似，也是用于生成键值对的集合
WeakMap只接受对象作为键名，不接受其他类型的值作为键名
十、es6数字操作
1).二进制声明
let binary = 0B010101;
2)八进制的声明
let octal = 0o666;
//es6中将所有的方法都放在了Number对象中
let a = 11/4;
Number.isFinite(a);判断a是否为数字，返回true或false
Number.isNaN(a); 判断a是否为NaN
Number.isInteger(a); 判断a是否为整数 //判断的范围在-(Math.pow(2,53)-1)到Math.pow(2,53)-1之间
Number.MAX_SAFE_INTEGER;integer的最大安全值
Number.MIN_SAFE_INTEGER;integer的最小安全值
Number.parseFloat(a); 将a转换成浮点型
Number.parseInt(a); 将a转换成整型
十一、es6新增的数组知识
//es6中将所有与数组有关的方法都放在了Array中
Array.from(json); 将json字符串转换成数组
Arraay.of('wpy','ai','lll'); 将字符串转换成数组
实例方法
let arr = [1,3,4,5,56];
1）arr.find(function(value,index,arr){
return value>5 //查找数据
})
2）arr.fill('要替换进来的新数据',数组的起始位置,数组的结束位置);替换数组元素，左闭右开区间
3）for of数组循环
for(let item of arr){
console.log(item);输出的是数组值
}
for(let item of arr.keys()){
console.log(item);输出的是数组的下标
}
for(let [index,val] of arr.entries()){
console.log(index,val);输出键值对
}
let arr = ['jspang','技术胖','大胖'];
let list = arr.entries(); 生成数组条目
console.log(list.next().value); //jspang
console.log(list.next().value); //技术胖
console.log(list.next().value); //大胖
十二、es6新增的的对象知识
1）Object.is() 判断两个对象是否相等
let obj1={name: 'jspang'};
let obj2={name: 'jspang};
console.log(Object.is(obj1.name,obj2.name));true
===同值相等，is严格相等
console.log(+0 === -0); trye
console.log(NaN === NaN); false
console.log(Object.is(+0,-0)); false
console.log(Object.is(NaN,NaN)); true
2)Object.assign() 合并对象
let a = {a: 1};
let b = {b: 2};
let c = {c: 3};
let d = Object.assign(a,b,c);
十三、Symbol(fo循环的时候不输出)
let obj = {name: 'jspaang',skill:'web'};
let age = Symnbol();
obj[age] = 18;
console.log(obj); {name: 'jspang',skill:'web',age:18};
for(let item in obj){
console.log(obj[item]); //jspang web 循环时不输出age
}
console.log(obj[age]); //可以通过这种方式输出
十.Proxy实例的方法
//proxy预处理
new Proxy({目标对象},{预处理对象})
let pro = new Proxy({
add:function(val){
return val+100;
},
name: 'i am wpy'
},{
get:function(target,key,property){ //打印pro.name之前执行的函数
console.log('come in get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key} = ${value}`);
return target[key] = value;
}
});
console.log(pro.name);
pro.name = '技术胖'; //setting name = 技术胖
let target = function(){
return 'i am wpy';
}
let handler = {
apply(target,ctx,args){
console.log('ddo apply');
return Reflect.apply(...arguments);
}
}
let pro = new Proxy(target,handler);
console.log(pro());