js - 学习笔记
2020-08-06 本文已影响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");
}