目录
前言
从今天开始我会在平台上发表我自己学习的有关于ES6~ES11新特性的博客,学习方式的话是在b站,有感兴趣的小伙伴可以打开这个链接>-<来观看视频,同时我会在此专栏每个博客上的末尾标注本博客所涵盖的选集。一起前端,一起进步!!!
一.let变量声明及声明特性
如何声明变量
声明格式与var相同,但比其多了几个特性。
格式:let 变量名;
let a;
let b, c, d;
let e=100;
let f=1, g='sdsa', s=[];
特性
1.变量不能重复声明
let star=1;
let star=3;
打开控制台会报错
2.块级作用域
块级作用域为只在 代码块 里有效,在代码块之外使用无效。
{
let girl= 1;
}
console.log(girl);
这样使用的话是无效的,控制台会报错
但使用var就不会出现这样的问题
{
var girl= 1;
}
console.log(girl);
3.不存在变量提升
在var中会有变量提升,例如在代码声明之前我就输出这个变量,var的话不会报错而是会输出一个undefined
console.log(song);
var song = '1';
但如果你使用let进行声明的话就不会有变量提升而是会直接报错
console.log(song);
let song = '1';
4.不影响作用域链
虽然是块级作用域,但其不影响作用域链的效果
{
let school='abc';
function fn(){
console.log(school);
}
fn();
}
二.const声明 常量 以及其特点
如何声明常量
声明格式:const 常量名 = 初值;
const name = 'abc';
特点
- 一定要赋初值
- 一般常量使用大写
- 常量值不能修改
- 块级作用域
- 对于数组和对象的元素修改,不算对常量的修改,不会报错
三.变量的解构赋值
解构赋值:ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
数组的解构
我们先创建一个数组
const F4 = ['a1','b1','c1','d1'];
如果我们想把数组里的元素赋值给一个变量,就可以用解构赋值
let [q,w,e,r] = F4;
这样的话我们数组里的每一个值就相当于分给了每个变量
console.log(q);
console.log(w);
console.log(e);
console.log(r);
输出一下
这种情况运用的相对较少
对象的解构
const zhao = {
name:'初一',
sex:'男',
xiaopin:function(){
console.log("初一是男孩");
}
};
进行解构赋值
let {name, sex, xiaopin} = zhao;
输出一下
console.log(name);
console.log(sex);
console.log(xiaopin);
xiaopin();
这样可以在你多次调用对象时避免重复
虽然我觉得没啥用
四.模板字符串
ES6引入了一种新的声明字符串的方式 ``
let str = `我也是一个字符串哦`;
区别为
- 内容中可以直接出现换行符
let str1 = `
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>`;
console.log(str1);
- 可以直接进行变量的拼接
let str2='a';
let str3=`${str2}是好人`; //${}是固定格式,花括号中间放需要拼接的字符串
console.log(str3);
五.对象的简化写法
ES6允许在大括号里面直接写入变量或函数,作为对象的属性或方法,这样可以使书写更加简洁
let name = 'a';
let change = function(){
console.log("aaaaaa");
}
const school = {
name,
change,
improve(){ //可以省略 :function
console.log('a');
}
}
完整写法
const school = {
name: name,
change: change,
improve: function(){
console.log('a');
}
}
输出一下
console.log(school)
选集为3,5,6,7,8