您必须知道的 40 种 JavaScript 方法！！

JavaScript 是一种用于创建网页和移动应用程序的编程语言。如果您学习 JavaScript 很久了，但仍然觉得它令人望而生畏，那么您可能还没有学习这些方法。本文面向所有 JavaScript 开发人员，无论水平如何。如果您正在寻找某种特定方法，请随意跳过其他方法。如果您熟悉 JavaScript，我建议您阅读《ES6：现代 JavaScript》，以深入了解 JS。

大批
细绳
对象
数字
ES6

如果您已经熟悉上述主题的定义，请随意探索它们的方法。

大批

你可能知道一个变量一次只能存储一个值，例如
var student = "jack"，这完全没问题，我们在构建项目时可能会多次使用它。然而，有时需要在单个变量中收集多个值，例如学生姓名列表，这时我们就可以使用数组的概念了。
数组是一个存储值列表的单个变量，每个元素都由一个索引指定。

数组方法：

流行音乐（）

pop() 方法删除数组的最后一个元素。

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

转移（）

shift() 方法从数组中删除第一个元素。


 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

推（）

push() 方法将一个或多个元素添加到数组的末尾。

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.push('Zahab', 'Kakar');
   console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

取消移位（）

unshift 方法将一个或多个元素添加到数组的开头。

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]

长度

长度返回数组中元素的数量。

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)

[ 'Jack', 'James', 'Robert', 'John' ]
4

拼接（）

splice() 方法用于向数组添加新元素。

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

如前所述，此方法用于向数组中添加元素，但是，我们必须指出新元素的添加位置。在上面的示例中，2 表示新元素应放置的索引号，1 表示应删除的元素数量。正如我们之前提到的，应删除 1 个元素，因此第二个数组中没有“Robert”。

连接（）

contact 方法用于通过连接或合并现有数组来创建新数组。


var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);
var myFriends = ['Jennifer','Mary','Patricia']
  console.log(myFriends);

  var allNames =  students.concat(myFriends);  
  console.log(allNames)

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

片（）

此方法从所述数组元素索引开始切出数组的一部分。
Slice 可以有两个参数，分别表示起始和终止（但不包括）参数。
此方法也接受负数。

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(1,3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(-1);  
  console.log(newStudent);

[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

细绳

JavaScript 字符串存储一系列字符，或者说字符串是字符的集合。字符串可以是双引号或单引号内的任何文本。

转大写（）

toUpperCase 方法用于将字符串转换为大写。

var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 var newStr = str.toUpperCase()
 console.log(newStr)

Output: 

LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY.

转小写()

转换为小写用于将字符串转换为小写。

var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. "
 var newStr = str.toLowerCase()
 console.log(newStr)

Output:
lorem ipsum is simply dummy text of the printing and typesetting industry.

片（）

此方法用于返回字符串的切片部分，它接受一个或两个参数，分别表示切片的起始和结束位置。参数也可以为负数。

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.slice(-8, -1)
console.log(newStr);

Output:

industr

子串（）

此方法用于返回字符串的切片部分，但是它不接受负数作为参数。

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substring(1, 6)
console.log(newStr);

Output:

orem

子串（）

该方法与slice类似，但是第二个参数表示要提取部分的长度。


var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substr(8, 13)
console.log(newStr);

Output:

sum is simply

代替（）

replace 方法用于将字符串的一部分替换为另一个字符串。
此方法区分大小写。

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.replace("is", "are")
console.log(newStr);

Output:

lorem ipsum are simply dummy text of the printing and typesetting industry

连接（）

此方法用于连接两个或多个字符串。


var str1 = "Java";
var str2 = "Script";

var str = str1.concat(str2);
console.log(str)

Output:
JavaScript

修剪（）

此方法用于删除字符串两侧的空格。

var str1 = "       JavaScript        ";
str2 = str1.trim();
console.log(str2);

Output:

JavaScript

分裂（）

拆分用于将字符串转换为数组。

var str = "JavaScript, is, nice"
var newStr = str.split(",")
console.log(newStr[0]);

Output:

JavaScript

字符代码

charCodeAt 返回字符串中指定索引处的字符的 unicode。

var str = "JavaScript is nice"
var newStr = str.charCodeAt(str[1])
console.log(newStr);

Output:

74

charAt()

该方法返回字符串中特定索引的字符。

var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);

Output:

a

垫开始

此方法用于在字符串的开头添加填充。

var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);

Output:

3315

padEnd

它在字符串末尾添加填充。


var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);

Output:

1533

长度

此方法用于返回字符串的长度。

