1.var , let , const
var
1.预解析(变量提升)
2.可以重复声明变量
let
1.不支持预解析(必须先声明,后使用)
2.不支持重复声明
3.支持块级作用域
1.举例说明—预解析
console.log(a);//undefind
var a=2;
console.log(b);//报错,b is not defined。
let b=3;
由于var存在预解析,所以不会报错。let不存在预解析
console.log(a);//undefind
var a=2;
// 以上代码相当于:
var a;
console.log(a);
a=2;
2.举例说明—重复声明变量
var a=1;
var a=2;
console.log(a);//2
let b=1;
let b=2;
console.log(b);//报错,Identifier 'b' has already been declared。b已经被声明了
3.举例说明—块级作用域
{
var a=1;
let b=2;
console.log(b);//2
{
console.log(b);//2
}
}
console.log(a);//1
console.log(b);//报错,b is not defined
const 常量
1.初始化之后,内部值不可改,必须初始化赋值的问题。
2.不支持预解析
3.不允许重复声明
4.支持块级作用域
const举例说明:
const a;
console.log(a);//报错,Missing initializer in const declaration。a没有赋值。
const b=1;
b=2;
console.log(b);//报错, Assignment to constant variable.不能改变常量的值
2.解构赋值
1.对于 对象 解构赋值,变量名要和键名相同,顺序不重要,用{}括起来
(1)变量声明并赋值时的解构
var obj = {
a: 1,
b: 2,
c: "lzf"
};
var {a,c,b} = obj;
console.log( a,b,c );//1 2 "lzf"
(2)变量声明 后 赋值时的解构
var obj = {
a: 1,
b: 2,
c: "lzf"
};
var a,b,c;
({a,b,c}=obj);
console.log(a,b,c);//1 2 "lzf"
2. 对于 数组 解构赋值,按数组顺序赋值,变量名不重要,用[ ]括起来
var attr=["a","b","c"];
var [x,y,z]=attr;
console.log(x,y,z);// "a","b","c"
3. 默认值配置
var attr=["a",,"c"];
var [x=1,y=2,z=3]=attr;
console.log(x,y,z);//a 2 c
4.占位
var attr=["a","b","c"];
var [x=1,,z=3]=attr;
console.log(x,z);//a c
5.重命名
var obj = {
a: 1,
b: 2,
c: "lzf"
};
var {a:x,c,b} = obj;
console.log( x,b,c );//1 2 "lzf"
6.重命名并且设默认值
var obj = {
a: 1,
b: 2,
c: "lzf"
};
var {a:x,c,b,d:z=3} = obj;
console.log( x,b,c,z);//1 2 "lzf" 3
3.解构赋值的应用,交换两个变量的值
var a=1;
var b=10;
[b,a]=[a,b];
console.log(a,b);//10 1
4.箭头函数
箭头函数: 函数的简短写法
变体方式
只有一个参数省略括号
只有一条语句省略大括号和return
返回对象 需要 用 () 包起来
注意
没有arguments
不可以作为构造函数
this绑定
举例一:将函数表达式用箭头函数表示
let a=function () {};
a();
//将以上函数表达式 用箭头函数 表示
let fn=()=>{};
fn();
举例二:只有一个 参数 省略括号, 没有参数或者1个以上参数都不可以省略
let a=(num) => { console.log(num); };
a(1);//1
//只有一个参数省略括号
let fn=num=>console.log(num);
fn(2);//2
举例三:函数体仅有一条语句,并且有返回值 可以省略 {} 和 return
let a=(a,b) => { return a+b; };
a(1,2);//3
//函数体仅有一条语句并且有返回值, 省略 { } 和 return
let fn=(a,b) => a+b;
fn(1,3);//4
注意:如果 返回的是一个对象 ,则需要 () 包起来
let a=userName=>{
return {
name : userName
}
}
console.log( a("lzf") );//{name: "lzf"}
//---------- 如果 返回的是一个对象 ,则需要 () 包起来 -------------
let fn=userName=>({
name : userName
})
console.log( fn("hzq") );//{name: "hzq"}
举例四:没有arguments
let a=function () {
console.log( arguments );
};
a(1,2,3,4,5);// Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let fn=()=>console.log( arguments );
fn(1,2,3,4,5);//报错,arguments is not defined。
举例五:不可以作为构造函数
let fn=(a,b)=>a+b;
var f=new fn(); //报错,fn is not a constructor.
举例六:this绑定,箭头函数在哪声明的,this就指向哪
let fn = () => {console.log( this );};
fn();//Window
document.onclick = fn;//Window
document.onclick = function(){
setTimeout(function(){
console.log( this );
},500)
}//Window
// document.onclick = function(){
// setTimeout( () => {
// console.log( this );
// },500)
// }//#document
5.函数参数
1.默认参数
let add = function( a,b,c=20 ) {
return a + b + c;
};
console.log( add( 1,2,3 ) );//6
console.log( add( 1,0,2 ) );//3
console.log( add( 20,10 ) );//50
2.剩余参数
let a = function(x,y,...r){
console.log( x,y );
console.log( r );
}
a("a","b","c","d");
//运行结果:
//a b
// ["c", "d"]
let fn = (...arg)=>{
console.log( arg )
}
fn( 1,2,3,4,5 )//[1,2,3,4,5]
let fn1 = (...arg)=>{
console.log( ...arg )
}
fn1( 1,2,3,4,5 )//1,2,3,4,5
6.扩展运算符
把集合变成参数的形式
push 数组
合并数组
字符串转换数组
类数组转变为数组
扩展对象的属性
注意
如果被扩展的内容中存在项是对象,那么被扩展后依然是地址引用
举例说明一:
var arr1 = [1,2,3];
console.log( arr1 );// [1, 2, 3]
console.log( ...arr1 );// 1 2 3
var arr2 = [1,2,31,231,23,12,3,123];
console.log( Math.max(2,10) ) ;//10
console.log( Math.max(...arr2) ) ;//231
举例说明二:push 数组
var arr = [1,2,3];
var arr2 = [4,5,6];
arr.push( ...arr2 );
console.log( arr );[1, 2, 3, 4, 5, 6]
举例说明三:合并数组
var arr = [1,2,3];
var arr2 = [4,5,6];
console.log( [ ...arr,...arr2 ] );// [1, 2, 3, 4, 5, 6]
举例说明四:字符串转换数组
var str = "miaov";
console.log( str.split("") );// ["m", "i", "a", "o", "v"]
console.log( [...str] );// ["m", "i", "a", "o", "v"]
举例说明五:扩展对象的属性
注意:如果被扩展的内容中存在项是对象,那么被扩展后依然是地址引用。
var obj = {
arr : [1,2]
}
var c = {
name : "k",
...obj
}
c.arr.push( 3 );
console.log( c );//{name: "k", arr: Array(3)}
console.log( obj );//{arr: Array(3)}
解决地址引用的方法
var obj = {
arr : [1,2],
name: "k"
}
//通过 JSON转化为字符串,再转化为对象。
var c = JSON.parse( JSON.stringify( obj ) );
c.arr.push(3,4,5,);
console.log( c );//{arr: Array(5), name: "k"}
console.log( obj );//{arr: Array(2), name: "k"}
此方法存在问题:
var obj = {
arr : [1,2],
name: "k",
fn: function(){},
a: undefined,
b: NaN
}
var c = JSON.parse( JSON.stringify( obj ) );
c.arr.push(3,4,5);
//c中缺少 fn,a,b
console.log( c );//{arr: Array(5), name: "k", b: null}
console.log( obj );//{arr: Array(2), name: "k", fn: ƒ, a: undefined, b: NaN}