前言:终于开启了学习es6的旅途,是牛是马来看看吧!
一、es6相关介绍
1、什么是ECMAScript?
ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。
2、为什么要学习ES6?
- ES6的版本变动内容多,具有里程碑意义
- ES6加入许多新的语法特性,变成实现更简单、高效
- ES6是前端发展趋势,就业必备技能
二、let变量声明以及声明特性
1、变量的声明
- 可以单独声明
- 可以多个变量一起声明
- 可以边声明边赋值,赋值可以是字符串、数字、数组等
//声明变量
let a;
let b,c,k;
let e=1000;
let g=123,f='fruit', h=[];
注:变量不能重复声明,不然会报错。
2、作用域
有块级作用域、全局、函数、eval作用域等。
块级作用域是用花括号括起来的作用域,也可以是if、else、while、for后面的花括号中的作用域。变量只在块级作用域里面有效,如下,不会打印出name。
{
let name = 'zhangsan'
}
console.log(name);
3、不存在变量提升
即不存在 在变量声明之前去使用这个变量,会报错。如下:(错误用法)
console.log(name);
let name="小化";
4、不影响作用域链
即假如在一个作用域里面,如果定义了一个函数,而函数里的变量会向上面冒泡去寻找这个变量。例如:
{
let name = '小花';
function a(){
console.log(name);
}
a(); //调用这个函数
}
5、一个切换颜色的小栗子
<body>
<div class = 'content'>
<h3 class ='header'>点击切换颜色</h3>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</body>
<script>
//获取div元素对象
let items = document.getElementsByClassName('item');
//遍历并绑定事件
for(let i=0;i<items.length;i++){
items[i] = onclick = function(){
//修改当前元素的颜色
//1、this.style.background = 'green';
items[i].style.background = 'green'; //第二种方法
}
}
</script>
注:如果在for循环里面用的是var来声明变量,则使用第二种方法时会报错。因为var没有块级作用域,var最后循环了三次后又自增加1,即当前var的变量的值是3,但是数组下标最大值为2,故会报错。
三、const声明常量以及特点
常量
:值不能修改的量称为常量。
const NAME = '小花';
const声明的一些注意事项:
- 一定要赋初始值
- 一般常量常量使用大写(虽然没有明确说明,但这是个潜规则)
- 常量的值不能修改
- 有块级作用域的特点
- 对于数组和对象的元素修改,不算做对常量的修改,不会报错(因为地址没有改变)例如:
const NAME = ['xiaohua','ming','zhangsan'];
NAME.push('aaaa'); //这是允许的
所以一般在声明数组或者对象时,多用const来声明。
四、变量的解构赋值
解构赋值
:es6允许按照一定模式从数组和对象中提取值,对变量进行赋值。
1、数组的解构
const NAME = ['小花','张三','李四','王五'];
let ['hua','zhang','li','wang'] = NAME;
这样就可以把数组中的值赋值给对应位置的变量。
2、对象的解构
const zhang = {
name:'张明',
age:'18',
article:function(){
console,log("这是张明的文章");
}
}
let {
name,age,article} = zhang; //相当于声明了三个变量,并对这三个变量进行赋值
article(); //赋值后可以直接调用这个方法,而不用zhang.article()
let {
article} = zhang;
article(); //也可以单独赋值然后调用
五、模板字符串
es6引入新的声明字符串的方式 `` 即反引号。
1、声明
let srt = `本仙女也是也是一个字符串!!`
2、内容中可以直接出现换行符
let srt = `我是
仙女
大宝贝`;
3、变量拼接
let bing = '冰淇淋';
let str = `${
bing}是我心目中最搞笑的演员!!`;
console.log(srt);
六、对象的简化写法
es6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样书写更加简洁。
let name = '张三';
let change = function(){
console,log('仙女是用来改变的');
}
const all ={
name,
change,
//方法的简化,不用加function了,直接跟着小括号
improve(){
console,log("巴拉啦能量,黑魔变身!!");
}
}
console.log(all); //输出all这个对象