原始地址：https://dev.to/zahab/top-40-javascript-methods-you-must-know-fj5
JavaScript是一种用于创建网页和移动应用程序的编程语言。如果你已经学习了很长时间的JavaScript，但它对你来说仍然很可怕，可能是因为你还没有学会这些方法。这篇文章适用于任何水平的JavaScript开发人员。如果你正在寻找特定的方法，请随意跳过其他部分。如果你熟悉JavaScript，我建议你阅读ES6现代JavaScript来深入了解JS。如果你已经熟悉上述主题的定义，请随意探索它们的方法。
Array
你可能知道一个变量一次只能存储一个值，例如var student = "jack"，这在构建项目时非常常用，但有时需要在单个变量中收集多个值，比如学生姓名的列表，这时我们可以使用数组的概念。
数组是一个单一的变量，它存储一个值的列表，每个元素由一个单一的索引指定。
数组方法：
pop()
pop()方法用于删除数组的最后一个元素。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
students.pop();
console.log(students)
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]
shift()
shift()方法用于删除数组的第一个元素。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
students.shift();
console.log(students)
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]
push()
push()方法用于在数组的末尾添加一个或多个元素。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
students.push('Zahab', 'Kakar');
console.log(students)
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]
unshift()
unshift()方法用于在数组的开头添加一个或多个元素。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
students.unshift('Zahab', 'Kakar');
console.log(students);
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]
length
length方法返回数组中的元素个数。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
var length = students.length;
console.log(length)
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
4
splice()
splice()方法用于向数组中添加新的元素。
var students = [ 'Jack', 'James', 'Robert', 'John'];
console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
console.log(students);
输出：
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]
正如我们之前所说，这个方法用于向数组中添加元素，但是我们必须指出新元素应该添加到哪里。在上面的例子中，2表示新元素应该放置的索引号，1表示应该删除的元素数量，正如我们之前提到的，应该删除1个元素，所以在第二个数组中没有’Robert’。
concat()
concat()方法用于通过连接或合并现有数组来创建一个新数组。
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)
输出：
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]
slice()
slice()方法从指定的数组元素起始位置开始，将数组的一部分切割出来。slice可以有两个参数，第一个参数指定起始位置，第二个参数指定结束位置（不包括）。该方法也接受负数作为参数。
var students = [ 'Jack', 'James', 'Rober', 'John'];
console.log(students);
var newStudent = students.slice(3);
console.log(newStudent);
输出：
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]
var students = [ 'Jack', 'James', 'Rober', 'John'];
console.log(students);
var newStudent = students.slice(1,3);
console.log(newStudent);
输出：
[ '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' ]
String
JavaScript字符串存储一系列字符，字符串可以是双引号或单引号内的任何文本。
toUpperCase()
toUpperCase()方法用于将字符串转换为大写。
var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
var newStr = str.toUpperCase()
console.log(newStr)
输出：
LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY.
toLowerCase()
toLowerCase()方法用于将字符串转换为小写。
var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. "
var newStr = str.toLowerCase()
console.log(newStr)
输出：
lorem ipsum is simply dummy text of the printing and typesetting industry.
slice()
slice()方法用于返回字符串的切片部分，它接受一个或两个参数，表示切片的起始和结束位置。参数也可以是负数。
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.slice(-8, -1)
console.log(newStr);
输出：
industr
substring()
substring()方法用于返回字符串的切片部分，但它不接受负数作为参数。
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substring(1, 6)
console.log(newStr);
输出：
orem
substr()
substr()方法类似于slice，但第二个参数表示要提取的部分的长度。
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substr(8, 13)
console.log(newStr);
输出：
sum is simply
replace()
replace()方法用另一个字符串替换字符串的一部分。
这个方法是区分大小写的。
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.replace("is", "are")
console.log(newStr);
输出：
lorem ipsum are simply dummy text of the printing and typesetting industry
concat()
concat()方法用于连接两个或多个字符串。
var str1 = "Java";
var str2 = "Script";
var str = str1.concat(str2);
console.log(str)
输出：
JavaScript
trim()
trim()方法用于删除字符串两端的空格。
var str1 = " JavaScript ";
str2 = str1.trim();
console.log(str2);
输出：
JavaScript
split()
split()方法用于将字符串转换为数组。
var str = "JavaScript, is, nice"
var newStr = str.split(",")
console.log(newStr[0]);
输出：
JavaScript
charCodeAt()
charCodeAt()方法返回字符串中指定索引处字符的Unicode值。
var str = "JavaScript is nice"
var newStr = str.charCodeAt(str[1])
console.log(newStr);
输出：
74
charAt()
charAt()方法返回字符串中指定索引位置的字符。
var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);
输出：
a
padStart()
padStart()方法用于在字符串开头添加填充。
var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);
输出：
3315
padEnd()
padEnd()方法用于在字符串末尾添加填充。
var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);
输出：
1533
length
length方法用于返回字符串的长度。
var str = "JavaScript is nice."
var newStr = str.length
console.log(newStr);
输出：
19
Objects
对象是JavaScript的数据类型之一。它用于存储不同的键值对集合，每个键都可以有一个值。
keys()
keys()方法返回对象的键。
const object1 = {
name: 'John',
age: 20,
};
console.log(Object.keys(object1));
输出：
[ 'name', 'age' ]
values()
values()方法返回对象的值。
const object1 = {
name: 'John',
age: 20,
};
console.log(Object.values(object1));
输出：
[ 'John', 20 ]
create()
create()方法用于从现有对象创建一个新对象。
const person = {
name: "John",
introduction: function() {
console.log(`My name is ${this.name}`);
}
};
const me = Object.create(person);
me.name = 'Robert';
me.introduction();
输出：
My name is Robert
freeze()
freeze()方法用于冻结一个对象。冻结一个对象后，将无法添加新属性或删除现有属性。
const person = {
name: "John",
};
Object.freeze(person);
person.name = "Robert";
console.log(person.name);
输出：
John
assign()
assign()方法用于将一个对象的属性复制到另一个对象。
const person = {
name: "John",
age : 20
};
const obj = {
ishuman : true
}
Object.assign(person, obj);
console.log(person);
输出：
{ name: 'John', age: 20, ishuman: true }
Numbers
数字是JavaScript的数值数据类型，可以存储普通整数和浮点数。
toFixed()
toFixed()方法将一个数字写成指定小数位数的字符串形式返回。
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))
输出：
10
9.66
9.6560
9.656000
string
toPrecision()
toPrecision()方法将一个数字转换为指定精度并返回字符串形式。
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))
输出：
9.7
9.656
9.65600
string
parseFloat()
parseFloat()方法将函数参数首先转换为字符串，然后返回一个浮点数。
function addition(r) {
return parseFloat(r) * 2.0;
}
console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
输出：
4
4
6.6
Number()
Number()方法用于将其他数据类型的值转换为数字。
var x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))
输出：
1
0
999
parseInt()
parseInt()方法将函数参数首先转换为字符串，然后返回一个整数。
function addition(r) {
return parseInt(r) * 2.0;
}
console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
输出：
4
4
6
ES6
ES6引入了许多重要的JavaScript方法，本文将讨论其中的一些方法。
如果你还不了解ES6，我建议你阅读这篇文章，因为在下面的段落中，我们使用了一些看起来很困难的主题，然而，它们包括其定义和示例。
map()
map()方法接收一个数组，并对数组的每个元素执行特定的函数，并返回一个新的数组。
var arr=[2.1,3.5,4.7];
var result= arr.map((num) => 2*num );
console.log(result)
输出：
[ 4.2, 7, 9.4 ]
every()
every()方法用于检查给定数组中的元素是否满足特定的条件。如果所有数组元素都满足条件，则返回true，否则返回false。
const ages = [32, 33, 16, 40];
function checkAge(age) {
return age > 18;
}
console.log(ages.every(checkAge))
输出：
false
includes()
includes()方法用于检查一个特定的元素是否存在于数组中。如果数组包含该元素，则返回true。
const ages = [32, 33, 16, 40];
console.log(ages.includes(33))
输出：
true
for...of iterator
for…of循环遍历对象和数组。
const ages = [33, 32, 16];
for (const element of ages) {
console.log(element + "b");
}
输出：
33b
32b
16b
Spread operator
spread运算符用于将数组展开为单独的元素。…表示spread运算符。
const ages = [33, 32, 16];
console.log(...ages)
输出：
33 32 16
filter()
filter()方法根据提供的条件创建一个新数组，该数组包含所有符合条件的元素。
const ages = [33, 32, 16];
console.log(ages.filter((age)=> age>20))
输出：
[ 33, 32 ]
reduce()
reduce()方法用于将数组减少为一个值。
const ages = [33, 32, 16];
const reducer = (first, second) => first + second;
console.log(ages.reduce(reducer))
输出：
81
以上是全部内容。感谢阅读，希望你觉得这篇文章有用。
欢迎在以下链接与我联系：
‘’’
1725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
