40 методов JavaScript, которые вы должны знать

От /

JavaScript — язык программирования, используемый для создания веб-страниц и мобильных приложений. Если вы уже некоторое время изучаете JS, и он все равно вас пугает, возможно, вы просто еще не изучили все нужные методы.

Эта статья пригодится разработчику с любым уровнем знаний и навыков. Если вы ищете справку по конкретному методу — просто перейдите к нужному разделу и пропустите остальные.

Массивы

Вероятно, вы знаете, что переменная в каждый отдельный момент времени может хранить только одно значение.

Например, var student = "jack". С этой переменной все в порядке, мы можем использовать ее при создании проекта, причем многократно.

Но порой нам нужно сохранить много значений в одной переменной. Например, список имен студентов. Вот здесь нам приходит на помощь концепция массивов.

Массив — это одна переменная, хранящая список значений, где каждый элемент определяется отдельным индексом.

Методы массивов в JavaScript:

pop()

Метод pop() удаляет последний элемент массива.

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

shift()

Метод shift() удаляет первый элемент массива.

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)
Output:
[ '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)

Output:
[ '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);
Output:
[ '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);
Output:
[ '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)
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

slice()

  • Этот метод вырезает часть массива, начиная с указанного индекса.
  • Метод 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()

Метод 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.

toLowerCase()

А toLowercase, наоборот, переводит строку в нижний регистр.

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.

slice()

Этот метод возвращает вырезанную часть строки. Метод принимает один или два аргумента, которыми обозначаются начало и конец среза. Аргументы могут быть и отрицательными числами.

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

substring()

Этот метод тоже возвращает вырезанную часть строки, но он не принимает отрицательных чисел в качестве аргументов.

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

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);
Output:
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);
Output:
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)
Output:
JavaScript

trim()

При помощи метода trim() можно удалить пробелы в начале и конце строки.

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

split()

Метод split() позволяет преобразовать строку в массив.

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

charCodeAt

Метод charCodeAt возвращает значение Юникод символа строки под указанным индексом.

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

padStart

Этот метод используется для добавления символов в начале строки, чтобы результирующая строка достигла указанной длины. По умолчанию в начале строки добавляются пробелы, но может добавляться и другая строка, указанная во втором аргументе.

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

padEnd

padEnd аналогичен padStart, только добавляет символы в конце строки.

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

length

Этот метод используется для получения длины строки.

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

Объекты

В JavaScript объект — это тип данных. Он используется для хранения различных коллекций с ключами и их значениями.

keys()

Этот метод возвращает ключи объекта.

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

};

console.log(Object.keys(object1));
Output:
[ 'name', 'age' ]

values()

Метод values() возвращает значения объекта.

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

};

console.log(Object.values(object1));
Output:
[ 'John', 20 ]

create()

С помощью этого метода можно создать новый объект из существующего.

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

freeze()

Метод Object.freeze() замораживает объект. То есть он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости. 

const person = {
  name: "John",

};


Object.freeze(person);

person.name = "Robert";


console.log(person.name);
Output:
John

assign()

Этот метод используется для копирования свойств объекта в другой объект.

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 используется для хранения целых чисел и чисел с плавающей точкой.

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))
Output:
10
9.66
9.6560
9.656000
string

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))
Output:
9.7
9.656
9.65600
string

parseFloat()

Этот метод принимает строку в качестве аргумента и возвращает число с плавающей точкой.

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

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()

Этот метод принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления.

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 было представлено много новых полезных методов.

map()

Этот метод принимает массив и применяет указанную функцию к каждому из элементов массива. Возвращается новый массив.

var arr=[2.1,3.5,4.7]; 

var result= arr.map((num) => 2*num );  
console.log(result)
Output:
[ 4.2, 7, 9.4 ]

every()

Этот метод используется для проверки того, удовлетворяют ли элементы указанного массива определенному условию. Если все элементы удовлетворяют условию, метод возвращает true, в противном случае — false.

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


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

console.log(ages.every(checkAge))
Output:
false

includes()

При помощи метода includes() можно проверить, есть ли определенный элемент в массиве. Если указанный элемент в массиве присутствует, возвращается true.

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

console.log(ages.includes(33))
Output:
true

for…of iterator

Этот оператор выполняет цикл обхода итерируемых объектов.

const ages = [33, 32, 16];

for (const element of ages) {
  console.log(element + "b");
}
Output:
33b
32b
16b

Spread

Spread-оператор принимает массив и расширяет его на отдельные элементы. На применение этого оператора указывает троеточие.

const ages = [33, 32, 16];

console.log(...ages)
Output:
33 32 16

filter()

Этот метод создает новый массив из всех элементов, соответствующих заданному условию.

const ages = [33, 32, 16];

console.log(ages.filter((age)=> age>20))
Output:
[ 33, 32 ]

reduce()

Метод reduce() сводит массив к одному значению.

const ages = [33, 32, 16];

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


console.log(ages.reduce(reducer))
Output:
81

Мы рассмотрели много интересных и полезных методов JavaScript. Постепенно вы их выучите, а если что-то забудете, всегда сможете вернуться к нашей статье.

Перевод статьи «Top 40 JavaScript Methods You Must Know!!».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Похожие записи

1 комментарий к “40 методов JavaScript, которые вы должны знать”

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх