AI智能
改变未来

Javascript常用函数、方法速查手册(建议收藏)

文章目录

  • 前言
  • 一、Array对象
  • 二、String对象
  • 三、Number 对象
  • 四、Math对象
  • 五、Date 对象
  • 六、RegExp对象
  • 七、全局属性
  • 八、全局方法
  • 总结

前言

这篇文章主要对我们日常开发过程中使用频率比较高的原生Js方法,进行一次简单的整理归纳,方便再开发使用的时候进行快速查找,比对。为此文章中每一个使用到的方法、函数都会有对应的实例、源代码,做简单的说明,希望对大家有所帮助。

一、Array对象

这部分主要对原生JS数组方法进行归纳

  1. indexOf()
    搜索数组中的元素,并返回它所在的位置。
var fruits = ["Banana", "Orange", "Apple", "Mango"];var a = fruits.indexOf("Apple");//输出2
  1. includes()
    判断一个数组是否包含一个指定的值。
let site = ['runoob', 'google', 'taobao'];site.includes('runoob');// truesite.includes('baidu');// falsearr.includes(searchElement, fromIndex)//searchElement 必须。需要查找的元素值。//fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。//如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。var arr = ['a', 'b', 'c'];arr.includes('a', -100); // truearr.includes('b', -100); // truearr.includes('c', -100); // true
  1. concat()
    连接两个或更多的数组,并返回结果。
var hege = ["Cecilie", "Lone"];var stale = ["Emil", "Tobias", "Linus"];var kai = ["Robin"];var children = hege.concat(stale,kai);//children 输出结果:Cecilie,Lone,Emil,Tobias,Linus,Robin
  1. reduce()
    将数组元素计算为一个值(从左到右)。
计算数组元素相加后的总和:var numbers = [65, 44, 12, 4];function getSum(total, num) {return total + num;}function myFunction(item) {document.getElementById("demo").innerHTML = numbers.reduce(getSum);}//输出结果:125//reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。//reduce() 可以作为一个高阶函数,用于函数的 compose。
  1. some()
    检测数组元素中是否有元素符合指定条件。
//some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。//some() 方法会依次执行数组的每个元素://如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。//如果没有满足条件的元素,则返回false。//注意: some() 不会对空数组进行检测。//注意: some() 不会改变原始数组。var ages = [3, 10, 18, 20];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.some(checkAdult);}//输出结果为:true
  1. find()
    返回符合传入测试(函数)条件的数组元素。
//find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。//find() 方法为数组中的每个元素都调用一次函数执行://当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。//如果没有符合条件的元素返回 undefined//注意: find() 对于空数组,函数是不会执行的。//注意: find() 并没有改变数组的原始值。var ages = [3, 10, 18, 20];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.find(checkAdult);}//输出结果:18
  1. filter()
    检测数值元素,并返回符合条件所有元素的数组。
//filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。//注意: filter() 不会对空数组进行检测。//注意: filter() 不会改变原始数组。var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.filter(checkAdult);}//输出结果为:32,33,40
  1. every()
    检测数值元素的每个元素是否都符合条件。
//every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。//every() 方法使用指定函数检测数组中的所有元素://如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。//如果所有元素都满足条件,则返回 true。//注意: every() 不会对空数组进行检测。//注意: every() 不会改变原始数组。var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.every(checkAdult);}//输出结果为:false
  1. unshift()
    向数组的开头添加一个或更多元素,并返回新的长度。
//unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。//注意: 该方法将改变数组的数目。var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon","Pineapple");//输出:Lemon,Pineapple,Banana,Orange,Apple,Mango
  1. slice()
    选取数组的一部分,并返回一个新数组。
//slice() 方法可从已有的数组中返回选定的元素。//slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。//注意: slice() 方法不会改变原始数组。var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1,3);//输出:Orange,Lemon
  1. forEach()
    数组每个元素都执行一次回调函数。
//forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。//注意: forEach() 不会改变原数组//注意: forEach() 对于空数组是不会执行回调函数的。var arr = [1, 2, 3, 4, 5];arr.forEach(function (item) {if (item === 3) {return;}console.log(item);});
  1. isArray()
    判断对象是否为数组,isArray() 方法用于判断一个对象是否为数组。
    如果对象是数组返回 true,否则返回 false。

二、String对象

这部分主要对原生JS字符串方法进行归纳

  1. includes()
    查找字符串中是否包含指定的子字符串。
//includes() 方法用于判断字符串是否包含指定的子字符串。//如果找到匹配的字符串则返回 true,否则返回 false。//注意: includes() 方法区分大小写。var str = "Hello world, welcome to the Runoob。";var n = str.includes("world");//输出结果true
  1. concat()
    连接两个或更多字符串,并返回新的字符串。
var str1 = "Hello ";var str2 = "world!";var n = str1.concat(str2);//输出结果:Hello world!
  1. indexOf()
    返回某个指定的字符串值在字符串中首次出现的位置。
var str="Hello world, welcome to the universe.";var n=str.indexOf("welcome");//输出结果:13
  1. replace()
    在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。
//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。//如果想了解更多正则表达式教程请查看本站的:RegExp 教程 和 our RegExp 对象参考手册.//该方法不会改变原始字符串。var str="Visit Microsoft! Visit Microsoft!";var n=str.replace("Microsoft","Runoob");// 输出结果:Visit Runoob!Visit Microsoft!
  1. slice()
    提取字符串的片断,并在新的字符串中返回被提取的部分。
在这里插入代码片
  1. split()
    把字符串分割为字符串数组。
//split() 方法用于把一个字符串分割成字符串数组。//提示: 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。//注意: split() 方法不改变原始字符串。var str="How are you doing today?";var n=str.split(" ");//输出一个数组的值:How,are,you,doing,today?
  1. substr()
    从起始索引号提取字符串中指定数目的字符。
var str="Hello world!";var n=str.substr(2,3)// 输出结果:llo
  1. substring()
    提取字符串中两个指定的索引号之间的字符。
//substring() 方法用于提取字符串中介于两个指定下标之间的字符。//substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
  1. trim()
    去除字符串两边的空白
var str = "       Runoob        ";alert(str.trim());//输出结果:Runoob
  1. toString()
    返回一个字符串。
var str = "Runoob";var res = str.toString();//输出结果:Runoob

三、Number 对象

这部分主要对原生Number对象常用的一些方法进行整理

  1. toString()
    把数字转换为字符串,使用指定的基数。
var num = 15;var n = num.toString();// 输出结果:15
  1. valueOf()
    返回一个 Number 对象的基本数字值。
//返回一个 Number 对象的基本数字值:var num = 15;var n = num.valueOf();//输出结果:15
  1. toFixed()
    把数字转换为字符串,结果的小数点后有指定位数的数字。
//把数字转换为字符串,结果的小数点后有指定位数的数字:var num = 5.56789;var n=num.toFixed(2);//输出结果:5.57

四、Math对象

这部分主要对原生JS Math对象常用的方法进行整理

  1. random()
    返回 0 ~ 1 之间的随机数。
//返回介于 0(包含) ~ 1(不包含) 之间的一个随机数:Math.random();//输出结果:0.13704677732303505
  1. round(x)
    四舍五入。
//round() 方法可把一个数字舍入为最接近的整数:Math.round(2.5);//输出结果:3
  1. floor(x)
    对 x 进行下舍入。
//返回小于等于x的最大整数:Math.floor(1.6);//以上实例将输出:1
  1. ceil(x)
    对数进行上舍入。
//对一个数进行上舍入:Math.ceil(1.4)//输出结果:2

五、Date 对象

这部分主要对原生Date对象的方法进行整理

  1. getDate()
    从 Date 对象返回一个月中的某一天 (1 ~ 31)。
var d = new Date();var n = d.getDate();//输出结果:6
  1. getDay()
    从 Date 对象返回一周中的某一天 (0 ~ 6)。
