本文详细介绍了JavaScript的ES6标准，包括let命令、const声明、数组解构、对象简写、箭头函数、函数参数默认值及对象扩展等关键特性。通过实例演示了这些特性的用法，如变量作用域、字符串扩展方法、数组操作以及类的定义。此外，文章还涉及了基于这些特性的简单游戏实现，展示了ES6在实际开发中的应用。
ES6
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
let命令
- 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 是局部变量
- 声明必须复制
- 不能重复声明
- 建议大写
- 不会变量提升
- 值类型不能修改
什么时候用const
- 当声明变量不允许修改的时候,是个常量的时候
- 当这个对大概率不会被改变(选择的DOM节点)
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 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
遍历字符串的应用
// 遍历字符串
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 = " 真的吗,真的吗 ";
console.log(str)
console.log(str.trim())
// 03 es6 repeat 重复
console.log("真的吗!真的吗!\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语句返回。
- 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
箭头函数部分实例
var fun = function(){
return "love"+str
}
//👇一样,
var fun1 = str=>"love"+str
// 箭头函数就是函数的简写形式
// 箭头左边是参数
// 箭头右边是返回值,也是函数要执行的代码
// 02 参数参数是0个或者是多个要用()包括
var fun = function(){
alert("我喜欢ES6")
}
var fun2 = ()=>alert("我爱ES6")
// 03 返回值
// 如果返回是一个对象,那么用括号包裹
var fun = function(){
return {name:"zzz",age:18};
}
var fun2 = ()=>({name:"zzz",age:18})
console.log(fun2())
// 04 执行语句:如果执行语句有多行,返回语句要用return,并且执行语句要用{包裹}
var fun = function(str){
if(str==includes("乌拉")){
return "四个二"
} else{
return "王炸"
}
}
var fun2 = str=>{
if(str.includes("乌拉")){
return "四个二"
} else{
return "王炸"
}
}
alert(fun2('乌拉乌拉'))
// 05 箭头函数的this 指向上一层作用域的this
// 06 箭头函数不能new 当构造函数
函数的参数
- ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
- ES6 的写法比 ES5 简洁许多，而且非常自然
- 参数变量是默认声明的，所以不能用let或const再次声明。
函数的参数部分实例
// 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)
对象的简写
- 如果对象的键名与值一致,可以省略键或者值
- 函数可以省略function关键字
- 对象的键(属性名)可以是动态拼接
对象的简写实例
<script>
var age = 18;
var name = "xxx"
var obj = {name:name,age:age,asy:function(){
alert(this.name+this.age)
}}
// 如果对象的键名与值一致,可以省略键或者值
// 函数可以省略function关键字
var obj2 = {name,age,say(){
alert(this.name+this.age)
}}
// 对象的键(属性名)可以是动态拼接
var num = 1;
var name = "zzz"
var obj = {[name+num]:"亚索",age:777,["houseA"]:"召唤师峡谷"};
console.log(obj)
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)
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
