1.变量声明(let)
-
变量不能重复声明
let name='zhangsan'; // let name='lisi';//错误 let不能重复声明 name='xioaming'; //可以重复赋值
-
变量可以被重复赋值
-
块级作用域
for(var i=0;i<10;i++){ setTimeout(()=>{ console.log(i); //全为9 }) } for(let i=0;i<10;i++){ setTimeout(()=>{ console.log(i); //0-9 每次都产生一个新的局部块 }) }
-
不存在变量提升
console.log(name); //undefined var name; //变量提升 console.log(name); //报错 let name; //let不支持变量提升,先声明后使用
-
不影响作用域链
let name='lisi'; function b(){ let name='zhangsan' console.log(name); //不影响作用域链 } b();
2.常量声明(const)
在项目中,常量通常在配置文件中使用
-
拥有变量的特性
-
必须赋值
-
常量名为大写
-
常量赋值后不能被修改
const STU_NAME='xiaoming'; //常量 const AGE; //错误 常量必须赋值 STU_NAME='zhangsan'; //错误 常量赋值之后不能被修改
-
保存引用数据类型时,可以操作数据
const OBJ={name:'list'};//将常量设置为引用数值类型,设置的是地址,只要地址不变即可 OBJ.name='wangwu'; //可以操作对象中的数据,不会改变地址
3.解构
解构可以方便提取数组或对象中的数据
3.1 数组解构
完全解构
let stus=['张三','李四','王五','赵六'];//可以是某个模块导出的
let [name1,name2,name3,name4]=stus; //解构与与原模式相同
console.log(name1); //张三
let nums=[1,[2,3,[4,[5]]]];
let [a,[b,c,[d,[e]]]]=nums; //模式与原数组相同
console.log(a,b,c,d,e);
不完全解构
let [name1,name2]=stus;
console.log(name1,name2);
异常解构
let [name1,name2,name3,name4,name5]=stus; //数组中不存在第五个元素
console.log(name5); //undefined
3.2 对象解构
var obj={
name:'zhangsan',
age:10,
getName(){
console.log(this.name);
}
}
完全解构
let {name,age,getName}=obj;
console.log(name);
let {age,name,getName}=obj; //对象解构时可以不考虑顺序,因为属性有自己的名字
console.log(name);
不完全解构
let {name}=obj;
console.log(name);
异常解构
let {sex}=obj; //sex不是obj中的属性
console.log(sex); //undefined
例
var arr=[1,2,obj];
let [a,b,{name,age,getName}]=arr; //完全解构
console.log(name)
let [a,b,c]=arr; //完全解构,c代表obj对象
console.log(c.name);
let [a,b,{name}]=arr; //不完全解构
console.log(name);
3.3 字符串解构
var str='xiaoming';
使用数组进行解构
var [a,b]=str; //如果利用数组解构字符串,会以下标进行解构
console.log(a,b); // x i
使用对象进行解构
var {length,toString,valueOf}=str; //可以利用对象去解构字符串对象中的属性和方法
console.log(length,toString);
3.4 数值解构
var num=123456;
数值不能使用数组进行解构
var [n1,n2]=num;
console.log(n1,n2); //错误 数值类型不能用数组解构
使用对象进行解构
var {toString,valueOf}=num; //数值类型也可以用对象进行解构,数值对象的属性和方法,没有length
console.log(toString,valueOf);
3.5 默认值解构
var obj={
name:'xiaoming',
age:10,
getName(){
console.log(this.name);
}
}
//设置默认值,若没有设置name的值时,使用默认值;若给name赋值了,则覆盖默认值
var {age,name='zhangsan'}=obj; //给name属性设置默认值,对象解构与顺序无关
console.log(name); //xiaoming
var arr=[1,2,3,4];
var [a,b=9,c,d]=arr; //数值中解构的顺序必须正确
console.log(b);
4.模板字符串
` 反引号中可以保存原字符串的结构,并且支持换行字符串
var arr=[1,2];
var tr="<tr>"
/*
tr+="<td>1</td>"
tr+="<td>2</td>"
*/
tr+="<td>"+arr[0]+"</td>"
tr+="<td>"+arr[1]+"</td>"
tr+="</tr>"
console.log(tr);
/*
var tr= `
<tr>
<td>1</td>
<td>2</td>
<tr>
`
*/
var tr= `
<tr>
<td>${arr[0]}</td>
<td>${arr[1]}</td>
<tr>
`
console.log(tr);
${}占位符
${}占位符也是为某一个JavaScript表达式占据位置。
字符串中插入一个JavaScript表达式:
(需要使用+对字符串进行拼接)
let job="web前端开发工程师";
let str1="我是"+job+",工作5年了";
使用占位符在模板字符串中实现字符串拼接:
let job="web前端开发工程师";
let str2=`我是${job},工作5年了`;//这里不是单引号,是esc下面的点符号,模板字符串
console.log(str2);
let func=(url)=>{
return url;
}
let str = `本站的url地址是${func("www.baidu.com")}`;
console.log(str);//本站的url地址是www.baidu.com
占位符只能在模板字符串中使用,不能在普通字符串中使用
let job="web前端开发工程师";
let str1="我是"+job+",工作5年了";
let str2=`我是${job},工作5年了 `;
let str3='我是${job},工作5年了';
console.log(str1); //我是web前端开发工程师,工作5年了
console.log(str2); //我是web前端开发工程师,工作5年了
console.log(str3); //我是${job},工作5年了
5.扩展运算符 (…)
扩展运算符用于取出对象或数组中所有可遍历的属性或元素
… 可以将元素进行扩展或者聚合,一般情况下为扩展。配合解构进行使用。
-
… 在数组中的运用
//扩展 var arr=[1,2,3,4,5]; console.log(...arr); var arr1=[...arr]; //深拷贝 console.log(arr1); //[1,2,3,4,5] var arr2=[...arr,6,7]; //和并操作 console.log(arr2); //[1,2,3,4,5,6,7] var arr3=[-1,0,...arr2]; console.log(arr3); //[-1,0,1,2,3,4,5] //聚合 //等号右边做扩展,等号左边做聚合 var [a,...b]=arr; //将除a外余下的为解构的成员,都保存在b变量中 console.log(a,b); // 1,[2,3,4,5]
-
…在字符串中的运用
var str='hello'; //扩展 console.log(...str); // h e l l o 字符串扩展出来都为字符 var arr1=[...str]; //['h','e','l','l','o'] console.log(arr1); var arr2=[...str,'xiaoming']; //数组和并 console.log(arr2); // ['h','e','l','l','o','xiaoming'] //聚合 var [a,...b]=str; //a为一个部分,b为a以外的部分,聚合起来 console.log(a,b); // h [ 'e', 'l', 'l', 'o' ]
-
…在对象中的运用
var obj={ name:'zhangsan', age:10, getName(){ console.log(this.name); } } //扩展 var obj1={ ...obj } //对象的深拷贝 console.log(obj1); var new_obj={ ...obj, sex:'female', sayHello(){} } //对象的和并 console.log(new_obj); //聚合 var {name,...o}=new_obj; console.log(name);
ES6基础
ES6语法 2(函数,对象,数组功能新增,for of ,symbol,set,map集合)
ES6语法 3(class,迭代器,promise,generator,async/await,proxy/reflect)