10 способов поменять местами два значения в JavaScript
В какой-то момент своей карьеры разработчики сталкиваются с задачей обмена значениями. Большую часть времени мы пользуемся классическим методом с использованием дополнительной переменной. Ах, если бы был способ лучше. Но подождите-ка! Такой способ есть, и не один. В моменты отчаяния мы серфим интернет в поисках решений, находим одно, копируем его без какого-либо понимания, как работает этот кусочек кода. К счастью для вас, сейчас самое время понять, как поменять местами два значения просто и эффективно.
1) Использование временной переменной
Сразу отсечем самое очевидное решение.
2) Использование сложения и вычитания
Да, вы прочитали правильно. Мы можем использовать немного магии математики, чтобы обменять парочку значений.
Что-о-о!? Ага, а теперь давайте посмотрим, как это работает. Мы получаем сумму двух чисел на 4 строке. Сейчас, если мы вычтем одно число из суммы, то получим другое число. Это как раз то, что мы делаем на 5 строке. Вычитание num2 из суммы, которая находится в num1, дает нам изначальное значение num1, которое помещается в num2. Аналогично мы получаем num2 и помещаем его в num1 на 6 строке.
Осторожно: на просторах интернета гуляет еще один метод обмена в одну строчку лишь с операцией сложения.
Вот как он выглядит:
Код выше дает ожидаемый результат. Выражение внутри () хранит num2 в num1, затем мы вычитаем num1 — num2, а это ноль, так как num2 — num2 = 0. Следовательно, мы получаем нужный результат. Но когда мы используем числа с плавающей точкой, иногда можем увидеть неожиданный результат.
Поиграйтесь в консоли с дробными входными параметрами, как в коде ниже.
3) Использование сложения или вычитания
Мы можем получить тот же результат, используя только операцию сложения.
Посмотрим, как этого добиться:
Эта программа работает, но ее читабельность явно страдает. На 4 строке в скобках мы присваиваем num1 num2 и возвращаем 0. По сути наша строка выглядит так:
Отсюда мы и получаем наш результат.
Замечание: некоторые движки JavaScript могут выполнять свои собственные оптимизации приведенного выше кода, который игнорирует + 0.
4) Использование умножения и деления
Еще немного магии при помощи операторов умножения и деления.
Принцип тот же, что и в предыдущем методе, но с парочкой «причудов».
Собственно, здесь все похоже. Получаем произведения двух чисел и храним его в одном из чисел. Это то, что происходит на 4 строке. Затем делим произведение на второе число и получаем первое, потом повторяем процесс и получаем второе число.
Вы сделали это! Да вы «математический фокусник«.
Погодите! Что насчет тех «причудов»?
Давайте попробуем запустить следующий код.
Наши значения не поменяются местами, и вместо этого мы получим NaN. Если вы посещали уроки математики, то помните, что вам всегда говорили не делить на 0, потому что получится неопределенность. Причина кроется в работе ограничений и в некоторых других вещах, в которые мы погружаться не будем. Сейчас же мы посмотрим на еще одну проблему этого метода.
Да, вновь NaN. Потому что мы не можем делить на бесконечность, это также неопределенность.
Хотите увидеть еще одну причуду? Я так и думал!
-бесконечность будет возвращать то же значение, как в прошлом примере, по той же причине.
Даже «математический фокусник» при всех своих силах не может сделать невозможного.
Ниже представлена краткая версия обмена с умножением и делением с теми же проблемами:
Этот код аналогичен краткой версии обмена со сложением и вычитанием. Мы присваиваем num1 num2, а потом 4 строка выглядит так:
Вуаля! Наши значения поменялись местами.
5) Использование умножения или деления
Эта программа работает, но ее читабельность явно страдает. На 4 строке в скобках мы присваиваем num1 num2 и возвращаем 1. На деле наша строка выглядит так:
И мы вновь получаем требуемый результат.
6) Использование побитового исключающего ИЛИ
XOR манипулирует битами. Возвращает 1, когда значения переменных различны, и 0 в противном случае.
Теперь поймем, как это работает.
4-ех битное представление 10 -> 1010
4-ех битное представление 1 -> 0001
Вуаля! Мы вновь поменяли значения местами.
Посмотрим другой пример.
Хм, где же обмен? Мы получили только целую часть числа. И в этом проблема такого способа. XOR предполагает, что входные параметры это целые числа, и уже в соответствии с этим производит вычисления. Но числа с плавающей точкой не являются целыми и представлены стандартом IEEE 754, согласно которому число разбивается на 3 части: знаковый бит, группа битов, представляющих показатель степени, еще одна группа битов, представляющая число между 1 (включая) и 2 (не включая), то есть мантиссу. Поэтому мы и получаем не тот результат.
Еще один пример:
И снова не тот результат, который мы ожидали. Все потому, что бесконечность и -бесконечность это числа с плавающей точкой, а, как мы уже поняли, для XOR это проблема.
7) Использование побитового исключающего НЕ ИЛИ
Эта операция противоположна исключающему ИЛИ. XNOR возвращает 0, если значения различны, и 1 в противном случае. В JavaScript нет специального оператора для XNOR, так что мы используем NOT оператор, чтобы инвертировать XOR.
Давайте поймем, как это работает!
4-ех битное представление 10 -> 1010
4-ех битное представление 1 -> 0001
На 4 строчке:
Так как мы получили отрицательное значение, нам необходимо конвертировать его в двоичное, инвертировать биты и прибавить единицу:
На 5 строчке:
На 6 строчке:
Это займет некоторое время, но мы получим обмен значений. Но, к сожалению, у этого способа будут те же проблемы, что и у метода с XOR. Все плохо с числами с плавающей точкой и бесконечностями.
Попробуйте поэкспериментировать со значениями, как в коде ниже.
8) Использование присваивания внутри массива
Это трюк в одну строку. Правда! Вам просто нужна одна строка для обмена и, что более важно, никакой математики. Понадобятся лишь базовые знания о массивах. Может выглядеть странно, но оно работает.
Посмотрим на этот метод в действии!
В нулевом индексе массива хранится num1, в 1 индексе мы присваиваем num1 num2 и, соответственно, храним num2. Затем мы просто обращаемся к 0 индексу, чтобы получить num1 и присвоить это значения num2. Таким образом мы может менять и целые числа, и числа с плавающей точкой, и бесконечности, и даже строки. Выглядит довольно аккуратно, но мало читабельно. Взглянем на похожий способ.
9) Использование деструктуризации
Это нововведение, появившееся в ES6. И оно очень простое. В одну линию мы можем поменять значения местами:
10) Использование немедленно вызываемой функции (IIFE)
Еще один странный вариант обмена. IIFE — это функция, которая вызывается сразу после ее объявления.
Посмотрим, как мы можем ее использовать:
В этом примере мы сразу же вызываем функцию на 4 строке. Скобки в конце это аргументы. Во втором аргументе мы присваиваем num2 num1, а первый просто возвращается из функции. Наши значения вновь поменялись местами. Но имейте в виду, этот способ не эффективный.
Заключение
В этой статье мы рассмотрели несколько способов обмена значениями в JavaScript. Надеюсь, вы подчерпнули для себя что-то новое. Спасибо за прочтение!
4 способа поменять значения переменных в JavaScript
Во время собеседования по кодированию вас могут спросить: «Как поменять местами 2 переменные без временной переменной?» .
Полезно знать несколько способов замены переменных. В этом посте вы прочитаете о 4 способах подкачки (2 с использованием дополнительной памяти и 2 без нее).
1. Деструктурирующее задание
Назначение деструктуризации (функция ES2015 ) позволяет извлекать элементы массива в переменные. Например, следующий код разрушает массив:
[a, b] = [1, 2, 3] это деструктурирующее присвоение, которое разрушает [1, 2, 3] массив. a переменной присваивается с первым пунктом 1 из [1, 2, 3] , соответственно , b назначается со вторым пунктом 2 .
Зная, как деструктурировать массив, легко использовать его для замены переменных. Давайте поменяем местами переменные a и b используем деструктурирующее присваивание:
[a, b] = [b, a] — деструктурирующее присвоение, меняющее местами переменные a и b .
На первом этапе в правой части деструктуризации создается временный массив [b, a] (который оценивается как [2, 1] ).
Тогда деструктурирующий временного массива происходит: [a, b] = [2, 1] . Переменной a присваивается 2 и b с 1 . Замена a и b была произведена.
Мне нравится деструктурирующий подход, потому что он короткий и выразительный: замена выполняется всего одним оператором. Он работает с любыми типами данных: числами, строками, логическими значениями, объектами.
В большинстве случаев я рекомендую менять местами переменные с помощью деструктурирующего присваивания.
2. Временная переменная
Замена переменных с помощью временной переменной является классической. Как следует из названия, для этого подхода требуется дополнительная временная переменная.
Поменяем местами значения переменных a и b воспользуемся временной переменной temp :
temp — временная переменная .
На первом шаге temp присваивается значение a . Затем a переменной присваивается значение b . Наконец, переменной b присваивается значение temp (имеющее начальное значение a ).
Замена переменных с помощью временной переменной работает с любым типом значения, например числами, строками, логическими значениями, объектами.
Обратной стороной этого подхода является необходимость в специальной временной переменной, плюс замена происходит в 3 операторах.
3. Дополнение и отличие
Вы можете менять местами переменные без использования дополнительной памяти (например, временного массива или переменной).
В следующем примере переменные меняются местами a и b используются арифметические операторы сложения + и разности — :
Изначально a есть 1 и b есть 2 . Давайте посмотрим, как 3 оператора выполняют обмен:
- a = a + b присваивает a значение 1 + 2 .
- b = a — b присваивает b значение 1 + 2 — 2 = 1 ( b сейчас 1 ).
- a = a — b присваивает a значение 1 + 2 — 1 = 2 ( a сейчас 2 ).
Наконец, a есть 2 и b есть 1 . Замена a и b была произведена.
Хотя этот подход не использует временные переменные, он имеет значительные ограничения.
Во-первых, вы можете менять местами только целые числа. Во-вторых, помните о переполнении чисел при выполнении сложения на первом шаге a = a + b (сумма должна быть меньше чем Number.MAX_SAFE_INTEGER ).
4. Побитовый оператор XOR.
Оператор XOR оценивается как истина, если операнды разные. Напомним, вот таблица истинности XOR:
В JavaScript побитовый оператор XOR n1 ^ n2 выполняет операцию XOR для каждого бита числа n1 и n2 .
Например, вот как 5 ^ 7 оценивается 2 :
Побитовое исключающее ИЛИ имеет 2 интересных свойства:
- n ^ n = 0 : побитовое исключающее ИЛИ, выполняемое для того же числа, 0
- n ^ 0 = n : побитовое исключающее ИЛИ выполняется для числа, и ноль — это то же число
Эти свойства XOR можно использовать для обмена переменными. Посмотрим, как поменять местами a и b переменные:
Вот объяснение, почему подкачка работает:
- a = a ^ b
- b = a ^ b . На основе 1 a заменяется на a ^ b . Итак b = (a ^ b) ^ b = a ^ (b ^ b) = a ^ 0 = a . Помните, чем b сейчас a .
- a = a ^ b . На основании 1 a заменяется на, a ^ b а на основе 2 b заменяется на a . Итак a = (a ^ b) ^ a = b ^ (a ^ a) = b ^ 0 = b . Переменная a становится b .
Если объяснение кажется вам сложным, не стесняйтесь его пропустить. Свойства побитового XOR ( n ^ n = 0 и n ^ 0 = n ), состоящего из трех назначений, позволяют менять местами значения a и b .
Обмен переменных с помощью побитового оператора XOR имеет ограничения: вы можете менять местами только целые числа.
5. Вывод
JavaScript предлагает множество хороших способов обмена переменными с дополнительной памятью и без нее.
Первый способ, который я рекомендую для повседневного использования, — это перестановка переменных путем применения деструктурирующего присваивания [a, b] = [b, a] . Это короткий и выразительный подход.
Второй способ использует временную переменную. Это хорошая альтернатива подходу деструктурирования присваивания.
Третий способ, использующий сложение и вычитание, не использует дополнительных переменных или памяти. Однако подход ограничен заменой только целых чисел.
Точно так же четвертый подход с использованием побитового XOR не использует дополнительную память. Но опять же, вы можете поменять местами только целые числа.
4 способа обмена значений между переменными в JavaScript
От автора: многие алгоритмы требуют обмена значениями между двумя переменными. Во время собеседования по кодированию вас могут спросить: «Как обменять значения между 2 переменными без временной переменной?».
Полезно знать несколько способов обмена значениями между переменными. В этом посте вы прочитаете о 4 способах обмена (2 их которые используют дополнительную память и 2 не используют).
1. Деструктурирующее присваивание
Деструктурирующее присваивание (функция ES2015 ) позволяет извлекать элементы массива в переменные. Например, следующий код деструктурирует массив:
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
[a, b] = [1, 2, 3] является деструктурирующим присваиванием, которое деструктурирует массив [1, 2, 3]. Переменной a присваивается первый элемент 1 из [1, 2, 3], соответственно, b присваивается второй элемент 2.
Зная, как деструктурировать массив, мы можем легко использовать это для обмена переменных. Давайте поменяем местами значения переменных a и b, используя деструктурирующее присваивание:
[a, b] = [b, a] является деструктурирующим присваиванием, которое меняет местами значения переменных a и b. На первом этапе, справа от деструктурирования, создается временный массив [b, a] (который оценивается, как [2, 1]).
После этого происходит деструктурирование временного массива: [a, b] = [2, 1]. Переменной a присваивается 2, и b присваивается 1. Обмен значений a и b был выполнен.
Мне нравится подход деструктурирования, потому что он короткий и выразительный: обмен значениями выполняется всего за один оператор. Работает с любым типом данных: числа, строки, логические значения, объекты.
Я рекомендую менять значения между переменными с использованием присваивания в большинстве случаев.
2. Временная переменная
Обмен значениями между переменными с использованием временной переменной является классическим. Как следует из названия, этот подход требует дополнительной временной переменной. Давайте поменяем значения между переменными a и b, используя временную переменную temp:
Temp — это временная переменная. На первом шаге temp присваивается значение a. Затем переменной a присваивается значение b. Наконец, переменной b присваивается значение temp (имеющей начальное значение a).
Обмен значениями с использованием временной переменной работает с любыми типами значений, такими как числа, строки, логические значения, объекты.
Недостатком этого подхода является необходимость в специальной временной переменной, плюс замена происходит в 3 оператора.
3. Сложение и вычитание
Вы можете обменять значения между переменными без использования дополнительной памяти (например, временного массива или переменной).
В следующем примере переменные a и b меняются значениями, используются арифметические операторы сложения + и вычитания -:
Изначально a равно 1, а b равно 2. Давайте посмотрим, как выполняется обмен:
a = a + b присваиваем a значение 1 + 2.
b = a – b присваивает b значение 1 + 2 — 2 = 1 (b сейчас равно 1).
a = a – b присваивает a значение 1 + 2 — 1 = 2 (a сейчас равно 2).
В конце у нас a равно 2, а b равно 1. Обмен между a и b выполнен. Хотя этот подход не использует временные переменные, он имеет значительные ограничения.
Во-первых, вы можете поменять местами только целые числа. Во-вторых, помните о лимите при выполнении сложения на первом шаге a = a + b (сумма должна быть меньше, чем Number.MAX_SAFE_INTEGER).
4. Побитовый оператор XOR
Оператор XOR оценивается как true, если операнды отличаются. Как напоминание, вот таблица значений для XOR:
В JavaScript побитовый оператор XOR n1 ^ n2 выполняет операцию XOR для каждого бита чисел n1 и n2. Например, 5 ^ 7 оценивается 2:
Побитовый оператор XOR имеет 2 интересных свойства:
n ^ n = 0: XOR, выполняемый для того же числа, дает 0
n ^ 0 = n: XOR, выполняемый для числа и ноля, дает то же число
Эти свойства XOR можно использовать для обмена значений между переменными. Давайте посмотрим, как обменять значения a и b:
Вот объяснение, почему работает обмен:
b = a ^ b, на основании 1. a заменяется на a ^ b. Таким образом b = (a ^ b) ^ b = a ^ (b ^ b) = a ^ 0 = a. Помним, что b сейчас равно a.
a = a ^ b, на основании 1. a замещено a ^ b, и на основе 2. b замещено a. Таким образом a = (a ^ b) ^ a = b ^ (a ^ a) = b ^ 0 = b. Переменная a становится b.
Если вы находите это объяснение сложным, можете его пропустить. Свойства побитового оператора XOR ( n ^ n = 0 и n ^ 0 = n), составленные в 3 присваиваниях, позволяют менять a и b.
Обмен значений между переменными с использованием побитового оператора XOR имеет ограничения: вы можете менять только целые числа.
Заключение
JavaScript предлагает множество способов обмена значениями между переменными с использованием дополнительной памяти и без.
Первый способ, который я рекомендую для ежедневного использования, — это замена переменных с помощью деструктурирующего присваивания [a, b] = [b, a]. Это короткий и выразительный подход.
Второй способ — использовать временную переменную. Это хорошая альтернатива подходу деструктурирования.
Третий способ, использующий сложение и вычитание, не предполагает использования дополнительных переменных или памяти. Однако этот подход ограничен только целыми числами.
Точно так же, четвертый подход с использованием побитового оператора XOR не использует дополнительную память. Но, опять же, вы ограничены только целыми числами. Какой ваш предпочтительный способ обмена значений между переменными?
Автор: Dmitri Pavlutin
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
JavaScript переменные
Одним из ключевых моментом при программировании на любом языке являются переменные. И JavaScript не стал исключением из этого правила, и переменные в JavaScript являются основным инструментом при написании скриптов. И в этой статье я собираюсь Вас научить создавать, инициализировать и использовать переменные.
Давайте напишем заготовку для программы на языке JavaScript, и уже потом будем создавать переменные:
<script language = ‘javascript’>
</script>
Это заготовка, о которой я уже говорил в прошлой статье. Теперь создадим переменную. Переменные создаются с помощью ключевого слова «var«. После этого ключевого слова идёт имя переменной. В принципе, серьёзных ограничений на имя переменной нет, однако есть определённые правила:
1) Переменная не может состоять только из одних цифр.
2) Переменная не должна содержать пробельных символов.
3) Переменная не может быть ключевым словом (например, нельзя назвать переменную «var«).
4) Переменная не может содержать различные спецсимволы (кавычки, апострофы, восклицательный и вопросительный знаки, точка, запятая и прочее), однако, дефис и знак подчёркивания использовать можно.
После определения имени переменной можно её инициализировать, и через знак «=» написать её значение.
Вот пример создания и инициализации переменной.
В этом примере создаётся переменная с именем «x«, которой присваивается значение «5«.
Теперь создадим ещё одну переменную в JavaScript скрипте, которой присвоим значение переменной «x» + 1.
В примере выше мы создали переменную «y«, у которой значение переменной «x» + 1, то есть в нашем случае — это «6«. Разумеется, помимо операции сложения, есть также и операции вычитания (—), умножения (*) и деления (/). Поэтому Вы можете попрактиковаться, создавая новые переменные в JavaScript и меняя их значения. Также мы можем поменять значение переменной таким образом:
В данной строке мы переменной «x» присвоили новое значение — «6«. Соответственно, старое значение стёрлось. Также мы можем изменять значение переменной относительно её первоначального значения. Делается это так:
Здесь мы переменную «x» увеличили на «3» и записали полученное значение в переменную «x«. Также есть сокращённая запись (ввиду того, что это действие используется регулярно):
Это запись эквивалентная предыдущему примеру. Часто увеличение переменной идёт на «1«. Конечно, мы можем написать так:
Но для этого очень часто используемого действия используется другая операция — инкремент, которая записывается таким образом:
Вот и всё, что хотелось написать о создании и инициализации переменных в языке JavaScript. Теперь поговорим о выводе переменных в окно браузера. Выводить их можно, например, используя функцию document.write(), передав в качестве параметра имя переменной:
Теперь Вы можете всё это собрать в кучу (постарайтесь это сделать) и узнать, чему после всех этих операций равняется переменная «x«.
В следующей статье по JavaScript мы поговорим о типах переменных.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 6 ):
<html> <head> </head> <body> <script type="text/javascript"> var x,y ,z; x = prompt("Введите первое число:"); y = prompt("введите второе число:"); z = (x) + (y); alert(z); </script> </body> </html> Здравствуйте, вот есть такой код почему не выполняется сложение чисел а просто происходит сложение строк? например если ввести первое и второе число 2 и 2 получиться 22, а не 4.
Потому что у Вас складываются строки, а не числа. Преобразуйте их вот так Number(x) + Number(y)
Спасибо за помощь)
А так-же можно перед каждым prompt ставить "+", то есть +prompt, я думаю так тоже будет работать?
А так же, не менее главное, имя переменной не может начинаться с цифры. В прочем, это во всех языках программирования так.. Вроде бы..
x равен 15 — правильно? ))
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.