ES6相关介绍
概念
ES6:ESNAScript6,新的JavaScript语法标准。2015年正式推出，目的是为了使JavaScript更加快捷与方便。
变量声明
1.var (全局变量)
函数作用域
没有if,switch,for,while,do,else作用域
function num(){
a=15;
}
num();
console.log(a);
结果
2.let(局部变量)
局部作用域内（在一对{}启用）
不能变量提升
在一个作用域里面不能重复声明
在函数内部声明的不能在函数外部调用
for(let i=0;i<2;i++){
console.log(i);//z输出 0 1
}
3.const
const是局部变量
声明必须赋值
不能重复声明
建议大写
不会变量提升
值类型不能修改
什么时候用const
01 当声明变量不允许修改的时候，是个常量的时候
02 当某个变量大概率不会被改变(选择dom节点)
{
// const PI=3.1415926;
// const PI;
// PI=3.1415926;
// PI=3.14;
// console.log(PI);
const LIST=["I","Hate","You"];
LIST.push("Love");
console.log(LIST);
}
结果（push为末尾插入）
解构（数组和对象）
1.数组解构
把数组，对象，解构为单独的变量
数组解构: …剩余值
var arr=[1,2,3,4,5,6,7,8];
var [a,b,...rest]=arr;
console.log(a,b,rest);
ar [a,,b,,c,,d,...rest]=arr;
// a:1,b:3,c:5,d:7,[8] 数组下标
console.log(a,b,c,d,rest);
var[a,,,b=10]=[1,2,3,4];
console.log(a,b);
结果（字母对应数组相应下标元素，数组中没有元素为空）
2.对象解构
和数组解构一致,{}
…rest剩余，没有顺序，leg=2
var {name,age,say="love you",...rest} = {name:"mumu",age:18,say:"兵不厌诈",leg:2,eye:2,head:"傻得可爱"};
alert(name);
alert(age);
console.log(rest)
alert(say)
结果
字符串ES6扩展方法
1.遍历字符串
for循环
var str="yue𠮷 口";
for(var i=0;i<str.length;i++){
console.log(str[i]);
}
结果
for of
var str="yue𠮷 口";
for(let s of str){
console.log(s);
}
结果
2.字符串的检测
indexOf,lastIndexOf :返回值下标|-1
var str = "台湾是中国的一个省份";
alert(str.includes("福建"))
结果
includes(查找字符串) 返回true | false
includes包含 startsWith以xx开头 endWith以xx结尾
var str = "我爱我的祖国";
console.log(str.includes('张'))
console.log(str.includes('我'))
console.log(str.startsWith('我爱你'))
console.log(str.endsWith('祖国'))
结果
3.trim去掉两端空白，trimLeft去掉左边空白 ，trimRight去掉右边空白
var str = " 我爱我的祖国 ";
console.log(str);
console.log(str.trim());
console.log(str.trimLeft());
console.log(str.trimRight());
结果
4. repeat重复
var str = "我爱你\n"; // \n代表重复字符串全部内容
console.log(str.repeat(3))
结果
5.填充
padStart(填充总位数,填充字符串)
padEnd(填充总位数,填充字符串)
var str = "95";
console.log(str.padStart(7,'0'))
console.log(str.padStart(10,'-'))
console.log("love".padStart(10,'-'))
结果
6.字符串模板
var obj = {name:"mumu",age:19};
// 大家好，我的名字是mumu今年19岁
var str = "大家好，我的名字是"+obj.name+"今年"+obj.age+"岁";
console.log(str);
var str2 = `<p class="item">大家好，
我的名字是${obj.name}今年${obj.age}岁</p>`;
console.log(str2);
结果
数组的高阶用法
1.forEach遍历
var arr = [1,3,5,9];
// item遍历的元素；index元素的下标，self当前数组
arr.forEach(function(item,index,self){
console.log(index,item,self);
})
结果
2.map映射，从现有数组映射出新的数组
var arr = [1,3,5,9];
var arr2 = arr.map(function(item,index,self){
// return {age:item}
// return item+"￥"
return item*100+"￥"
})
console.log(arr)
console.log(arr2)
结果
3.reduce 累计
这次的a就是上一次计算结果 遍历项
var arr = [1,3,5,9];
var all = arr.reduce(function(a,b,index,self){
// return a*10+b;
return a+b;
})
console.log(all);
结果
4.every 检测都是(每个符合最终返回true)
var arr = [1,3,5,9];
var result = arr.every(function(item){
return item>5;
})
console.log(result);
结果
5.some 检测有一个符合条件
var arr = [1,3,5,9];
var res = arr.some(function(item){
return item>10
})
console.log(res);
// forEach map filter
var arr = [20,1,3,5,9];
var arr2 = arr.filter(function(value){
// 当返回的值为真，当前元素保留，
// 返回的元素为假，当前元素被过滤掉
return value>5;
})
console.log(arr2);
结果
函数参数
返回值
如果返回是一个对象,那么用括号包裹
function(){return {name:"cc",age:18}; }
()=>({name:"cc",age:18}
执行语句:如果执行有多行,返回语句要用return 执行语句要用{} 包裹
1.箭头函数（箭头函数就是函数的简写形式)
箭头左边：参数
箭头右边：返回值
var arr = [1,2,3,5,8,12];
arr.forEach(function(item){
console.log(item)
})
arr.forEach(item=>console.log(item))
结果
2.函数的参数
函数的默认参数
function say(color="黑"){
alert('没有你的世界是'+color+"色的");
}
say();
say("五彩");
结果
函数的拓展实参(调用)`
function metting(a1,a2,a3){
console.log(`今天来参加,中共中央政治局常委会的有,${a1},${a2}和${a3}同志`);
}
var arr = ["小王","小段","小龙","小曾"];
// 在函数调用时候把数组传入拓展.
metting(...arr) //把arr数组拆分为单个参数掺入
metting.apply(null,arr);
结果
函数的不定参数(定义的时候)
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);
结果
类
class 类
extends继承
super父构造函数(要在所有方法最前面执行)
constructor构造函数
this指向实例
static静态的
new Box() 实例化类
<p style="text-align: right;">分数: <span class="score">100</span></p>
<script>
// 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",(e)=>{
// 用的箭头函数,this指向的 上一层作用域this(Box实例)
// 让生命值--
this.life --;
var score = document.querySelector(".score");
score.innerText=score.innerText*1+1;
// 如果生命值小于等于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";
this.innerText = "5123"
}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,
// 自动移动(从上掉下来)
// 继承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){
// 选择到分数
var score = document.querySelector(".score");
// 如果触底减分
score.innerText=score.innerText-10;
// 如果操作了窗口的高,移除
this.dom.remove();
// 停止间隔调用
clearInterval(this.id);
}
},16)
}
}
// 实例化MBox;
// var b4 = new MBox(4,300,0);
// var b5 = new MBox(10,400,-200);
//
// 随机创造20个方块
for(var i=0;i<10;i++){
// 随机生命 1-10
var life = Math.ceil(Math.random()*5)
// 随机y 0--500;
var y = Math.floor(Math.random()*-500)
// 实例化
new MBox(life,i*80,y);
}
</script>
结果
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
