本文介绍了ES6中的新特性，包括let和const变量声明、解构赋值、模板字符串、箭头函数、默认参数、扩展运算符等，并通过具体示例详细讲解了这些特性的使用方法。
1、let定义的变量为局部作用域，常用于for循环内的点击响应函数时的使用，使用var则不行
2、const
- const声明变量时一定要赋初始值 const A=0；
- 常量的值不能修改
- 对于数组和对象的元素的修改，不算对常量的修改
- 一般常量使用大写（潜规则）const a=100;
- 声明的变量为块级作用域
3、变量的解构赋值
数组的结构：
const zhao = {
name:'赵本山',
age:'不详',
xiaopin:function(){
console.log("我可以演小品");
}
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(xiaopin);
4、模块字符串
1、let a= `23131 `;
a的类型为string
2、内容中可以直接出现换行符
let str= `<div class="person_sort">
<ul>
<li><a href="javascript:;">文章</a> </li>
<li><a href="javascript:;">收藏</a></li>
<li><a href="javascript:;">关注</a></li>
<li><a href="javascript:;" class="active">粉丝</a></li>
</ul>
</div> ` ；
3、变量拼接
let love=` uzi `;
let out =` ${love}是我最喜欢的选手 `；
5、对象的简化写法
6、箭头函数
this是静态的，this始终指向当前作用域下的值，call不可以改变
var school={
name:"vn"
}
window.name="uzi";
function get1(){
console.log(this.name)
}
var get2=()=>{
console.log(this.name)
}
call可以改变
get1.call(school)
call也改变不了
get2(school)
*不能构造实例化对象
*不能使用argumens变量
箭头函数的缩写
1）省略括号，当形参只有一个的值时候
var c=n=>{
return n;
}
2) 省略花括号，当只有一个形参且只有一个语句return的时候
var c=n=>nn;
3）箭头函数的实际应用
箭头函数没有自己的this值，箭头函数中所使用的this都是来自函数作用域链，它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。
var box =document.querySelector(".box");
box.onclick=function(){
//此处若不用箭头函数，this指向window
setTimeout(()=>{
this.style.background="pink";
},1000)
}
const arr = [3,6,9,10];
const result = arr.filter(function(item){
if (item % 2 ===0){
return true;
}else{
return false;
}
});
const result = arr.filter(item => item%2 ===0);
4 )箭头函数适合与this无关的回调，如定时器，数组方法的回调
不适合与this有关的回调，事件回调和对象的方法
7、es6允许给函数参数初始值
function add (a,b,c=10){
return a+b+c;
}
console.log(add(1,2))
// 输出为13
function ABC({host,root,name,password=123}){
console.log(host)
console.log(root)
console.log(name)
console.log(password)
}
ABC({
host:"host",
root:"root",
name:"uzi",
})
8、引进rest函数保存实参，代替arguments
// Es5获取实参的方式
function data(){
console.log(arguments)
}
data("uzi","ming","letme","xiaohu","mlxg")
argumens为一个对象，有的时候不便于我们对实参的调用
es6获取实参的方式
function r(...args){
console.log(args)
}
r(1,2,3);
proto ：为一个数组。
…args放到最后还可以存一定的值
function r(a,b,...args){
console.log(a)
console.log(b)
console.log(args)
}
r(1,2,3,4,5,6,7,8,89,9);
9、扩展运算符…
1
function chun(){
console.log(arguments)
}
ab=[“a”,“b”];
chun(ab);
使用拓展运算符...之后
function chun(){
console.log(arguments)
}
ab=[“a”,“b”];
chun(…ab);
2）拓展运算符的实际应用
es6中数组的合并
function chun(){
console.log(arguments)
}
ab=["a","b"];
cd=["c","d"];
chun(ab.concat(cd));
es6中数组的合并
function chun(){
console.log(arguments)
}
ab=["a","b"];
cd=["c","d"];
chun(...ab,...cd);
数组的克隆
function chun(){
console.log(arguments)
}
ab=["a","b"];
cd=[...ab]
chun(cd);
将伪数组转为真数组
var divs=document.querySelectorAll("div");
console.log(divs)
var divs=document.querySelectorAll("div");
var divArry=[...divs];
console.log(divArry)
10、js数据类型 USONB
U undefined
S string symbol
O object
N null number
B boolean
11、
1）symbol的创建和介绍
let s =Symbol();
let s2=Symbol();
let s3=Symbol('uzi');
let s4=Symbol('uzi');
console.log(s,typeof s)
// Symbol() "symbol"
console.log(s===s2)
// false
console.log(s3===s4)
// false
不能与其他数据做运算
let ss=s+s;
let sss=s+"1";
let s>100;
2）对象添加symbol类型的属性
let LOL={
uzi:function(){
console.log("我会玩ADC");
}
}
let ADC={
uzi:Symbol()
}
LOL[ADC.uzi]=function(){
console.log("我是一名adc玩家")
}
console.log(LOL)
let LOL={
name:"一个游戏",
[Symbol("go")]:function(){
console.log("冲锋陷阵")
}
}
console.log(LOL)
2）symbol的内置属性
let Array1=["1,2"];
let Array2=["3,34"];
Array2[Symbol.isConcatSpreadable]=false;
console.log(Array1.concat(Array2))
有很多属性可以使用 可以用的时候百度查询
3）// 迭代器的介绍
const array=['uzi','mlxg','ming'];
// for in返回的是键
// for(let v in array){
// console.log(array[v])
// }
// for of返回的是键值
for(let v of array){
console.log(v)
}
for of 的运行方法是调用Symbol.iterator里面的next方法,
创建一个指针对象，指向数据结构的第一个数据
第一次调用会指向第一个元素,第二次调用会指向第二个,
以此类推直到运行完成,返回underfined
自定义遍历数据的时候要想到迭代器
4）自定义迭代器
const LPL={
name:"NB",
team:['uzi','mlxg','knight','ming','letme'],
//自定义迭代器
[Symbol.iterator](){
let index=0;
//需要返回一个对象
return{
//自定义next方法
next:()=>{
//箭头函数 解决this指向问题
if(index<this.team.length){
let result={value:this.team[index],done:false};
index++;
//return会打断执行
return result;
}else{
return {value:undefined,done:true};
}
}
}
}
}
for (let v of LPL){
console.log(v)
}
12、生成器的声明与调用
1）
function*bdd(){
console.log("1")
yield "aa";
console.log("2")
yield "bb";
console.log("3")
}
// 函数开始到48为一个段
// 48-50为一个段
// 50-52为一个段
let iterator = bdd();
iterator.next();
iterator.next();
iterator.next();
iterator.next();
iterator.next();
输出如图
function*bdd(){
console.log("1")
yield "aa";
console.log("2")
yield "bb";
console.log("3")
}
// 函数开始到48为一个段
// 48-50为一个段
// 50-52为一个段
let iterator = bdd();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
function*bdd(){
console.log("1")
yield "aa";
console.log("2")
yield "bb";
console.log("3")
}
// 函数开始到48为一个段
// 48-50为一个段
// 50-52为一个段
let iterator = bdd();
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
console.log(iterator)
for(let v of bdd()){
console.log(v)
}
2）生成器函数参数的传递
function*gen(args){
console.log(args)
let one=yield 111;
console.log(one)
let two=yield 222;
console.log(two)
let three=yield 333;
console.log(three)
}
let iterator=gen("uzi");
// next实参的传入是上个做为上一个yield语句的返回结果
console.log( iterator.next("aaa"));
console.log( iterator.next("bbb"));
console.log( iterator.next("ccc"));
console.log( iterator.next("ddd"));
3）生成起函数实例1
定时器的调用,避免了多次嵌套，影响代码的可阅读性；
function one(){
setTimeout(()=>{
console.log("111")
},1000)
}
function two(){
setTimeout(()=>{
console.log("222")
},2000)
}
function three(){
setTimeout(()=>{
console.log("333")
},3000)
}
function*gen(){
yield one();
yield two();
yield three();
}
let a=gen();
a.next();
a.next();
a.next();
4)生成起函数实例2
sad sa
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
