js - 学习笔记

2020-08-06  本文已影响0人  自走炮

方法

// 必须指定参数
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);

模块

// 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");
}
上一篇下一篇

猜你喜欢

热点阅读