文章目录
一、声明方式
1.1反引号的声明方式
1.声明的反引号``模板字符串
2.内容中可以直接出现换行符
3.可以直接进行变量的拼接
1.2对象的简化写法
es6允许在-大括号里面,直接写入变量和函数,作为对象的属性和方法
<script>
let name ="小李";
let change = function (){
console.log("这里可以改变");
}
const school = {
name, //name:name
change,//change:change
improve(){//improve:function(){}
console.log("这是一个函数")
}
}
console.log(school)
</script>
1.3箭头函数
不能用于构造函数,箭头函数没有prototype,没有自己的this指向,没有自己的argument,this指向会指向离他最近的那个作用域(普通函数的this,指向调用它的对象)
<script>
//函数的声明
//let fn = function (){
//
//}
let fn = (a,b)=>{
return a+b;
}
//函数的调用
console.log(fn(1,2));
</script>
区别:
1.this是静态的,this始终指向函数声明时在作用域下的this的值
2.不能作为构造函数实例化对象
3.不能使用arguments变量
4.箭头函数的简写
1)省略小括号,当形参有且只有一个的时候
<script>
let add = n => {//let add = (n) =>{}
return n+n;
}
console.log(add(9));
</script>
2)省略花括号的情况,当代码体只有一条语句的情况,此时return必须省略,而且语句的执行结果结束函数的返回值
<script>
let add = n => n+n;
console.log(add(9));
</script>
1.4实践 点击改变颜色
<style>
.box{
width:200px;
height:200px;
background:#58a;
}
</style>
<div class="box"></div>
<script>
//需求。点击div两秒之后变成粉色
let box = document.querySelector(".box");
box.addEventListener("click",function(){
//保存this的值
let that = this;
//定时器的内容
//setTimeout(function(){
//修改this的背景颜色
//that,style.background ="pink";
// },2000);
setTimeout(()=>{
this.style.background ="pink";
},2000)
})
//需求2 从数组中返回偶数的元素
const arr = [1,6,9,10,100,25];
//const result = arr.filter(function (item){
// if(ietm %2==0){
// return true;
//}else{
// return false;
//}
//})
const result = arr.filter(item=>item%2==0);
console.log(result);
</script>
箭头函数适合于this与无关的回调,定时器,数组的方法回调,箭头函数不适合与this有关的回调,事件回调,对象的方法
1.5es6允许给函数参数赋初始值
1.形参初始值,具有默认值的参数,一般位置要靠后
2.默认值与解构赋值相结合
1.6es6的扩展运算符
…扩展运算符能将数组转化为逗号分割的参数序列
<script>
const tfboys = ["易烊千玺","王源","王俊凯"];
//声明一个函数
function chunwan(){
console.log(arguments);
}
chunwan(...tfboys);
//结果:"易烊千玺","王源","王俊凯"
</script>
应用:
1.数组的合并
<script>
//1.数组的合并
const a = [1,2,3];
const b = [4,5,6];
//const add = a.concat(b);//concat(a,b)
const add = [...a,...b];
console.log(add)
</script>
2.数组的克隆(浅拷贝)
<script>
const a =[1,2,3];
const b = [...a];//[1,2,3]
</script>
3.将伪数组转化为真正的数组
<div></div>
<div></div>
<div></div>
<script>
const divs = document.querySelectorAll("div");
const divArr = [...divs];
console.log(divArr)
</script>
1.7数据类型
symbol数据类型,表示独一无二的值
<script>
//创建1
let s = Symbol();
//创建2,这是一个对象
let s2 = Symbol.for();
//这种括号中都可以写入字符串的内容
//不能与其他数据进行运算
</script>
创建对象属性
<script>
//扩展某个函数的属性和方法,不确定该对象是否可以使用该对象
let game ={.....};
//可以借助symbol来完成
//声明一个对象
let methods ={
up:Symbol(),
dowm:Symbol()
};
game[methods.up]=function(){
console.log("可以改变上升")
}
game[methods.down]=function(){
console.log("可以改变下降");
}
console.log(game)
//另一种方法
let youxi = {
name:"狼人杀",
[Symbol("say")]:function(){
console.log("可以发言")
}
//添加描述性的内容say
}
</script>
1.8迭代器
Iterator接口,为各种不同的数据结构提供统一的访问机制,任何数据只要部署Iteror接口,就可以完成遍历操作
1.9生成器
其实就是一个特殊的函数,异步编程,纯回调函数 node fs ajax
<script>
//生成器其实就是一个特殊的函数
//异步编程 纯回调函数
//yield函数代码的分隔符
function * gen(){
console.log("hello generator");
yield '这是一个分隔符';
//next上一个yield参数的返回结果
}
let iterator = gen();
//不能直接调用打印函数,需要调用其中的next方法进行打印
iterator.next();
</script>
异步编程
<script>
//异步编程 文件操作、网络操作(ajax、request)数据库操作
//1s后控制台输出111 2s后输出222 3s后出书333
</script>