ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box-item{
width:100px;
background-color: aquamarine;
height: 50px;
text-align: center;
line-height: 50px;
margin: 10px;
}
#ad{
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
<body>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div id="ad"></div>
<script>
//let小demo
item = document.getElementsByClassName("box-item");
for (let i = 0; i < item.length; i++) {
item[i].onclick=function(){
this.style="background-color:red";
this.innerText="我被点击了"
}
}
// 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song]=F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);
// 对象的解构
const zhaobs = {
name:'赵本山',
age:'不详',
xiaoping:function(){
console.log("我也可以演小品")
}
}
let {name,age,xiaoping}=zhaobs;
console.log(name);
console.log(age);
console.log(xiaoping);
xiaoping();
// es6引入新的声明字符串的方式【``】
// 1.声明
let str = `我是字符串`;
console.log(str,typeof str)
// 2.内容中可以直接出现换行符
let strTwo = ` <ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>`;
// 3.变量拼接
let lovest = '杨幂';
let out = `${lovest}是我最喜欢的演员`;
console.log(out)
// Es6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
// 这样写更简洁
let namee = '大彭Sir';
let change=function(){
console.log('我贼能吃！！！')
}
const bi ={ namee,change}
console.log(bi)
// Es6允许使用箭头（=>）定义函数。
let fn = (a,b) => {
return a+b;
}
let sum = fn(10,20)
console.log(sum)
// this是静态的.this始终指向函数声明时所在作用域下的this得值
function getName(){
console.log(this.name);
}
let getName2 = () =>{
console.log(this.name);//无法改变指向
}
window.name = '彭Sir'
const es = {
name:'PengSir'
}
getName.call(es);
getName2.call(es);
// 不能作为构造函数实例化对象
// let person = (name,age) =>{
// this.name = name;
// this.age = age;
// }
// let me = new person('xiao',30);
// person is not a constructor
// console.log(me);
// 箭头函数的简写，当型参有且只有一个可以省略括号
let add = n =>{
console.log(n+n)
}
add(1)
// 当代码体只有一条语句的时候可以省略花括号,return必须省略
// 语句执行结果就是函数的返回值
let pow = n =>n*n;
console.log(pow(10));
// 箭头函数demo
// 需求一：点击div 2s 后颜色变成 粉色
let ad = document.getElementById('ad');
ad.onclick = function(){
setTimeout(()=>{
this.style.background="pink"
},2000)
}
// 需求二：从数组中返回偶数的元素
const arr = [1,6,9,10,100,25];
// 普通方法
// const result = arr.filter(function(item){
// if (item % 2 === 0) {
// return true
// } else{
// return false;
// }
// });
// 箭头函数
const result =arr.filter(item=>item%2===0)
console.log(result)
// 箭头函数适合与this无关的回调。定时器、数组方法的回调
// 箭头函数不适合与this有关的回调。时间回调，对象的方法
</script>
</body>
</html>
