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"));

uTools_1663487076769.png

生成器实例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();
posted @ 2022-09-15 20:07  &漠。  阅读(48)  评论(0)    收藏  举报