ES6、ES7、ES8常用语法笔记

ES6

let 定义变量 ，const定义常量

let num=1;
num=2;
console.log(num);
const pi = 3.1415;

var可以重复定义，但let不行，以下重复定义变量的代码会报错

let name = "jack";
let name = "jack";
console.log(name);

块级作用域,var在{}外也起作用，但let偏向类似java语法的作用域,{}内定义的变量在{}外不起作用

let arr = [1,2,3,4];
for(let i=0,iLen=arr.length;i<iLen;i++){	
}
console.log(i)
//报错: i is not defined

#######不像var, let不存在变量提升

console.log(foo);
var foo = 1;
//显示undifiend undifiend,编译顺序是
//var foo;
//console.log(foo);
//foo = 1;

console.log(foo);
let foo = 1;
//报语法错误:Cannot access 'foo' before initialization

箭头函数

let value = 2;
let double = x => 2*x;//表达式
//语句块的方式
let treble = x => {
	return 3*x;
}
console.log('double=',double(value));
console.log('treble=',treble(value));

箭头函数没有独立作用域

var obj = {
   //普通的函数
	commonFn : function(){
		console.log(this);
    },
    //箭头函数
    arrowFn : () => {
    	console.log(this);
    }
}
obj.commonFn();//this 指向obj
obj.arrowFn();//this 指向obj所在作用域,window

箭头函数不能用作构造函数,即箭头函数没有构造方法

//普通函数可以当作构造方法用于实例话对象
let Animal = function(){
}
let animal = new Animal();

//箭头函数不能用作构造函数进行实例话对象
let Animal = ()=>{}
let animal = new Animal();
//报语法错误:Uncaught TypeError: Animal is not a constructor

箭头函数没有prototype

let commonFn = function(){};
let arrowFn = () => { };
console.log(commonFn.prototype);//显示是有prototype的指向了constructor
console.log(arrowFn.prototype);//显示undifined，说明没有prototype,所以也不能在prototype上添加方法

模版字符串,反引号``,支持多行字符串，支持嵌套变量和表达式

let showme = 'hello world';//变量
//函数表达式
let getName = () => {
	return 'jackjackjackjackjackjackjackjackjackjackjackjackjack';
};
//普通模版字符串
let str = `
<div> <h1 class="title">${showme}</h1> ${getName()}</div>
`;
//嵌套字符串
let names = ['jack','tom','marry'];
let str2 = `
	<ul>
		${
			names.map(name=>`<li>Hi,I am ${name}</li>`).join('')
         }
    </ul>
`;
document.querySelector('body').innerHTML = str2;

promise解决异步回调循环嵌套的问题

new Promise((resovle,reject)=>{
   //异步函数
	$.ajax({
		url:'http://areadata.api.juhe.cn/AreaHandler.ashx',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
}).then((res)=>{
	console.log('success',res);
},(err)=>{
	console.log('error:',err);
});

var loginPromise =  new Promise((resovle,reject)=>{
   //异步函数
	$.ajax({
		url:'http://xxx.com/login',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
});

var homePromise =  new Promise((resovle,reject)=>{
   //异步函数
	$.ajax({
		url:'http://xxx.com/home',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
});

//登录成功就显示主页数据
loginPromise.then(() => {
	console.log('login sccess');
	return homePromise;
}).then(()=>{
	console.log('home sccess');
});

面向对象-类

• 关键字:class

• 底层是用function实现

• 构造函数constructor

• 继承使用关键字extends

• 子类调用父类的构造函数使用super

  class Animal{
  	constructor(name){
  		this.name = name;
  	}
  	getName(){
  		return this.name;
  	}
  }
  let animal = new Animal('animal1');
  console.log(animal.getName());
  
  

class Cat extends Animal{
constructor(name){
super();//调用父类的构造方法,子类才能通过this使用父类的方法或属性
this.name = name;
}
}

let cat = new Cat(‘波斯喵’);
console.log(cat.getName());
```

面向对象-对象的用法

新的特性

let name = 'jack',age=20;
let obj = {
		//变量名可以直接用作对象的属性名称
		name,
		age,
		//对象里的方法可以简写
		getName(){
			return this.name;
		},
		//表达式可以作为属性名或方法名
		[ 'get'  + 'Age' ] () {
			return this.age;	
  	 }
};

VS
旧的用法

	var name =  'jack',
		age = 20;
	var obj = {
		name:name,
		age:age,
		getName : function(){
			return this.name;
	    },
	    getAge : function(){
	    	return this.age;
	    }
	} 

Object.keys(对象名)获取对象的属性名列表

Object.keys(obj);

Object.assign(对象1,对象2)合并对象返回新对象，后面的对象属性值覆盖前面的

Object.assign({a:1,b:2},{a:2,b:3,c:4});

模块化export、import的使用

1.index.html文件以模块化方式引用一个统一的js文件index.js,该js文件组织所有js代码

 <script type="module" src="./index/js"></script>

2.index.js文件引入其他module模块js的变量

import {str as string,obj,fn} from './module.js';
import foo from './module.js';
console.log('name',obj.name);
console.log('string',string);
console.log('fn:',fn);
console.log(foo);

3.module.js文件定义一些东东

let str = 'String';
let obj = {
	name : 'Jack'
};
let fn = () => {
	console.log('module tes');
};
export {
	str,
	obj,
	fn
};
export default {a:1};

ES7

ES8