ES6课堂笔记
发布时间
阅读量：
阅读量
一.ES6的概念
ECMAScript 6（ES6）：新增的JavaScript核心语法
于2015年正式推出
旨在提升开发效率和用户体验
二.let
var: 全局作用域、函数作用域、没有 if, switch, while, do 和 else 作用域，并且会导致变量提升
让关键字用于定义局部变量。
在每个作用域中都由一对花括号{}来限定。
不可以提升被声明过的变量。
不允许在同一作用域内重复声明同一个变量。
let应用领域：
//1.单击第一个li弹出 li的下标(局部作用域)
//h1内容 1s 是9 2s是8 3s是7 ....10s是1
//选择到h1
for(let i = 9;i <= 1;i--){
//延迟10-i秒执行
setTimeout(function(){
//设置文本值为1
h1.innerText = i;
},(10-i)*1000);
} var lis = document.querySelectorAll("ul li");
//遍历选择的节点，添加单击事件
for(let i = 0;i < lis.length;i++){
lis[i].onclick = function(){
alert(i)
}
}
//for循环结束 i值为5 单击时候for循环早已结束三.const
const： 常量
不需手动提示变量名称
对于赋值操作，
建议采用大写字母作为变量名
声明的变量需被初始化
类型不可更改
什么时候使用const：
1.当声明变量不允许修改的时候，是个常量的时候
2.当这个对大概率不会被改变(选择的DOM节点)
{
//const PI = 3.1415926;
//const PI
//PI = 3.1415926; //x声明必须赋值
//PI = 3.14 //x 值不能修改
//console.log(PI);
const LIST = ["I","Hate","You"];
LIST.push("love");
console.log(LIST);
}四.解构
数组：
例：
var[a,b,,c=20,...rest]=[1,2,3,4,5,6];[] ：解构符号，
， ：一位，
...rest 剩余，
c=10 默认参数（有顺序的）
//把数组，对象，解构为单独的变量
//数组解构：...rest 剩余值；一位；b = 10 默认10
// 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;
// a:1,b:3bc:5,d:7,[8]
// console.log(a,b,c,d,rest);
var[a,,,b = 10] = [1,2,3,4];
console.log(a,b);五.对象解构
对象：
例：
var{name，age，leg=20，...rest}=obj;{} 符号，
没有顺序，
...rest 剩余
//和数组解构一致，{}
//...rest剩余，没有顺序，leg=2
//解构应用：
function log(obj){
Let {href,port,host,...rest} = obj;
//var href = obj.href;
//var host = obj.host;
console.log(href,port,host,rest)
}
log(location);
// var obj = {name:"mumu",age:"18",eye:2,leg:8};
// var {age,name,eye,leg=2,...rest} = obj;
// console.log(name,age,leg,rest);六.字符串方法
遍历字符串
var str = '収叏叐叒叓叕叚叜叝叞叠𠮷'
var str = 'yue𠮷 口';
for(var i = 0;i < str.length;i++){
console.log(str[i])
}
for(let s of str){
console.log(s);
}es5的trim 方法移除空白，trimLeft，trimRight
var str = " 我爱我的祖国 ";
console.log(str)
console.log(str.trim())es6 repeat
console.log("我爱你\n".repeat(1000))查找是否包含 indexOf lastIndeOf 下标|-1 includes是否包含 true|false
var str = "台湾是中国的一个省份";
alert(str.includes("福建"))检测：startsWith 以xxx开头 endsWith以xxx结尾
var str = "我特别喜欢和你做朋友";
alert(str.startsWith('你')) false填充：001 002 100 101 padStart(位数，填充字符串) padEnd()
var str = "1";
console.log(str.padStart(3,"0"))
console.log(str.padEnd(10,"0"))字符串末班``定义字符串，用${} 定义js
可以随意换行，可以随意使用符号
var s = "花轿";
var str= `那天，他坐上${s.length<3?'八抬大轿':'奔驰加长版'},'"微笑"'
着就看不见了`;
console.log(str);数组
//1.includes 检查
// let arr = [5,"喜欢","吃肉"];
// alert(arr.includes(5))
//2.fill填充
var arr = [];
//设置长度
arr.length = 5;
//填充数组
arr = arr.fill("填充内容",0,5);
//输出
// console.log(arr);
//3.去重
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);
//在数组里面展开一个set
// var arr3 = [...new Set(arr)];
// console.log(arr3);
//filter 去重的原理：indexOf下标与当前下标对比
// var arr2 = arr.filter(function(item,index){
// //return true 保留，return false 移除
// //indexOf 得到下标等于index当前下标 保留
// // return arr.indexOf(item) === index;
// if(arr.indexOf(item) == index){
// return true;
// }else{
// return false;
// }
// })
// console.log(arr2)
var arr2 = arr.filter((item,index)=>arr.indexOf(item) == index)
console.log(arr2);七.箭头函数
// var fun = function(str){
// return "love" + str;
// }
// var fun1 = (str) => "love" + str;
//1.箭头函数就是函数的简写形式
//箭头左边是：参数
//箭头右边是：返回值，也是函数要执行的代码
// alert(fun1("毛主席"))
//2.参数：1个或者多个 用()包裹
// var fun = function(){
// alert("我爱ES6")
// }
// var fun2 = () => alert("我爱ES6")
// var func = function(a,b){
// alert(a+b)
// }
// var fun2 = (a,b)=>alert(a+b);
// fun2(4,5)
//3.返回值
//如果返回是一个对象，那么用括号包裹
// var fun = function(){
// return {name:"mumu",age:18};
// }
// var fun2 = () => ({name:"mumu",age:18});
// console.log(fun2());
//4.执行语句：如果执行有多行，返回语句要用return 执行语句要用{} 包裹
// var fun = function(str){
// if(str.includes("111")){
// return "222"
// }else{
// return "333"
// }
// }
var fun2 = str =>{
if(str.includes("111")){
return "222"
}else{
return "333"
}
}
alert(fun2('puting'))
//5.箭头函数的this指向的是上一层作用域的this
//6.箭头函数不能new 当构造函数八.函数参数
//1.函数的默认参数
function say(color='黑'){
alert('没有你的世界是'+color+'色的')
}
// say();
// say("五彩");
//2.函数的扩展实参（调用）
function metting(a1,a2,a3,a4){
console.log(`今天来参加，学校校会的有，${a1},${a2},${a3}和${a4}同学`);
}
var arr = ["小丁","大段","陈龙","小小怪"];
//在函数调用的时候吧数组传入拓展
metting(...arr) //把arr数组拆分为单个参数传入
// metting.apply(null,arr);
//3.函数的不定参（定义的时候）
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);九.对象简写
// var age = 18;
// var name = "mumu";
// var obj = {name:name,age:age,say:function(){
// console.log(this.name + this.age)
// }}
// var obj2 = {name,age,say(){
// //如果对象的键名与值一致，可以省略，函数可以省略function关键字
// alert(this.name + this.age)
// }}
var num = 1;
var name = "nick";
//对象的键可以是动态拼接
var obj = {[name+num]:"mumu",age:18,["houseA"]:"北京天安门"};
console.log(obj);十.类
//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指向的 上一层作用域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";
}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);
}全部评论 (0)
还没有任何评论哟~