这篇文章主要对我们日常开发过程中使用频率比较高的原生Js方法,进行一次简单的整理归纳,方便再开发使用的时候进行快速查找,比对。为此文章中每一个使用到的方法、函数都会有对应的实例、源代码,做简单的说明,希望对大家有所帮助。
这部分主要对原生JS数组方法进行归纳
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//输出
2
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
arr.includes(searchElement, fromIndex)
//searchElement 必须。需要查找的元素值。
//fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
//如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
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
计算数组元素相加后的总和:
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。
//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
//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
//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
//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
//unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
//注意: 该方法将改变数组的数目。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//输出:
Lemon,Pineapple,Banana,Orange,Apple,Mango
//slice() 方法可从已有的数组中返回选定的元素。
//slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
//注意: slice() 方法不会改变原始数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//输出:
Orange,Lemon
//forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
//注意: forEach() 不会改变原数组
//注意: forEach() 对于空数组是不会执行回调函数的。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
if (item === 3) {
return;
}
console.log(item);
});
这部分主要对原生JS字符串方法进行归纳
//includes() 方法用于判断字符串是否包含指定的子字符串。
//如果找到匹配的字符串则返回 true,否则返回 false。
//注意: includes() 方法区分大小写。
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");
//输出结果
true
var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
//输出结果:
Hello world!
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//输出结果:
13
//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
//如果想了解更多正则表达式教程请查看本站的:RegExp 教程 和 our RegExp 对象参考手册.
//该方法不会改变原始字符串。
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
// 输出结果:
Visit Runoob!Visit Microsoft!
在这里插入代码片
//split() 方法用于把一个字符串分割成字符串数组。
//提示: 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
//注意: split() 方法不改变原始字符串。
var str="How are you doing today?";
var n=str.split(" ");
//输出一个数组的值:
How,are,you,doing,today?
var str="Hello world!";
var n=str.substr(2,3)
// 输出结果:
llo
//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
//substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
var str = " Runoob ";
alert(str.trim());
//输出结果:
Runoob
var str = "Runoob";
var res = str.toString();
//输出结果:
Runoob
这部分主要对原生Number对象常用的一些方法进行整理
var num = 15;
var n = num.toString();
// 输出结果:
15
//返回一个 Number 对象的基本数字值:
var num = 15;
var n = num.valueOf();
//输出结果:
15
//把数字转换为字符串,结果的小数点后有指定位数的数字:
var num = 5.56789;
var n=num.toFixed(2);
//输出结果:
5.57
这部分主要对原生JS Math对象常用的方法进行整理
//返回介于 0(包含) ~ 1(不包含) 之间的一个随机数:
Math.random();
//输出结果:
0.13704677732303505
//round() 方法可把一个数字舍入为最接近的整数:
Math.round(2.5);
//输出结果:
3
//返回小于等于x的最大整数:
Math.floor(1.6);
//以上实例将输出:
1
//对一个数进行上舍入:
Math.ceil(1.4)
//输出结果:
2
这部分主要对原生Date对象的方法进行整理
var d = new Date();
var n = d.getDate();
//输出结果:
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
var d = new Date();
var n = d.getFullYear();
//输出结果:
2021
var d = new Date();
var n = d.getHours();
// 输出结果:
11
var d = new Date();
var n = d.getMinutes();
//输出结果:
27
var d = new Date();
var n = d.getMonth()+1;
// 输出结果:
4
var d = new Date();
var n = d.getSeconds();
//输出结果:
39
var d = new Date();
d.setDate(15);
//输出结果:
Thu Apr 15 2021 11:27:56 GMT+0800 (中国标准时间)
var d = new Date();
d.setFullYear(2020);
//输出结果:
Mon Apr 06 2020 11:28:14 GMT+0800 (中国标准时间
var d = new Date();
d.setHours(15);
// 输出结果:
Tue Apr 06 2021 15:28:28 GMT+0800 (中国标准时间)
var d = new Date();
d.setMinutes(17);
//输出结果:
Tue Apr 06 2021 11:17:21 GMT+0800 (中国标准时间)
var d = new Date();
d.setMonth(4);
//输出结果:
Thu May 06 2021 11:28:44 GMT+0800 (中国标准时间)
这部分主要对常用原生RegExp字符串方法进行整理
var str="Hello world!";
//查找"Hello"
var patt=/Hello/g;
var result=patt.exec(str);
//输出
Hello
var str="Hello world!";
//查找"Hello"
var patt=/Hello/g;
var result=patt.test(str);
//输出
true
var patt = new RegExp("RUNOOB", "g");
var res = patt.toString();
//输出
/RUNOOB/g
这部分主要对常用的全局属性进行整理
//Infinity 属性用于存放表示正无穷大的数值。
//负无穷大是表示负无穷大一个数字值。
//在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小。
//NaN 即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。
//NaN 属性 与 Number.Nan 属性相同。
//使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。
这部分主要对常用的全局方法进行整理
decodeURI()
解码某个编码的 URI。
encodeURI()
把字符串编码为 URI。
escape()
对字符串进行编码。
parseFloat()
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
parseInt()
parseInt() 函数可解析一个字符串,并返回一个整数
String()
把对象的值转换为字符串。
unescape()
对由 escape() 编码的字符串进行解码。
以上就是这篇文章的主要内容、看完感觉对自己有帮助的同学、可以给博主点个关注、如果那一块有不同的意见大家可以再评论区互相讨论学习。
本文转载自微信公众号「 jinjunzhu」,作者 jinjunzhu 。转载本文请联系 jinjunz...
我们通常衡量一个Web系统的吞吐率的指标是QPS(Query Per Second,每秒处理请求...
H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认...
先看代码 复制代码 代码如下: div style="position:relative; width:[flash的宽]...
XML/HTML Code 复制内容到剪贴板 input id = username name = username type = t...
详解 Spring注解的(ListMap)特殊注入功能 最近接手一个新项目,已经没有原开发...
CentOS版本:7.6.1810 3台 JDK版本:1.8.0_191 Zookeeper版本:3.4.10 安装包 链接h...
1,父传子 子组件中定义 props 字段,类型为数组(如果需要限制字段值类型,也可...
0x01 Mysql Mysql划分:权限 root 普通用户 版本 mysql5.0 mysql5.0 1.1 root权...
OBJECT ID="agobjOraSession" RUNAT="Server" PROGID="OracleInProcServer.XOraS...