字符串
var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don\'t \n know'; // \n 换行
var len = abc.length; // 字符串长度
abc.indexOf("lmno"); // 查找子字符串,如果不包含则 -1
abc.lastIndexOf("lmno"); // 最后一次出现
abc.slice(3, 6); // 去掉“def”,负值从后面计算
abc.replace("abc","123"); // 查找和替换,接受正则表达式
abc.toUpperCase(); // 转换为大写
abc.toLowerCase(); // 转换为小写
abc.concat(" ", str2); // abc + " " + str2
abc.charAt(2); // 索引处的字符:“c”
abc[2]; // 不安全,abc[2] = "C" 不起作用
// 索引处的字符代码:“c”-> 99
abc.charCodeAt(2);
// 用逗号分割字符串给出一个数组
abc.split(",");
// 分割字符
abc.split("");
// 匹配开头字符串,如果忽略第二个参数,则从索引 0 开始匹配
abc.startsWith("bc", 1);
// 匹配结尾的字符串,如果忽略第二个参数,则默认是原字符串长度
abc.endsWith("wxy", abc.length - 1);
// padEnd 和 padStart 都用于填充长度,默认填充对象是空格
"200".padEnd(5); // "200 "
"200".padEnd(5, "."); // "200.."
// 重复字符
"abc".repeat(2); // "abcabc"
// trim、trimEnd 和 trimStart 用于去除首尾空格
" ab c ".trim(); // "ab c"
// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)
(128).toString(16);
数字
var pi = 3.141;
pi.toFixed(0); // 返回 3
pi.toFixed(2); // 返回 3.14 - 使用金钱
pi.toPrecision(2) // 返回 3.1
pi.valueOf(); // 返回号码
Number(true); // 转换为数字
// 自 1970 年以来的毫秒数
Number(new Date())
// 返回第一个数字:3
parseInt("3 months");
// 返回 3.5
parseFloat("3.5 days");
// 最大可能的 JS 数
Number.MAX_VALUE
// 最小可能的 JS 编号
Number.MIN_VALUE
// -无穷
Number.NEGATIVE_INFINITY
// 无穷
Number.POSITIVE_INFINITY
Math
const pi = Math.PI; // 3.141592653589793
Math.round(4.4); // = 4 - 数字四舍五入
Math.round(4.5); // = 5
Math.pow(2,8); // = 256 - 2 的 8 次方
Math.sqrt(49); // = 7 - 平方根
Math.abs(-3.14); // = 3.14 - 绝对,正值
Math.ceil(3.14); // = 4 - 返回 >= 最小整数
// = 3 - 返回 <= 最大整数
Math.floor(3.99);
// = 0 - 正弦
Math.sin(0);
// OTHERS: tan,atan,asin,acos,余弦值
Math.cos(Math.PI);
// = -2 - 最低值
Math.min(0, 3, -2, 2);
// = 3 - 最高值
Math.max(0, 3, -2, 2);
// = 0 自然对数
Math.log(1);
// = 2.7182pow(E,x) 自然对数的底数
Math.exp(1);
// 0 到 1 之间的随机数
Math.random();
// 随机整数,从 1
Math.floor(Math.random() * 5) + 1;
全局函数
// 像脚本代码一样执行字符串
eval();
// 从数字返回字符串
String(23);
// 从数字返回字符串
(23).toString();
// 从字符串返回数字
Number("23");
// 解码 URI。 结果:“my page.asp”
decodeURI(enc);
// 编码 URI。 结果:“my%20page.asp”
encodeURI(uri);
// 解码 URI 组件
decodeURIComponent(enc);
// 对 URI 组件进行编码
encodeURIComponent(uri);
// 是一个有限的合法数
isFinite();
// 是一个非法数字
isNaN();
// 返回字符串的浮点数
parseFloat();
// 解析一个字符串并返回一个整数
parseInt();
操作符
true || false; // true
10 > 5 || 10 > 20; // true
false || false; // false
10 > 100 || 10 > 20; // false
逻辑运算符 &&
true && true; // true
1 > 2 && 2 > 1; // false
true && false; // false
4 === 4 && 3 > 1; // true
比较运算符
1 > 3 // false
3 > 1 // true
250 >= 250 // true
1 === 1 // true
1 === 2 // false
1 === '1' // false
逻辑运算符
let lateToWork = true;
let oppositeValue = !lateToWork;
// => false
console.log(oppositeValue);
空值合并运算符 ??
null ?? 'I win'; // 'I win'
undefined ?? 'Me too'; // 'Me too'
false ?? 'I lose' // false
0 ?? 'I lose again' // 0
'' ?? 'Damn it' // ''
箭头函数 (ES6)
有两个参数
const sum = (param1, param2) => {
return param1 + param2;
};
console.log(sum(2,5)); // => 7
没有参数
const printHello = () => {
console.log('hello');
};
printHello(); // => hello
只有一个参数
const checkWeight = weight => {
console.log(`Weight : ${weight}`);
};
checkWeight(25); // => Weight : 25
简洁箭头函数
const multiply = (a, b) => a * b;
// => 60
console.log(multiply(2, 30));
从 ES2015 开始提供箭头函数
范围
function myFunction() {
var pizzaName = "Margarita";
// 这里的代码可以使用 PizzaName
}
// ❌ PizzaName 不能在这里使用
{ }
块内声明的变量
{
let x = 2;
}
// ❌ x 不能在这里使用
{
var x = 2;
}
// ✅ x 能在这里使用
var x = 2; // Global scope
let x = 2; // Global scope
const x = 2; // Global scope
ES6 引入了两个重要的新 JavaScript 关键字:let 和 const。这两个关键字在 JavaScript 中提供了块作用域。
:- | :- |
---|---|
Array.from() | 类似数组对象创建一个新的 # |
Array.isArray() | 值是否是一个 Array # |
Array.of() | 创建一个新数组示例 # |
.at() | 返回值索引对应的元素 # |
.concat() | 合并两个或多个数组 # |
.copyWithin() | 浅复制替换某个位置 # |
.entries() | 新的 Array Iterator 对象 # |
.every() | 是否能通过回调函数的测试 # |
.fill() | 固定值填充一个数组中 # |
.filter() | 返回过滤后的数组 # |
.find() | 第一个元素的值 # |
.findIndex() | 第一个元素的索引 # |
.findLast() | 最后一个元素的值 # |
.findLastIndex() | 最后一个元素的索引 # |
.flat() | 扁平化嵌套数组 # |
.flatMap() | 与 flat 相同 # |
.forEach() | 升序循环执行 # |
.includes() | 是否包含一个指定的值 # |
.indexOf() | 找到给定元素的第一个索引 # |
.join() | 数组链接成一个字符串 # |
.keys() | 每个索引键 # |
.lastIndexOf() | 给定元素的最后一个索引 # |
.map() | 循环返回一个新数组 # |
.pop() | 删除 最后一个元素 # |
.push() | 元素添加 到数组的末尾 # |
.reduce() | 循环函数传递当前和上一个值 # |
.reduceRight() | 类似 reduce 从右往左循环 # |
.reverse() | 数组元素的位置颠倒 # |
.shift() | 删除 第一个元素 # |
.slice() | 提取 元素 # |
.some() | 至少有一个通过测试函数 # |
.sort() | 元素进行排序 # |
.splice() | 删除 或替换 或添加 元素 # |
.toLocaleString() | 字符串表示数组中的元素 # |
.toString() | 返回字符串 # |
.unshift() | 元素添加 到数组的开头 # |
.values() | 返回新的 ArrayIterator 对象 # |
添加 | 删除 | 开始 | 结束 | |
---|---|---|---|---|
push | ✅ | ✅ | ||
pop | ✅ | ✅ | ||
unshift | ✅ | ✅ | ||
shift | ✅ | ✅ |
Proxy
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
// 用于拦截对象的读取属性操作。
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
}
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37
语法
const p = new Proxy(target, handler)
- target 要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
- handler 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
方法
:- | :- |
---|---|
Proxy.revocable() | 创建一个可撤销的Proxy对象 # |
handler 对象的方法
:- | :- |
---|---|
handler.getPrototypeOf() | Object.getPrototypeOf 方法的捕捉器 # |
handler.setPrototypeOf() | Object.setPrototypeOf 方法的捕捉器 # |
handler.isExtensible() | Object.isExtensible 方法的捕捉器 # |
handler.preventExtensions() | Object.preventExtensions 方法的捕捉器 # |
handler.getOwnPropertyDescriptor() | Object.getOwnPropertyDescriptor 方法的捕捉器 # |
handler.defineProperty() | Object.defineProperty 方法的捕捉器 # |
handler.has() | in 操作符的捕捉器 # |
handler.get() | 属性读取操作的捕捉器 # |
handler.set() | 属性设置操作的捕捉器 # |
handler.deleteProperty() | delete 操作符的捕捉器 # |
handler.ownKeys() | Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 # |
handler.apply() | 函数调用操作的捕捉器 # |
handler.construct() | new 操作符的捕捉器 # |
Reflect
Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers (en-US)的方法相同。Reflect不是一个函数对象,因此它是不可构造的。
// 检测一个对象是否存在特定属性
const duck = {
name: 'Maurice',
color: 'white',
greeting: function() {
console.log(`Quaaaack! My name is ${this.name}`);
}
}
Reflect.has(duck, 'color');
// true
Reflect.has(duck, 'haircut');
// false
静态方法
:- | :- |
---|---|
Reflect.apply(target, thisArgument, argumentsList) | 对一个函数进行调用操作,同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似 # |
Reflect.construct(target, argumentsList[, newTarget]) | 对构造函数进行 new 操作,相当于执行 new target(...args) # |
Reflect.defineProperty(target, propertyKey, attributes) | 和 Object.defineProperty() 类似。如果设置成功就会返回 true # |
Reflect.deleteProperty(target, propertyKey) | 作为函数的delete操作符,相当于执行 delete target[name] # |
Reflect.get(target, propertyKey[, receiver]) | 获取对象身上某个属性的值,类似于 target[name] # |
Reflect.getOwnPropertyDescriptor(target, propertyKey) | 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性,则返回对应的属性描述符,否则返回 undefined # |
Reflect.getPrototypeOf(target) | 类似于 Object.getPrototypeOf() # |
Reflect.has(target, propertyKey) | 判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同 # |
Reflect.isExtensible(target) | 类似于 Object.isExtensible() # |
Reflect.ownKeys(target) | 返回一个包含所有自身属性(不包含继承属性)的数组。(类似于 Object.keys(), 但不会受enumerable 影响) # |
Reflect.preventExtensions(target) | 类似于 Object.preventExtensions()。返回一个Boolean # |
Reflect.set(target, propertyKey, value[, receiver]) | 将值分配给属性的函数。返回一个Boolean,如果更新成功,则返回true # |
Reflect.setPrototypeOf(target, prototype) | 设置对象原型的函数。返回一个 Boolean,如果更新成功,则返回 true # |
隐式绑定
function foo() {
console.log(this)
}
let obj1 = {
name: "obj1",
foo: foo
}
let obj2 = {
name: "obj2",
obj1: obj1
}
obj2.obj1.foo() // [Object obj1]
隐式丢失
let a = obj2.obj1.foo()
a() // Window
- 指定隐式绑定:必须在调用的对象内部有一个对函数的引用(比如一个属性)
- 将以上调用赋值给一个变量,结果最终会是 Window
- 在 a 被调用的位置没有进行过任何显示绑定,最终全局对象 window 会调用它(
Window.a
)
显示绑定
function getName(a1, a2) {
console.log("此人" + this.name, "岁数" + (a1 + a2))
}
let person = {
name: "zhangsan"
}
call
call 第一个参数接受 this 作用域,剩余参数传递给其调用的函数
getName.call(person, 18, 12)
apply
apply 第一个参数与 call 相同,第二个参数是其调用函数的参数数组
getName.apply(person, [18, 12])
bind
bind 函数会返回一个新函数
getName.bind(person,18,12)()
//或者可以这样
getName.bind(person)(18, 12)
//或者这样
getName.bind(person).bind(null, 18)(12)
内置函数中的 this
数组中的一些方法,类似于 map、forEach 等,可以自己设置绑定 this
const obj = {
name: "zhangsan"
}
const array = [1, 2, 3];
array.map(function(value){
console.log(this.name)
}, obj)
// zhangsan x3
其中一些全局对象,如 setTimeout 等,它们和未显示绑定 this 的部分数组方法一样,都会指向全局对象(Window
)
setTimeout(function(){
console.log(this)
}, 1000) // Window
静态方法/字段
class Dog {
constructor(name) {
this._name = name;
}
introduce() {
console.log('This is ' + this._name + ' !');
}
// 静态方法
static bark() {
console.log('Woof!');
}
static {
console.log('类静态初始化块调用');
}
}
const myDog = new Dog('Buster');
myDog.introduce();
// 调用静态方法
Dog.bark();
公有静态字段
class ClassStaticField {
static staticField = 'static field'
}
console.log(ClassStaticField.staticField)
// 预期输出值:"static field"
extends
// Parent class
class Media {
constructor(info) {
this.publishDate = info.publishDate;
this.name = info.name;
}
}
// Child class
class Song extends Media {
constructor(songData) {
super(songData);
this.artist = songData.artist;
}
}
const mySong = new Song({
artist: 'Queen',
name: 'Bohemian Rhapsody',
publishDate: 1975
});
Export / Import
// myMath.js
// 默认导出 Default export
export default function add(x,y){
return x + y
}
// 正常导出 Normal export
export function subtract(x,y){
return x - y
}
// 多重导出 Multiple exports
function multiply(x,y){
return x * y
}
function duplicate(x){
return x * 2
}
export {
multiply, duplicate
}
import 加载模块
// main.js
import add, { subtract, multiply, duplicate } from './myMath.js';
console.log(add(6, 2)); // 8
console.log(subtract(6, 2)) // 4
console.log(multiply(6, 2)); // 12
console.log(duplicate(5)) // 10
// index.html
<script type="module" src="main.js"></script>
Export Module
// myMath.js
function add(x,y){
return x + y
}
function subtract(x,y){
return x - y
}
function multiply(x,y){
return x * y
}
function duplicate(x){
return x * 2
}
// node.js 中的多个导出
module.exports = {
add,
subtract,
multiply,
duplicate
}
require 加载模块
// main.js
const myMath = require('./myMath.js')
console.log(myMath.add(6, 2)); // 8
console.log(myMath.subtract(6, 2)) // 4
console.log(myMath.multiply(6, 2)); // 12
console.log(myMath.duplicate(5)) // 10