const和let和var的区别
一:let,const不能重复定义,var可以
{
var a = 1;
var a = 2;
}
{
let b = 1;
let b = 2;//(报错 Identifier 'b' has already been declared)
}
{
const C = 1;
const C = 2;//(报错 Identifier 'C' has already been declared)
}
二:let,const没有变量提升
{
console.log(a)//undefined
var a = 1;
console.log(a)//1
}
{
console.log(b);//(报错 b is not defined)
let b = 1;
console.log(b);
}
{
console.log(C);//(报错 C is not defined)
const C = 1;
console.log(C);
}
三:var是函数作用域,let,const是块级作用域(即{})
{
var tmp = new Date();
function f(){
console.log(tmp); //undefined
if(false){
var tmp = "hello";
}
}
f();
//f函数内部可以理解为(var 变量提升至函数开始)
function f(){
var tmp;
console.log(tmp); //undefined
if(false){
tmp = "hello";
}
}
}
{
var tmp = new Date();
function f(){
console.log(tmp); // Mon Feb 17 2020 14:07:09 GMT+0800 (中国标准时间)
if(false){
let tmp = "hello";
}
}
f();
//而此时为let时只能提升至if开始,如
var tmp = new Date();
function f(){
console.log(tmp); // Mon Feb 17 2020 14:07:09 GMT+0800 (中国标准时间)
if(false){
let tmp;
tmp = = "hello";
}
}
f();
}
//const同理let,不做演示代码
四:const 在声明时必须被赋值,且值不能被修改
{
var a = 1;
console.log(a);//1
a = 2;
console.log(a);//2
}
{
let b = 1;
console.log(b);//1
b = 2;
console.log(b);//2
}
{
const C = 1;
console.log(C);//1
C = 2;//(报错 Assignment to constant variable.)
console.log(C);
}
{
const C;//(报错 Missing initializer in const declaration)
}
字符串模板
var ha = '哈哈'
var str = `笑 : ${ha}`;
console.log(str);//笑 : 哈哈
解构赋值
function foo({x,y,z}) {
return x + y + z;
}
let json = {x:1,y:2,z:3};
console.log(foo(json));//6
展开运算符
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));//6
箭头函数
箭头函数this指向父级/宿主,普通函数this指向调用者,找不到调用者时即为window
function a(){
this.ha = '哈';
setTimeout(function(){
console.log(this.ha);//undefined
},100);
}
function b(){
this.he = '呵';
setTimeout(()=>{
console.log(this.he);//呵
},100);
}
new a();new b();
Promise
Promise.all:并行执行多个 promise,当有一个catch时,整体catch
Promise.allSettled:并行执行多个 promise,当有一个then时,整体then
Promise.race:只等待第一个promise的结果,不管成功失败
Promise.any:只等待第一个成功的promise的结果
class
class Div {
constructor(height, width) {
this.height = height;
this.width = width;
}
getBackground(){
//方法...
}
}
extends 、super
extends继承必须在constructor中调用super
class Div {
constructor(height) {
console.log(1);
this.height = height;
}
getBackground(){
console.log(this.height);
}
}
class DivDom extends Div {
constructor (height){
super(height)
console.log(2)
}
}
let divDom = new DivDom(100);
divDom.getBackground();
若子类中重写了父类方法,可通过super调用父类方法
class Div {
constructor(height) {
console.log(1);
this.height = height;
}
getBackground(){
console.log(this.height);
}
}
class DivDom extends Div {
constructor (height){
super(height)
console.log(2)
}
getBackground(){
console.log(3);
}
getBackgroundParent(){
super.getBackground();
}
}
let divDom = new DivDom(100);
divDom.getBackground();
divDom.getBackgroundParent();
async、await
字符串新增方法
padStart、padEnd
'1'.padStart(2,0) // '01'
includes
'123'.includes(3) // true
trim、trimStart、trimEnd
' abc '.trim(); // 'abc'
数组新增方法
includes
[1, 2, 3].includes(3) // true
forEach
[1,2,3].forEach(item => {
console.log(item)
})
map
let arr = [1,2,3].map(item => {
return item*2
})
console.log(arr) // [2,4,6]
filter
let arr = [1,2,3].filter(item => {
return item > 2
})
console.log(arr) // [3]
find
let num = [1,2,3].find(item => {
return item > 1
})
console.log(num) // 2
reduce
let total = [1,2,3].reduce((num,item) => {
return num + item
})
console.log(total) // 6