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#######不像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 = `
${showme}
${getName()}
`;
//嵌套字符串
let names = ['jack','tom','marry'];
let str2 = `
${
names.map(name=>`- Hi,I am ${name}
`).join('')
}
`;
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代码
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};