js常用的一些方法（持续更新中）

发布日期: 2019-05-11

更新日期: 2026-08-07

文章字数: 2.9k

阅读时长: 13 分

阅读次数:

js获取自定义data

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
        <title>Document</title>
    </head>

    <body>
        <div id="tree" data-leaves="47" data-plant-height="2.4m"></div>
    </body>
</html>
<script>
    /* -----js的data方法------ */
    var tree = document.getElementById("tree");
    //getAttribute()取值属性
    console.log(tree.getAttribute("data-leaves"));
    console.log(tree.getAttribute("data-plant-height"));
    //setAttribute()赋值属性
    tree.setAttribute("data-leaves", "48");

    //data-前缀属性可以在JS中通过dataset取值，更加方便
    console.log(tree.dataset.leaves);
    console.log(tree.dataset.plantHeight);
    //赋值
    tree.dataset.plantHeight = "3m";
    tree.dataset.leaves--;
    //新增data属性
    tree.dataset.age = "100";
    //删除，设置成null，或者delete
    // tree.dataset.leaves = null;
    delete tree.dataset.age;

    /* ------jQuery的data方法------  */
    var $tree = $("#tree");
    console.log($tree.data("plant-height"));
</script>

join()

join() 方法用于把数组中的所有元素放入一个字符串，返回一个新的字符串，不影响原数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.join(","); //1,2,3,4,5,6,7,8,9
arr.join("."); //1.2.3.4.5.6.7.8.9

shift()

定义和用法

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

返回值

数组原来的第一个元素的值。

shift() 方法移除数组的第一项。

注释： shift() 方法会改变数组的长度。

注释： shift 方法的返回值是被移除的项目。

注释： shift() 方法会改变原始数组。

提示： 如需删除数组的最后一项，请使用 pop() 方法。

replace()

定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

stringObject.replace(regexp / substr, replacement);

参数	描述
regexp/substr	必需。规定子字符串或要替换的模式的 `RegExp` 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 `RegExp` 对象。
replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

说明

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。

split()

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

语法

stringObject.split(separator, howmany);

参数	描述
separator	必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

提示和注释

注释： 如果把空字符串 (“”) 用作 _separator_，那么 stringObject 中的每个字符之间都会被分割。

注释： String.split() 执行的操作与 Array.join() 执行的操作是相反的。

js获取时间相关的方法

1.时间戳转日期

将时间戳转换为 年-月-日-时-分-秒 格式和获取当前时间

function FormatDateTime(time) {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
}
//去掉参数time，即可获取当前时间
// 其他写法：
function GetTime(time) {
    var date = new Date(time);
    var Y = date.getFullYear() + "-";
    var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
    var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
    var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
//不带参数的，即获取当前时间
function GetNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes() +
        seperator2 +
        date.getSeconds();
    return currentdate;
}

//获取今天的日期(不包括时分秒)
function getNowDay() {
    var currentDate = new Date();
    currentDate.setTime(currentDate.getTime());
    var month =
        currentDate.getMonth() + 1 < 10
            ? "0" + (currentDate.getMonth() + 1)
            : currentDate.getMonth() + 1;
    var day = currentDate.getDate() < 10 ? "0" + currentDate.getDate() : currentDate.getDate();
    var nowday = currentDate.getFullYear() + "-" + month + "-" + day;
    return nowday;
}

2.获取上个月日期

function getLastMonth() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    if (month == 0) {
        year = year - 1;
        month = 12;
    }
    return year + "-" + month + "-" + "01";
}

3.获取上个月月底日期

function getLastMonthAndDay() {
    var nowDate = new Date();
    var year = nowDate.getFullYear();
    var month = nowDate.getMonth();
    if (month == 0) {
        month = 12;
        year = year - 1;
    }
    var lastDay = new Date(year, month, 0);
    var yyyyMMdd = year + "-" + month + "-" + lastDay.getDate();
    return yyyyMMdd;
}

