Прості правила округлення в javascript. Вивчаємо методи і застосовуємо на практиці. Об'єкт Math в javascript - Методи round, ceil і floor - Округлення дрібних чисел Javascript дробові числа

Привіт, любителі JavaScript-а. Ви вже помітили, що ця мова дуже неординарний і в кожному розділі виділяється своїми особливостями і незвичайними технічними рішеннями. Тому сьогоднішня публікація присвячується темі: «JavaScript округлення».

Після прочитання поточної статті ви дізнаєтеся, для чого необхідно округляти числа, які методи і властивості в js виконують цю функцію, а також ніж виділяється поділ на 0. Не зраджуючи своїм принципам, я прикріплений приклади до ключових моментів матеріалу і докладно розпишу кожна дія. А тепер давайте приступати до навчання!

Важливі замітки про числах

Для початку запам'ятайте, що в js всі види чисел (дробові і цілі) відносяться до типу Number. До того ж всі вони 64-бітові, так як зберігаються в форматі «double precision», який також відомий під стандартом IEEE-754.

Створюються чисельні змінні звичним способом:

var numb = 35; // натуральне число

var drob = 0.93; // десяткове подання

var numb16 = 0xFF; // 16-річної системі числення

Підтримує і інші числові уявлення. Так, ще можна створювати числа з плаваючою точкою (їх ще іноді називають «числа в науковому форматі»).

В з'явилася підтримка дуже цікавого методу toLocaleString (), Який форматує всі числові параметри по специфікаціям, прописаним в ECMA 402. Завдяки цьому великі числа, телефонні номери, Валюти і навіть відсотки красиво виводяться в діалоговому вікні.

var num = 714000.80;

alert (num.toLocaleString ());

Для роботи з елементами типу Number був передбачений цілий глобальний об'єкт з купою всіляких математичних функцій, ім'я якого Math.

Крім цього, існують і інші методи, які виконують округлення числових значень до цілих чисел, до десятих, сотих і т.д. Розглянемо їх все докладніше.

Великий і могутній Math

Глобальний об'єкт Math включає в себе величезну кількість різноманітних математичних і тригонометричних функцій. Це дуже потрібний об'єкт і часто виручає розробників при роботі з цифровими даними.

На інших платформах існують аналогії Math. Наприклад, в таких популярних мовах, як Java і C #, Math є клас, який підтримує всі ті ж стандартні функції. Так що як бачите цей інструмент дійсно великий і могутній.

Тепер я хочу пройтися по конкретним методам, які відповідають за округлення, і докладно про них розповісти.

Math.floor ()

почну з Math.floor. Зверніть увагу на найменування методу. Логічно стає зрозуміло, що раз мова йде про округлення, а дослівний переклад слова «floor» означає «стать», то даний інструмент округлити оброблювані значення в меншу сторону.

Також можливий варіант, коли оброблене число за допомогою цієї функції не змінився. Все тому, що округлення здійснюється по нестрогому нерівності (<=). Таким образом, при отработке этой строчки кода:

alert (Math.floor (4.5));

у відповіді буде число 4.

Math.ceil ()

Знову-таки подивіться на назву (в такий спосіб матеріал швидше засвоюється). Якщо хтось не знає, то «ceil» означає «стелю». Значить округлення числових даних буде здійснюватися в більшу сторону, використовуючи Нечитка нерівність (> =).

alert (Math.ceil (4.5));

Як ви вже здогадалися, у відповіді буде число 5.

Math.round ()

Даний метод округлює дробове число до найближчого цілого. Так, якщо дрібна частина знаходиться в діапазоні від 0 і до 0.5 НЕ включно, то округлення відбувається до меншого значення. А якщо дрібна частина знаходиться в діапазоні від включно 0.5 і до наступного цілого числа, то вона округлюється до більшого цілого.

alert (Math.round (4.5));

Сподіваюся, все подумали або сказали правильну відповідь - 5.

Ще трохи методів

В JavaScript також є і інші 2 методу, які займаються округленням числових уявлень. Однак вони дещо відрізняються.

Йтиметься про таких інструментах, як toFixed ()і toPrecision (). Вони відповідають не просто за округлення, а за її точність до певних знаків. Давайте покопаємо глибше.

toFixed ()

За допомогою даного механізму можна вказувати, до скількох знаків після коми потрібно округлити значення. Метод повертає результат у вигляді рядка. Нижче я прикріпив варіант з трьома різними варіантами. Проаналізуйте отримані відповіді.

var num = 5656.9393;

document.writeln (num.toFixed ()); // 5657

document.writeln (num.toFixed (2)); // 5656.94

document.writeln (num.toFixed (7)); // 5656.9393000

Як видно, якщо не вказати аргументу, то toFixed ()) округлити дробове значення до цілогочисла. У третьому рядку виконано округлення до 2-знаків,а в четвертій - через параметра «7» було дописано ще три 0.

toPrecision ()

Даний метод діє трохи інакше. На місці аргументу можна залишити як пусте місце, так і встановити параметр. Однак останній буде округляти числа до зазначеної кількості цифр, не звертаючи уваги на кому. Ось які результати видала програма, переписана з минулого прикладу:

var num = 5656.9393;

