Let 和const的区别
1.let是定义变量的,const是定义常量的,并且两个都不能重复定义
常量:const
const pi = 3.1415926; const pi = 125
变量:let
let bar = 1; let bar = 2;
这两个都会报错,在赋值会报错,因为常量和变量是不允许重新赋值的,这是跟ES5的var的最大区别
2.块级作用域
{}:
例如:
for(true){
var test = 1;
}
console.log(test)
可以打印出test = 1
但是
for(true){
let test1 = 1;
}
console.log(test1)
打印会报错 在于块级作用域会将变量或者常量变成私有的,而var存在变量提生,将test提至最前面,变成全局变量,故而可以打印出test;let不存在变量提升,所以test在全局打印不出来,只能在块作用域内打印。
3.箭头函数
参数 => 表达式/语句
特点:
1.没有指针(this),继承外层作用域;
2.不能用作构造函数,(不能使用New 调用);
3.没有prototype属性
var obj = {
comFin:function(){
console.log(this)
},
conFin2:()=>{
console.log(this)
}
}
obj.comFin()
obj.conFin2()
obj.comFin()打印出来 this 是test函数本身(函数调用者); >>>Object作用域
obj.conFin2()打印出来 Window ,全局作用域(本身没有作用域); >>>Object所在的作用域(Window)
不能用作构造函数:
普通函数做构造函数
let Animal = function(){};
let animal = new Animal();
console.log(animal);
打印出Animal{},可以做构造函数
箭头函数做构造函数
let Animal = () = >{};
let animal = new Animal();
console.log(animal1)
打印animal不是一个construter,不可以做构造器函数
没有prototype属性:
let test = function(){}
let test1 = () => {}
console.log(test.prototype)
console.log(test1.prototype)
普通函数的prototype指向construter和obhect的__proto__
4.模板字符串
反引号标识
支持多行字符串
支持变量和表达式
例1:
let str = `
<div>
<h1 class='title'>123</h1>
</div>
`
document.querySelector('body').innerHTML = str;
页面显示123,观察结构可以发现是一个div包裹h1的结构,class为title
例2:
let name = '陈理鹏';
let str = `
<div>
<h1 class='title'>${name}</h1>
</div>
`
document.querySelector('body').innerHTML = str;
页面显示陈理鹏,由${name}替换了,观察结构可以发现是一个div包裹h1的结构,class为title
例3:
let getName = function(){
return '陈理鹏'
};
let str = `
<div>
<h1 class='title'>${getName()}</h1>
</div>
`
document.querySelector('body').innerHTML = str;
嵌套函数,和例2结果一致
let arr = ['a','b','c'];
llet str =`
<ul>
${
arr.map(name=>`<li>${name}</li>`).join('')
}
</ul>
`
document.querySelector('body').innerHTML = str
嵌套字符串模板
5.Promise
promise传递异步参数(一个函数体,处理成功和失败),里面包括了resolve和reject,一个是成功回调一个是失败回调
Promise结构
new Promise ((resolve,reject)=>{
//异步函数,resolve表示成功回调,reject表示失败回调
//示例一个ajax请求
$.ajax({
url:'http://happymmall.com/user/get_user_info_do',
type:'post',
success(res){
//得到res可以在这调用resolve回调,这样在异步中处理完了数据,再调用成功回调
resolve()
},
error(err){
//如果失败,调用reject回调函数处理错误信息
reject()
}
})
}).then((res)=>{
//对应resolve,在succese得到res,对成功数据进行使用
console.log('success',res)
},(err)=>{
//对应reject
console.log('reeor',err)
});
链式Promis
//异步函数,resolve表示成功回调,reject表示失败回调
//示例一个ajax请求
$.ajax({
url:'http://happymmall.com/user/get_user_info_do',
type:'post',
success(res){
//得到res可以在这调用resolve回调,这样在异步中处理完了数据,再调用成功回调
resolve()
},
error(err){
//如果失败,调用reject回调函数处理错误信息
reject()
}
})
});
var promiseFin2 = new Promise ((resolve,reject)=>{
//异步函数,resolve表示成功回调,reject表示失败回调
//示例一个ajax请求
$.ajax({
url:'http://happymmall.com/user/get_user_info_do',
type:'post',
success(res){
//得到res可以在这调用resolve回调,这样在异步中处理完了数据,再调用成功回调
resolve()
},
error(err){
//如果失败,调用reject回调函数处理错误信息
reject()
}
})
});
promiseFin1.then(() => {
console.log('promiseFin1 succese');
//也可以在{}后添加reject判断失败该做什么
}).then(() => {
console.loog('promiseFin2 succese');
});
面向对象 - 类
关键词:class
语法糖,对应function
构造函数,constructor
class Animal {
constructor (){
//constructor构造器方法
}
//定义私人方法
getName(){
}
}
//对象实例化
let animal = new Animal();
//打印console.log(animal) -->得到 Animal{},这就是Animal的实例化
//类和构造函数的用法
//动态的设置属性和方法
class Animal {
constructor (name){
this.name = name
}
//定义私人方法
getName(){
return this.name
}
}
//对象实例化
let animal = new Animal('animal test');
类的继承
//父类和子类的this不是一个this,想用this(继承父类的this),就要用super()继承
class Animal {
constructor(){
this.name = 'animal'
}
getName(){
return this.name
}
}
//子类继承
class Cat extends Animal {
constructor(){
this.name = 'cat'
}
}
var cat = new Cat();
console.log(cat)
/* 会出现报错(Must call super constructor in derived class before accessing 'this' or returning from derived constructor
at new Cat ) */
//父类和子类不是同一个this,就报错了
//对象的属性和方法简化
//ES5的对象写法
var name = 'Chenlipeng',
age = '23';
var obj = {
name = name,
age = age,
getName:function(){
return this.name
},
getAge:function(){
return this.age
}
}
//ES6的对象写法
let name = 'Chenlipeng',
age = '23'
let obj = {
//对象的属性和方法的简写(属性键值相同可以简写)
name,
age,
//方法可以直接函数,不用以前的getName:function(){}这种写法
getName(){
return this.name
},
//表达式可以作为属性名或者方法名
['get' + 'Age'](){
return this.age
}
}
//对象的扩展
//获得对象的所有属性名和方法名
Object.keys()//括号内春如对象名,例如Object.keys(obj)
//对象的合并
Object.assign(对象1,对象2)
//例如Object.assign({a : 1},{b : 2}) --> 得到 {a:1,b:2}
//对象属性相同的会覆盖
//例如Object.assign({a : 1},{a :1,b : 2}) --> 得到 {a:1,b:2}
ES6的模块化
顾名思义就是:解决若干个复杂问题时自顶向下将系统划分为若干个模块的过程
前段借助其他COmmonJs(不是原生的,需要借助nodeJs打包编译),AMD,CMD -->由于官方暂未支持模块化,所以才借助CommonJs的nodeJS
//例子: 使用模块化,需要export(导出)和import(导入),新建文件夹Test,里面包含index.heml,index.js,module.js
//index.html中代码:
<script type='module' sr='./index.js'></script> //****很重要: -->官方暂时不支持模块化,所以type='moudle',并且借助nodeJs安装http-server才能支持模块化,用npm安装完http-server后开启一个端口就可以使用模块化了
//moudele.js代码(需要导出的模块): -->分别导出变量,对象,函数
let str = 'ChenLiPeng',
let obj = {
name : 'clp',
};
let fn = () => {
console.log('module test')
}
//export导出
export {str,obj,fn}
//index.js代码(需要导入模块):
//导入import
import {str,obj,fn} from './module.js'
//打印看看能不能得到导入的变量,函数和对象
console.log(str,obj.name,fn) // -->可以得到,所以是可以的,模块化引入成功
**具体代码可以参考 Git地址
