Js中常用数据转换及方法记录汇总

一、字符串

1、字符串转Json

方法一 :使用内置JSON对象的parse()方法

JSON.parse()是最常用且最标准的方法,用于将一个JSON格式的字符串转换为JavaScript对象

js 复制代码
var jsonString = '{"name":"小明", "age":30, "city":"南京"}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

方法二:使用eval()函数

js 复制代码
var jsonString = '{"name":"汤姆", "age":30, "city":"南京"}';
var jsonObject = eval('(' + jsonString + ')');
console.log(jsonObject);

2、字符串截取

字符串截取方法,包括 substring、slice 和 substr(已不推荐使用,但仍然存在):

A、slice(start, end)

  • 从 start 到 end(不包括 end)
  • 支持负数(从末尾开始)
js 复制代码
let str = "平板电脑是最好的选择";
const sliced = str.slice(0, 5); // 从索引 0 开始,截取到索引 5(不包括索引 5)
console.log(sliced); // 输出: 平板电脑是

B、substring(start, end)

    1. 从 start 到 end(不包括 end)
    1. 如果 start > end,会自动交换
    1. 不支持负数索引
js 复制代码
// 使用 substring 方法
const substring = str.substring(7, 10); // 从索引 7 开始,截取到索引 12(不包括索引 12)
console.log(substring); // 输出: 的选择

C、substr(start, length)(不推荐使用)

js 复制代码
// 使用 substr 方法(已废弃,不推荐使用)
const substr = str.substr(7, 5); // 从索引 7 开始,截取 5 个字符
console.log(substr); // 输出: 的选择

总结

方法 支持负数索引 第二参数含义 推荐使用
slice 结束位置(不含) 推荐
substring 结束位置(不含) 常用
substr 长度 不推荐

3、字符串拼接

字符串拼接(也叫字符串合并)有几种常见方式

A、使用 + 运算符(最基本)
js 复制代码
const firstCountry = "中国";
const lastCity = "南京";
const fullName = firstCountry + " " + lastCity;
console.log(fullName); // "中国 南京"
B、使用模板字符串(推荐)

更直观、更可读,尤其在多行或带变量的字符串中非常方便:

js 复制代码
const firstCountry = "非洲";
const lastCity = "刚果";
const fullName = `${firstCountry} ${lastCity}`;
console.log(fullName); // "非洲 刚果"

还支持多行:

js 复制代码
const message = `Hello,
This is a multi-line
string.`;

console.log(message);

二、数组对象操作[{}]

1、单一操作

如果想要修改数组中每个对象的参数名称(即属性名),你可以使用 Array.prototype.map() 方法来创建一个新的数组,其中每个对象的键都按照你想要的方式修改

假设有如下数组:

js 复制代码
const arr = [
    { oldKey: '0',ghName: '徐州港行' },
    { oldKey: '1',ghName: '江阴船闸管理所'},
    { oldKey: '2',ghName: '扬州船闸'}
];

你想要把ghName改为shipLock,可以这样做:

js 复制代码
const newArr = arr.map(item => {
    return {
        shipLock: item.ghName,
        oldKey: item.oldKey  //如果其他的不需要修改,则直接如此操作即可
    };
});

2、如果有多个属性需要改名

js 复制代码
const arr = [
  { first_name: 'John', last_name: 'Doe' },
  { first_name: 'Jane', last_name: 'Smith' }
];

// 属性名映射表
const keyMap = {
  first_name: 'firstName',
  last_name: 'lastName'
};

const newArr = arr.map(item => {
  const newItem = {};
  for (let key in item) {
    const newKey = keyMap[key] || key; // 使用映射表,没匹配就保留原名
    newItem[newKey] = item[key];
  }
  return newItem;
});

console.log(newArr);

三、时间戳(Unix)转换

时间戳在线转换工具

1、将时间戳转换为日期

JS的Date对象可以用于将时间戳转换为可读的日期格式。需要注意的是,JS的时间戳是以毫秒为单位的,而Unix时间戳通常以秒为单位。因此,在创建 Date 对象时,需要将秒级时间戳乘以1000,转换为毫秒级时间戳。

js 复制代码
var timestamp = 1743827809; // Unix 时间戳(秒)
var date = new Date(timestamp * 1000); // 转换为毫秒并创建 Date 对象

var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1).toString().padStart(2, '0') + '-';
var D = date.getDate().toString().padStart(2, '0') + ' ';
var h = date.getHours().toString().padStart(2, '0') + ':';
var m = date.getMinutes().toString().padStart(2, '0') + ':';
var s = date.getSeconds().toString().padStart(2, '0');

var formattedDate = Y + M + D + h + m + s;
console.log(formattedDate); // 输出格式:YYYY-MM-DD HH:MM:SS

padStart(2, '0') 方法用于确保月份、日期、小时、分钟和秒始终以两位数显示,即在需要时在前面补零。

2、再将日期转换为时间戳

如果需要将日期字符串转换为时间戳,可以使用 Date.parse() 方法或 new Date() 构造函数。需要注意,Date.parse() 返回的时间戳是毫秒级的。

js 复制代码
var dateString = '2025-04-05 12:36:49';
var date = new Date(dateString);

var timestamp1 = date.getTime(); // 毫秒级时间戳
var timestamp2 = date.valueOf(); // 毫秒级时间戳
var timestamp3 = Date.parse(dateString); // 毫秒级时间戳

console.log(timestamp1); // 输出:1743827809000
console.log(timestamp2); // 输出:1743827809000
console.log(timestamp3); // 输出:1743827809000

getTime()valueOf()Date.parse() 方法都返回毫秒级的时间戳。如果需要秒级时间戳,可以将结果除以 1000。
注意: Date.parse( )方法解析日期字符串时,对字符串的格式有一定要求,建议使用标准的日期格式,如 'YYYY-MM-DDTHH:MM:SS'

相关推荐
风无雨1 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!1 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~4 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧6 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员6 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪6 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya6 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81636 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef066 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪6 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试