美文网首页
js - 学习笔记

js - 学习笔记

作者: 自走炮 | 来源:发表于2020-08-06 10:41 被阅读0次
    • 方法
    • 对象 类
    • 数组循环(for...in) 迭代(for...of)
    • 模块
    • 其他
      • 进制转换
      • 文字模版
      • symbol()
      • 函数构造器
      • 动态绑定属性
      • 函数的调用堆栈
      • void 无效操作符

    方法

    // 必须指定参数
    function required() {
      throw new Error("参数未指定");
    }
    function sayBye(name = required()) {
      console.log("${name} bye!");
    }
    sayBye("Koma"); // sayBye() 报错'参数未指定'
    
    // 可变长参数
    function sum(...args) {
      let result = 0;
      args.forEach((val) => {
        result += val;
      });
      return result;
    }
    console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
    
    let list = [10, 20, 30];
    // ES5 写法
    let newlist = list.map(function (value, index) {
      return value * value;
    });
    // ES6 写法,箭头方法
    newlist = list.map((value) => {
      return value * value;
    });
    

    对象 类

    let title = "ES6从入门到学会";
    let price = 25;
    // 对象定义
    let book = {
      title,
      price,
      toString() {
        console.log("<<${this.title}>> ${price}元");
      },
    };
    book["lang"] = "简体中文";
    
    // 类定义
    class Player {
      constructor(name) {
        this.name = name;
      }
      // 静态
      static info() {
        console.log("球员类");
      }
      // setter / getter 定义
      get age() {
        return this._age;
      }
      set age(val) {
        this._age = val;
      }
    }
    Player.info();
    let player = new Player("库里");
    player.age = 28;
    console.log(player);
    
    // 类继承
    class WomenPlayer extends Player {
      constructor(name, country) {
        super(name);
        this.country = country;
      }
    }
    

    数组循环(for...in) 迭代(for...of)

    // list 为可迭代对象,取出所有属性和值,如数组类型 Array 添加属性 Array.prototype.Len = function() {},输出 Len function() {}
    let list = [10, 20, 30];
    for (let val in list) console.log(val, list[val]);
    
    // str 为可迭代对象
    let str = "你好啊";
    for (let val of str) console.log(val);
    
    // map 为可迭代对象
    let map = new Map();
    map.set("JS", "Javascript");
    map.set("PL", "Perl");
    for (let [key, value] of map) console.log(key, value);
    let it = map.values();
    
    let tmp;
    // 可迭代对象 .next() 为取下一个对象
    while ((tmp = it.next())) {
      if (tmp.done) break; // 可迭代对象 .done 为是否结束,bool 类型
      console.log(tmp.value, tmp.done); // 当值存在,done 为 false
    }
    
    class Player {
      constructor(list) {
        this.list = list;
      }
      // [Symbol.iterator] 可建立可迭代对象
      [Symbol.iterator]() {
        let current = 0;
        let that = this;
        // 实现 next() 和 done
        return {
          next() {
            return current < that.list.length
              ? { value: that.list[current++], done: false }
              : { done: true };
          },
        };
      }
    }
    let player = new Player(["Curry", "Harden", "LeBron"]);
    for (let tmp of player) console.log(tmp);
    
    // function* {} 和 yield 可建立可迭代方法,即迭代生成器
    function* myGenerator() {
      yield "一";
      yield "二";
    }
    for (let val of myGenerator()) console.log(val);
    
    function* countdown(begin) {
      while (begin > 0) {
        yield begin--;
      }
    }
    for (let tmp of countdown(5)) console.log(tmp);
    
    class MyList {
      constructor(list) {
        this.list = list;
        // function* {} 和 yield 可建立可迭代类,[Symbol.iterator] 实现单一下标
        this[Symbol.iterator] = function* () {
          let current = 0;
          let that = this;
          while (current < that.list.length) {
            yield that.list[current++];
          }
        };
      }
    }
    let mylist = new MyList([100, 200, 300]);
    for (let val of mylist) console.log(val);
    

    模块

    • 命令 node --experimental-modules main.mjs 运行 js 模块
    // math.mjs 文件
    function add(x, y) {
      return x + y;
    }
    export { add }; // 导出模块方法
    
    // Player.mjs 文件
    class Player {
      constructor(name) {
        this.name = name;
      }
      sayHelo() {
        console.log("Hello ${this.name}");
      }
    }
    export default Player; // 导出模块类
    
    // main.mjs 文件
    import { add } from "./math"; // 导入模块方法
    import Player from "./Player"; // 导入模块类
    

    其他

    进制转换

    console.log(0b11 === 3) // true,0b 为 2 进制,0o 为 8 进制,0x 为 16 进制
    console.log(10.toString(5)) // 5 进制转换,toString() 可任意进制转换
    

    文字模版

    let name = 'Koma'
    let str = markdown'你好,${name}!ES6可换行'
    function markdown (formats, ...args) {
        console.log(formats) // formats 为文字模板段列表
        console.log(args) // args 为文字参数列表
        let result = '# 信息标题\n'
        for (let i = 0; i < formats.length; i++) result += formats[i] + '**' + (args[i] || '') + '**'
        return result
    }
    

    symbol()

    let obj = {};
    obj[Symbol("mySymbol")] = "helo"; // Symbol 作为属性
    console.log(obj);
    
    const myKey = Symbol(); // Symbol 作为常量
    
    class User {
      constructor(key, name) {
        this[myKey] = key; // Symbol 作为半隐藏属性
        this.name = name;
      }
      checkKey(key) {
        return this[myKey] === key;
      }
    }
    
    let user = new User(123, "Curry");
    console.log(user.name, user[myKey]);
    console.log(user.checkKey(123)); // true
    console.log(Object.keys(user)); // [ 'name' ]
    console.log(JSON.stringify(user)); // { 'name': 'Curry' }
    

    函数构造器

    const add = new Function("a", "b", "return a+b");
    console.log(add(10, 20));
    const helo = new Function("name", "return 'helo '+name+'.'");
    console.log(helo("koma"));
    

    动态绑定属性

    const book = {
      title: "I like javascript.",
      price: 50,
    };
    with (book) {
      console.log("书名:", title);
      console.log("价格:", price);
    }
    

    函数的调用堆栈

    function func1() {
      console.log("func1():", arguments.callee.caller);
    }
    function func2() {
      func1();
    }
    func2();
    

    void 无效操作符

    console.log(void 1);
    console.log(void true);
    console.log(void false);
    console.log(void {});
    console.log(void undefined);
    
    if (void 1) {
      console.log("yes");
    } else {
      console.log("no");
    }
    

    相关文章

      网友评论

          本文标题:js - 学习笔记

          本文链接:https://www.haomeiwen.com/subject/ivjgrktx.html