//返回周几的名称var d=new Date();var weekday=new Array(7);weekday[0]="Sunday";weekday[1]="Monday";weekday[2]="Tuesday";weekday[3]="Wednesday";weekday[4]="Thursday";weekday[5]="Friday";weekday[6]="Saturday";var n = weekday[d.getDay()];//输出:Tuesday
  1. getFullYear()
    从 Date 对象以四位数字返回年份。
var d = new Date();var n = d.getFullYear();//输出结果:2021
  1. getHours()
    返回 Date 对象的小时 (0 ~ 23)。
var d = new Date();var n = d.getHours();// 输出结果:11
  1. getMinutes()
    返回 Date 对象的分钟 (0 ~ 59)。
var d = new Date();var n = d.getMinutes();//输出结果:27
  1. getMonth()
    从 Date 对象返回月份 (0 ~ 11)。
var d = new Date();var n = d.getMonth()+1;// 输出结果:4
  1. getSeconds()
    返回 Date 对象的秒数 (0 ~ 59)。
var d = new Date();var n = d.getSeconds();//输出结果:39
  1. setDate()
    设置 Date 对象中月的某一天 (1 ~ 31)。
var d = new Date();d.setDate(15);//输出结果:Thu Apr 15 2021 11:27:56 GMT+0800 (中国标准时间)
  1. setFullYear()
    设置 Date 对象中的年份(四位数字)。
var d = new Date();d.setFullYear(2020);//输出结果:Mon Apr 06 2020 11:28:14 GMT+0800 (中国标准时间
  1. setHours()
    设置 Date 对象中的小时 (0 ~ 23)。
var d = new Date();d.setHours(15);// 输出结果:Tue Apr 06 2021 15:28:28 GMT+0800 (中国标准时间)
  1. setMinutes()
    设置 Date 对象中的分钟 (0 ~ 59)。
var d = new Date();d.setMinutes(17);//输出结果:Tue Apr 06 2021 11:17:21 GMT+0800 (中国标准时间)
  1. setMonth()
    设置 Date 对象中月份 (0 ~ 11)。
var d = new Date();d.setMonth(4);//输出结果:Thu May 06 2021 11:28:44 GMT+0800 (中国标准时间)

六、RegExp对象

这部分主要对常用原生RegExp字符串方法进行整理

  1. exec()
    检索字符串中指定的值。返回找到的值,并确定其位置。
var str="Hello world!";//查找"Hello"var patt=/Hello/g;var result=patt.exec(str);//输出Hello
  1. test()
    检索字符串中指定的值。返回 true 或 false。
var str="Hello world!";//查找"Hello"var patt=/Hello/g;var result=patt.test(str);//输出true
  1. toString()
    返回正则表达式的字符串。
var patt = new RegExp("RUNOOB", "g");var res = patt.toString();//输出/RUNOOB/g

七、全局属性

这部分主要对常用的全局属性进行整理

  1. Infinity()
    代表正的无穷大的数值。
//Infinity 属性用于存放表示正无穷大的数值。//负无穷大是表示负无穷大一个数字值。//在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小。
  1. NaN()
    指示某个值是不是数字值。
//NaN 即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。//NaN 属性 与 Number.Nan 属性相同。//使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。
  1. undefined()
    指示未定义的值。

八、全局方法

这部分主要对常用的全局方法进行整理

  1. decodeURI()
    解码某个编码的 URI。

  2. encodeURI()
    把字符串编码为 URI。

  3. escape()
    对字符串进行编码。

  4. parseFloat()
    parseFloat() 函数可解析一个字符串,并返回一个浮点数。
    该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

  5. parseInt()
    parseInt() 函数可解析一个字符串,并返回一个整数

  6. String()
    把对象的值转换为字符串。

  7. unescape()
    对由 escape() 编码的字符串进行解码。

总结

以上就是这篇文章的主要内容、看完感觉对自己有帮助的同学、可以给博主点个关注、如果那一块有不同的意见大家可以再评论区互相讨论学习。

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » Javascript常用函数、方法速查手册(建议收藏)