ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
一 、 let 命令
- let可以声明局部作用域变量(在一对{}启用)
- let是局部变量
- let不能重复声明
- let 不能变量提升
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>这是第0</li>
<li>这是第1</li>
<li>这是第2</li>
<li>这是第3</li>
<li>这是第4</li>
</ul>
<p>10</p>
<script>
// 01 单击第几个li弹出下标索引
var lis = document.querySelectorAll("ul li")
for(let i = 0; i < lis.length; i++){
lis[i].onclick = function(){
alert((i))
}
}
// 02 h1内容 1s到9....
var p1 = document.querySelector("p")
for(let i=9;i>=1;i--){
setTimeout(function() {
p1.innerText = i;
}, (10-i)*1000);
}
//03
{
alert(a);
var a = 15;
}
if(true){
var a = 15;
}
alert(a)
if(true){
let a = 15
alert(a);
}
</script>
</body>
</html>
二 、 const声名变量
- const 是局部变量
- 声明必须赋值
- 不能重复声明*
- 建议大写
- 不会变量提升*
- 值类型不能修改*
//01
const PI = 3.1415926;
const PI;
PI = 3.1415926;// × 生命必须赋值
PI = 3.14; // × 值不能修改
//02
const LIST = ["I","LIKE","YOU"];
LIST.push("love");
console.log(LIST);
三 、解构
数组解构 把数组,对象,解构为单独的变量
// 把数组,对象,解构为单独的变量
数组解构
var arr = [1,2,3,4,5,6,7,8];
var [a,b,...rest] = arr;
console.log(a,b,rest);
var [a,,b,,c,,d,...rest] = arr;
console.log(a,b,c,d,rest)
var [a,,,b=10] = [1,2,3,4];
console.log(a,b);
var [a,,,b=10] = [1,2,3];
console.log(a,b);
对象解构 和数组解构一致 需要用{}包裹
// 对象解构
// 和数组解构一致 {}
// ...rest 剩余 ,没有顺序,
// 解构应用
function log(obj){
let {href,port,host,...rest} = obj;
console.log(href,port,host,rest)
}
log(location);
var obj = {name:"哪吒",age:"6",eye:6,leg:6}
var {age,name,eye,leg=2,...rest} = obj;
console.log(name,eye,leg,rest);
四 、 Es6扩展方法
ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。
// 遍历字符串
var str = "yue𠮷口"
for (var i = 0; i < str.length; i++) {
console.log(str[i])
}
for (let s of str) {
console.log(s)
}
// 02 es5的trim方法 移出两端空白 trimLeft左边|right右边
var str = " 123456 ";
console.log(str)
console.log(str.trim())
// 03 es6 repeat 重复
console.log("123！123！\n".repeat(10))
// 04 查找是否包含 indexOf lastIndeof 返回下标|-1 includes 是否包含 返回true|false
var str = "蹦蹦炸弹"
alert(str.includes("七七"));
// 05 填充 padStart填充前面 padEnd填充后面
var str = "1";
console.log(str.padStart(3,"0"));
console.log(str.padEnd(3,"0"));
// 06 字符串模板 ``定义 用${}定义js 可以随意换行,可以随意使用符号
var s = "开心"
var str = `我真的很${s}${s.length<3?'呀!':'吗?'}`;
console.log(str);
数组扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
// 01 includes 检查
let arr = [5,"开心","虾仁"]
alert(arr.includes(5))
// 02fill 填充
var arr = []
// 设置长度
arr.length = 5;
// 填充数组
arr.fill("填充内容",0,5)
// 输出
console.log(arr)
// 03 去重
var arr = [1,1,2,2,2,1,3,7,3,7];
// // set去重
// // 定义一个不重复的列表
var s = new Set(arr);
// // // 把set转换为数组
var arr2 = Array.from(s)
console.log(arr2)
var arr3 = [...new Set(arr)]
console.log(arr3)
// filter去重,去重的原理:indexof下标与当前下标对比
var arr2 = arr.filter(function(item,index){
// // return true保留 false移出
// // indexOf 得到下标等于index的下标保留
return arr.indexOf(item)==index
if (arr.indexOf(item)==index) {
return true
} else{
return false
}
})
console.log(arr2)
五 、 箭头函数
ES6 允许使用“箭头”（=>）定义函数。
箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
// 01 函数的默认参数
function say(color="黑"){
alert('我还吃一虾仁'+color+'色的')
}
say();
say("五彩");
// 02 函数的不定参数 函数定义的时候
function metting(a1,a2,a3){
console.log(`你吃虾仁了吗,${a1},${a2}和${a3}同志`)
}
var arr = ["郭德纲","郭麒麟","岳云鹏","张云雷"]
// 在函数调用的时候把数组传入扩展
metting(...arr) 把arr数组拆分为单个的参数传入
metting.apply(null,arr)
// 03 函数的扩展参数 调用的时候
function add(...list){// 把所有的单个参数接受为一个list的数据
// 把参数list列表累计相加弹出
alert(list.reduce((a,b)=>a+b))
// arguments 关键字,指函数的参数列表,Array.from把类似数组的元素转换为数组
var re = Array.from(arguments).reduce((a,b)=>a+b)
alert(re);
}
add(15,20,30)
六 、函数的参数
- ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
- ES6 的写法比 ES5 简洁许多，而且非常自然
- 参数变量是默认声明的，所以不能用let或const再次声明。
七 、class类
class类就是function构造函数的语法糖 本质上还是函数 typeof class
// box类属性:生命力;颜色;dom节点; 方法:dead() 死亡,被打 生命值-1
class box{
// 初始化实例(构造函数)
constructor(life=1,x=0,y=0){
// 生命力
this.life = life;
// 墙的x,y值
this.x = x;
this.y = y;
// 创建一个节点
var dom = document.createElement("div");
// 插入节点
document.body.appendChild(dom);
// 指向实列的dom
this.dom = dom;
// 更新dom
this.updateDom();
// 给dom添加点击事件
this.dom.addEventListener("click",()=>{
// 用箭头函数,this指向的上一层作用域thisthis(box实例)
// 让生命值--
this.life--;
// 如果生命值小于等于0 让dom从页面删除
if(this.life<=0){
this.dom.remove();
}
// 更新dom
this.updateDom();
})
}
updateDom(){
// 根据生命值的不一样
// 赋值给不同的颜色
if(this.life<3){
this.color = "#c83a0b"
}else if(this.life<=5){
this.color = "#791810"
}else{
this.color = "#e3e3e3"
}
// 修改dom的样式,宽,高,颜色,背景色,位置,左,顶
this.dom.style.width = "100px";
this.dom.style.height = "100px";
this.dom.style.backgroundColor = this.color;
this.dom.style.position="absolute";
this.dom.style.left = this.x+"px";
this.dom.style.top = this.y+"px";
}
}
// box是类:b1,b2,b3是类的实例
var b1 = new box()
// 当实例的时候会先执行constructor 创建一个实例对象,也会执行updateDom更新dom
var b2 = new box(10,100,0)
var b3 = new box(4,200,0)
// 创建一个新的mbox 可以移动box 继承box
// 自动移动,自上而下
class mbox extends box{
constructor(life=1,x=0,y=0){
// super调用父构造函数的方法
super(life,x,y);
// 停止动画id
this.id = null;
// 自动向下移动
this.automovedown();
}
automovedown(){
this.id = setInterval(()=>{
// 更改y值
this.y+=2;
// 更新dom(继承box)
this.updateDom();
if(this.y>window.innerHeight){
// 如果操作了窗口的高,移出
this.dom.remove();
// 停止间隔调用
clearInterval(this.id);
}
},10)
}
}
// 实例化mbox
var b4 = new mbox(4,300,0)
var b5 = new mbox(20,400,-200)
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
