Decade
Javascript 数据类型
Zhongjun Qiu 元婴开发者
  2023-12-14 22:25:08   2025-04-29 21:27:59    1.4k Words  6 Mins  

JavaScript 数据类型与核心用法速览，涵盖原始类型包装、常用数据结构操作、对象转换及 JSON 处理。

原始类型对象

1
2
3
let str = "Hello";

alert( str.toUpperCase() ); // HELLO

很简单，对吧？以下是 str.toUpperCase() 中实际发生的情况：

  1. 字符串 str 是一个原始值。因此，在访问其属性时，会创建一个包含字符串字面值的特殊对象，并且具有可用的方法，例如 toUpperCase()。
  2. 该方法运行并返回一个新的字符串（由 alert 显示）。
  3. 特殊对象被销毁，只留下原始值 str。

即原始类型在调用方法时，会自动生成一个对象[String Number Boolean Symbol BigInt]。没有undefined和null

数字

Math对象

与python，Java提供的API类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Math.floor
Math.ceil
Math.round 
num.toFixed(precision)
num.toString(radix)

alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5

alert( parseInt('12.3') ); // 12
alert( parseFloat('12.3.4') ); // 12.3

alert( parseInt('a123') ); // NaN
alert( parseInt('0xff', 16) ); // 255
alert( parseInt('ff', 16) ); // 255

alert( parseInt('2n9c', 36) ); // 123456

Number对象

1
2
3
4
5
6
7
8
9
10
let num = 255;

alert( num.toString(16) );  // ff
alert( num.toString(2) );   // 11111111

let num = 12.36;
alert( num.toFixed(1) ); // "12.4"

let num = 12.34;
alert( num.toFixed(5) ); // "12.34000"，在结尾添加了 0，以达到小数点后五位

字符串

str.codePointAt(pos)：返回在 pos 位置的字符代码。

String.fromCodePoint(code)：通过数字 code 创建字符。

str.substring(start, end)

str.trim()： 删除字符串前后的空格。

str.repeat(n)：重复字符串 n 次。

数组

声明和初始化

1
2
3
4
5
6
let arr = new Array();
let arr = [];

let n = 1e5;
// vector<int>(n, -1);
let arr = new Array(n).fill(-1);

负索引：

arr.at(i)

  • 如果 i >= 0，则与 arr[i] 完全相同。
  • 对于 i 为负数的情况，它则从数组的尾部向前数。

添加/删除

  • push 在末端添加一个元素
  • shift 取出队列首端的一个元素
  • pop 从末端取出一个元素
  • unshift 在队列首端加一个元素

push 和 unshift 方法都可以一次添加多个元素：

1
2
3
4
5
6
7
let fruits = ["Apple"];

fruits.push("Orange", "Peach");
// 或者使用展开语法：...
fruits.push(...["Orange", "Peach"]);

// ["Apple", "Orange", "Peach"]

splice

1
arr.splice(start[, deleteCount, elem1, ..., elemN])

它从索引 start 开始修改 arr：删除 deleteCount 个元素并在当前位置插入 elem1, ..., elemN。最后返回被删除的元素所组成的数组。

1
2
3
4
5
let arr = ["I", "study", "JavaScript", "right", "now"];
// 删除数组的前三项，并使用其他内容代替它们
let r = arr.splice(0, 3, "dance");
alert( arr ) // ["dance", "right", "now"]
alert( r ) // ["I", "study", "JavaScript"]

slice

1
arr.slice([start], [end])

数组赋值，与字符串切片类似。

concat

1
2
3
4
5
arr.concat(arg1, arg2...)

let arr = [1, 2];
// 从 arr、[3,4]、5 和 6 创建一个新数组
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

数组会被展开。

forEach

1
2
3
arr.forEach(function(item, index, array) {
  // ... do something with each item
});

find

与forEach类似，只传入一个参数时，默认传入的是item。

1
2
3
4
5
6
7
8
9
10
11
12
let result = arr.find(function(item, index, array) {
  // 如果返回 true，则返回 item 并停止迭代
  // 搜索不到，则返回 undefined
});

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
alert(user.name); // John

findIndex/findLastIndex

与arr.find具有相同的语法，但它返回找到的元素的索引，而不是元素本身。如果没找到，则返回-1。

filter

语法与find大致相同，但是filter返回的是所有匹配元素组成的数组：

1
2
3
4
let results = arr.filter(function(item, index, array) {
  // 如果 true item 被 push 到 results，迭代继续
  // 如果什么都没找到，则返回空数组
});

map

对数组的每个元素都调用函数，并返回结果数组。

1
2
3
4
5
6
let result = arr.map(function(item, index, array) {
  // 返回新值而不是当前元素
})

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort

默认会当成字符串类型排序。

1
2
3
// 数字从小到大
arr.sort( (a, b) => a - b );
arr.sort( (a, b) => a < b ? -1 : 1);

Array.from(arrayLike, mapFn)

将类数组或可迭代对象转换成数组。

Map

  • new Map() —— 创建 map。
  • map.set(key, value) —— 根据键存储值。
  • map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined。
  • map.has(key) —— 如果 key 存在则返回 true，否则返回 false。
  • map.delete(key) —— 删除指定键的值。
  • map.clear() —— 清空 map。
  • map.size —— 返回当前元素个数。
  • map.forEach((value, key, map) => {}

map中的key类型可以是任意类型（不同于对象，key只能为str或Symbol）。

1
2
3
4
5
6
7
8
9
10
11
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);
// 或者
let obj = {
  name: "John",
  age: 30
};
let map = new Map(Object.entries(obj));

Set

  • new Set(iterable) —— 创建一个 set，如果提供了一个 iterable 对象（通常是数组），将会从数组里面复制值到 set 中。
  • set.add(value) —— 添加一个值，返回 set 本身
  • set.delete(value) —— 删除值，如果 value 在这个方法调用的时候存在则返回 true ，否则返回 false。
  • set.has(value) —— 如果 value 在 set 中，返回 true，否则返回 false。
  • set.clear() —— 清空 set。
  • set.size —— 返回元素个数。
  • set.forEach((value, valueAgain, set)=>{}

对象转换

实现map，filter等功能。

1
2
3
4
5
6
7
8
9
10
11
let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 将价格转换为数组，将每个键/值对映射为另一对
  // 然后通过 fromEntries 再将结果转换为对象
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

Json

JSON.stringify(value[, replacer,space])

1
2
3
4
5
6
7
8
9
10
11
let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: "aaa" // meetup 引用了 room
};

x =  JSON.stringify(meetup, function replacer(key, value) {
  return (key == 'place') ? undefined : value;
});

//'{"title":"Conference","participants":[{"name":"John"},{"name":"Alice"}]}'

replace:替换指定key对应的value（value为undefined的不显示在序列化结果中）。

JSON.parse(str, [reviver])

1
2
3
4
5
6
7
8
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() );
Javascript 数据类型
2023/12/14/Javascript-数据类型/
Author
Zhongjun Qiu
Published
2023-12-14 22:25
License
 REWARD AUTHOR
 Comments
Comment plugin failed to load
Loading comment plugin
  1. 原始类型对象
  2. 数字
  3. 字符串
  4. 数组
  5. Map
  6. Set
  7. 对象转换
  8. Json
  1. 原始类型对象
  2. 数字
  3. 字符串
  4. 数组
  5. Map
  6. Set
  7. 对象转换
  8. Json