前言

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

一、Array对象

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

1. indexOf()
   搜索数组中的元素，并返回它所在的位置。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//输出
2

2.includes()
判断一个数组是否包含一个指定的值。

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

3.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

4.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。

5.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

6.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

7.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

8.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

9.unshift()
向数组的开头添加一个或更多元素，并返回新的长度。

//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
//注意： 该方法将改变数组的数目。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango

10.slice()
选取数组的一部分，并返回一个新数组。

//slice() 方法可从已有的数组中返回选定的元素。
//slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
//注意： slice() 方法不会改变原始数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//输出:
Orange,Lemon

11.forEach()
数组每个元素都执行一次回调函数。

//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
//注意: forEach() 不会改变原数组
//注意: forEach() 对于空数组是不会执行回调函数的。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});

12.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

2.concat()
连接两个或更多字符串，并返回新的字符串。

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
//输出结果:
Hello world!

3.indexOf()
返回某个指定的字符串值在字符串中首次出现的位置。

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//输出结果:
13

4.replace()
在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。

//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
//如果想了解更多正则表达式教程请查看本站的：RegExp 教程 和 our RegExp 对象参考手册.
//该方法不会改变原始字符串。
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
// 输出结果:
Visit Runoob!Visit Microsoft!

5.slice()
提取字符串的片断，并在新的字符串中返回被提取的部分。

在这里插入代码片

6.split()
把字符串分割为字符串数组。

//split() 方法用于把一个字符串分割成字符串数组。
//提示： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
//注意： split() 方法不改变原始字符串。
var str="How are you doing today?";
var n=str.split(" ");
//输出一个数组的值:

How,are,you,doing,today?

7.substr()
从起始索引号提取字符串中指定数目的字符。

var str="Hello world!";
var n=str.substr(2,3)
// 输出结果:
llo

8.substring()
提取字符串中两个指定的索引号之间的字符。

//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
//substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

9.trim()
去除字符串两边的空白

var str = "       Runoob        ";
alert(str.trim());
//输出结果:
Runoob

10.toString()
返回一个字符串。

var str = "Runoob";
var res = str.toString();
//输出结果:
Runoob

这里有我自己整理了一套最新的python系统学习教程，包括从基础的python脚本到web开发、爬虫、数据分析、数据可视化、机器学习等。想要这些资料的可以关注小编，并在后台私信小编：“01”即可领取。