document.writeln (num.toPrecision ()); // 5656.9393

document.writeln (num.toPrecision (2)); // 5.7e + 3

document.writeln (num.toPrecision (7)); // 5656.939

Особливість розподілу на 0 в js

Як відомо з уроків з математики, ділити на нуль не можна. Це правило взяли за основу більшість творців мов програмування. Тому при розподілі на нуль всі програми видають помилку.

Однак JavaScript відзначився і тут. Так, під час виконання такої операції ніяких повідомлень про баг не виникає ... тому що така операція повертає «Infinity»!

Чому ж так? Як відомо з тих же математичних наук, чим менше дільник, тим в результаті виходить більше число. Саме тому творці даного прототипна-орієнтованої мови вирішили відмовитися від шаблонів і піти своїм шляхом.

Для тих, хто вперше стикається зі значенням Infinity, нижче я пояснив його особливості.

Infinity - означає нескінченність і повністю відповідає математичного знаку ∞.

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

alert (12/0); // Infinity

alert (12.34 / 0); // Infinity

alert (-3 / 0); // -Infinity

На цьому, мабуть, і закінчу. Якщо вам сподобалася публікація, то обов'язково підписуйтесь на мій блог. Чи не скупіться посиланням на цікаві статті та діліться ними з друзями. Бувай!

Часто результатом розрахунків буває число з великою кількістю знаків після коми. Якщо це число буде використано для подальших розрахунків, то його можна залишити в такому вигляді. Але іноді потрібно округлення числа, наприклад для виведення на сторінку. В JavaScript округлення чисел здійснюється декількома методами.

Метод Math.round () округлює значення до цілого числа.

Math.round (число)

Округлення числа проводиться за математичними правилами. Тобто, якщо після коми йде цифра від 0 до 4, то дрібна частина просто відкидається. А якщо після коми йде цифра від 5 до 9, то дробрая частина відкидається, а до цілої частини додається одиниця. приклад:

JavaScript:

Є ще два методи, які округлюють число до цілого значення. Метод Math.floor () округлює в меншу сторону. Він відкидає дробову частину числа. А метод Math.ceil () округлює в більшу сторону. Він відкидає дробову частину, а до цілої частини додає одиницю. приклад:

Звичайно, 5 - (-2) це 5 + 2. Чи не завбивайте, що число 5 Ви в цій формулі не отримаєте. Максимальна буде 4.999999999. Отримані значення можна округлити до потрібної точності.

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

