ES6笔记1（let变量声明以及声明特性，const声明常量以及特点，变量的解构赋值，模板字符串，简化对象写法，箭头函数，箭头函数的实践）
ES6
- let变量声明以及声明特性
-
- const声明常量以及特点
-
- 变量的解构赋值
-
- 模板字符串
-
- 简化对象写法
- 箭头函数
- 箭头函数的实践
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指得就是JavaScript的新特性
let变量声明以及声明特性
1、声明变量
let a;
let b,c,d;
let f = 234,g = 'tt';h = [];
2、声明特性
- 变量不能重复
let a = 'kk';
let a = 'jk';//错误
- 块级作用域（包括if，else，while，for）
{
let a = 555;
}
console.log(a);//会报错
- 不存在变量提升
console.log(a);//会报错，而不是undefined
let a = 'ly';
- 不影响作用域链
{
let a = '学校';
function fn(){
console.log(a);
}
fn();//输出学校
}
const声明常量以及特点
1、声明常量
const SCHOOL = '江里';
2、特点
- 一定要赋予初始值
- 一般常量要用大写（潜规则）
- 常量的值不能修改
const SCHOOL = '江里';
SCHOOL = 'HH';//错误
- 块级作用域
{
const PLAYER = 'UZI';
}
console.log(PLAYER);//报错
- 对于数组和对象的元素修改，不算对常量的修改，不会报错
const TEAM = ['UZI','MLXG','MING','LETME'];
TEAM.push('Meiko');
alert(TEAM);
变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称解构赋值
1、数组的解构
const F4 = ['y','j','k','l'];
let [lin,liu,li,l] = F4;
console.log(lin);
console.log(liu);
console.log(li);
console.log(l);
2、对象的解构
const zhao= {
name:'赵本山'，
age:'不祥',
xiaopin: function(){
console.log("我最搞笑");
}
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();
/*一般来说对象解构用在对象的方法上，例如
let {xiaopin} = zhao;
xiaopin();就可以不用写出zhao.xiaopin();*/
模板字符串
ES6引入新的声明字符串的方式
1、声明
let str = `我也是一个字符串哦！`;//不是引号
console.log(str,typeof str);
2、内容中可以直接出现换行符
let str = `
- 我
- 你
- 他
- 她
`;
3、变量拼接
let lovest = '魏翔';
let out = `${lovest}是我心目中的搞笑演员`;
console.log(out);//输出‘魏翔是我心目中的搞笑演员’
简化对象写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样写法更简洁
let name = 'lyh';
let change = function(){
console.log('改变自己');
}
const school = {
name,//name: name
change,//change: change
improve(){//improve:function(){}
console.log('加油');
}
};
console.log(school);
箭头函数
ES6允许使用箭头定义函数
//声明一个函数
//let fn = function(){}
let fn = (a,b) =>{
return a + b;
}
//调用函数
let result = fn(1,2);
console.log(result);
1、特性
- this是静态的、this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2=()=>{
console.log(this.name);
}
window.name = '猪八戒';
const school = {
name: '孙悟空'
};
getName();//输出猪八戒
getName2();//由于在全局作用域下声明的，this指向window。也输出猪八戒
//使用call方法调用
getName.call(school);//输出孙悟空
getName2.call(school);//输出猪八戒
- 不能作为构造实例化对象
let Person = (name,age) =>{
this.name = name;
this.age = age;
}
let me = new Person('xiao',11);
console.log(me);//报错
- 不能使用arguments变量
let fn = ()=>{
console.log(arguments);
}
fn(1,2,3);//报错
- 箭头函数的简写
（1）省略小括号，当形参有且只有一个的时候
let add = n =>{
return n+n;
}
console.log(add(5));
（2）省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
let pow = n =>n*n;
console.log(pow(8));
2、应用场景
（1）箭头函数适合与this无关的回调函数，定时器，数组的方法回调
（2）箭头函数不适合于this有关的回调，事件回调，对象的方法
箭头函数的实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数的实践</title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
</style>
</head>
<body>
<div id='ad'>
</div>
<script>
//需求1 点击div 2s后颜色变成粉色
//方法一
//获取元素
/* let ad = document.getElementById('ad');
ad.addEventListener('click', function() {
setTimeout(() => {
this.style.background = 'pink'
}, 2000);
});*/
//方法二
let ad = document.getElementById('ad');
ad.addEventListener('click', function() {
let _this = this; //保存this的值,在此函数作用下的this的值进行保存，让下面的_this找到this指向ad
//定时器
setTimeout(function() {
_this.style.background = 'pink';
}, 2000);
});
</script>
</body>
</html>
//需求2 从数组中返回偶数的元素
//方法一
const arr = [1, 6, 9, 10, 100, 25];
const result = arr.filter(function(item) {
if (item % 2 === 0) {
return true;
} else {
return false;
}
});
console.log(result);
//方法2
/* const result = arr.filter(item => item % 2 === 0);
console.log(result);*/