Pro jQuery

Адам Фриман

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

В JavaScript есть много стандартных операторов. Я собрал наиболее полезные из них в таблице 4-1.

Таблица 4-1: Полезные операторы JavaScript

Оператор	Описание
`++`, `--`	инкремент и декремент
`+`, `-`, `*`, `/`, `%`	сложение, вычитание, умножение, деление, деление по модулю
`<`, `<=`, `>`, `>=`	меньше, меньше либо равно, больше, больше либо равно
`==`, `!=`	проверка на равенство и неравенство
`===`, `!==`	проверка на тождество (строго равно) и не тождество (строго не равно)
`&&`, `\|\|`	логические И и ИЛИ
`=`	присваивание
`+`	конкатенация строк
`?:`	тройной операнд оператора условия

Использование операторов условия

Многие операторы JavaScript используются вместе с операторами условия. В этой книге я в основном использую операторы if/else и switch. В листинге 4-19 показано использование обоих (они вам знакомы, если вы работали почти с любым языком программирования).

Листинг 4-19: Использование условных операторов if/else и switch

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var name = "Adam";

		if (name == "Adam") {
			console.log("Name is Adam");
		} else if (name == "Jacqui") {
			console.log("Name is Jacqui");
		} else {
			console.log("Name is neither Adam or Jacqui");
		}

		switch (name) {
			case "Adam":
				console.log("Name is Adam");
				break;
			case "Jacqui":
				console.log("Name is Jacqui");
				break;
			default:
				console.log("Name is neither Adam or Jacqui");
				break;
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Оператор равенства и оператор тождества

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

Листинг 4-20: Использование оператора равенства

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal == secondVal) {
			console.log("They are the same");
		} else {
			console.log("They are NOT the same");
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Результат выполнения скрипта таков:

They are the same

JavaScript приводит два операнда к одному типу и сравнивает их. По существу, оператор равенства проверяет, одинаковы ли значения, независимо от типа операндов. Если же вы хотите проверить, одинаковы ли значения и типы операндов, нужно использовать оператор тождества (===, три знака "равно", в отличие от оператора равенства), как показано в листинге 4-21.

Листинг 4-21: Использование оператора тождества

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal === secondVal) {
			console.log("They are the same");
		} else {
			console.log("They are NOT the same");
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

They are NOT the same

Примитивные типы JavaScript сравниваются по значению, а объекты – по ссылке. В листинге 4-22 показано, как JavaScript проверяет равенство и тождественность объектов.

Листинг 4-22: Проверка на равенство и тождественность объектов

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myData1 = {
			name: "Adam",
			weather: "sunny",
		};

		var myData2 = {
			name: "Adam",
			weather: "sunny",
		};

		var myData3 = myData2;

		var test1 = myData1 == myData2;
		var test2 = myData2 == myData3;
		var test3 = myData1 === myData2;
		var test4 = myData2 === myData3;

		console.log("Test 1: " + test1 + " Test 2: " + test2);
		console.log("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Результат выполнения скрипта таков:

Test 1: false Test 2: true
Test 3: false Test 4: true

В листинге 4-23 показана эта же самая проверка, выполненная для примитивных типов.

Листинг 4-23: Проверка на равенство и тождественность примитивных типов

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myData1 = 5;
		var myData2 = "5";
		var myData3 = myData2;

		var test1 = myData1 == myData2;
		var test2 = myData2 == myData3;
		var test3 = myData1 === myData2;
		var test4 = myData2 === myData3;

		console.log("Test 1: " + test1 + " Test 2: " + test2);
		console.log("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Результат выполнения скрипта таков:

Test 1: true Test 2: true
Test 3: false Test 4: true

Явное преобразование типов

Оператор конкатенации строк (+) имеет более высокий приоритет, нежели оператор сложения (также +), что обозначает, что если это возможно, то JavaScript объединяет переменные, а не складывает их. Это может вызвать путаницу, потому что JavaScript также свободно приведет типы, чтобы получить результат, а это не всегда ожидаемый результат, как показано в листинге 4-24.

Листинг 4-24: Приоритет оператора конкатенации строк

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myData1 = 5 + 5;
		var myData2 = 5 + "5";

		console.log("Result 1: " + myData1);
		console.log("Result 2: " + myData2);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Результат выполнения скрипта таков:

Result 1: 10
Result 2: 55

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

Преобразование чисел в строки

Если вы работаете со множеством чисел и хотите объединить их как строки, тогда вам нужно преобразовать числа в строки, используя метод toString, как показано в листинге 4-25.

Листинг 4-25: Использование метода number.toString

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData1 = (5).toString() + String(5);
		console.log("Result: " + myData1);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Обратите внимание, что я заключил числовое значение в скобки, а потом вызвал метод toString. Это потому что вы должны разрешить JavaScript привести буквенное значение к типу number, прежде чем вы вызовете метод, который определит тип number. Также я показал альтернативный вариант для достижения такого же результата: я вызвал функцию String и передал числовое значение в виде аргумента. Оба этих способа приводят к одному и тому же результату, то есть приводят тип number к типу string, а оператор + используется для конкатенации строк, а не для сложения. Результат выполнения скрипта таков:

Result: 55

Есть несколько других методов, которые регулируют представление чисел в виде строк. Я вкратце изложил их в таблице 4-2. Все методы, описанные в таблице, определены для типа number.

Таблица 4-2: Полезные методы приведения типа number к типу string

Метод	Описание	Возвращает
`toString()`	представляет число в десятеричной системе исчисления	`string`
`toString(2)` `toString(8)` `toString(16)`	представляет число в двоичной, восьмеричной или шестнадцатеричной системе исчисления	`string`
`toFixed(n)`	представляет вещественно число с `n` количеством знаков после запятой	`string`
`toExponential(n)`	представляет число в экспотенциальном виде с одним знаком до запятой и `n` числом знаков после	`string`
`toPrecision(n)`	представляет число с `n` количеством значащих цифр, используя, если нужно, экспотенциальную запись	`string`

Конвертация строк в числа

Обратным случаем является преобразование строк в числа, чтобы можно было произвести сложение, а не конкатенацию строк. Это можно сделать, используя функцию Number, как показано в листинге 4-26.

Листинг 4-26: Преобразование строк в числа

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var firstVal = "5";
		var secondVal = "5";

		var result = Number(firstVal) + Number(secondVal);

		console.log("Result: " + result);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Результат скрипта такой:

Result: 10

Метод Number довольно точный в том, как он разбирает (парсит) значение строки, но есть еще две более гибкие функции, которые используют только числовые символы. Это функции parseInt и parseFloat. Я описал все методы в таблице 4-3.

Таблица 4-3: Полезные методы для преобразования строк в числа

Метод	Описание
`Number(str)`	Разбирает указанную строку для получения целого или вещественного значения
`parseInt(str)`	Разбирает указанную строку для получения целого значения
`parseFloat(str)`	Разбирает указанную строку для получения целого или вещественного значения

4.6. Работа с массивами

или RSS канал: