Лучшие примеры JavaScript

Автор оригинала: FreeCodeCamp Community Member.

JavaScript является наиболее широко используемым языком сценариев на Земле. Вот несколько примеров ключевых синтаксических шаблонов в JavaScript.

Пример аргумента

Объект аргументов является Массивный объект (в том, что структура объекта аналогична аналогичному массиву; однако его не следует рассматривать массив, поскольку у него есть все функциональные возможности объекта) Что хранит все аргументы, которые вы передавали в функцию, и является частной функцией в частности.

Если бы вы проходили 3 аргумента к функции, скажите storenames () Эти 3 аргумента будут храниться внутри объекта, называемого Аргументы и это было бы так выглядеть, когда мы передаем аргументы StoreNames («Малдер», «Скалли», «Алекс Крычек») К нашей функции:

Во-первых, мы объявляем функцию и сделаем его возвращать объект аргументов.
Затем, когда мы выполняем эту функцию с и аргументы , 3 в этом случае, это вернет нам объект, и он будет выглядеть как массив. Мы можем преобразовать его в массив, но больше на это позже …

function storeNames() { return arguments; }

// If we execute the following line in the console:
storeNames("Mulder", "Scully", "Alex Kryceck");
// The output will be { '0': 'Mulder', '1': 'Scully', '2': 'Alex Kryceck' }

Относиться к этому как массив

Вы можете вызывать аргументы, используя Аргументы [n] (где n – индекс аргумента в массивом объекте). Но если вы хотите использовать его в качестве массива для итерационного целя или применения методов массива к нему, вам нужно преобразовать его в массив Объявив переменную и используя MARRAY.PROTOTYPES.SLICE.CALL метод (потому что Аргументы не массив):

var args = Array.prototype.slice.call(arguments);

// or the es6 way:
var args = Array.from(arguments)

С ломтик () имеет два (параметр конец необязательно) параметры. Вы можете взять определенную часть аргументов, указав начало и окончание вашей части (используя SLICE PRICE.CALL () метода этих двух параметров необязательно, а не только End ). Проверьте следующий код:

function getGrades() {
    var args = Array.prototype.slice.call(arguments, 1, 3);
    return args;
}

// Let's output this!
console.log(getGrades(90, 100, 75, 40, 89, 95));

// OUTPUT SHOULD BE: //
// [100, 75] <- Why? Because it started from index 1 and stopped at index 3
// so, index 3 (40) wasn't taken into consideration.
//
// If we remove the '3' parameter, leaving just (arguments, 1) we'd get
// every argument from index 1: [100, 75, 40, 89, 95].

Проблемы оптимизации с Array.slice ()

Существует небольшая проблема: не рекомендуется использовать кусочек в аргументах объекта (причины оптимизации) …

Важно : Вы не должны нарезать аргументы, потому что он предотвращает оптимизации в JavaScript Megines (например, V8). Вместо этого попробуйте построить новый массив, итерацией через объект аргументов.

Итак, какой другой метод доступен для преобразования Аргументы на массив? Я рекомендую For-Loop (не в течение петли). Вы можете сделать это так:

var args = []; // Empty array, at first.
for (var i = 0; i < arguments.length; i++) {
    args.push(arguments[i])
} // Now 'args' is an array that holds your arguments.

Для получения дополнительной информации о проблемах оптимизации: Оптимизация убийцы: управление аргументами

Параметр отдыха ES6 как способ обойти объект аргументов

В ES2015/ES6 можно использовать параметр покоя ( ... ) вместо объекта аргументов в большинстве мест. Скажем, у нас есть следующая функция (не ES6):

function getIntoAnArgument() {
    var args = arguments.slice();
    args.forEach(function(arg) {
        console.log(arg);
    });
}

Эта функция может быть заменена в ES6 по:

function getIntoAnArgument(...args) {
    args.forEach(arg => console.log(arg));
}

Обратите внимание, что мы также использовали функцию стрелки для сокращения обратного вызова Foreach!

Объект аргументов недоступен внутри корпуса функции стрелки.

Параметр покоя всегда должен приходить в качестве последнего аргумента в определении вашей функции. Функция GetIntoAnargument (ARG1, ARG2, ARG3, ... ROTEOFARGS/* Нет больше аргументов допускается здесь */) {//Функция Функция}

Арифметический пример операции

JavaScript предоставляет пользователю пять арифметических операторов: + , - , * , / и % Отказ Операторы предназначены для добавления, вычитания, умножения, разделения и остаток соответственно.

Добавление

Синтаксис

A + B.

Применение

2 + 3          // returns 5
true + 2       // interprets true as 1 and returns 3
false + 5      // interprets false as 0 and returns 5
true + "bar"   // concatenates the boolean value and returns "truebar"
5 + "foo"      // concatenates the string and the number and returns "5foo"
"foo" + "bar"  // concatenates the strings and returns "foobar"

Подсказка: Есть удобный увеличение Оператор, который отличный ярлык, когда вы добавляете номера на 1.

Вычитание

Синтаксис

A – B.

Применение

2 - 3      // returns -1
3 - 2      // returns 1
false - 5  // interprets false as 0 and returns -5
true + 3   // interprets true as 1 and returns 4
5 + "foo"  // returns NaN (Not a Number)

Подсказка: Есть удобный уменьшение Оператор, который отличный ярлык, когда вы вычитаете числа на 1.

Умножение

Синтаксис

A * B.

Применение

2 * 3                // returns 6
3 * -2               // returns -6
false * 5            // interprets false as 0 and returns 0
true * 3             // interprets true as 1 and returns 3
5 * "foo"            // returns NaN (Not a Number)
Infinity * 0         // returns NaN
Infinity * Infinity  // returns Infinity

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

Разделение

Синтаксис

A/B.

Применение

3 / 2                // returns 1.5
3.0 / 2/0            // returns 1.5
3 / 0                // returns Infinity
3.0 / 0.0            // returns Infinity
-3 / 0               // returns -Infinity
false / 5            // interprets false as 0 and returns 0
true / 2             // interprets true a 1 and returns 0.5
5 + "foo"            // returns NaN (Not a Number)
Infinity / Infinity  // returns NaN

Остаток

Синтаксис

% B.

Применение

3 % 2          // returns 1
true % 5       // interprets true as 1 and returns 1
false % 4      // interprets false as 0 and returns 0
3 % "bar"      // returns NaN

Приращение

Синтаксис

A ++ или ++ A

Использование

// Postfix 
x = 3; // declare a variable 
y = x++; // y = 4, x = 3 

// Prefix 
var a = 2; 
b = ++a; // a = 3, b = 3

Уменьшение

Синтаксис

или

Использование

// Postfix 
x = 3; // declare a variable 
y = x—; // y = 3, x = 3 

// Prefix 
var a = 2; 
b = —a; // a = 1, b = 1

Важно: .. Как вы можете видеть, вы не может Выполните любые операции на Бесконечность Отказ

Функция стрелки пример

Функции стрелки являются новым синтаксисом ES6 для записи функций JavaScript. Более короткий синтаксис экономит время, а также упрощает объем функции.

Что такое функции стрелков?

Выражение функции стрелки – это более краткий синтаксис для написания функциональных выражений с использованием токена «Стрелка жира» ( => ).

Основной синтаксис

Ниже приведен основной пример функции стрелки:

// ES5 syntax
var multiply = function(x, y) {
  return x * y;
};

// ES6 arrow function
var multiply = (x, y) => { return x * y; };

// Or even simpler
var multiply = (x, y) => x * y;

Вам больше не нужен Функция и Возвращение Ключевые слова или даже курчавые скобки.

Упрощенный это

Перед функциями стрелки новые функции определили свои собственные это значение. Использовать это Внутри традиционного выражения функции мы должны написать обходной путь так:

// ES5 syntax
function Person() {
  // we assign `this` to `self` so we can use it later
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    // `self` refers to the expected object
    self.age++;
  }, 1000);
}

Функция стрелки не определяет свою собственную это ценность, он наследует это из прилагающей функции:

// ES6 syntax
function Person(){
  this.age = 0;

  setInterval(() => {
    // `this` now refers to the Person object, brilliant!
    this.age++;
  }, 1000);
}

var p = new Person();

Операторы назначения

Пример оператора присваивания

Операторы назначения, как следует наименование, назначает (или перенаправлять) значения для переменной. Хотя существует несколько вариаций операторов присваиваний, все они пострадают от базового оператора присваивания.

Синтаксис = y; ОписаниеNecessityXVariaBrequirequied = Присвоение операционного назначения для присвоения Variablerequied

Примеры

let initialVar = 5;   // Variable initialization requires the use of an assignment operator

let newVar = 5;
newVar = 6;   // Variable values can be modified using an assignment operator

Вариации

Другие операторы назначения являются сокращенным для выполнения некоторой операции с использованием переменной (обозначенной X выше) и значением (обозначены Y выше), а затем присвоение результата к самой переменной.

Например, ниже синтаксис для оператора присваивания добавления:

x += y;

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

x = x + y;

Чтобы проиллюстрировать это, используя фактические значения, вот еще один пример использования оператора присвоения сложения:

let myVar = 5;   // value of myVar: 5
myVar += 7;   // value of myVar: 12 = 5 + 7

Полный список операторов заданий JavaScript

	Назначение
x	Присвоение добавления
x	Присвоение вычитания
x	Назначение умножения
x	Отделение назначения
x	Остальное задание
x	Присвоение Exponentiation.
x	Присвоение левого смещения
x	Правильное сдвиговое назначение
x	Недоступное правое переключение
x	Побитовое и назначение
x	Побитовое задание
x	Побитовое или назначение

Булевы Пример

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

В JavaScript часто неявное принуждение типа для логика. Если например, у вас есть если утверждение, которое проверяет определенное выражение, это выражение будет принуждено к логическому вопросу:

var a = 'a string';
if (a) {
  console.log(a); // logs 'a string'
}

Есть только несколько значений, которые будут принуждены к ложливому:

false (не очень принудительно, как это уже ложно)
ноль
неопределенный
Нан
0
” (пустая строка)

Все остальные значения будут принуждены к true. Когда значение принуждено к логическому новому, мы также называем это «ложное», либо «правдоподобное».

Один из способов того, что используется принуждение к принуждению, является использованием операторов или ( ) и ( &&

var a = 'word';
var b = false;
var c = true;
var d = 0
var e = 1
var f = 2
var g = null

console.log(a || b); // 'word'
console.log(c || a); // true
console.log(b || a); // 'word'
console.log(e || f); // 1
console.log(f || e); // 2
console.log(d || g); // null
console.log(g || d); // 0
console.log(a && c); // true
console.log(c && a); // 'word'

Как вы можете видеть, или Оператор проверяет первый операнд. Если это правда или правда, он немедленно возвращает его (именно поэтому мы получаем «слово» в первом случае и правда во втором случае). Если это не правда или правда, он возвращает второй операнд (вот почему мы получаем «слово» в третьем случае).

С помощью и оператором он работает аналогично, но для «и« быть правдой, обе операнды должны быть правдивыми ». Так что он всегда будет возвращать второй операнд, если оба являются True/Landy, в противном случае он вернет ложь. Вот почему в четвертом случае мы получаем истину и в последнем случае мы получаем «слово».

Логический объект

Есть также родной JavaScript Логический Объект, который обернутся вокруг значения и преобразует первый параметр в логическое значение. Если значение опущено или falsy -0, -0, null , ложь , Нан , undefined или пустая строка ( "" ) – значение объекта ложно. Пройдите все остальные значения, включая строку "Ложь" и значение объекта установлено значение true.

Обратите внимание, что примитивные логические значения ( True и False ) различны, чем у логического объекта.

Подробнее

Помните, что любой объект, ценность которого не является undefined или null , оценивает true, если используется в условно-операторе. Например, хотя это Логический Объект явно установлен в FALSE, он оценивает true, и код выполняется:

var greeting = new Boolean(false);
if (greeting) {
  console.log("Hello world");
}

// Hello world

Это не распространяется на логические примитивы:

var greeting = false;
if (greeting) {
  console.log("Hello world"); // code will not run
}

Чтобы преобразовать не-логическое значение для булева, используйте Логический как функция, а не как объект:

var x = Boolean(expression);     // preferred use as a function
var x = new Boolean(expression); // don't do it this way

Функции обратного вызова

Этот раздел дает краткое введение в концепцию и использование функций обратного вызова в JavaScript.

Функции объекты

Первое, что нам нужно знать, это то, что в JavaScript функции – это первые классы объекты. Таким образом, мы можем работать с ними так же, как мы работаем с другими объектами, как присвоение их переменным и передавать их в качестве аргументов в другие функции. Это важно, потому что это последняя техника, которая позволяет расширять функциональность в наших приложениях.

Функция обратного вызова Пример

А Функция обратного вызова это функция, которая передается Как аргумент в другую функцию, чтобы быть «вызванным» позже.

Функция, которая принимает другие функции в качестве аргументов, называется Функция высшего порядка , который содержит логику для Когда Функция обратного вызова выполняется. Это сочетание этих двух, которые позволяют нам расширить нашу функциональность.

Чтобы проиллюстрировать обратные вызовы, давайте начнем с простого примера:

function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!

В приведенном выше примере Createquote Это функция более высокого порядка, которая принимает два аргумента, второй – обратный вызов. logquote Функция используется для передачи в качестве нашей функции обратного вызова. Когда мы выполняем Createquote Функция (1) , обратите внимание, что мы Не добавление скобки к logquote Когда мы передаем его как аргумент. Это потому, что мы не хотим выполнить функцию нашего обратного вызова сразу, мы просто хотим пройти определение функции вместе с функцией более высокого порядка, чтобы ее можно было выполнить позже.

Кроме того, нам необходимо обеспечить, чтобы функция обратного вызова мы пройдем в ожидании аргументов, мы поставляем эти аргументы при выполнении обратного вызова (2) Отказ В приведенном выше примере это было бы Обратный вызов (MyQuote); Заявление, так как мы знаем, что logquote ожидает, что цитата будет передана.

Кроме того, мы можем пройти в анонимных функциях как обратных вызовов. Ниже вызов Createquote будет иметь тот же результат, что и вышеприведенный пример:

createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

Кстати, ты не есть Чтобы использовать слово «Callback» как имя вашего аргумента. JavaScript просто нужно знать, что это правильное имя аргумента. На основании приведенного выше примера функция ниже будет вести себя точно так же.

function createQuote(quote, functionToCall) { 
  var myQuote = "Like I always say, " + quote;
  functionToCall(myQuote);
}

Зачем использовать обратные вызовы?

Большую часть времени мы создаем программы и приложения, которые работают в Синхронный манера. Другими словами, некоторые из наших операций начинаются только после завершения предыдущих.

Часто, когда мы запрашиваем данные из других источников, таких как внешний API, мы не всегда не всегда знаем Когда Наши данные будут поданы обратно. В этих случаях мы хотим дождаться ответа, но мы не всегда хотим, чтобы наше наше приложение шлифовать до остановки, пока наши данные получают. Эти ситуации находятся в том, где функции обратного вызова пригодны.

Давайте посмотрим на пример, который имитирует запрос на сервер:

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

// Result in console after 5 second delay:
// Response from the server: The glass is half full!

В приведенном выше примере мы производим просьбу на сумму сервера. Через 5 секунд Elapse ответ изменен, а затем наша функция обратного вызова GetResults выполняется. Чтобы увидеть это в действии, вы можете скопировать/вставить вышеуказанный код в инструмент разработчика вашего браузера и выполнить его.

Кроме того, если вы уже знакомы с Сетримс Затем вы использовали функции обратных заходов. Анонимный аргумент функции передан в приведенный выше примера Сетримс Функциональный вызов также является обратным вызовом! Таким образом, оригинальный обратный вызов примера фактически выполняется другим обратным вызовом. Будьте осторожны, чтобы не устанавливать слишком много обратных вызовов, если вы можете помочь ему, так как это может привести к чему-то под названием «Callback Ad Hell»! Как подразумевает имя, это не радость иметь дело с.

Пример класса JavaScript

JavaScript не имеет концепции классов по своей природе.

Но мы могли бы имитировать функциональные возможности класса, воспользовавшись прототипом JavaScript.

Этот раздел предполагает, что у вас есть базовое понимание Прототипы Отказ

Ради ясности, давайте предположим, что мы хотим создать класс, который может сделать следующее

var p = new Person('James','Bond'); // create a new instance of Person class
	p.log() // Output: 'I am James Bond' // Accessing a function in the class
	// Using setters and getters 
	p.profession = 'spy'
	p.profession // output: James bond is a spy

Используя класс ключевое слово

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

Это не поддерживается в старших браузерах и было введено в Ecmascript 2015.

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

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

Использование методов, добавленных к прототипам:

Здесь все методы добавляются к прототипу

function Person(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
}

Person.prototype.log = function() {
    console.log('I am', this._firstName, this._lastName);
}

// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
Object.defineProperty(Person.prototype, 'profession', {
    set: function(val) {
        this._profession = val;
    },
    get: function() {
        console.log(this._firstName, this._lastName, 'is a', this._profession);
    }
})

Вы также можете написать методы прототипа над функцией Человек Как показано ниже:

Person.prototype = {
    log: function() {
        console.log('I am ', this._firstName, this._lastName);
    }
    set profession(val) {
        this._profession = val;
    }

    get profession() {
        console.log(this._firstName, this._lastName, 'is a', this._profession);
    }

}

Использование методов добавлена внутри

Здесь методы добавляются внутренне вместо прототипа:

function Person(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;

    this.log = function() {
        console.log('I am ', this._firstName, this._lastName);
    }

    Object.defineProperty(this, 'profession', {
        set: function(val) {
            this._profession = val;
        },
        get: function() {
            console.log(this._firstName, this._lastName, 'is a', this._profession);
        }
    })
}

Скрытие деталей в классах с символами

Чаще всего некоторые свойства и методы должны быть скрыты для предотвращения доступа из-за внешней функции.

С классами, чтобы получить эту функциональность, один из способов сделать это с использованием символов. Символ – это новый встроенный тип JavaScript, который можно вызвать, чтобы дать новое значение символа. Каждый символ уникален и может быть использован в качестве ключа на объекте.

Таким образом, один используемый случай символов состоит в том, что вы можете добавить что-то на объект, который вы можете не владеть, и вы можете не захотеть столкнуться с любыми другими ключами объекта. Поэтому создание нового и добавления его в качестве свойства для этого объекта, используя символ, является самым безопасным. Кроме того, когда значение символа добавляется к объекту, никто не будет знать, как его получить.

class Person {
    constructor(firstName, lastName) {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    log() {
        console.log('I am', this._firstName, this._lastName);
    }

    // setters
    set profession(val) {
        this._profession = val;
    }
    // getters
    get profession() {
        console.log(this._firstName, this._lastName, 'is a', this._profession);
    }
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
// Symbols come to rescue.
let s_firstname  = new Symbol();

class Person {
    constructor(firstName, lastName) {
        this[s_firstName] = firstName;
        this._lastName = lastName;
    }

    log() {
        console.log('I am', this._firstName, this._lastName);
    }

    // setters
    set profession(val) {
        this._profession = val;
    }
    // getters
    get profession() {
        console.log(this[s_firstName], this._lastName, 'is a', this._profession);
    }

Пример закрытия JavaScript

Закрытие – это сочетание функции и лексической среды (область объема), в пределах которой была объявлена эта функция. Закрытия являются фундаментальным и мощным свойством JavaScript. В этом разделе обсуждаются «Как» и «Почему» о закрытиях:

Пример

//we have an outer function named walk and an inner function named fly

function walk (){
  
  var dist = '1780 feet';
  
  function fly(){
    console.log('At '+dist);
  }
  
  return fly;
}

var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
//you would expect that once the walk function above is run
//you would think that JavaScript has gotten rid of the 'dist' var

flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above 
//this is the power of closures

Другой пример

function by(propName) {
    return function(a, b) {
        return a[propName] - b[propName];
    }
}

const person1 = {name: 'joe', height: 72};
const person2 = {name: 'rob', height: 70};
const person3 = {name: 'nicholas', height: 66};

const arr_ = [person1, person2, person3];

const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]

Закрытие «запоминает» среда, в которой она была создана. Эта среда состоит из любых местных переменных, которые были введены в область примерно на момент закрытия.

function outside(num) {
  var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
  return function inside() { // This is the function which the closure 'remembers'
    console.log(rememberedVar)
  }
}

var remember1 = outside(7); // remember1 is now a closure which contains rememberedVar = 7 in its lexical environment, and //the function 'inside'
var remember2 = outside(9); // remember2 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function 'inside'

remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9

Закрытия полезны, потому что они позволяют вам «запомнить» данные, а затем позволяют работать с этими данными через возвращенные функции. Это позволяет JavaScript эмулировать частные методы, которые находятся на других языках программирования. Частные методы полезны для ограничения доступа к коду, а также для управления глобальным пространством имен.

Частные переменные и методы

Закрытия также могут быть использованы для инкапсуляции частных данных/методов. Посмотрите на этот пример:

const bankAccount = (initialBalance) => {
  const balance = initialBalance;

  return {
    getBalance: function() {
      return balance;
    },
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
  };
};

const account = bankAccount(100);

account.getBalance(); // 100
account.deposit(10); // 110

В этом примере мы не сможем получить доступ к Баланс из любой точки за пределами BankAccount Функция, что означает, что мы только что создали частную переменную.

Где закрытие? Ну, подумай о том, что BankAccount () возвращается. Он на самом деле возвращает объект с помощью функций внутри него, и все же, когда мы называем Счет. GetBalance () функция может «запомнить» ее первоначальную ссылку на Баланс Отказ

Это сила закрытия, где функция «запоминает» ее лексическую область (съемку скомпилирования), даже когда функция выполнена за пределами этого лексического охвата.

Эмулирующие блокируют переменные

JavaScript не имел концепции переменных на уровне блоков. Это означает, что при определении переменной внутри контура для цикла эта переменная была видна снаружи для петли. Так как же может замыкание помочь нам решить эту проблему? Давайте взглянем.

    var funcs = [];
    
    for(var i = 0; i < 3; i++){
        funcs[i] = function(){
            console.log('My value is ' + i);  //creating three different functions with different param values.
        }
    }
    
    for(var j = 0; j < 3; j++){
        funcs[j]();             // My value is 3
                                // My value is 3
                                // My value is 3
    }

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

    var funcs = [];
    
    var createFunction = function(val){
	    return function() {console.log("My value: " + val);};
    }

    for (var i = 0; i < 3; i++) {
        funcs[i] = createFunction(i);
    }
    for (var j = 0; j < 3; j++) {
        funcs[j]();                 // My value is 0
                                    // My value is 1
                                    // My value is 2
    }

Более поздние версии JavaScript (ES6 +) имеют новое ключевое слово под названием «Пусть», которое можно использовать для передачи переменной блокировки. Есть также много функций (Foreach) и целых библиотек (Loadash.js), которые посвящены решению таких проблем, как объясненные выше. Они, безусловно, могут повысить вашу производительность, однако остается чрезвычайно важной, чтобы иметь знание всех этих вопросов при попытке создать что-то большое.

Закрытия имеют много специальных приложений, которые полезны при создании больших программ JavaScript.

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

Эмуляция частных переменных

В отличие от многих других языков, JavaScript не имеет механизма, который позволяет создавать инкапсулированные переменные экземпляра в объекте. Наличие переменных публичных экземпляров может привести к возникновению проблем при строительстве средств к большим программам. Однако с закрытиями эта проблема может быть смягчена.

Как и в предыдущем примере, вы можете создавать функции, которые возвращают объектные литералы с методами, которые имеют доступ к локальным переменным объекта, не подвергая их. Таким образом, делая их эффективно частными.

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

Вот почему библиотека и модуль авторы используют замыкание, чтобы скрыть все методы и данные модуля. Это называется шаблоном модуля, он использует немедленно вызываемое выражение функции, которое экспортирует только определенные функциональные возможности для внешнего мира, значительно снижая количество глобальных ссылок.

Вот короткий выборки модуля скелета.

var myModule = (function() = {
    let privateVariable = 'I am a private variable';
    
    let method1 = function(){ console.log('I am method 1'); };
    let method2 = function(){ console.log('I am method 2, ', privateVariable); };
    
    return {
        method1: method1,
        method2: method2
    }
}());

myModule.method1(); // I am method 1
myModule.method2(); // I am method 2, I am a private variable

Закрытия полезны для захвата новых экземпляров частных переменных, содержащихся в «запоминающейся» среде, и эти переменные могут быть доступны только через возвращенную функцию или методы.

Пример комментария JavaScript

Программисты используют комментарии для добавления подсказок, заметков, предложений или предупреждений в исходный код; Они не влияют на фактическую производительность кода. Комментарии могут быть очень полезны, объясняя намерение того, что ваш код или должен делать.

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

JavaScript имеет два способа назначать комментарии в своем коде.

Первый способ – это // комментарий; Весь текст после // на той же линии в комментарий. Например:

function hello() {
  // This is a one line JavaScript comment
  console.log("Hello world!");
}
hello();

Второй способ – это /* */ Комментарий, который можно использовать как для однопрочего, так и для многострочных комментариев. Например:

function hello() {
  /* This is a one line JavaScript comment */
  console.log("Hello world!");
}
hello();

function hello() {
  /* This comment spans multiple lines. Notice
     that we don't need to end the comment until we're done. */
  console.log("Hello world!");
}
hello();

Вы также можете предотвратить выполнение кода JavaScript, просто комфортируя строки кода, как это:

function hello() {
  /*console.log("Hello world!");*/
}
hello();

Больше информации:

Как написать комментарии в JavaScript

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

Выделите текст, чтобы прокомментировать
Mac: Cush Command (Apple Key) & “/”
Windows: Push Control & “/”
Вы также можете воспользоваться кодом, делая одинаковые шаги

Ярлык, чтобы прокомментировать раздел JavaScript во многих редакторах кода – выделить строки кода, который вы хотите прокомментировать, затем нажмите `cmd/ctrl +/`.

Комментарии также очень полезны для тестирования кода, поскольку вы можете предотвратить работу определенной линии/блока кода:

function hello() {
  // The statement below is not going to get executed
  // console.log('hi')
  }
hello();

function hello() {
  // The statements below are not going to get executed
  /*
  console.log('hi');
  console.log('code-test');
  */
}
hello();

Пример оператора сравнения JavaScript

JavaScript имеет оба Строгий и Тип-преобразование сравнения.

Строгое сравнение ( === ) только оценивает true, если оба операнда являются одинаковым типом.
Абстрактное сравнение ( == ) пытается преобразовать обе операнды к одному и тому же типу, прежде чем сравнивать их.
С реляционными абстрактными сравнениями ( <= ), обе операнды преобразуются в примитивы, затем к одному и тому же типу до сравнения.
Строки сравниваются с использованием значений Unicode на основе стандартных заказов.

Особенности сравнения:

Две строки считаются строго равными, когда у них есть персонажи в той же последовательности и одинаковой длине.
Два номера считаются строго равными, когда они являются оба номером типа, так и численно равны. Это означает, что оба 0 и -0 строго равен, так как они оба оценивают 0 Отказ Обратите внимание, что Нан это особое значение и не равно ничего, включая Нан Отказ
Два логических операнда считаются строго равными, если оба являются правда или ложь Отказ
Два объекта никогда не считаются равными как в строгих, так и в абстрактных сравнениях.
Выражения, которые сравнивают объекты, считаются только верными, если операнды называют одинаковым точным экземпляром объекта.
Нуль и неопределенные оба считаются строго равными себе ( NULL ) и абстрактно равны друг другу ( NULL )

Операторы равенства

Равенство (==)

Оператор равенства сначала преобразует операнды, которые не имеют одного типа, а затем строго сравнивает их друг с другом.

Синтаксис

 x == y

Примеры

 1   ==  1        // true
"1"  ==  1        // true
 1   == '1'       // true
 0   == false     // true
 0   == null      // false

 0   == undefined   // false
 null  == undefined // true

Неравенство (! =)

Оператор неравенства оценивает true, если оба операнда не равны. Если операнды не одинаковы, он попытается преобразовать их в тот же тип, прежде чем сделать сравнение.

Синтаксис

x != y

Примеры

1 !=   2     // true
1 !=  "1"    // false
1 !=  '1'    // false
1 !=  true   // false
0 !=  false  // false

Личность/строгое равенство (===)

Оператор идентичности или строгих равенства возвращает True, если оба операнда строго равны с точки зрения стоимости и типа. В отличие от оператора равенства ( == ), он не попытается преобразовать операнды в тот же тип.

Синтаксис

x === y

Примеры

3 === 3   // true
3 === '3' // false

Не идентичность/строгое неравенство (! ==)

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

Синтаксис

x !== y

Примеры

3 !== '3' // true
4 !== 3   // true

Реляционные операторы

Больше, чем оператор (>)

Чем больше оператор возвращает true, если операнд слева превышает, чем тот справа.

Синтаксис

x > y

Примеры

4 > 3 // true

Больше или равный оператор (> =)

Чем больше или равный оператор возвращает true, если операнд слева превышает или равно одному справа.

Синтаксис

x >= y

Примеры

4 >= 3 // true
3 >= 3 // true

Меньше, чем оператор (<)

Чем меньше оператора возвращает True, если операнд слева находится меньше, чем вправо.

Синтаксис

x < y

Примеры

3 < 4 // true

Меньше или равный оператор (<=)

Чем меньше или равный оператор возвращает true, если операнд слева меньше или равно одному справа.

Синтаксис

x <= y

Примеры

3 <= 4 // true

Пример проверки формы JavaScript

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

JavaScript предоставляет способ проверки данных формы на компьютере клиента, прежде чем отправлять его на веб-сервер. Валидация формы обычно выполняет две функции:

Основная проверка

Прежде всего, форма должна быть проверена, чтобы убедиться, что все обязательные поля заполнены. Он просто требует петли через каждое поле в форме для проверки данных.

Валидация формата данных

Во-вторых, введенные данные должны быть проверены на правильную форму и значение. Ваш код должен включать соответствующую логику для проверки правильности данных.

Пример:


   
   
      Form Validation
      
      
      
   
   
   
      
         
            
            
               Name
               
            
            
            
               EMail
               
            
            
            
               Zip Code
               
            
            
            
               Country

Выход

Посмотреть здесь Отказ

Основная проверка формы

Сначала давайте посмотрим, как сделать основную проверку формы. В приведенной выше форме мы вызываем Validate () для проверки данных, когда происходит событие ONSUBMIT. Следующий код показывает реализацию этого Validate () функция.

Выход

Посмотреть здесь Отказ

Валидация формата данных

Теперь мы увидим, как мы можем подтвердить наши данные введенные данные, прежде чем отправлять его на веб-сервер.

В следующем примере показано, как подтвердить введенный адрес электронной почты. Адрес электронной почты должен содержать как минимум «@» знак и точку (.). Кроме того, «@» не должен быть первым символом адреса электронной почты, а последняя точка должна, по крайней мере, быть одним символом после знака «@».

Пример:

Выход

Посмотреть здесь Отказ

HTML5 формы ограничения

Некоторые из часто используемых ограничений HTML5 для являются Тип атрибут (например, тип = "пароль" ), Maxlength , Требуется и отключено Отказ Менее обычно используемое ограничение - шаблон атрибут, который принимает регулярное выражение JavaScript.

JavaScript, если пример оператора

Если Заявление Выполняет утверждение, если указанное условие является правда Отказ Если условие это ложь Другое утверждение может быть выполнено с использованием еще утверждение.

Примечание: еще Заявление необязательно.

if (condition)
    /* do something */
else
    /* do something else */

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

if (condition1)
    /* do something */
else if (condition2)
    /* do something else */
else if (condition3)
    /* do something else */
else
    /* final statement */

Примечание: Если вы хотите выполнить более одного утверждения в Если , еще или еще если Часть, вьющиеся брекеты требуются вокруг утверждений:

if (condition) {
    /* do */
    /* something */
    /* with multiple statements */
} else {
    /* do something */
    /* else */
}

MDN Link |. MSDN Link.

Примеры

Использование Если ... еще :

    // If x=5 z=7 and q=42. If x is not 5 then z=19.
    if (x == 5) {
      z = 7;
      q = 42
    else
      z = 19;

Использование еще если :

if (x < 10)
    return "Small number";
else if (x < 50)
    return "Medium number";
else if (x < 100)
    return "Large number";
else {
    flag = 1;
    return "Invalid number";
}

Пример прототипа JavaScript

JavaScript - это прототип на основе языка, поэтому понимание объекта прототипа является одной из самых важных концепций, которые должны знать практикующие JavaScript.

Этот раздел даст вам краткий обзор объекта прототипа через различные примеры. Прежде чем прочитать эту часть, вам нужно будет иметь базовое понимание этой ссылки в JavaScript.

Прототип объекта

Ради ясности, давайте рассмотрим следующий пример:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}

Как Point2D Функция объявлена, свойство по умолчанию называется Прототип будет создан для него (обратите внимание, что в JavaScript функция также является объектом).

Прототип Свойство - это объект, который содержит Конструктор Собственность и его значение - Point2D Функция: Point2d.prototype.Constructor Отказ И когда вы звоните Point2D с Новый ключевое слово, Недавно созданные объекты наследуют все свойства от Point2d.prototype Отказ

Чтобы проверить это, вы можете добавить метод с именем Переместить в Point2d.prototype следующим образом:

Point2D.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

Point2d.prototype называется Прототип объекта или Прототип P1 объект и для любого другого объекта, созданного с Новый Point2D (...) синтаксис. Вы можете добавить больше свойств в Point2d.prototype объект, как вам нравится. Общий шаблон - объявить методы Point2d.prototype И другие свойства будут объявлены в функции конструктора.

Встроенные объекты в JavaScript построены аналогичным образом. Например:

Прототип объектов, созданных с Новый объект () или {} Синтаксис это Объект. Прототип Отказ
Прототип массивов, созданных с Новый массив () или [] Синтаксис это Array.Prototype Отказ
И так далее с другими встроенными объектами, такими как Дата и Regexp Отказ

Объект. Прототип Унаследован всеми объектами, и у него нет прототипа (его прототип - это нулевой ).

Цепь прототипа

Механизм цепи прототипа прост: при доступе к недвижимости P на объекте obj Двигатель JavaScript ищет это свойство внутри obj объект. Если двигатель неисправен, он продолжает поиск в прототипе obj Объект и так далее до достижения Объект. Прототип Отказ Если после поиска закончится, и ничего не найден, результат будет undefined Отказ Например:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

В приведенном выше фрагменте, заявление var.create (Obj1) создаст obj2 объект с прототипом obj1 объект. Другими словами, obj1 становится прототипом obj2 вместо Объект. Прототип по умолчанию. Как вы можете видеть, B не является собственностью obj2 ; Вы все еще можете получить доступ через цепь прототипа. Для C Свойство, однако, вы получаете undefined ценность, потому что его нельзя найти в obj1 и Объект. Прототип Отказ

Классы

В ES2016 мы теперь используем Класс Ключевое слово, а также методы, упомянутые выше, чтобы манипулировать Прототип Отказ JavaScript Класс Обращается к разработчикам из фонов ООП, но это по сути делает то же самое, что и выше.

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Это в основном так же, как:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

Добрать и Сеттер Методы в классах связывают свойство объекта к функции, которая будет называться, когда будет выглядеть недвижимость. Это просто синтаксический сахар, чтобы облегчить Посмотри вверх или Установить характеристики.

Пример спецификации JavaScript

Если вы некоторое время программируете в JavaScript, вы, несомненно, столкнулись с концепцией, известной как Область Отказ Что такое Область ? Почему вы должны потратить время, чтобы узнать это?

В программисту говоря, Область это Текущий контекст исполнения Отказ Смущенный? Давайте посмотрим на следующий кусок кода:

var foo = 'Hi, I am foo!';

var baz = function () {
  var bar = 'Hi, I am bar too!';
    console.log(foo);
}

baz(); // Hi, I am foo!
console.log(bar); // ReferenceError...

Это простой пример, но это делает хорошую работу по иллюстрации того, что известно как Лексический охват Отказ JavaScript, а почти каждый другой язык программирования имеет Лексический охват Отказ Есть еще один вид применения, известный как Динамический объем , но мы этого не будем обсуждать.

Теперь термин Лексический охват Звучит фантазии, но, как вы увидите, это действительно просто в принципе. В лексической облаке есть два вида спецификаций: Глобальный объем и а Местный охват Отказ

Прежде чем ввести первую строку кода в вашей программе, Глобальный объем создан для вас. Это содержит все переменные, которые вы объявляете в вашей программе вне любых функций Отказ

В приведенном выше примере переменная Foo находится в глобальном объеме программы, в то время как переменная бар объявляется внутри функции и поэтому В местном объеме этой функции Отказ

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

В строке 1 мы объявляем переменную Foo Отказ Ничего не слишком любить здесь. Давайте назовем это левый размер (LHS) ссылки на Foo потому что мы присваиваем значение Foo И это на левой стороне равный знак.

В строке 3 мы объявляем функцию и присваивая его переменную Баз Отказ Это еще одна ссылка на LHS на Баз Отказ Мы присваиваем ему значение (помните, функции тоже являются значениями!). Эта функция затем вызывается в строке 8. Это RHS или справочная сторона для Баз Отказ Мы извлекаем Баз Значение, которое в этом случае является функцией, а затем вызывает его.

Еще одна ссылка RHS на Баз Было бы, если бы мы присваивали его значение другой переменной, например Foo Отказ Это будет ссылка на LHS на Foo и ссылка RHS на Баз Отказ

LHS и RHS ссылки могут звучать с толку, но они важны для обсуждения объема. Подумайте об этом таким образом: ссылка LHS присваивает значение переменной, в то время как ссылка RHS получает значение переменной. Они просто более короткий и удобный способ сказать «получение значения» и «присвоение значения».

Давайте теперь сломанем, что происходит внутри самой функции.

Когда компилятор компилирует код внутри функции, он входит в функцию Местный охват Отказ

В строке 4, переменная бар объявлен. Это ссылка на LHS на бар Отказ На следующей строке у нас есть ссылка RHS на Foo внутри console.log () Отказ Помните, мы извлекаем Foo значение, а затем передавать его как аргумент для метода console.log () Отказ

Когда у нас есть ссылка RHS на Foo Компилятор ищет декларацию переменной Foo Отказ Компилятор не находит его в самой функции, либо Локальная область функции , Итак, это поднимается на один уровень: до глобального охвата Отказ

На данный момент вы, вероятно, думаете, что имеет возможность делать с переменными. Это верно. Область можно рассматривать как контейнер для переменных. Все переменные, созданные в локальном объеме, доступны только в этом локальном объеме. Тем не менее, все локальные области могут получить доступ к глобальному объему. (Я знаю, что вы, вероятно, даже больше запутаны прямо сейчас, но просто несут со мной еще несколько абзацев).

Таким образом, компилятор подходит к глобальному применению, чтобы найти ссылку на LHS на переменную Foo Отказ Он находит один на строке 1, поэтому он извлекает значение из ссылки на LHS, которая является строкой: «Привет, я Foo!» Отказ Эта строка отправляется на console.log () Способ и выводится на консоль.

Компилятор завершил выполнение кода внутри функции, поэтому мы возвращаемся к строке 9. В строке 9 у нас есть ссылка RHS для переменной бар Отказ

Теперь бар был объявлен в местном объеме Баз , но есть ссылка RHS для бар в глобальном масштабе. Так как нет ссылки на LHS для бар В глобальном объеме компилятор не может найти значение для бар и бросает отсчетюр.

Но, вы можете спросить, если функция может посмотреть за пределы переменных для переменных, или локальная область может заглянуть в глобальный объем, чтобы найти ссылки на LHS, почему не может глобальный прицел заглянуть в локальный объем? Ну, вот как работает лексический объем!

... // global scope
var baz = function() {
  ... // baz's scope
}
... /// global scope

Это тот же код сверху, который иллюстрирует объем. Это формирует своего рода иерархия, которая подходит к глобальному объему:

Баз -> Глобал Отказ

Итак, если есть ссылка RHS для переменной внутри Баз Сфера охвата, его можно выполнить по ссылке LHS для этой переменной в глобальном объеме. Но наоборот - Не правда Отказ

Что если у нас была другая функция внутри Баз ?

... // global scope
var baz = function() {
  ... // baz's scope

  var bar = function() {
     ... // bar's scope.
  }

}
... /// global scope

В этом случае иерархия или Цепочка охвата будет выглядеть так:

Бар -> Баз -> глобальный

Любые ссылки RHS внутри бар Локальная область может быть выполнена ссылками LHS в глобальном масштабе или Баз Область, но ссылка RHS в Баз Сфера охвата не может быть выполнена ссылкой LHS в бар Сфера применения.

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

Есть две две важные вещи, которые вы должны знать о Scopes JavaScript.

Спецификации объявляются функциями, а не блоками.
Функции могут быть направлены вперед, переменные не могут.

Соблюдайте (каждый комментарий описывает область применения в том, что она написана на):

    // outer() is in scope here because functions can be forward-referenced
    
    function outer() {
    
        // only inner() is in scope here
        // because only functions are forward-referenced
    
        var a = 1;
        
        //now 'a' and inner() are in scope
        
        function inner() {
            var b = 2
            
            if (a == 1) {
                var c = 3;
            }
            
            // 'c' is still in scope because JavaScript doesn't care
            // about the end of the 'if' block, only function inner()
        }
        
        // now b and c are out of scope
        // a and inner() are still in scope
        
    }
    
    // here, only outer() is in scope

JavaScript для примера петли

Синтаксис

for ([initialization]); [condition]; [final-expression]) {
   // statement
}

JavaScript для Заявление состоит из трех выражений и утверждения:

Инициализация - выполняется до первого выполнения на петле. Это выражение обычно используется для создания счетчиков. Переменные, созданные здесь, обладают петлей. После того, как петля закончила свое исполнение, они разрушены.
Условие - выражение, которое проверяется до выполнения каждой итерации. Если опущено, это выражение оценивает true. Если он оценивает true, оператор петли выполняется. Если он оценивает ложь, петли останавливается.
Окончательное выражение - выражение, которое бежит после каждой итерации. Обычно используется для увеличения счетчика. Но это может быть использовано для уменьшения счетчика.
Заявление - код, который будет повторяться в петле

Любое из этих трех выражений или утверждение может быть опущено. Для циклов обычно используются для подсчета определенного количества итераций для повторения оператора. Используйте Перерыв Заявление для выхода из цикла до того, как экспрессия условия оценивает false.

Общие подводные камни

Превышение границ массива

При индексировании на массиве много раз, это легко превышать границы массива (Ex. Попробуйте ссылку на 4-й элемент 3 элемента массива элементов).

    // This will cause an error.
    // The bounds of the array will be exceeded.
    var arr = [ 1, 2, 3 ];
    for (var i = 0; i <= arr.length; i++) {
       console.log(arr[i]);
    }

    output:
    1
    2
    3
    undefined

Есть два способа исправить этот код. Установите условие либо I или I.Length - 1.

Примеры

Итерация через целые числа от 0 до 8

for (var i = 0; i < 9; i++) {
   console.log(i);
}

output:
0
1
2
3
4
5
6
7
8

Вырваться из петли до того, как выражение условия ложно

for (var elephant = 1; elephant < 10; elephant+=2) {
    if (elephant === 7) {
        break;
    }
    console.info('elephant is ' + elephant);
}

output:
elephant is 1
elephant is 3
elephant is 5

Пример оператора перерыва JavaScript

Перерыв Заявление завершает текущую петлю, Переключатель или этикетка Заявление и трансферты Программный контроль в заявлении после окончанного заявления.

break;

Если Перерыв Заявление используется в меченном операторе, синтаксис выглядит следующим образом:

break labelName;

Примеры

Следующая функция имеет Перерыв Заявление, которое прекращает в то время как петля, когда Я 3, а затем возвращает значение 3 * x Отказ

function testBreak(x) {
  var i = 0;

  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }

  return i * x;
}

В следующем примере счетчик устанавливается, чтобы сосчитать от 1 до 99; Тем не менее, Перерыв Заявление охватывает петлю после 14 м.

for (var i = 1; i < 100; i++) {
  if (i == 15) {
    break;
  }
}

JavaScript DO пока пример петли

делать ... пока петля тесно связана с в то время как петля. В цикле DO пока состояние проверяется в конце цикла.

Вот синтаксис для делать ... пока петля:

Синтаксис:

 do {

   *Statement(s);*

} while (*condition*);

Операторы (ы): Заявление, которое выполняется по крайней мере, один раз До того, как условие или булевое выражение оценивается и заново выполняется каждый раз, когда условие оценивается к True.

Состояние: Здесь условие - это Логическое выражение Отказ Если логическое выражение оценивает true, утверждение выполняется снова. Когда логическое выражение оценивает ложь, петли заканчиваются.

Пример:

var i = 0;
do {
  i = i + 1;
  console.log(i);
} while (i < 5);

Output:
1
2
3
4
5

JavaScript для в примере петли

для ... в Заявление илет на перечислимые свойства объекта, в произвольном порядке. Для каждого отчетного свойства могут быть выполнены заявления.

for (variable in object) {
...
}

Требуется/дополнительная параметрParameterDescriptionRequiredVariable: Разное имя свойства присваивается переменной на каждой итерации. Дополнительные данные: объект, перечислимые свойства которых итерации.

Примеры

// Initialize object.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }

// Iterate over the properties.
var s = ""
for (var key in a) {
    s += key + ": " + a[key];
    s += "
";
    }
document.write (s);

// Output:
// a: Athens
// b: Belgrade
// c: Cairo

// Initialize the array.
var arr = new Array("zero", "one", "two");

// Add a few expando properties to the array.
arr["orange"] = "fruit";
arr["carrot"] = "vegetable";

// Iterate over the properties and elements.
var s = "";
for (var key in arr) {
    s += key + ": " + arr[key];
    s += "
";
}

document.write (s);

// Output:
//   0: zero
//   1: one
//   2: two
//   orange: fruit
//   carrot: vegetable

// Efficient way of getting an object's keys using an expression within the for-in loop's conditions
var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
for (myKeys[i++] in myObj);

document.write(myKeys);

//Output:
//   a
//   b
//   c

JavaScript для примера петли

для ... из Заявление создает цикл, итерацию по поводу передовых объектов (включая массив, карту, набор, аргументы объекта и т. Д.), вызывая индивидуальный итерационный крючок с операторами для выполнения значения каждого отчетного свойства.

    for (variable of object) {
        statement
    }

Описание Переменная: На каждой итерации значение другое свойство присваивается на объект variable.Object, чьи перечислимые свойства итерации.

Примеры

Множество

    let arr = [ "fred", "tom", "bob" ];

    for (let i of arr) {
        console.log(i);
    }

    // Output:
    // fred
    // tom
    // bob

карта

    var m = new Map();
    m.set(1, "black");
    m.set(2, "red");

    for (var n of m) {
        console.log(n);
    }

    // Output:
    // 1,black
    // 2,red

Набор

    var s = new Set();
    s.add(1);
    s.add("red");

    for (var n of s) {
        console.log(n);
    }

    // Output:
    // 1
    // red

Аргументы объекта

    // your browser must support for..of loop
    // and let-scoped variables in for loops

    function displayArgumentsObject() {
        for (let n of arguments) {
            console.log(n);
        }
    }


    displayArgumentsObject(1, 'red');

    // Output:
    // 1
    // red

JavaScript во время примера петли

Цикл в то время как начинается, оценивая состояние. Если условие верно, оператор (ы) выполнен/выполняется. Если условие неверно, оператор (ы) не выполняется. После этого, пока концы петли.

Вот синтаксис Для цикла While While:

Синтаксис:

while (condition)

{

  statement(s);

}

Операторы (ы): Заявление, которое выполняется до тех пор, пока состояние оценивается к истинному.

Состояние: Здесь условие - это логическое выражение, которое оценивается перед каждым проходом через петлю. Если это условие оценивает true, операторы (ы) выполняются. Когда условие оценивает ложное, выполнение продолжается с утверждением после цикла While.

Пример:

    var i = 1;
    while (i < 10) 
    {
      console.log(i);
       i++; // i=i+1 same thing
    }

    Output:
    1 
    2 
    3 
    4
    5
    6
    7
    8
    9