ES6~ES11
let
1.和c++中的变量一样,是块级;
2.let可以理解为是局部变量,var是全局变量
3.let变量名不能重复
const
和c++中一样
const的
变量结构赋值
/*
const F4=["小沈阳","刘能","赵四","宋小宝"];
let [xiao,liu,zhao,song]=F4;
console.log(xiao);//小沈阳
*/
const zhao={
name:'赵本山',
age:'10岁',
xiaopin:function(){
console.log("啦啦啦");//
}
let {name,age,xiaopin:function}=zhao;
箭头函数
let fn=function(){
}
//箭头函数
let fun= (a,b)=>{
return a+b;
}
console.log(fun(1,2));//3
1.箭头函数的this是静态的,this始终指向函数声明时,所在作用域下的this的值
(指向父级作用域)
2.call()
和apply()
无法修改
3.不能作为构造函数实例化对象
4.不能使用argument变量
function getname() {
console.log(this.name);
}
let getname2 = () => {
console.log(this.name);
};
window.name = "window";
const school = {
name: "school",
};
getname(); //window
getname2(); //window
//call()方法调用
getname.call(school); //school
getname2.call(school); //window
箭头函数的简写
//省略小括号 当参数只有一个的时候
let add=n=>{
return n+n;
}
console.log(add(9));
//省略大括号,当代码体只有一条语句的时候,此时return必须省略
//而且语句的执行结果就是函数的返回值
let pow=(n)=>n*n;
console.log(pow(p));
ES6 rest参数
用于获取函数的参实参,用来代替arguments
1.es5 获取实参的方式
function date(){
console.log(arguments);
}
2.rest参数
function date(...args){
console.log(args);//args是 一个数组
}
date("阿娇","柏芝","小大");
function date(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
date(1,2,3,4,5);
扩展运算符
const aabb=["双方的","啥的","士大夫"];
function chunwan(){
console.log(arguments);
}
chunwan (...aabb);//相当于解构为chunwan("双方的","啥的","士大夫");
//1.将两个数组合并
const aabb=["双方的","啥的","士大夫"];
const aacc=["1","2","3"];
const zuizui=[...aabb,...aacc];//相当于把aabb和aacc合并
2.数组的复制(浅拷贝:当有引用时复制的是地址)
const abb=["1","2","3","4"];
const acc=[...abb];
3.将伪数组转化为真正的数组
const divs=document.querySelectorAll("div");
console.log(divs);
const divs2=[...divs];
Symbol新的数据类型
1.Symbol
的值是唯一的;
2.Symbol
的值不能与其他数据进行计算
3.Symbol
定义的对象属性不能使用for...in
循环遍历,但是可以使用Reflect.ownKeys
来获取对象的所有键名
1.创建Symbol
let s=Symbol();
let s2=Symbol("1得到");
let s3=Symbol("1得到");//1得到只是一个标志
//Symbol.for 创建
let s4=Symbol.for("1得到");
let s5=Symbol.for("1得到");
//不能域其他数据进行运算
// let ls=s+100;
// let ls=s>100;
// let ls=s<100;
console.log(s2===s3);//false
2.向对象中安全的添加方法
let game = {
up: "asd",
down: "dasd",
};
let methods = {
up: Symbol(),
down: Symbol(),
};
game[methods.up] = function () {
console.log("我是新的Up");
};
game[methods.down] = function () {
console.log("我是新的down");
};
console.log(game);
let youxi = {
name: "dasd",
[Symbol("say")]: function () {
console.log("发言");
},
[Symbol("zibao ")]: function () {
console.log("自爆");
},
};
console.log(youxi[Symbol("say")]);//undefined
for in 和 for of
const xiyou=["唐僧","孙悟空","猪八戒","沙僧"];
for(let v in xiyou)//for in 的v保存的是键名
for(let v of xiyou)//for of 的v保存的是键值
迭代器
工作原理
1.创建一个指针对象,指向当前数据的起始位置
2.第一次调用对象的next方法,指针自动指向数据结构的第一个成员
3.接下来不断调用next方法,指针一直往后移动,知道指向最后一个成员
4.每调用next方法返回一个包含value和done属性的对象
const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
let iterator = xiyou[Symbol.iterator]();
console.log(iterator.next());//返回一个object
//当返回的done是true时,表示到尾了此时value=undefined
for of是根据迭代器遍历的,banji并没有iterator
const banji = {
name: "dqwd",
syus: ["1", "2", "3", "4", "5"],
};
for (let i of banji.syus) {
console.log(i);
}
自己实现iterator
const banji = {
name: "dqwd",
syus: ["1", "2", "3", "4", "5"],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (idx < this.syus.length) {
index++;
return { value: this.syus[index], done: false };
} else {
return { value: undefined, done: true };
}
},
};
},
};
for (let i of banji.syus) {
console.log(i);
}
生成器
生成器其实就是一个特殊的函数
用来实现异步编程的 纯回调函数
//yield函数代码的分隔符
function* gen() {
console.log(111);
yield "一只没有眼睛";
console.log(222);
yield "一只没有耳朵";
console.log(333);
yield "真奇怪";
console.log(444);
// console.log("hello world");
}
let iterator = gen(); //返回的使迭代器
iterator.next(); //返回的都是迭代器,value=‘一只没有眼睛’
iterator.next(); //value=一只没有耳朵
iterator.next(); //value=真奇怪
iterator.next(); //value=undefine
生成器参数
//yield函数代码的分隔符
function* gen(arg) {
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
// console.log("hello world");
}
let iterator = gen("AAA"); //返回的使迭代器
console.log(iterator.next());
console.log(iterator.next("BBB")); //传入的值相当于替换掉上一个yield的值
console.log(iterator.next("CCC"));
console.log(iterator.next("DDD"));
生成器实例1
实现一秒钟输出111,2s后输出222,3s后输出333
1.我的实现方法
function* gen(stop) {
console.log(111);
yield 1;
console.log(222);
yield 2;
console.log(333);
yield 3;
clearInterval(stop);
yield 4;
console.log(1);
}
let ls = setInterval(function () {
iterator.next();
}, 1000);
let iterator = gen(ls);
但是这样实现,是每间隔一秒输出一次,而不能间隔不同时间
2.官方实现方法
function one() {
setTimeout(() => {
console.log(111);
iterator.next(); //想要让他们实现,必须要用next调用下一个分割块
}, 1000);
}
function two() {
setTimeout(() => {
console.log(222);
iterator.next();
}, 2000);
}
function three() {
setTimeout(() => {
console.log(333);
}, 3000);
}
function* gen() {
yield one();
yield two();
yield three();
}
let iterator = gen();
iterator.next();