JavaScript文档
- 中文名:Math.random 生成随机数
示例:
Math.random() // 返回 [0, 1) 之间的随机数,例如 0.123456
函数:Math.random()
功能:返回一个浮点数,伪随机数在范围从0到小于1(包含0,不包含1)。
语法:
Math.random()
参数:
无。
返回值:
[0, 1) 范围内的浮点数。
- 中文名:let 块级变量声明
示例:
let x = 10;
let y = 20, z = 30; // 声明多个变量
if (true) {
let x = 5; // 块级作用域,不影响外部 x
}
console.log(x); // 输出 10
函数:let
功能:声明一个块级作用域的局部变量,可选地将其初始化为一个值。
语法:
let var1 [= value1] [, var2 [= value2]] [, ... [, varN [= valueN]]];
参数:
var1, var2, …, varN:变量名。
value1, value2, …, valueN:变量的初始值,默认为 undefined。
返回值:
undefined
- 中文名:const 常量声明
示例:
const PI = 3.14159;
// PI = 3.0; // 报错:Assignment to constant variable.
const obj = {};
obj.key = 'value'; // 允许:修改对象属性
// obj = {}; // 报错:修改常量的绑定
函数:const
功能:声明一个块级作用域的常量,其值不能通过重新赋值来改变,也不能重新声明。
语法:
const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
参数:
name1, name2, …, nameN:常量名。
value1, value2, …, valueN:常量的初始值(必须提供)。
返回值:
undefined
- 中文名:var 全局/函数级变量声明
示例:
var x = 5;
var y; // y 为 undefined
function test() {
var z = 10; // 函数级作用域
}
console.log(typeof z); // 输出 undefined
函数:var
功能:声明一个函数作用域或全局作用域的变量,并可选地将其初始化为一个值。
语法:
var varname1 [= value1] [, varname2 [= value2] ...];
参数:
varname1, varname2:变量名。
value1, value2:变量的初始值,默认为 undefined。
返回值:
undefined
- 中文名:const 声明常量
示例:
const PI = 3.14159;
// PI = 3; // 报错:不能重新赋值
const user = { name: 'Alex' };
user.name = 'Bob'; // 允许:修改对象属性
// user = {}; // 报错:不能修改绑定
函数:const
功能:声明一个只读的常量。声明的常量必须在声明时初始化,且初始化后不能重新赋值(对于对象和数组,变量指向的引用地址不变,但内部属性或元素可变)。
语法:
const name1 = value1;
参数:
name1:常量名称,遵循标识符命名规则。
value1:常量的初始值,必填。
返回值:
无。
- 中文名:Destructuring assignment 解构赋值
示例:
// 1. 数组解构
const numbers = [1, 2, 3];
const [a, b] = numbers;
console.log(a); // 1
console.log(b); // 2
// 2. 对象解构
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 25
// 3. 默认值
const [x = 5] = [];
console.log(x); // 5
// 4. 剩余元素
const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]
// 5. 变量重命名与默认值
const { prop: newName = 'default' } = { prop: 'value' };
console.log(newName); // 'value'
函数:Destructuring assignment
功能:一种 JavaScript 表达式,允许将数组或对象的属性直接解包到不同的变量中。
语法:
// 数组解构
let [var1, var2, ...varN] = array;
// 对象解构
let { key1: var1, key2: var2 } = object;
参数:
var1, var2...:声明的变量名。
array / object:数据源。
key1:对象的属性名。
返回值:
无(这是声明或赋值语句,不是函数调用,无返回值)。
- 中文名:Spread Operator 展开运算符
示例:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr2 为 [1, 2, 3, 4, 5]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // obj2 为 { a: 1, b: 2, c: 3 }
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers); // 返回 6
函数:...
功能:允许一个可迭代对象(如数组或字符串)在期望多个参数(用于函数调用)或多个元素(用于数组字面量)的地方展开,或者将一个对象的表达式在期望多个键值对(用于对象字面量)的地方展开。
语法:
...iterableObj
参数:
iterableObj:一个可迭代对象(如数组、字符串)或对象。
返回值:
无返回值(运算符),根据上下文返回展开后的数组或对象。
- 中文名:... 剩余参数
示例:
function sum(...args) {
return args.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 返回 6
const [first, ...rest] = [1, 2, 3, 4];
// first 为 1,rest 为 [2, 3, 4]
函数:... (Rest Parameters / Spread Syntax)
功能:
允许函数接收不定数量的参数,或将可迭代对象(如数组)在函数调用或数组构造时展开。
语法:
// 剩余参数
function funcName(...args) { /* ... */ }
function funcName(arg1, ...args) { /* ... */ }
// 展开语法
funcName(...arrayLike);
const newObj = { ...oldObj };
参数:
args:数组名,包含函数接收到的多余参数。
返回值:
在函数定义中返回一个数组;在其他场景中用于展开结构。
注释:
// 剩余参数以数组形式存在,可以使用数组方法。
// 展开语法用于数组和对象的浅拷贝或合并。
- 中文名:Arrow Function 箭头函数
示例:
const add = (a, b) => a + b;
add(1, 2); // 返回 3
const square = x => x * x;
square(5); // 返回 25
const greet = () => 'Hello World';
greet(); // 返回 'Hello World'
const obj = (name) => ({ name: name });
obj('AI'); // 返回 { name: 'AI' }
函数:Arrow Function
功能:一种更简洁的函数表达式写法,并且不绑定自己的 this、arguments、super 或 new.target。
语法:
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
(singleParam) => { statements }
singleParam => expression
() => { statements }
参数:
paramN:函数参数。
statements 或 expression:函数体。如果是表达式,该表达式的值即为返回值。
返回值:
函数执行的结果。如果函数体是代码块 {},需要显式使用 return 返回值。
- 中文名:函数定义 创建函数
示例:
// 函数声明
function sum(a, b) {
return a + b;
}
// 函数表达式
const multiply = function(a, b) {
return a * b;
};
// 箭头函数 (ES6简写)
const subtract = (a, b) => a - b;
函数:function, function expression, arrow function
功能:封装可重复使用的代码块,接收输入参数并返回执行结果。
语法:
// 声明语法
function name(param1, param2, /* ... ,*/ paramN) {
statements
}
// 表达式语法
const name = function(param1) { statements };
// 箭头函数语法
const name = (param1) => { statements };
参数:
name:函数名称(函数声明必须有,函数表达式和箭头函数可选)。
paramN:传递给函数的参数名称。
statements:函数体,包含执行代码。
返回值:
默认返回 undefined,除非函数体中显式使用 return 语句指定返回值。
- 中文名:Template Literals 模板字符串
示例:
const name = '世界';
console.log(`你好,${name}`); // 返回 '你好,世界'
const a = 10;
const b = 20;
console.log(`总和:${a + b}`); // 返回 '总和:30'
const html = `
`;
函数:`` (反引号)
功能:允许嵌入表达式的字符串字面量,支持多行字符串和字符串插值。
语法:
`string text ${expression} string text`
参数:
expression:嵌入的表达式,会将计算结果转为字符串。
返回值:
拼接后的字符串。
- 中文名:includes 包含检测
示例:
const str = 'To be, or not to be';
str.includes('To be'); // 返回 true
str.includes('question'); // 返回 false
str.includes('To be', 1); // 返回 false (从索引1开始搜索)
str.includes('TO BE'); // 返回 false (区分大小写)
函数:String.prototype.includes()
功能:判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。
语法:
str.includes(searchString[, position])
参数:
searchString:要在此字符串中搜索的字符串。
position:可选,从当前字符串的哪个索引位置开始搜索子字符串,默认值为 0。
返回值:
布尔值,如果找到搜索的字符串则返回 true,否则返回 false。
- 中文名:startsWith 开头检测
示例:
const str = 'Saturday night plans';
str.startsWith('Sat'); // 返回 true
str.startsWith('Sat', 3); // 返回 false (从索引3开始检测)
函数:String.prototype.startsWith()
功能:判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false。
语法:
str.startsWith(searchString[, position])
参数:
searchString:要搜索的子字符串。
position:可选,在 str 中搜索 searchString 的开始位置,默认值为 0。
返回值:
布尔值。
- 中文名:endsWith 结尾检测
示例:
const str = 'Cats are the best!';
str.endsWith('best!'); // 返回 true
str.endsWith('best', 17); // 返回 true (针对前17个字符进行检测)
函数:String.prototype.endsWith()
功能:判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。
语法:
str.endsWith(searchString[, length])
参数:
searchString:要搜索的子字符串。
length:可选,作为 str 的长度。默认值为 str.length。
返回值:
布尔值。
- 中文名:repeat 字符串重复
示例:
'abc'.repeat(2); // 返回 'abcabc'
'abc'.repeat(0); // 返回 ''
'abc'.repeat(3.5); // 返回 'abcabcabc' (参数会自动取整)
函数:String.prototype.repeat()
功能:构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串副本。
语法:
str.repeat(count)
参数:
count:介于 0 和 +Infinity 之间的整数,表示在新构造的字符串中重复了多少遍原字符串。
返回值:
包含指定字符串重复次数的新字符串。
- 中文名:padStart 前补全
示例:
'5'.padStart(2, '0'); // 返回 '05'
'abc'.padStart(10); // 返回 ' abc' (默认补空格)
'abc'.padStart(10, 'foo'); // 返回 'foofoofabc'
函数:String.prototype.padStart()
功能:用另一个字符串填充当前字符串(如果需要的话,会重复多次),以便产生的字符串达到给定的长度。填充从当前字符串的左侧开始。
语法:
str.padStart(targetLength [, padString])
参数:
targetLength:当前字符串需要填充到的目标长度。
padString:可选,填充字符串。
返回值:
填充后的字符串。
- 中文名:padEnd 后补全
示例:
'abc'.padEnd(10); // 返回 'abc '
'abc'.padEnd(10, 'foo'); // 返回 'abcfoofoof'
'abc'.padEnd(6, '123456'); // 返回 'abc123'
函数:String.prototype.padEnd()
功能:用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。填充从当前字符串的末尾(右侧)开始。
语法:
str.padEnd(targetLength [, padString])
参数:
targetLength:当前字符串需要填充到的目标长度。
padString:可选,填充字符串。
返回值:
填充后的字符串。
- 中文名:trim 去除首尾空白
示例:
' Hello world! '.trim(); // 返回 'Hello world!'
函数:String.prototype.trim()
功能:从一个字符串的两端去除空白字符。
语法:
str.trim()
参数:
无。
返回值:
去除首尾空白后的新字符串。
- 中文名:trimStart 去除前端空白
示例:
' Hello world! '.trimStart(); // 返回 'Hello world! '
// 别名
' Hello world! '.trimLeft(); // 返回 'Hello world! '
函数:String.prototype.trimStart()
功能:从字符串的开头移除空白字符。
语法:
str.trimStart()
参数:
无。
返回值:
移除左端空白后的新字符串。
- 中文名:trimEnd 去除末端空白
示例:
' Hello world! '.trimEnd(); // 返回 ' Hello world!'
// 别名
' Hello world! '.trimRight(); // 返回 ' Hello world!'
函数:String.prototype.trimEnd()
功能:从字符串的末端移除空白字符。
语法:
str.trimEnd()
参数:
无。
返回值:
移除右端空白后的新字符串。
- 中文名:Number.isFinite 判断有限数值
示例:
Number.isFinite(100) // 返回 true
Number.isFinite(Infinity) // 返回 false
Number.isFinite(NaN) // 返回 false
Number.isFinite('100') // 返回 false
函数:Number.isFinite()
功能:检测传入的参数是否是一个有限数值。
语法:
Number.isFinite(value)
参数:
value:要检测的值。
返回值:
布尔值,表示给定的值是否是有限数值。与全局 isFinite() 函数不同,该方法不会将参数强制转换为数值。
- 中文名:Number.isNaN 判断非数值
示例:
Number.isNaN(NaN) // 返回 true
Number.isNaN(100) // 返回 false
Number.isNaN('NaN') // 返回 false
Number.isNaN(true) // 返回 false
函数:Number.isNaN()
功能:检测传入的参数是否为 NaN(非数值)。
语法:
Number.isNaN(value)
参数:
value:要检测的值。
返回值:
布尔值。与全局 isNaN() 函数不同,该方法不会强制将参数转换为数值,只有值为 NaN 时才返回 true。
- 中文名:Number.parseInt 解析整数
示例:
Number.parseInt('12.34') // 返回 12
Number.parseInt('12px') // 返回 12
Number.parseInt('px12') // 返回 NaN
Number.parseInt('1010', 2) // 返回 10 (二进制解析)
函数:Number.parseInt()
功能:将给定字符串解析为指定进制的整数。
语法:
Number.parseInt(string, radix)
参数:
string:要解析的值。如果不是字符串,会先转换为字符串。
radix:可选,介于 2 到 36 之间的整数,表示进制。
返回值:
解析后的整数值。如果无法解析,则返回 NaN。该方法与全局 parseInt() 函数完全相同,旨在模块化全局变量。
- 中文名:Number.isInteger 判断整数
示例:
Number.isInteger(25) // 返回 true
Number.isInteger(25.0) // 返回 true (JavaScript中 25.0 等于 25)
Number.isInteger(25.1) // 返回 false
Number.isInteger('25') // 返回 false
Number.isInteger(null) // 返回 false
函数:Number.isInteger()
功能:检测传入的参数是否为整数。
语法:
Number.isInteger(value)
参数:
value:要检测的值。
返回值:
布尔值,表示给定的值是否是整数。
- 中文名:Number.EPSILON 极小常量
示例:
console.log(Number.EPSILON) // 输出 2.220446049250313e-16
// 用于浮点数比较
0.1 + 0.2 === 0.3 // 返回 false
(0.1 + 0.2 - 0.3) < Number.EPSILON // 返回 true
函数:Number.EPSILON
功能:表示 1 和 Number 可表示的大于 1 的最小的浮点数之间的差值。
语法:
Number.EPSILON
返回值:
约为 2.220446049250313e-16 的常量。常用于设置浮点数计算的误差范围。
- 中文名:Number.isSafeInteger 判断安全整数
示例:
Number.isSafeInteger(3) // 返回 true
Number.isSafeInteger(Math.pow(2, 53)) // 返回 false
Number.isSafeInteger(Math.pow(2, 53) - 1) // 返回 true
Number.isSafeInteger(NaN) // 返回 false
函数:Number.isSafeInteger()
功能:检测传入的参数是否为安全整数(在 -(2^53 - 1) 到 2^53 - 1 之间的整数)。
语法:
Number.isSafeInteger(value)
参数:
value:要检测的值。
返回值:
布尔值。
- 中文名:Math.trunc 截断取整
示例:
Math.trunc(4.9) // 返回 4
Math.trunc(-4.9) // 返回 -4
Math.trunc(4) // 返回 4
Math.trunc('4.9') // 返回 4
函数:Math.trunc()
功能:去除一个数的小数部分,保留整数部分。
语法:
Math.trunc(x)
参数:
x:一个数值。
返回值:
整数部分。对于非数值,会先尝试转换为数值。
- 中文名:Math.sign 判断正负零
示例:
Math.sign(5) // 返回 1
Math.sign(-5) // 返回 -1
Math.sign(0) // 返回 0
Math.sign(-0) // 返回 -0
Math.sign(NaN) // 返回 NaN
函数:Math.sign()
功能:返回一个数的符号,指示该数是正数、负数还是零。
语法:
Math.sign(x)
参数:
x:一个数值。
返回值:
正数返回 1,负数返回 -1,正零返回 0,负零返回 -0,非数值返回 NaN。
- 中文名:Math.cbrt 计算立方根
示例:
Math.cbrt(8) // 返回 2
Math.cbrt(-8) // 返回 -2
Math.cbrt(0) // 返回 0
函数:Math.cbrt()
功能:返回一个数的立方根。
语法:
Math.cbrt(x)
参数:
x:一个数值。
返回值:
给定数字的立方根。
- 中文名:Math.hypot 计算平方和的平方根
示例:
Math.hypot(3, 4) // 返回 5
Math.hypot(3, 4, 5) // 返回 7.0710678118654755
Math.hypot(5, 12) // 返回 13
函数:Math.hypot()
功能:返回所有参数的平方和的平方根。
语法:
Math.hypot(value1, value2, ...)
参数:
value1, value2, ...:多个数值。
返回值:
计算后的结果。常用于计算多维空间中的距离。
- 中文名:push 数组末尾添加元素
示例:
let arr = [1, 2];
arr.push(3); // arr 变为 [1, 2, 3]
arr.push(4, 5); // arr 变为 [1, 2, 3, 4, 5]
let length = arr.push(6); // length 为 6
函数:Array.prototype.push()
功能:将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
语法:
arr.push(element1, ..., elementN)
参数:
elementN:被添加到数组末尾的元素。
返回值:
添加元素后的数组新长度。
- 中文名:pop 数组末尾移除元素
示例:
let arr = [1, 2, 3];
let last = arr.pop(); // last 为 3, arr 变为 [1, 2]
函数:Array.prototype.pop()
功能:从数组中移除最后一个元素,并返回该元素。
语法:
arr.pop()
参数:
无。
返回值:
从数组中移除的元素;如果数组为空,则返回 undefined。
- 中文名:unshift 数组开头添加元素
示例:
let arr = [3, 4];
arr.unshift(1, 2); // arr 变为 [1, 2, 3, 4]
函数:Array.prototype.unshift()
功能:将一个或多个元素添加到数组的开头,并返回该数组的新长度。
语法:
arr.unshift(element1, ..., elementN)
参数:
elementN:要添加到数组开头的元素。
返回值:
添加元素后的数组新长度。
- 中文名:shift 数组开头移除元素
示例:
let arr = [1, 2, 3];
let first = arr.shift(); // first 为 1, arr 变为 [2, 3]
函数:Array.prototype.shift()
功能:从数组中移除第一个元素,并返回该元素。
语法:
arr.shift()
参数:
无。
返回值:
从数组中移除的元素;如果数组为空,则返回 undefined。
- 中文名:splice 数组增删改元素
示例:
let arr = [1, 2, 3, 4];
// 删除:从索引1开始删除2个元素
arr.splice(1, 2); // 返回 [2, 3], arr 变为 [1, 4]
// 插入:在索引1处插入元素
arr.splice(1, 0, 'a', 'b'); // 返回 [], arr 变为 [1, 'a', 'b', 4]
// 替换:删除1个并插入新元素
arr.splice(1, 1, 'new'); // 返回 ['a'], arr 变为 [1, 'new', 'b', 4]
函数:Array.prototype.splice()
功能:通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
语法:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数:
start:指定修改的开始位置。
deleteCount:可选,表示要移除的数组元素的个数。
item1, item2, ...:可选,要添加进数组的元素。
返回值:
由被删除的元素组成的一个数组。如果没有删除元素,则返回空数组。
- 中文名:slice 数组浅拷贝截取
示例:
let arr = [1, 2, 3, 4];
arr.slice(1, 3); // 返回 [2, 3]
arr.slice(-2); // 返回 [3, 4]
arr.slice(); // 返回 [1, 2, 3, 4] (浅拷贝)
函数:Array.prototype.slice()
功能:返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
语法:
arr.slice([begin[, end]])
参数:
begin:可选,提取起始处的索引。
end:可选,提取终止处的索引。
返回值:
一个含有提取元素的新数组。
- 中文名:forEach 数组遍历
示例:
let arr = ['a', 'b', 'c'];
arr.forEach((element, index) => {
console.log(index + ': ' + element);
});
// 输出: 0: a, 1: b, 2: c
函数:Array.prototype.forEach()
功能:对数组的每个元素执行一次给定的函数。
语法:
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
参数:
callback:为数组中每个元素执行的函数。
thisArg:可选,执行回调函数时用作 this 的值。
返回值:
undefined。
- 中文名:map 数组映射
示例:
let arr = [1, 4, 9];
let doubles = arr.map(x => x * 2); // doubles 为 [2, 8, 18]
函数:Array.prototype.map()
功能:创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
语法:
let new_array = arr.map(callback(currentValue[, index[, array]])[, thisArg])
参数:
callback:生成新数组元素的函数。
返回值:
一个由原数组每个元素执行回调函数的结果组成的新数组。
- 中文名:filter 数组过滤
示例:
let arr = [1, 2, 3, 4];
let evens = arr.filter(x => x % 2 === 0); // evens 为 [2, 4]
函数:Array.prototype.filter()
功能:创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
语法:
let new_array = arr.filter(callback(element[, index[, array]])[, thisArg])
参数:
callback:用来测试每个元素的函数。
返回值:
一个新的、由通过测试的元素组成的数组。
- 中文名:find 数组查找
示例:
let arr = [5, 12, 8, 130, 44];
let found = arr.find(x => x > 10); // found 为 12
函数:Array.prototype.find()
功能:返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined。
语法:
arr.find(callback(element[, index[, array]])[, thisArg])
参数:
callback:在数组每一项上执行的函数。
返回值:
数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。
- 中文名:includes 数组包含检测
示例:
let arr = [1, 2, 3];
arr.includes(2); // 返回 true
arr.includes(4); // 返回 false
arr.includes(1, 2); // 返回 false (从索引2开始查找)
函数:Array.prototype.includes()
功能:判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
语法:
arr.includes(valueToFind[, fromIndex])
参数:
valueToFind:需要查找的元素值。
fromIndex:可选,开始查找的索引。
返回值:
布尔值。
- 中文名:reduce 数组归约
示例:
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, cur) => acc + cur, 0); // sum 为 10
函数:Array.prototype.reduce()
功能:对数组中的每个元素执行一个由您提供的归约函数,将其结果汇总为单个返回值。
语法:
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数:
callback:执行数组中每个值的函数。
initialValue:可选,作为第一次调用 callback函数时的第一个参数的值。
返回值:
函数累计处理的结果。
- 中文名:Object.keys 获取对象键名数组
示例:
let obj = { a: 1, b: 2 };
Object.keys(obj); // 返回 ['a', 'b']
函数:Object.keys()
功能:返回一个由给定对象的自身可枚举属性组成的数组。
语法:
Object.keys(obj)
参数:
obj:要返回其枚举自身属性的对象。
返回值:
一个表示给定对象所有可枚举属性的字符串数组。
- 中文名:Object.values 获取对象值数组
示例:
let obj = { a: 1, b: 2 };
Object.values(obj); // 返回 [1, 2]
函数:Object.values()
功能:返回一个给定对象自身的所有可枚举属性值的数组。
语法:
Object.values(obj)
参数:
obj:要返回其可枚举自身属性值的对象。
返回值:
一个包含对象自身的所有可枚举属性值的数组。
- 中文名:Object.entries 获取对象键值对数组
示例:
let obj = { a: 1, b: 2 };
Object.entries(obj); // 返回 [['a', 1], ['b', 2]]
函数:Object.entries()
功能:返回一个给定对象自身可枚举属性的键值对数组。
语法:
Object.entries(obj)
参数:
obj:要返回其可枚举自身属性键值对的对象。
返回值:
给定对象自身可枚举属性的键值对数组。
- 中文名:Object.assign 对象合并复制
示例:
let target = { a: 1 };
let source = { b: 2 };
let result = Object.assign(target, source);
// target 变为 { a: 1, b: 2 }, result 也指向 target
函数:Object.assign()
功能:将所有可枚举自有属性从一个或多个源对象复制到目标对象,并返回修改后的目标对象。
语法:
Object.assign(target, ...sources)
参数:
target:目标对象。
sources:源对象。
返回值:
目标对象。
- 中文名:扩展运算符 对象/数组展开
示例:
// 数组克隆
let arr = [1, 2];
let newArr = [...arr]; // [1, 2]
// 对象克隆与合并
let obj = { a: 1 };
let newObj = { ...obj, b: 2 }; // { a: 1, b: 2 }
函数:... (扩展运算符)
功能:在函数调用/数组构造时,将数组表达式或 string 在语法层面展开;构建对象字面量时展开。
语法:
...objOrArray
参数:
可迭代对象或对象。
返回值:
无(语法结构)。
- 中文名:class 类定义
示例:
class Person {
constructor(name) {
this.name = name;
}
// 定义方法
greet() {
console.log(`Hello, ${this.name}`);
}
}
const p = new Person('Alice');
p.greet(); // 输出: Hello, Alice
函数:class
功能:用于定义对象的模板,封装数据和操作数据的方法。
语法:
class ClassName {
constructor() { /* ... */ }
method() { /* ... */ }
}
参数:
ClassName:类名(首字母通常大写)。
constructor:构造函数,用于初始化实例属性。
返回值:
类本身(构造函数的语法糖)。
- 中文名:extends 继承
示例:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类的构造函数
this.breed = breed;
}
// 重写父类方法
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出: Rex barks.
函数:extends
功能:用于类之间的继承,子类可以继承父类的属性和方法。
语法:
class ChildClass extends ParentClass { /* ... */ }
参数:
ParentClass:父类(被继承的类)。
ChildClass:子类(继承者)。
super:子类构造函数中必须先调用super()初始化父类。
返回值:
子类定义。
- 中文名:Map 构造函数
示例:
const m1 = new Map(); // 创建空映射
const m2 = new Map([
['key1', 'value1'],
['key2', 2]
]); // 通过键值对数组初始化
函数:new Map()
功能:用于存储键值对,键可以是任意类型(包括对象、函数或原始值)。
语法:
new Map()
new Map(iterable)
参数:
iterable:可迭代对象(如数组),其元素为键值对数组。
返回值:
一个新的 Map 对象。
- 中文名:Map.prototype.set 添加/更新键值对
示例:
const map = new Map();
map.set('name', 'Alex'); // Map(1) {"name" => "Alex"}
map.set(1, 'code').set(2, 'test'); // 支持链式调用
函数:map.set()
功能:为 Map 对象添加或更新一个指定的键值对。
语法:
map.set(key, value)
参数:
key:要添加或更新的元素的键。
value:要添加或更新的元素的值。
返回值:
Map 对象本身。
- 中文名:Map.prototype.get 获取值
示例:
const map = new Map();
map.set('age', 25);
map.get('age'); // 25
map.get('unknown'); // undefined
函数:map.get()
功能:从 Map 对象中返回指定键的值。
语法:
map.get(key)
参数:
key:要获取的元素的键。
返回值:与键关联的值,若键不存在则返回 undefined。
- 中文名:Map.prototype.has 检测键是否存在
示例:
const map = new Map([['id', 101]]);
map.has('id'); // true
map.has('name'); // false
函数:map.has()
功能:判断 Map 对象中是否存在指定键。
语法:
map.has(key)
参数:
key:要检测的键。
返回值:布尔值,存在返回 true,否则返回 false。
- 中文名:Map.prototype.delete 删除键值对
示例:
const map = new Map([['k', 'v']]);
map.delete('k'); // true,删除成功
map.delete('k'); // false,键已不存在
函数:map.delete()
功能:移除 Map 对象中指定的元素。
语法:
map.delete(key)
参数:
key:要删除的元素的键。
返回值:布尔值。如果元素存在并被移除,则返回 true;否则返回 false。
- 中文名:Map.prototype.size 获取键值对数量
示例:
const map = new Map([['a', 1], ['b', 2]]);
map.size; // 2
函数:map.size
功能:返回 Map 对象中元素的数量。
语法:
map.size
返回值:
Map 对象中元素的个数。
- 中文名:for 循环
示例:
for (let i = 0; i < 3; i++) {
console.log(i); // 分别输出 0, 1, 2
}
函数:for
功能:创建一个循环,它包含了三个可选的表达式,这三个表达式被包围在括号中,并由分号分隔,后跟一个在循环中执行的语句。
语法:
for ([初始化]; [条件]; [最终表达式]) {
语句
}
参数:
初始化:一个表达式或变量声明,通常用于初始化计数器变量。该作用域为循环内。
条件:每次循环迭代前执行。如果求值为真,则执行语句;如果求值为假,则退出循环。
最终表达式:每次循环迭代结束后执行,通常用于更新计数器。
返回值:
无。
- 中文名:while 循环
示例:
let n = 0;
let x = 0;
while (n < 3) {
n++;
x += n; // x 最终为 6 (1+2+3)
}
函数:while
功能:只要指定条件为真,就会执行指定的语句块。条件在语句块执行前进行判断。
语法:
while (条件) {
语句
}
参数:
条件:每次循环迭代前执行。如果求值为真,则执行语句;如果求值为假,则退出循环。
返回值:
无。
- 中文名:do...while 循环
示例:
let i = 0;
do {
i += 1; // 至少执行一次,输出 1
console.log(i);
} while (i < 0);
函数:do...while
功能:创建一个执行指定语句的循环,直到条件为假。条件在语句执行后进行判断,保证语句至少执行一次。
语法:
do {
语句
} while (条件);
参数:
条件:每次循环迭代结束后执行。如果求值为真,则再次执行语句;如果求值为假,则退出循环。
返回值:
无。
- 中文名:for...of 可迭代对象循环
示例:
const array = ['a', 'b', 'c'];
for (const element of array) {
console.log(element); // 分别输出 'a', 'b', 'c'
}
函数:for...of
功能:在可迭代对象(包括 Array,Map,Set,String,arguments 等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
语法:
for (const 变量 of 可迭代对象) {
语句
}
参数:
变量:每次迭代中,将属性的值分配给该变量。
可迭代对象:被迭代枚举其属性的对象。
返回值:
无。
- 中文名:import 模块导入
示例:
// 命名导入
import { foo, bar } from 'module-name';
// 默认导入
import myModule from 'module-name';
// 混合导入
import myModule, { foo, bar } from 'module-name';
// 整体导入
import * as name from 'module-name';
// 仅运行模块(副作用)
import 'module-name';
// 动态导入(返回 Promise)
import('module-name').then(module => {
console.log(module.default);
});
函数:import
功能:用于导入由另一个模块导出的绑定。
语法:
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
参数:
defaultExport:引用模块默认导出的名称。
module-name:要导入的模块。通常是包含模块的 .js 文件的相对或绝对路径名,可以省略 .js 扩展名。
name:引用导入目标的命名空间的模块对象名称。
exportN:要导入的导出名称。
aliasN:命名导入的别名。
返回值:
静态导入:无返回值。
动态导入:返回一个 Promise,解析为包含模块所有导出的对象。
- 中文名:export 模块导出
示例:
// 命名导出
export const name = 'value';
export function func() { /* ... */ }
// 导出列表
export { component1, component2 };
// 重命名导出
export { variable as newName };
// 默认导出
export default function() { /* ... */ }
export default class { /* ... */ }
export default expression;
// 模块聚合(重新导出)
export { default as Function1 } from 'module-name';
export * from 'other-module';
函数:export
功能:用于从 JavaScript 模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。
语法:
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // 也支持 var, const
export let name1 = …, name2 = …, …, nameN; // 也支持 var, const
export function FunctionName(){...}
export class ClassName {...}
export default expression;
export default function (…) { … } // 也支持 class, function*
export default function name1(…) { … } // 也支持 class, function*
export { name1 as default, … };
export * from …; // 重新导出所有命名导出
export { name1, name2, …, nameN } from …; // 重新导出选定的命名导出
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
参数:
nameN:要导出的标识符名称。
返回值:
无。
- 中文名:Symbol 符号数据类型
示例:
const sym1 = Symbol();
const sym2 = Symbol('description'); // 提供描述字符串
const sym3 = Symbol('description');
sym2 === sym3 // false,Symbol 是唯一的
const obj = {
[sym1]: 'value'
};
console.log(obj[sym1]); // 'value'
函数:Symbol()
功能:创建一个唯一的、不可变的符号值,常用于对象属性的键以避免属性名冲突。
语法:
Symbol([description])
参数:
description:可选的字符串,用于描述该符号,主要用于调试,不影响符号的唯一性。
返回值:
返回一个唯一的 Symbol 值。
- 中文名:Symbol.for 全局符号注册
示例:
const globalSym1 = Symbol.for('app.id');
const globalSym2 = Symbol.for('app.id');
globalSym1 === globalSym2 // true,会复用已存在的符号
函数:Symbol.for()
功能:根据给定的键名,在全局 Symbol 注册表中查找并返回对应的 Symbol。如果不存在,则创建一个新的 Symbol 并存入注册表。
语法:
Symbol.for(key)
参数:
key:字符串,作为 Symbol 的标识符在全局注册表中使用。
返回值:
返回给定键名对应的 Symbol 值。
- 中文名:Symbol.keyFor 获取符号键名
示例:
const globalSym = Symbol.for('globalKey');
console.log(Symbol.keyFor(globalSym)); // 'globalKey'
const localSym = Symbol('localKey');
console.log(Symbol.keyFor(localSym)); // undefined,未在全局注册表中
函数:Symbol.keyFor()
功能:从全局 Symbol 注册表中获取与给定 Symbol 关联的键名。
语法:
Symbol.keyFor(sym)
参数:
sym:需要查找键名的 Symbol 值。
返回值:
返回全局注册表中对应的键名字符串;如果 Symbol 不在全局注册表中,则返回 undefined。
- 中文名:WeakSet 弱集合
示例:
const ws = new WeakSet();
const obj = {};
ws.add(obj); // 添加对象
ws.has(obj); // 返回 true
ws.delete(obj); // 移除对象
ws.has(obj); // 返回 false
函数:WeakSet
功能:存储对象弱引用的集合,若无其他引用则会被垃圾回收。
语法:
new WeakSet([iterable])
参数:
iterable:可迭代对象(元素必须为对象)。
返回值:
WeakSet 实例。
方法:
add(value):添加值。
delete(value):移除值。
has(value):判断是否存在。
- 中文名:WeakMap 弱映射
示例:
const wm = new WeakMap();
const key = {};
wm.set(key, 'secret'); // 设置键值对
wm.get(key); // 返回 'secret'
wm.has(key); // 返回 true
wm.delete(key); // 移除键值对
函数:WeakMap
功能:存储键值对的集合,键必须是对象且持有弱引用。
语法:
new WeakMap([iterable])
参数:
iterable:可迭代对象(键必须为对象)。
返回值:
WeakMap 实例。
方法:
set(key, value):设置键值对。
get(key):获取值。
has(key):判断是否存在。
delete(key):移除键值对。
- 中文名:function* 生成器函数
示例:
function* idMaker() {
let index = 0;
while (true) {
yield index++;
}
}
const gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
函数:function*
功能:定义一个生成器函数,它返回一个 Generator 对象。生成器函数执行时可以通过 yield 表达式暂停执行并输出值,后续可以通过 next() 方法恢复执行。
语法:
function* name([param[, param[, ... param]]]) {
statements
}
参数:
name:函数名。
param:传递给函数的参数。
返回值:
一个 Generator 对象。
- 中文名:yield 产出
示例:
function* generator() {
yield '第一个暂停点';
yield '第二个暂停点';
return '结束';
}
const gen = generator();
console.log(gen.next()); // { value: '第一个暂停点', done: false }
console.log(gen.next()); // { value: '第二个暂停点', done: false }
console.log(gen.next()); // { value: '结束', done: true }
函数:yield
功能:用于暂停和恢复生成器函数的执行。yield 后面的表达式的值返回给生成器的调用者。
语法:
[[rv]] = yield [[expression]];
参数:
expression:定义通过迭代器协议从生成器函数返回的值。
返回值:
返回传递给生成器的 next() 方法的可选参数值。
- 中文名:yield* 委托产出
示例:
function* gen2() {
yield '内部 1';
yield '内部 2';
}
function* gen1() {
yield '外部 1';
yield* gen2(); // 委托给 gen2
yield '外部 2';
}
for (const value of gen1()) {
console.log(value);
}
// 输出: '外部 1', '内部 1', '内部 2', '外部 2'
函数:yield*
功能:用于在一个生成器函数中委托给另一个生成器函数或可迭代对象。它会遍历传入的可迭代对象并产出每一个值。
语法:
yield* [[expression]];
参数:
expression:返回一个可迭代对象的表达式。
返回值:
返回委托生成器函数的 return 的值。
- 中文名:next 迭代器下一项
示例:
function* simpleGen() {
yield 1;
yield 2;
}
const g = simpleGen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: undefined, done: true }
// 带参数传递
function* accumulator() {
const received = yield 10; // 第一次 next() 暂停在此
console.log(received); // 第二次 next(20) 时,received 被赋值为 20
}
const acc = accumulator();
acc.next(); // 启动生成器
acc.next(20); // 输出: 20
函数:generator.next()
功能:返回一个包含属性 done 和 value 的对象。该方法也可以通过接受一个参数用以向生成器内部传值,该参数将作为上一个 yield 表达式的返回值。
语法:
gen.next(value)
参数:
value:向生成器传递的值。如果传入了值,该值会作为上一个 yield 表达式的返回值。
返回值:
一个对象,包含两个属性:value(产出的值)和 done(布尔值,表示生成器是否已执行完毕)。
- 中文名:return 强制结束迭代
示例:
function* gen() {
yield 1;
yield 2;
yield 3;
}
const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return('强制结束')); // { value: '强制结束', done: true }
console.log(g.next()); // { value: undefined, done: true }
函数:generator.return()
功能:返回给定的值并结束生成器。生成器进入结束状态,后续调用 next() 也将保持结束状态。
语法:
gen.return(value)
参数:
value:需要返回的值。
返回值:
一个对象,包含传入的 value 和 done 为 true。
- 中文名:Symbol.iterator 可迭代协议
示例:
const myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
// 可以使用 for...of 循环
for (const value of myIterable) {
console.log(value);
}
// 输出: 1, 2, 3
// 或者使用展开运算符
console.log([...myIterable]); // [1, 2, 3]
函数:Symbol.iterator
功能:定义对象的默认迭代器。该属性对应一个无参函数,返回一个符合迭代器协议的对象(包含 next 方法)。实现了该协议的对象可被 for...of 循环、展开运算符等消费。
语法:
obj[Symbol.iterator] = function*() { ... };
参数:
无。
返回值:
一个符合迭代器协议的对象。
- 中文名:Promise Promise对象
示例:
const p = new Promise((resolve, reject) => {
setTimeout(() => resolve('完成'), 1000);
});
p.then(result => console.log(result));
函数:new Promise()
功能:用于表示一个异步操作的最终完成(或失败)及其结果值。
语法:
new Promise(executor)
参数:
executor:一个带有resolve和reject两个参数的执行器函数。
返回值:
一个Promise对象。
- 中文名:async async异步函数声明
示例:
async function myFunc() {
return 'Hello';
}
myFunc().then(val => console.log(val));
函数:async function
功能:声明一个异步函数,该函数返回一个Promise对象。
语法:
async function name([param[, ...param]]) { statements }
返回值:
返回的Promise对象会以函数的返回值进行resolve。
- 中文名:await await表达式
示例:
async function getData() {
const promise = new Promise(resolve => resolve('数据'));
const result = await promise;
console.log(result);
}
getData();
函数:await
功能:暂停异步函数的执行,等待Promise处理完成后继续执行并返回结果。
语法:
[rv] = await expression
参数:
expression:一个Promise对象或任何要等待的值。
返回值:
返回Promise处理完成后的结果。
- 中文名:Promise.then Promise成功回调
示例:
Promise.resolve(1)
.then(value => value + 1)
.then(value => console.log(value)); // 2
函数:Promise.prototype.then()
功能:为Promise实例添加解决和拒绝状态的回调函数,返回一个新的Promise。
语法:
p.then(onFulfilled, onRejected)
参数:
onFulfilled:Promise成功时的回调函数。
onRejected:Promise失败时的回调函数(可选)。
返回值:
一个新的Promise对象。
- 中文名:Promise.catch Promise失败捕获
示例:
Promise.reject('错误')
.catch(error => console.error(error));
函数:Promise.prototype.catch()
功能:用于指定Promise状态变为rejected时的回调函数。
语法:
p.catch(onRejected)
参数:
onRejected:Promise失败时的回调函数。
返回值:
一个新的Promise对象。
- 中文名:Promise.all Promise并行执行
示例:
const p1 = Promise.resolve(3);
const p2 = 1337;
const p3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
Promise.all([p1, p2, p3]).then(values => console.log(values)); // [3, 1337, "foo"]
函数:Promise.all()
功能:接收一个Promise的可迭代对象,只有所有Promise都成功才返回成功结果数组。
语法:
Promise.all(iterable)
参数:
iterable:一个可迭代对象,如Array。
返回值:
一个Promise,当所有输入Promise都完成时,返回结果数组;如有任一失败,则立即拒绝。
- 中文名:Promise.resolve Promise成功包装
示例:
Promise.resolve('Success').then(val => console.log(val));
函数:Promise.resolve()
功能:返回一个状态为resolved的Promise对象。
语法:
Promise.resolve(value)
参数:
value:要被Promise对象解析的值。
返回值:
一个状态为resolved的Promise对象。
- 中文名:Proxy 代理
示例:
const target = { a: 1, b: 2 };
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37; // 访问不存在的属性返回37
}
};
const p = new Proxy(target, handler);
p.a; // 返回 1
p.c; // 返回 37
函数:new Proxy()
功能:用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
语法:
new Proxy(target, handler)
参数:
target:要包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler:一个对象,其属性是当执行一个操作时定义代理的行为的函数(拦截器)。
返回值:
一个 Proxy 代理对象。
- 中文名:Proxy.revocable 可撤销代理
示例:
const object = { data: 1 };
const { proxy, revoke } = Proxy.revocable(object, {});
proxy.data; // 返回 1
revoke(); // 撤销代理
proxy.data; // 抛出 TypeError
函数:Proxy.revocable()
功能:创建一个可撤销的 Proxy 对象。返回一个包含了代理对象本身和它的撤销方法的对象。
语法:
Proxy.revocable(target, handler)
参数:
target:目标对象。
handler:处理器对象,用于定义拦截行为。
返回值:
包含两个属性的对象:{ proxy: Proxy, revoke: Function }。
- 中文名:Reflect 反射
示例:
const obj = { x: 1, y: 2 };
// 获取属性值
Reflect.get(obj, 'x'); // 返回 1
// 设置属性值
Reflect.set(obj, 'x', 10); // 返回 true
// 检查属性是否存在
Reflect.has(obj, 'y'); // 返回 true
// 删除属性
Reflect.deleteProperty(obj, 'y'); // 返回 true
函数:Reflect
功能:提供拦截 JavaScript 操作的方法,类似于 Proxy 的捕捉器,用于底层操作对象。
语法:
Reflect.get(target, propertyKey[, receiver])
Reflect.set(target, propertyKey, value[, receiver])
Reflect.has(target, propertyKey)
Reflect.deleteProperty(target, propertyKey)
参数:
target:目标对象。
propertyKey:需要获取、设置或检测的属性名。
value:设置的属性值。
receiver:如果遇到 setter,this 将绑定给 receiver(可选)。
返回值:
Reflect.get 返回属性的值。
Reflect.set 返回一个布尔值,表示是否成功设置属性。
Reflect.has 返回一个布尔值,表示是否存在该属性。
Reflect.deleteProperty 返回一个布尔值,表示是否成功删除属性。
- 中文名:rand 随机数生成
示例:
Math.random() // 返回 [0, 1) 之间的随机数,例如 0.548372
函数:Math.random()
功能:返回一个浮点数,伪随机数在范围从0到小于1之间。
语法:
Math.random()
参数:
无。
返回值:
[0, 1) 范围内的浮点数。
- 中文名:rand 随机数生成
示例:
// 返回 0 到 1 之间的随机数(不包含 1)
Math.random() // 如 0.123456
// 返回 0 到 9 之间的随机整数
Math.floor(Math.random() * 10)
// 返回两个数之间的随机整数(包含最小最大值)
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
getRandomInt(1, 10) // 可能返回 1 到 10
函数:Math.random()
功能:返回一个浮点数,范围在 [0, 1) 左闭右开区间。
语法:
Math.random()
参数:
无。
返回值:
一个介于 0(包含)和 1(不包含)之间的伪随机浮点数。
- 中文名:fetch 发起网络请求
示例:
// GET 请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
// POST 请求
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John' })
});
函数:fetch()
功能:用于发起网络请求并获取资源,是 XMLHttpRequest 的现代替代方案,支持 Promise。
语法:
fetch(url, options)
参数:
url:请求的 URL 地址。
options:配置对象(可选),包含 method、headers、body 等属性。
返回值:
返回一个 Promise,该 Promise resolve 时回传一个 Response 对象。
- 中文名:drawImage 图像绘制
示例:
const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
// 基础绘制
ctx.drawImage(img, 0, 0);
// 缩放绘制
ctx.drawImage(img, 0, 0, 100, 50);
// 切片绘制
ctx.drawImage(img, 10, 10, 50, 50, 0, 0, 100, 100);
};
函数:CanvasRenderingContext2D.drawImage()
功能:在画布上绘制图像。
语法:
ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数:
image:绘制源(Image、Video或Canvas元素)。
dx, dy:目标画布左上角坐标。
dWidth, dHeight:目标绘制宽高(可选,缩放图像)。
sx, sy, sWidth, sHeight:源图像切片坐标和尺寸(可选,裁剪图像)。
返回值:
undefined。
- 中文名:createImageData 创建图像数据
示例:
// 创建指定尺寸的空白ImageData对象
const imageData = ctx.createImageData(100, 100);
// 创建与另一ImageData同尺寸的空白对象
const anotherData = ctx.createImageData(imageData);
函数:CanvasRenderingContext2D.createImageData()
功能:创建一个空白的ImageData对象,其中所有像素均为透明黑色。
语法:
ctx.createImageData(width, height)
ctx.createImageData(imagedata)
参数:
width:ImageData的宽度。
height:ImageData的高度。
imagedata:现有的ImageData对象(仅复制尺寸,不复制数据)。
返回值:
一个新的ImageData对象。
- 中文名:getImageData 获取像素数据
示例:
// 获取左上角10x10区域的像素数据
const imageData = ctx.getImageData(0, 0, 10, 10);
const data = imageData.data; // Uint8ClampedArray 一维数组
// 获取第一个像素的RGBA值
const r = data[0];
const g = data[1];
const b = data[2];
const a = data[3];
函数:CanvasRenderingContext2D.getImageData()
功能:返回画布上指定矩形的像素数据。
语法:
ctx.getImageData(sx, sy, sw, sh)
参数:
sx, sy:提取区域的左上角坐标。
sw, sh:提取区域的宽高。
返回值:
包含像素数据的ImageData对象。
- 中文名:putImageData 绘制像素数据
示例:
const imageData = ctx.createImageData(100, 100);
// 修改像素数据
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] = 255; // R
}
// 将数据绘制到画布指定位置
ctx.putImageData(imageData, 10, 10);
// 仅绘制数据中的部分区域
ctx.putImageData(imageData, 10, 10, 0, 0, 50, 50);
函数:CanvasRenderingContext2D.putImageData()
功能:将给定的ImageData对象绘制到画布上。
语法:
ctx.putImageData(imageData, dx, dy)
ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
参数:
imageData:包含像素数据的对象。
dx, dy:目标画布的放置坐标。
dirtyX, dirtyY...:源图像中需要绘制的矩形区域(可选,优化性能)。
返回值:
undefined。
- 中文名:toDataURL 图像转Data URL
示例:
const canvas = document.getElementById('myCanvas');
// 默认转为PNG格式
const dataURL = canvas.toDataURL();
// 指定质量为0.8的JPEG格式
const jpegURL = canvas.toDataURL('image/jpeg', 0.8);
函数:HTMLCanvasElement.toDataURL()
功能:将画布内容转换为包含图像表现的Data URL。
语法:
canvas.toDataURL(type, encoderOptions)
参数:
type:图像格式(默认image/png),如'image/jpeg'、'image/webp'。
encoderOptions:0到1之间的图片质量(仅对jpeg/webp有效)。
返回值:
包含Data URL的DOMString。
- 中文名:toBlob 图像转Blob
示例:
const canvas = document.getElementById('myCanvas');
// 转换为Blob对象
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
// 进一步处理...
}, 'image/jpeg', 0.9);
函数:HTMLCanvasElement.toBlob()
功能:将画布内容转换为Blob对象(二进制大对象),通常用于文件上传或下载。
语法:
canvas.toBlob(callback, type, quality)
参数:
callback:回调函数,参数为生成的Blob对象(若失败则为null)。
type:图像MIME类型(默认image/png)。
quality:图片质量(0-1)。
返回值:
undefined。
- 中文名:Array.from 快速生成范围数组
示例:
// 生成 0 到 4 的数组
Array.from({length: 5}, (_, i) => i)
// 返回 [0, 1, 2, 3, 4]
// 生成 1 到 5 的数组
Array.from({length: 5}, (_, i) => i + 1)
// 返回 [1, 2, 3, 4, 5]
// 生成步长为 2 的数组
Array.from({length: 5}, (_, i) => i * 2)
// 返回 [0, 2, 4, 6, 8]
函数:Array.from()
功能:从一个类似数组或可迭代对象创建一个新的数组实例,常用于快速初始化指定长度的数组。
语法:
Array.from(arrayLike, mapFn)
参数:
arrayLike:想要转换成数组的伪数组对象或可迭代对象(如 {length: 5})。
mapFn:可选,如果指定了该参数,新数组中的每个元素会执行该回调函数。
返回值:
一个新的数组实例。
- 中文名:encodeURI URL编码
示例:
encodeURI('https://example.com/path with spaces')
// 返回 'https://example.com/path%20with%20spaces'
encodeURI(',/?:@&=+$#')
// 返回 ',/?:@&=+$#' (保留字符不被编码)
函数:encodeURI()
功能:将字符串转换为UTF-8编码的URL格式,不会编码保留字符(如 : , / , ? 等)。
语法:
encodeURI(uri)
参数:
uri:需要编码的完整URL字符串。
返回值:
编码后的URL字符串。
- 中文名:encodeURIComponent URL组件编码
示例:
encodeURIComponent('path with spaces?')
// 返回 'path%20with%20spaces%3F'
encodeURIComponent('https://example.com')
// 返回 'https%3A%2F%2Fexample.com' (将协议符号也编码)
函数:encodeURIComponent()
功能:将字符串转换为UTF-8编码的URL组件格式,会编码所有特殊字符(包括 / , ? , : 等),通常用于编码查询参数。
语法:
encodeURIComponent(uriComponent)
参数:
uriComponent:URL中的组成部分(如参数值)。
返回值:
编码后的字符串。
- 中文名:btoa Base64编码
示例:
btoa('Hello, World!')
// 返回 'SGVsbG8sIFdvcmxkIQ=='
函数:btoa()
功能:将二进制字符串(Latin1字符)编码为Base64编码的ASCII字符串。
语法:
btoa(stringToEncode)
参数:
stringToEncode:需要编码的字符串(仅支持Latin1字符集)。
返回值:
Base64编码后的字符串。
- 中文名:atob Base64解码
示例:
atob('SGVsbG8sIFdvcmxkIQ==')
// 返回 'Hello, World!'
函数:atob()
功能:解码Base64编码的字符串。
语法:
atob(encodedData)
参数:
encodedData:Base64编码的字符串。
返回值:
解码后的原始字符串。
- 中文名:TextEncoder 文本编码器
示例:
const encoder = new TextEncoder();
const uint8Array = encoder.encode('你好');
// 返回 Uint8Array(6) [228, 189, 160, 229, 165, 189]
函数:new TextEncoder()
功能:将字符串编码为UTF-8格式的Uint8Array字节数组。
语法:
new TextEncoder()
encoder.encode(input)
参数:
input:需要编码的字符串。
返回值:
Uint8Array类型的字节数组。
- 中文名:TextDecoder 文本解码器
示例:
const decoder = new TextDecoder('utf-8');
const bytes = new Uint8Array([228, 189, 160, 229, 165, 189]);
decoder.decode(bytes)
// 返回 '你好'
函数:new TextDecoder()
功能:将字节数组解码为指定编码的字符串(默认为UTF-8)。
语法:
new TextDecoder(encoding)
decoder.decode(input)
参数:
encoding:编码格式,如 'utf-8', 'gbk'。
input:包含编码文本的BufferSource(如Uint8Array)。
返回值:
解码后的字符串。
- 中文名:crypto.subtle.digest 摘要算法(MD5/SHA)
示例:
// 计算字符串的SHA-256哈希值
async function digestMessage(message) {
const encoder = new TextEncoder();
const data = encoder.encode(message);
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
digestMessage('Hello');
// 返回 '185f8db32271fe25f561a6fc938b2e26...'
函数:crypto.subtle.digest()
功能:计算给定数据的摘要(哈希值)。原生支持SHA-1, SHA-256, SHA-384, SHA-512。注意:原生JS不支持MD5,通常需引入第三方库(如CryptoJS)。
语法:
crypto.subtle.digest(algorithm, data)
参数:
algorithm:摘要算法名称,如 'SHA-256'。
data:需要计算摘要的数据(BufferSource)。
返回值:
Promise,resolve为包含摘要的ArrayBuffer。