ціле число = Math.floor (мінімум + Math.random () * (максимум + 1 - мінімум)

Виведемо числа від 10 до 15:

20
21
22
23
24

for (i = 1; i<=10; i++) { rand = Math.floor(10 + Math.random() * (15 + 1 - 10)); console.log(rand); }

Порівняння дробових чисел

У математичних обчислень є одна особливість - їх результат не завжди абсолютно точний. Це проблема не тільки JavaScript, але і більшості мов програмування. Так відбувається тому, що числа й інші дані переводяться в двійковий код, і тільки потім з ними проводяться обчислення. У більшості випадків це не призводить до особливих труднощів, просто в результаті розрахунків іноді виходить число з великою кількістю знаків після коми. Але є ситуація, коли неточність обчислень впливає на роботу програми. Це порівняння чисел. Якщо порівнюються різні числа, то тут все повинно бути нормально.

5.1 < 5.2

Але якщо при обчисленні виходять два однакових дрібних числа, то результат їх порівняння не передбачуваний. Вони можуть бути рівні, або одне може бути більше іншого. Коли в скрипті використовується таке порівняння, то потрібно перевіряти, чи правильно працює скрипт. Якщо в ньому є помилка, то потрібно округляти значення, які порівнюються.

Решта математичні методи

Є досить багато методів для різних математичних обчислень. Вони прості і не вимагають додаткових роз'яснень. Методи, які часто використовуються, перераховані в наступній таблиці:

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

Часто обчислення дають результати, які не відповідають межам потрібних діапазонів. В результаті потрібно здійснювати JavaScript округленнядо певного значення.

Для чого округляти числа?

JavaScript не зберігає цілі числа, оскільки їх значення представлені у вигляді цифр з плаваючою точкою. Багато дробу не можуть бути представлені числом з визначеним кінцевим кількістю знаків після коми, тому JavaScript може генерувати результати, на зразок наведеного нижче:

0.1 * 0.2; > 0.020000000000000004

На практиці це не матиме ніякого значення, оскільки мова йде про похибки в 2 квінтіліонние. Але це може відбитися на результаті при роботі з числами, які представляють значення валют, відсотків або розмір файлу. Тому потрібно зробити або до певного знака після коми.

Округлення десяткових чисел

Щоб «обрізати» десяткове число, використовуються методи toFixed () або toPrecision (). Вони обидва приймають один аргумент, який визначає кількість значущих і знаків після коми, які повинні бути включені в результат:

  • якщо для toFixed () аргумент не визначений, значення за замовчуванням дорівнює 0, тобто без знаків після коми; максимальне значення аргументу дорівнює 20;
  • якщо для toPrecision () аргумент не заданий, число не змінюється.

var randNum = 6.25; randNum.toFixed (); > "6" Math.PI.toPrecision (1); > "3" var randNum = 87.335; randNum.toFixed (2); > "87.33" var randNum = 87.337; randNum.toPrecision (3); > "87.3"

Примітка

І toFixed (), і toPrecision повертають округлене рядкове представлення результату, а не число. Це означає, що додаток rounded до randNum в результаті дасть конкатенацію рядків, а не одне число:

console.log (randNum + rounded); > "6.256"

Якщо потрібно отримати в результаті JavaScript округлення до сотих число, використовуйте parseFloat ():

var randNum = 6.25; var rounded = parseFloat (randNum.toFixed (1)); console.log (rounded); > 6.3

toFixed () і toPrecision () також є корисними методами для усічення великої кількостізнаків після коми. Це зручно при роботі з числами, що представляють грошові одиниці:

var wholeNum = 1 var dollarsCents = wholeNum.toFixed (2); console.log (dollarsCents); > "1.00"

Зверніть увагу, що якщо в числі більше знаків, ніж задано параметром точності, toPrecision видаватиме результат в науковому форматі:

var num = 123.435 num.toPrecision (2); > "1.2e + 2"

Як уникнути помилок при округленні десяткових дробів

У деяких випадках toFixed і toPrecision здійснюють JavaScript округлення 5 в меншу сторону, А не до більшого:

var numTest = 1.005; numTest.toFixed (2); > 1;

Результатом наведеного вище прикладу має бути 1.01, а не 1. Якщо потрібно уникнути цієї помилки, я рекомендую використовувати експоненціальні числа:

function round (value, decimals) (return Number (Math.round (value + "e" + decimals) + "e -" + decimals);)

застосування:

round (1.005,2); > 1.01

Якщо потрібно ще надійніше рішення, ніж округлення, воно є на MDN.

Округлення за допомогою Епсілон

альтернативний метод JavaScript округлення до десятихбув введений в ES6 ( також відомому, як JavaScript 2015). « машинний епсилон»Забезпечує розумну межу похибки при порівнянні двох чисел з плаваючою комою. Без округлення, порівняння можуть дати результати, подібні наступним:

0.1 + 0.2 === 0.3> false

Math.EPSILON може бути використаний в функції для отримання коректного порівняння:

function epsEqu (x, y) (return Math.abs (x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }

Функція приймає два аргументи: Один містить обчислення, другий очікуваний (округлений) результат. Вона повертає порівняння цих двох параметрів:

epsEqu (0.1 + 0.2, 0.3)> true

Всі сучасні браузери підтримують математичні функції ES6. Але якщо необхідно забезпечити підтримку в старих браузерах, то потрібно використовувати поліфілли.

Усічення десяткових чисел

Всі методи, представлені раніше, виконують JavaScript округлення до десятих. Щоб відсікти позитивне число до двох знаків після коми, помножити його на 100, усікти знову, а потім отриманий результат розділити на 100, потрібно:

function truncated (num) (return Math.trunc (num * 100) / 100;) truncated (3.1416)> 3.14

Якщо потрібно щось більш гнучке, можна скористатися побітовим оператором:

function truncated (num, decimalPlaces) (var numPowerConverter = Math.pow (10, decimalPlaces); return ~~ (num * numPowerConverter) / numPowerConverter;)

Використання:

var randInt = 35.874993; truncated (randInt, 3); > 35.874

Округлення до найближчого числа

щоб здійснити JavaScript округлення до цілого, Використовується Math.round ():

Math.round (4.3)> 4 Math.round (4.5)> 5

Зверніть увагу, що " половинні значення«, Такі як .5, округлюються вгору.

Округлення вниз до найближчого цілого числа

Якщо ви хочете округляти в меншу сторону, використовуйте метод Math.floor ():

Math.floor (42.23); > 42 Math.floor (36.93); > 36

Округлення «вниз» має один напрямок для всіх чисел, в тому числі і для негативних. Це можна уявити, як хмарочос з безліччю поверхів, в тому числі і нижче рівня фундаменту ( представляють негативні числа). Якщо ви перебуваєте в ліфті між підвальними поверхами 2 і 3 ( що відповідає значенню -2.5), Math.floor доставить вас на поверх -3:

Math.floor (-2.5); > -3

Якщо ви хочете уникнути цього, використовуйте JavaScript Math округлення за допомогою Math.trunc (), підтримуваний у всіх сучасних браузерах(крім IE / Edge):

Math.trunc (-41.43); > -41

MDN також надає поліфілл з трьох рядків для забезпечення підтримки Math.trunc в старих браузерах і IE / Edge.

Округлення вгору до найближчого цілого числа

Якщо ви хочете округлити десяткові числа вгору, використовуйте Math.ceil. Дія цього методу також можна уявити, як нескінченний ліфт: Math.ceil завжди щастить вас «вгору«, незалежно від того, чи є число негативним або позитивним:

Math.ceil (42.23); > 43 Math.ceil (36.93); > 37 Math.ceil (-36.93); -36

Округлення до найближчого кратного числа

Якщо потрібно округлити значення до найближчого числа, кратного 5, створіть функцію, яка ділить число на 5, округлює його, а потім множить результат на те ж значення:

function roundTo5 (num) (return Math.round (num / 5) * 5;)

Використання:

roundTo5 (11); > 10

Якщо потрібно виконати JavaScript округлення до двох знаків, можна передавати функції, як початкове число, так і кратність:

function roundToMultiple (num, multiple) (return Math.round (num / multiple) * multiple;)

Щоб використовувати функцію, включіть в її виклик округляти число і кратність:

var initialNumber = 11; var multiple = 10; roundToMultiple (initialNumber, multiple); > 10;

Щоб округляти значення тільки в більшу або меншу сторону замініть в функції round на ceil або floor.

Прив'язка до діапазону

Іноді потрібно отримати значення х, яке повинно знаходитися в межах певного діапазону. Наприклад, потрібно значення від 1 до 100, але ми отримуємо значення 123. Щоб виправити це, можна використовувати min () ( повертає найменше із чисел) І max ( повертає максимально допустиму кількість).

Використання:

var lowBound = 1; var highBound = 100; var numInput = 123; var clamped = Math.max (lowBound, Math.min (numInput, highBound)); console.log (clamped); > 100;

Можна створити функцію або розширення класу Number.

Дуже часто обчислення в JavaScript дають не зовсім ті результати, які ми хочемо. Зрозуміло, ми можемо робити з числами що завгодно - округляти в більшу або меншу сторону, встановлювати діапазони, відсікати непотрібні числа до певної кількості знаків після коми, все залежить від того, що ви хочете зробити в подальшому з цим числом.

Навіщо необхідно округлення?

Одним з цікавих аспектів JavaScript є те, що він насправді не зберігає цілі числа, ми відразу ж працюємо з числами з плаваючою точкою. Це, в поєднанні з тим фактом, що багато дробові значення не можуть бути виражені кінцевим числом знаків після коми, в JavaScript ми можемо отримати такі результати:

0.1 * 0.2; > 0.020000000000000004 0.3 - 0.1 > 0.19999999999999998
Для практичних цілей ця неточність не має ніякого значення, в нашому випадку ми говоримо про помилку в квінтильйон частках, проте, кого-то це може розчарувати. Ми можемо отримати дещо дивний результат і при роботі з числами, які представляють собою значення валют, відсотків або розмірів файлу. Для того, щоб виправити ці неточності, нам якраз і необхідно вміти округляти результати, при цьому досить встановити десяткову точність.

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

Округлення десяткових чисел

Для того, щоб відсікти десяткове число, використовуйте toFixed або метод toPrecision. Обидва вони приймають єдиний аргумент, який визначає, відповідно, скільки значущих цифр (тобто загальна кількість цифр, які використовуються в числі) або знаків після коми (кількість після десяткового дробу) повинен включати в себе результат:
  1. Якщо аргумент не визначений для toFixed (), то за замовчуванням він буде дорівнює нулю, що означає 0 знаків після коми, аргумент має максимальне значення, рівне 20.
  2. Якщо аргумент не заданий для toPrecision, число залишається недоторканим
let randNum = 6.25; randNum.toFixed (); > "6" Math.PI.toPrecision (1); > "3" randNum = 87.335; randNum.toFixed (2); > "87.33" randNum = 87.337; randNum.toPrecision (3); > "87.3"
Обидва методи toFixed () і toPrecision () повертають строкове представлення результату, а не число. Це означає, що при підсумовуванні округленого значення з randNum буде проведена конкатенація рядків, а не сума чисел:

Let randNum = 6.25; let rounded = randNum.toFixed (); // "6" console.log (randNum + rounded); > "6.256"
Якщо ви хочете, щоб результат мав числовий тип даних, то вам необхідно буде застосувати parseFloat:

Let randNum = 6.25; let rounded = parseFloat (randNum.toFixed (1)); console.log (rounded); > 6.3
Зверніть увагу, що значення 5 округлені, за винятком рідкісних випадків.

Методи toFixed () і toPrecision () є корисними, бо вони можуть не тільки відсікати дробову частину, а й доповнювати знаки після коми, що зручно при роботі з валютою:

Let wholeNum = 1 let dollarsCents = wholeNum.toFixed (2); console.log (dollarsCents); > "1.00"
Коштувати зверніть увагу, що toPrecision буде давати результат в експоненційної запису, якщо число цілих чисел більше, ніж сам сама точність:

Let num = 123.435 num.toPrecision (2); > "1.2e + 2"

Як уникнути помилок округлення з десятковими числами

У деяких випадках, toFixed і toPrecision округлює значення 5 в меншу сторону, а в більшу:

Let numTest = 1.005; numTest.toFixed (2); > "1.00"
Результат розрахунку вище повинен був бути 1.01, а не 1. Якщо ви хочете уникнути подібної помилки, ми можемо використовувати рішення, запропоноване Jack L Moore, яке використовує експоненціальні числа для розрахунку:

Function round (value, decimals) (return Number (Math.round (value + "e" + decimals) + "e -" + decimals);)
тепер:

Round (1.005,2); > 1.01
Якщо ви хочете більш надійне рішення, ніж рішення показане вище, ви можете перейти на MDN.

Машинне епсилон округлення

Альтернативний метод округлення десяткових чисел був введений в ES6. Машинне епсилон округлення забезпечує розумну межу похибки при порівнянні двох чисел з плаваючою точкою. Без округлення, порівняння можуть дати результати, подібні наступним:

0.1 + 0.2 === 0.3> false
Ми використовуємо Math.EPSILON в нашій функції для отримання коректного порівняння:

Function epsEqu (x, y) (return Math.abs (x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
Функція приймає два аргументи: перший - поточний розрахунок, другий - очікуваний результат. Вона повертає порівняння двох:

EpsEqu (0.1 + 0.2, 0.3)> true
Всі сучасні браузери вже підтримують ES6 математичні функції, але якщо ви хочете отримати підтримку в таких браузерах, як IE 11, використовуйте polyfills.

Відсікання дробової частини

Всі методи, представлені вище вміють округляти до десяткових чисел. Для того, щоб просто відсікти число до двох знаків після коми, необхідно спочатку помножити його на 100, а потім отриманий результат вже розділити на 100:

Function truncated (num) (return Math.trunc (num * 100) / 100;) truncated (3.1416)> 3.14
Якщо ви хочете пристосувати метод під будь-яку кількість знаків після коми, ви можете скористатися подвійним побітовим запереченням:

Function truncated (num, decimalPlaces) (let numPowerConverter = Math.pow (10, decimalPlaces); return ~~ (num * numPowerConverter) / numPowerConverter;)
тепер:

Let randInt = 35.874993; truncated (randInt, 3); > 35.874

Округлення до найближчого числа

Для того, щоб округлити десяткове число до найближчого числа в більшу або в меншу сторону, в залежності від того, до чого ми ближче за все, використовуйте Math.round ():

Math.round (4.3)> 4 Math.round (4.5)> 5
Зверніть увагу, що «половина значення», 0.5 округляється в більшу сторону за правилами математики.

Округлення до меншого до найближчого цілого числа

Якщо ви хочете завжди округляти в меншу сторону, використовуйте Math.floor:

Math.floor (42.23); > 42 Math.floor (36.93); > 36
Зверніть увагу, що округлення в меншу сторону працює для всіх чисел, в тому числі і для негативних. Уявіть хмарочос з безліччю поверхів, в тому числі з поверхами нижнього рівня (що представляє негативні числа). Якщо ви перебуваєте в ліфті на нижнім рівнем між 2 і 3 (що представляє собою значення -2.5), Math.floor доставить вас до -3:

Math.floor (-2.5); > -3
Але якщо ви хочете уникнути подібної ситуації, Використовуйте Math.trunc, підтримуваний у всіх сучасних браузерах (крім IE / Edge):

Math.trunc (-41.43); > -41
На MDN ви знайдете polyfill, який забезпечить підтримку Math.trunc в браузерах і IE / Edge.

Округлення до більшого до найближчого цілого числа

З іншого боку, якщо вам потрібно завжди округляти в більшу сторону, використовуйте Math.ceil. Знову ж, згадуємо нескінченний ліфт: Math.ceil завжди буде йти «вгору», незалежно від того, чи є число негативне чи ні:

Math.ceil (42.23); > 43 Math.ceil (36.93); > 37 Math.ceil (-36.93); > -36

Округлення до більшого / меншого необхідного числа

Якщо ми хочемо, щоб округлити до найближчого числа, кратного 5, найпростіший спосіб створити функцію, яка ділить число на 5, округлює його, а потім множить його на ту ж суму:

Function roundTo5 (num) (return Math.round (num / 5) * 5;)
тепер:

RoundTo5 (11); > 10
Якщо ви хочете округляти до кратних своїм значенням, ми використовувати більш загальну функцію, передаючи в неї початкове значення і кратне:

Function roundToMultiple (num, multiple) (return Math.round (num / multiple) * multiple;)
тепер:

Let initialNumber = 11; let multiple = 10; roundToMultiple (initialNumber, multiple); > 10;

Фіксування числа в діапазоні

Є багато випадків, коли ми хочемо отримати значення х, що лежить в межах діапазону. Наприклад, нам може знадобитися значення від 1 до 100, але при цьому ми отримали значення 123. Для того, щоб виправити це, ми можемо використовувати мінімальну (повертає найменше із набору чисел) і максимальне (повертає найбільше з будь-якого безлічі чисел). У нашому прикладі, діапазон від 1 до 100:

Let lowBound = 1; let highBound = 100; let numInput = 123; let clamped = Math.max (lowBound, Math.min (numInput, highBound)); console.log (clamped); > 100;
Знову ж таки, ми можемо перевикористати операцію і обернути все це в функцію, скористаємося рішенням запропоноване Daniel X. Moore:

Number.prototype.clamp = function (min, max) (return Math.min (Math.max (this, min), max););
тепер:

NumInput.clamp (lowBound, highBound); > 100;

Гаусове округлення

Гаусове округлення, також відоме як банківське округленням, полягає в тому, що округлення для цього випадку відбувається до найближчого парному. Цей метод округлення працює без статистичної похибки. Найкраще рішеннябуло запропоновано Tim Down:

Function gaussRound (num, decimalPlaces) (let d = decimalPlaces || 0, m = Math.pow (10, d), n = + (d? Num * m: num) .toFixed (8), i = Math.floor (n), f = n - i, e = 1e-8, r = (f> 0.5 - e && f< 0.5 + e) ? ((i % 2 == 0) ? i: i + 1) : Math.round(n); return d ? r / m: r; }
тепер:

GaussRound (2.5)> 2 gaussRound (3.5)> 4 gaussRound (2.57,1)> 2.6
Десятковий знак в CSS:

Так як JavaScript часто використовується для створення позиційного перетворення HTML-елементів, ви можете задатися питанням, що станеться, якщо ми cгенеріруем десяткові значення для наших елементів:

#box (width: 63.667731993px;)
Гарна новина полягає в тому, що сучасні браузери будуть враховувати десяткові значення в блокової моделі, в тому числі в процентних або піксельних одиницях виміру.

Сортування

Дуже часто нам доводиться сортувати будь-які елементи, наприклад, у нас є масив ігрових рекордів, при цьому вони повинні бути організовані за зменшенням рангу гравців. На жаль, стандартний метод sort () має деякі дивовижні обмеження: він добре працює з часто вживаними англійськими словами, але відразу ж ламається при зустрічі з числами, унікальними символами або словами в верхньому регістрі.

Сортування в алфавітному порядку

Здавалося б, сортування масиву за алфавітом повинна бути найпростішою завданням:

Let fruit = [ "butternut squash", "apricot", "cantaloupe"]; fruit.sort (); > "Apricot", "butternut squash", "cantaloupe"]
Проте ми стикаємося з проблемою, як тільки один з елементів знаходиться в верхньому регістрі:

Let fruit = [ "butternut squash", "apricot", "Cantalope"]; fruit.sort (); > "Cantaloupe", "apricot", "butternut squash"]
Це пов'язано з тим, що, за замовчуванням, сортувальник порівнює перший символ представлений в Unicode. Unicode - це унікальний код для будь-якого символу, незалежно від платформи, незалежно від програми, незалежно від мови. Наприклад, якщо дивитися по кодової таблиці символ «a» має значення U + 0061 (в шістнадцятковій системі 0x61), в той час як символ «C» має код U + 0043 (0x43), який йде раніше в Unicode-таблиці, ніж символ «a».

Щоб впорядкувати масив, який може містити змішані регістри перших букв, нам необхідно або перетворити всі елементи тимчасово в нижній регістру, або визначити свій порядок сортування за допомогою методу localeCompare () c деякими аргументами. Як правило, для такого випадку, краще відразу створити функцію для багаторазового використання:

Function alphaSort (arr) (arr.sort (function (a, b) (return a.localeCompare (b, "en", ( "sensitivity": "base"));));) let fruit = [ "butternut squash "," apricot "," Cantaloupe "]; alphaSort (fruit)>
Якщо ви хочете отримати масив відсортований в зворотний алфавітному порядку, просто поміняйте позиціями а й b в функції:

Function alphaSort (arr) (arr.sort (function (a, b) (return b.localeCompare (a, "en", ( "sensitivity": "base"));));) let fruit = [ "butternut squash "," apricot "," Cantaloupe "]; alphaSort (fruit)> [ "Cantaloupe", "butternut squash", "apricot"]
Тут варто звернути увагу, що localeCompare використовується з аргументами, ще треба пам'ятати, що він підтримується IE11 +, для більш старих версій IE, ми можемо використовувати його без аргументів, і в нижньому регістрі:

Function caseSort (arr) (arr.sort (function (a, b) (return a.toLowerCase (). LocaleCompare (b.toLowerCase ());));) let fruit = [ "butternut squash", "apricot", "Cantaloupe"]; caseSort (fruit)> [ "apricot", "butternut squash", "Cantaloupe"]

числова сортування

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

Let highScores =; highScores.sort (); >
Справа в тому, що метод sort () виробляє лексикографічну порівняння: а це означає, що числа будуть перетворені в рядок і порівняння будуть знову проводитися шляхом зіставлення першого символу цього рядка в порядку символів Unicode-таблиці. Тому нам знову необхідно визначити свій порядок сортування:

Let highScores =; highScores.sort (function (a, b) (return a - b;)); >
Знову ж таки, для сортування чисел в зворотному порядку, поміняйте позиціями a і b в функції.

Сортування JSON-подібної структури

І нарешті, якщо у нас є JSON-подібна структура даних, представлена ​​як масив ігрових рекордів:

Let scores = [( "name": "Daniel", "score": 21768), ( "name": "Michael", "score": 33579), ( "name": "Alison", "score": 38395 )];
У ES6 +, ви можете використовувати стрілочні функції:

Scores.sort ((a, b) => b.score - a.score));
Для старих браузерів, які не мають таку підтримку:

Scores.sort (function (a, b) (return a.score - b.score));
Як бачите, сортування в JavaScript це досить не очевидно річ, я сподіваюся, що ці приклади полегшать як-небудь життя.

Робота зі статечними функціями

Піднесення до степеня - операція, спочатку визначається як результат багаторазового множення натурального числа на себе, квадратний корінь з числа a - число, що дає a при зведенні в квадрат. Цими функціями ми могли користуватися постійно в повсякденному житті на уроках математики, в тому числі при обчисленні площ, обсягів або навіть при фізичному моделюванні.

В JavaScript статечна функція представлена ​​як Math.pow (), в новому стандарті ES7 був представлений новий оператор піднесення до степеня - "* *".

Зведення в ступінь

Для того, щоб звести число в n-ую ступінь, потрібно скористатися функцією Math.pow (), де перший аргумент це число, яке буде зведено в ступінь, другий аргумент це показник ступеня:

Math.pow (3,2)> 9
Така форма запису означає 3 в квадраті, або 3 × 3, що призводить до результату 9. Можна навести ще приклад, звичайно:

Math.pow (5,3); > 125
Тобто, 5 в кубі, або 5 × 5 × 5, так само 125.

ECMAScript 7 - це наступна версія JavaScript, в принципі, ми можемо використовувати новий запропонований оператор піднесення до степеня - * *, така форма запису може бути більш наочної:

3 ** 2 > 9
на даний моментпідтримка цього оператора досить обмежена, тому його не рекомендується використовувати.

Степенева функція може стати в нагоді в самих різних ситуаціях. Простий приклад, обчислення кількості секунд в годині: Math.pow (60,2).

Квадратний і кубічний корінь

Math.sqrt () і Math.cbrt () протилежні функції Math.pow (). Як ми пам'ятаємо, квадратний корінь з числа a - число, що дає a при зведенні в квадрат.

Math.sqrt (9)> 3
У той же час кубічний корінь з числа a - число, що дає a при зведенні в куб.

Math.cbrt (125)> 5
Math.cbrt () був введений в специфікацію JavaScript зовсім недавно, і тому підтримується тільки в сучасних браузерах: Chrome 38+, Firefox і Opera 25+ та Safari 7.1+. Ви помітите, що Internet Explorerвідсутня в цьому списку, однак на MDN ви знайдете поліфілл.

приклади

Звичайно, ми можемо використовувати і не цілі значення в одній з цих функцій:

Math.pow (1.25, 2); > 1.5625 Math.cbrt (56.57)> 3.8387991760286138
Зверніть увагу, що це цілком собі працює і при використанні негативних значеннях аргументів:

Math.pow (-5,2)> 25 Math.pow (10, -2)> 0.01
Проте, для квадратного кореня це не буде працювати:

Math.sqrt (-9)> NaN
З математичного аналізу ми знаємо, що під уявним числом розуміють квадратні корені з від'ємних чисел. І це може привести нас до ще однієї техніці роботи з комплексними числами, але це вже інша історія.

Ви можете використовувати дробові значення в Math.pow (), щоб знайти квадратні і кубічні корені чисел. Квадратний коріньвикористовує показник 0.5:

Math.pow (5, 0.5); // = Math.sqrt (5) = 5 ** (1/2)> 2.23606797749979
Однак, через примхи з плаваючою точкою, ви не можете точно припустити правильний результат:

Math.pow (2.23606797749979,2)> 5.000000000000001
У таких ситуаціях, ви вам доведеться вдаватися до відсікання знаків у числа або округлення до будь-якого значення.

Деякі, з незрозумілих причин в JavaScript плутають функцію Math.pow () з Math.exp (), яка є експоненціальною функцією для чисел, в цілому. Примітка: в англійській мові «показник ступеня» перекладається як «exponent», тому це швидше відноситься до англомовним, хоча існують і альтернативні назви показника ступеня, такі як index, power.

математичні константи

Робота з математикою в JavaScript полегшується за рахунок ряду вбудованих констант. Ці константи є властивостями об'єкта Math. Варто звернути увагу, що константи пишуться у верхньому регістрі, а не CamelCase нотації.

Math.abs, parseInt, parseFloat

Робота з числами в JavaScript може бути куди більш складною, ніж здається. Отримані значення не завжди потрапляють всередину очікуваних діапазонів, іноді результат може виявитися зовсім не тим, що ми очікували.

Math.abs ()

Метод Math.abs () повертає абсолютне значення числа, що нагадує нам аналогічну математичну функцію модуля числа a.

Let newVal = -57.64; Math.abs (newVal); > 57.64
Math.abs (0) завжди повертає нуль, але якщо поставити знак мінус перед функцією -Math.abs (NUM) ми завжди будемо від'ємне значення.

Math.abs (0); > -0

parseInt ()

Ми знаємо, що JavaScript розуміє, що «15» це рядок, а не число і, наприклад, при розборі CSS-властивостей засобами JavaScript, або отримавши будь-яке значення з непідготовленого масиву, наші результати можуть вийти непередбачуваними. Ми могли отримати на вхід рядок представлену як «17px», і для нас це не є рідкістю. Питання полягає в тому, як перетворити цей рядок в фактичне значення і використовувати його в подальших розрахунках.

Синтаксис: parseInt (string, radix);

Функція parseInt перетворює перший переданий їй аргумент в строковий тип, інтерпретує його і повертає ціле число або значення NaN. Результат (якщо не NaN) є цілим числом і являє собою перший аргумент (string), розглядається як число в зазначеній системі числення (radix). Наприклад, підстава 10 вказує на перетворення з десяткового числа, 8 - вісімкового, 16 - шістнадцятирічного і так далі. Якщо основа більше 10, то для позначення цифр більше 9 використовуються букви. Наприклад, для шістнадцятирічних чисел (підстава 16) використовуються літери від A до F.

Розглянемо приклад роботи з CSS-властивостями, де, умовно кажучи, ми можемо отримати таке значення:

Let elem = document.body; let centerPoint = window.getComputedStyle (elem) .transformOrigin; > "454px 2087.19px"
Ми можемо розділити значення по прогалин:

Let centers = centerPoint.split ( ""); > [ "454px", "2087.19px"]
Однак, кожен елемент все ще є рядок, ми можемо позбутися цього застосувавши нашу функцію:

Let centerX = parseInt (centers, 10); > 454 let centerY = parseInt (centers, 10); > 2087
Як бачите, другим аргументом ми вказуємо систему числення, в яку буде перетворено число, цей параметр необов'язковий, але його рекомендується використовувати, в разі, якщо ви не знаєте який рядок надійде на вхід.

parseFloat ()

З прикладу вище, ви напевно помітили, що parseInt відкидає дробову частину. У нашому випадку, parseFloat вміє працювати з числами з плаваючою точкою. Знову ж таки, це може бути корисним при розборі CSS та інших завданнях, особливо при роботі з плаваючою точкою в процентах.

Синтаксис: parseFloat (string)

Let FP = "33.33333%"; console.log (parseFloat (FP)); > 33.33333
Зверніть увагу, що в синтаксисі parseFloat немає другого аргументу.

Ми розуміємо, що parseInt () і parseFloat () є надзвичайно корисними функціями, важливо враховувати, що і тут не обійтися без помилок, тому необхідно перевіряти діапазон очікуваних значень і в кінцевому рахунку аналізувати результат, щоб гарантувати, що отримані значення вірні.
Надіслати анонімно

Тепер розглянемо метод floor (В перекладі - пол), Який працює протилежно методу ceil, тобто він округлює дробове число в меншу сторону.

Як бачите, метод floor округлив число 35.97 до 35, тобто в меншу сторону. Незважаючи на те, що 0.97 більше 0.5 (Див.).

У цьому уроці були розглянуті методи об'єкта Math, що дозволяють округляти дробові десяткові числа.

Тепер потрібно виконати домашнє завдання.

Ваше завдання написати функцію, яка приймає два параметри.
1. Масив, що складається з чисел з дробом.
2. Метод округлення "round", "ceil" або "floor".

На виході функція повинна виводити цей же масив, але при цьому все елементи масиву, Повинні бути округлені з допомогою зазначеного в другому параметрі методу об'єкта Math.

Початковий масив:

var numberArray =;

Спочатку рішення цього завдання може здаватися практично ідентичним з рішеннями домашніх завдань з перших трьох уроків цієї теми. Але не все так просто ...

Рішення №1 - Увага

За умовою завдання функція повинна приймати два параметри- вихідний масив і один з методів: "round", "ceil" або "floor". Виходячи з цього, я пробував зробити так...

У цьому рішенні створюємо функцію з двома параметрами, а коли її викликаємо, то в якості параметрів функції пробуємо вказати вихідний масив і ІМ'Я одного методів:
decimal (numberArray, round) - в даному випадку round.

Але результату ми не отримаємо, тому що НЕ МОЖНА вказувати ІМ'Я методу в якості параметра функції.

Зверніть увагу: адже не випадково в умові завдання імена методів "round", "ceil" і "floor" укладені в лапки.

decimal (numberArray, "round") - але такий запис теж не буде вірною !!!

Рішення №2 - Коректуємо попереднє рішення

Можна вирішити задачу, вказавши для функції один параметр.


35 - Округлений елемент


13 - Округлений елемент


17 - Округлений елемент


79 - Округлений елемент

Тут вдалося досягти потрібного результату: метод round округлив всі числа по. але не виконана умова, Так як функція приймає лише один параметр.

Рішення №3 - Функція з двома параметрами

Тут задача вирішена правильно. Для цього потрібно було згадати тему умов в javascript і застосувати кілька умов одночасно.

34.82 - вихідний елемент масиву
35 - округляємо в ВЕЛИКУ сторону

12.9 - вихідний елемент масиву
13 - округляємо в ВЕЛИКУ сторону

17.01 - вихідний елемент масиву
18 - округляємо в ВЕЛИКУ сторону

78.51 - вихідний елемент масиву
79 - округляємо в ВЕЛИКУ сторону

це правильне рішенняДомашнього завдання. Тут для функції вказані два параметра згідно з умовою.

Спробуйте в останньому рядку цього рішення:
decimal (numberArray, "ceil") в якості другого параметра функції вказати імена інших методів "round" і "floor" об'єкта Math.

Рішення №4 - Функція з двома параметрами + метод prompt

Я вирішив трохи оптимізувати попереднє рішення і додав метод prompt, який викликає модальне вікно, що містить поле для введення інформації.

Тепер завдяки цьому можна буде ввести назву одного з методів round, floor або ceil в поле для введення і отримати відповідний результат.

Ось так працюють методи round, floor або ceil об'єкта Math, які округлюють дробові числа.

Сподобалася стаття? Поділіться з друзями!