4.获取下一个月

/**
 * @date 格式为yyyy/mm/dd的日期，如：2014/01/25
 */
function getNextMonth(date) {
    var arr = date.split("/");
    var year = arr[0]; //获取当前日期的年份
    var month = arr[1]; //获取当前日期的月份
    var day = arr[2]; //获取当前日期的日
    var days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中的月的天数
    var year2 = year;
    var month2 = parseInt(month) + 1;
    if (month2 == 13) {
        year2 = parseInt(year2) + 1;
        month2 = 1;
    }
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = "0" + month2;
    }

    var t2 = year2 + "/" + month2 + "/" + day2;
    return t2;
}

5.时间倒计时

function ShowLeftTime(year, month, date) {
    //得出剩余时间
    var now = new Date();
    var endDate = new Date(year, month - 1, date);
    var leftTime = endDate.getTime() - now.getTime();
    var leftsecond = parseInt(leftTime / 1000);
    var day = Math.floor(leftsecond / (60 * 60 * 24));
    var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
    var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
    var second = Math.floor(leftsecond - day * 60 * 60 * 24 - hour * 60 * 60 - minute * 60);
    //显示剩余时间
    document.getElementById("demo").innerHTML =
        "距离" +
        year +
        "年" +
        month +
        "月" +
        date +
        "日" +
        "还有" +
        day +
        "天" +
        hour +
        "小时" +
        minute +
        "分" +
        second +
        "秒";
}

6.输出今天是星期几

var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
alert(str);

7.js根据字符串中间空格把字符串分割成数组

如果一个字符串中间又很多空格，而且有的空格是按空格键打出来的，有个是按tab键打出来的

比如下面这个字符串

let str = "a b  c    d　　e　　f";

如果直接分割

str.split("");

你会得到如下

["a", " ", "b", " ", " ", "c", " ", " ", " ", "d", "\t", "e", "\t", "f"];

可以看出空格键会被解析成 ‘’ ,而tab键打出的空格会被解析成 ‘\t’

所以应该用正则表达式来进行切割，如下

str.split(/\s+/);

这样就会得到想要的效果了

["a", "b", "c", "d", "e", "f"];

tips: new RegExp(/\s/) 可校验字符串中是否存在空格，用法如下:reg.test(str)

如何判断一个变量是否为数组

arr.constructor === Array; //为true说明是数组类型
arr instanceof Array; //为true则是数组类型
Object.prototype.toString.call(arr) === "[object Array]"; //为true为数组类型
Array.isArray(arr); //为true则为数组类型

正则表达式，清楚字符串前后空格

var str = " hello ";
str = str.replace(/^\s*|\s*$/g, "");
alert(str);

//获取cookie
export function getCookie(name) {
    var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if ((arr = document.cookie.match(reg))) return arr[2];
    else return null;
}

//设置cookie,增加到vue实例方便全局调用
export function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie =
        c_name +
        "=" +
        escape(value) +
        (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
}

//删除cookie
export function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

router-link

1.不带参数
name,path都行, 建议用name
<router-link :to = "{name:'home'}" ></router-link>
<router-link :to="{path:'/home'}"></router-link>

注意：`router-link`中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

2.带参数
2.1 params传参数 (类似post)
<router-link :to="{name:'home', params: {id:1}}">
路由配置 path: "/home/:id" 或者 path: "/home:id"
不配置path ,第一次可请求,刷新页面id会消失
配置path,刷新页面id会保留
html 取参 $route.params.id
script 取参 this.$route.params.id

2.2 query传参数 (类似get，url后面会显示参数)
<router-link :to="{name:'home', query: {id:1}}">
路由可不配置
html 取参 $route.query.id
script 取参 this.$route.query.id

3.this.$router.push() (函数里面调用)
3.1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

3.2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
html 取参 $route.query.id
script 取参 this.$route.query.id

3.3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

取整与取余

取整