var str = "JavaScript is nice."
var newStr = str.length
console.log(newStr);

Output:

19

对象

对象是 JavaScript 的数据类型。它用于存储各种键值集合，每个键可以对应一个值。

键（）

此方法返回对象的键。

const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.keys(object1));

Output:

[ 'name', 'age' ]

值（）

此方法返回对象的值。

const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.values(object1));

Output:

[ 'John', 20 ]

创造（）

此方法用于从现有对象创建新对象。

const person = {
  name: "John",
  introduction: function() {
    console.log(`My name is ${this.name}`);
  }
};

const me = Object.create(person);

me.name = 'Robert'; 

me.introduction();


Output:

My name is Robert

冻结（）

Object.freeze() 方法冻结一个对象。此方法允许更改对象，冻结对象可防止更改，例如，向其添加新属性或从其删除现有属性。

const person = {
  name: "John",

};


Object.freeze(person);

person.name = "Robert";


console.log(person.name);

Output:

John

分配（）

此方法用于将一个对象的属性复制到另一个对象。

const person = {
  name: "John",
  age : 20
};

const obj = {
  ishuman : true
}
Object.assign(person, obj);

console.log(person);

Output:

{ name: 'John', age: 20, ishuman: true }

数字

数字是 Javascript 的数字数据类型，用于存储普通整数、浮点值。

固定（）

此方法写入具有指定小数位数的数字并将其值作为字符串返回。


var x = 9.656;
var newX = x.toFixed(0);
console.log(newX)
var newX = x.toFixed(2); 
console.log(newX)
var newX = x.toFixed(4);  
console.log(newX)
var newX = x.toFixed(6);  
console.log(newX)
console.log(typeof(newX))

Output:
10
9.66
9.6560
9.656000
string

到精度（）

此方法用于将数字转换为指定的精度并将其值作为字符串返回。

var x = 9.656;
var newX = x.toPrecision(2);
console.log(newX)
var newX = x.toPrecision(4);  
console.log(newX)
var newX = x.toPrecision(6);  
console.log(newX)
console.log(typeof(newX))

Output:
9.7
9.656
9.65600
string

解析浮点数（）

该方法首先将函数参数转换为字符串，并返回一个浮点数。


function addition(r) {
  return parseFloat(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))

outPut:
4
4
6.6

数字（）

此方法用于将其他数据类型的值转换为数字。

var x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))


1
0
999

解析Int()

该方法首先将函数参数转换为字符串并返回一个整数。

function addition(r) {
  return parseInt(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))

Output:
4
4
6

ES6

ES6 引入了许多 JavaScript 中的重要方法，我们将在本文中讨论它们。
如果您还不了解 ES6，我建议您阅读这篇文章，因为在下面的段落中，我们使用了一些看似晦涩难懂的主题，但它们都包含了它们的定义和示例。

地图（）

该方法接受一个数组，并对数组的每个元素执行特定的函数，然后返回一个新数组。

var arr=[2.1,3.5,4.7]; 

var result= arr.map((num) => 2*num );  
console.log(result)

Output:

[ 4.2, 7, 9.4 ]

每一个（）

此方法用于检查给定数组中的元素是否满足特定的给定条件。如果所有数组元素都满足条件，则返回 true，否则返回 false。

const ages = [32, 33, 16, 40];


function checkAge(age) {
  return age > 18;
}

console.log(ages.every(checkAge))

Output:

false

包括（）

此方法用于检查数组中是否存在特定元素。如果元素包含在数组中，则返回 true。

const ages = [32, 33, 16, 40];

console.log(ages.includes(33))

Output:

true

for…of 迭代器

for ...of 在对象和数组上创建循环。


const ages = [33, 32, 16];

for (const element of ages) {
  console.log(element + "b");
}


Output:

33b
32b
16b

扩展运算符

扩展运算符用于将数组展开为单个元素。“...” 表示扩展运算符。

const ages = [33, 32, 16];

console.log(...ages)

Output:

33 32 16

筛选（）

此方法创建一个新数组，其中包含所有符合所提供条件的元素。

const ages = [33, 32, 16];

console.log(ages.filter((age)=> age>20))


Output:

[ 33, 32 ]

减少（）

此方法用于将数组简化为一个值。

const ages = [33, 32, 16];

const reducer = (first, second) => first + second;


console.log(ages.reduce(reducer))


Output:

81

就到这里。
感谢阅读，希望本文对您有所帮助。

欢迎随时通过Twitter与我联系:)

文章来源：https://dev.to/zahab/top-40-javascript-methods-you-must-know-fj5