// 丢弃小数部分，保留整数部分
parseInt(7 / 2); // 3

// 向上取整，有小数就整数部分加 1
Math.ceil(7 / 2); // 4

// 向下取整，丢弃小数部分
Math.floor(7 / 2); // 3

// 四舍五入
Math.round(7 / 2); // 3

取余

// 取余
7 % 2; // 1

扩展运算符（…）

扩展运算符（spread）是三个点 ...，用于取出参数对象中的所有可遍历属性，浅拷贝到当前对象之中。

常见用法

浅拷贝数组

const a1 = ["test1", "test2"];
const a2 = [...a1]; // ['test1', 'test2']

合并多个可迭代对象（替代 concat）

const arr1 = ["a", "b"];
const arr2 = ["c"];
[...arr1, ...arr2]; // ['a', 'b', 'c']

解构赋值中的剩余参数

const [first, ...rest] = [1, 2, 3, 4, 5];
first; // 1
rest; // [2, 3, 4, 5]

字符串 / 类数组转真正的数组

[..."test"]; // ['t', 'e', 's', 't']
[...document.querySelectorAll("div")]; // [<div>, <div>, <div>]

注意事项（避坑）

浅拷贝 ：只复制第一层，嵌套引用类型仍共用同一份。需要深拷贝时用 JSON.parse(JSON.stringify()) 或现代的 structuredClone()。
只能展开可迭代 / 类数组对象 ：普通对象（未实现 Iterator）不能用数组形式的 ... 展开，否则报错；但对象有自己的”对象展开”语法（ES2018+）用于合并属性：const merged = { ...obj, c: 3 }。
函数传参 ：sum(...nums) 等价于 sum(1, 2, 3)，不用再写 apply。

JSON.stringify() 与 JSON.parse() 妙用

JSON.stringify() 把 JS 对象转成 JSON 字符串，JSON.parse() 反之。注意 JSON.parse 的字符串必须严格符合 JSON 格式（键和字符串值都用双引号），否则报错。

进阶用法：replacer 与 reviver

stringify 的 replacer（第二个参数） ：传数组（白名单）或函数（自定义逻辑），可过滤字段。

const user = { name: "张三", password: "123456", age: 18 };
JSON.stringify(user, ["name", "age"]); // {"name":"张三","age":18}
JSON.stringify(user, (k, v) => (k === "password" ? undefined : v));

第三个参数 space ：格式化输出，调接口调试时让 JSON 可读。

JSON.stringify(user, null, 2);

parse 的 reviver（第二个参数） ：JSON 没有 Date 类型，取出时可还原。

const str = JSON.stringify({ time: new Date() });
JSON.parse(str, (k, v) => (k === "time" ? new Date(v) : v));

经典深拷贝（注意局限） ：JSON.parse(JSON.stringify(obj)) 简单对象好用，但函数、undefined、Symbol、Date、RegExp、循环引用都会丢失或被转换；复杂对象用 structuredClone(obj)。

弈心

https://blog.mingxuan.tech/2019/05/13999.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源弈心 !

常用 Git 命令清单

git操作

2019-06-06 git

git

JQuery中attr和prop的区别

2019-05-10 jquery

js jquery

js常用的一些方法（持续更新中）

js获取自定义data

join()

shift()

定义和用法

返回值

replace()

定义和用法

返回值

说明

split()

定义和用法

语法

返回值

提示和注释

js获取时间相关的方法

1.时间戳转日期

2.获取上个月日期

3.获取上个月月底日期

4.获取下一个月

5.时间倒计时

6.输出今天是星期几

7.js根据字符串中间空格把字符串分割成数组

如何判断一个变量是否为数组

正则表达式，清楚字符串前后空格

cookie

router-link

取整与取余

取整

取余

扩展运算符（…）

常见用法

注意事项（避坑）

JSON.stringify() 与 JSON.parse() 妙用

进阶用法：replacer 与 reviver

你的赏识是我前进的动力