Общие, но игнорируемые методы ES6 (первое деструктурирование присваиваний и значений)

внешний интерфейс JavaScript

напишите в начале

  • ES6Распространенные, но игнорируемые методыСерия статей, в которых рассматриваются некоторые методы, навыки использования и некоторые сценарии применения, которые, по мнению автора, могут быть использованы для ежедневной разработки.

Статьи по Теме

присваивание деструктуризации

Удалить значение ненужных свойств объекта

const obj = {
    name: 'detanx',
    age: 24,
    height: 180
}
// 剔除height
const { height, ...otherObj } = obj;
// otherObj => {name: 'detanx', age: 24}

Удалить ненужные элементы из массива

const arr = ['detanx', 24, 180]
// 剔除 第一项
const [ name, ...otherArr ] = arr;
// otherArr => [24, 180]

установить значение по умолчанию

  • ES6Внутренне использует оператор строгого равенства (===), чтобы определить, имеет ли местоположение значение. Таким образом, только если член массива строго равенundefined, вступит в силу значение по умолчанию. (интервью может)
const [x = 1] = [undefined];
// x 1
const [x = 1] = [null];
// x null
  • Деконструкция может ссылаться на другое переменное назначение, но переменная должна быть уже объявлена.
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

Поменять значения двух переменных без дополнительных переменных

let x = 1, y = 2;
[x, y] = [y, x]
// x: 2,y: 1

получить указанное значение

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
// 导入模块某些方法
import { clone } from '_lodash';

нить

includes

  • Прежде чем судить о том, существует ли целевой символ или фрагмент строки в определенной строке, его необходимо использовать.indexOfСудя по всему, возвращаемый результат — это позиция, в которой цель появляется впервые, и возврата нет.-1. В реальной сцене нам не нужно возвращаться к положению цели в строке, нам нужно только определить, находится ли цель в строке, поэтому мы можем использоватьincludes. В то же время он может получить второй параметр, указывающий, с какой позиции слева направо начинается
'detanx'.includes('tan') // true
'detanx'.includes('tan',3) // false

Запрос целевого символа в начале или конце строки

  • str.startsWith(char[, pos])ЗапросcharЯвляется ли это началом строки,posУказывает, какая позиция слева направо считается начальной позицией.
'detanx'.startsWith('tan', 2) // true
  • str.endsWith(char[, len])Запросcharэто строка,lenПредставляет, сколько символов (т.е. длины) включено слева направо.
'detanx'.endsWith('tan', 5) // true

сколько раз повторяется строкаrepeat

  • Сколько раз повторить строку, получить параметр
    1. когда параметр больше-1и меньше чем1или дляNaNтак как0
    2. больше, чем1и округлить в меньшую сторону, если это десятичная дробь
    3. дляinfinityили менее-1ошибка, когда
    4. Другие типы будут преобразованы в числа
'detanx'.repeat(0) // ""
'detanx'.repeat(-0.7) // ""
'detanx'.repeat(NaN) // ""
'detanx'.repeat(2) // "detanxdetanx"
'detanx'.repeat({}) // ""
'detanx'.repeat([]) // ""
'detanx'.repeat(()=>{}) // ""

завершение строки

  • Завершение слеваpadStart, когда длины строки недостаточно, нужно указать, с чего начинать, если второй параметр не передан, по умолчанию используется пробел.
// 时间显示小于10补0
const x = 7
if(x < 10) String(x).padStart(2,'0')
// 替换结尾
'04'.padStart(10, 'YYYY-MM-DD'); // 'YYYY-MM-04'
  • Завершение справаpadEnd, когда длины строки недостаточно, нужно указать, чем заканчивать, если второй параметр не передан, по умолчанию используется пробел.
'de'.padEnd(6, 'tanx'); // detanx

удалить начальные или конечные пробелы

  • За исключением пробела, эти два метода имеютtabНевидимые пробельные символы, такие как клавиши, символы новой строки и т. д., также работают.
  • Браузер также использует два дополнительных метода:trimLeft()даtrimStart()псевдоним,trimRight()даtrimEnd()псевдоним.
// 去掉头部空格
'  detanx  '.trimStart(); // 'detanx  '
'  detanx  '.trimLeft(); // 'detanx  '
// 去掉尾部空格
'  detanx  '.trimEnd(); // '  detanx'
'  detanx  '.trimRight(); // '  detanx'

Числовое расширение

isFinite

  • Используется для проверки конечности значения (finite), то есть неInfinityили-Infinity. Другие типы возвращаются напрямуюfalse,включатьNaN.
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false

isInteger

  • Определяет, является ли число целым числом. Если требования к точности данных высоки, не рекомендуется использоватьNumber.isInteger()Определяет, является ли число целым числом.
  • JavaScriptиспользоватьIEEE 754Стандартно, значения хранятся как64Формат битовой двойной точности с числовой точностью до53двоичные биты (1скрытые биты и52значащие биты). Если точность значения превышает этот предел, 54-й и последующие биты отбрасываются, в этом случаеNumber.isIntegerМожет быть неверно оценен.
Number.isInteger(3.0000000000000002) // true
  • Точность этого десятичного числа после запятой16Десятичные цифры, превращаются в немного больше, чем53биты, ведущие к последнему2выброшенный.
  • Если абсолютное значение числа меньшеNumber.MIN_VALUE（5E-324）, что меньшеJavaScriptНаименьшее значение, которое может быть разрешено, будет автоматически преобразовано в0,Number.isIntegerтакже будет неправильно оценен.
Number.isInteger(5E-324) // false
Number.isInteger(5E-325) // true

isSafeInteger

  • Number.isSafeInteger()используется для определения того, попадает ли целое число вNumber.MAX_SAFE_INTEGERа такжеNumber.MIN_SAFE_INTEGERв диапазоне этих двух констант.
Number.isSafeInteger('a') // false
Number.isSafeInteger(null) // false
Number.isSafeInteger(NaN) // false
Number.isSafeInteger(Infinity) // false
Number.isSafeInteger(-Infinity) // false

Number.isSafeInteger(3) // true
Number.isSafeInteger(1.2) // false
Number.isSafeInteger(9007199254740990) // true
Number.isSafeInteger(9007199254740992) // false

Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false
  • При использовании этой функции на самом деле нужно быть внимательным. Убедитесь, что результат операции попадает в диапазон безопасных целых чисел, причем не только результат операции, но и все значения, участвующие в операции одновременно.

Math.trunc

  • Math.truncМетод используется для удаления дробной части числа и возврата целой части. нечисловой,Math.truncвнутреннее использованиеNumberметод, чтобы сначала преобразовать его в число. Нулевые значения и значения, которые не могут быть усечены до целых, возвращаютсяNaN.
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-0.1234) // -0

Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0

Math.trunc(NaN);      // NaN
Math.trunc('foo');    // NaN
Math.trunc();         // NaN
Math.trunc(undefined) // NaN
  • Реализация моделирования
Math.trunc = Math.trunc || function(x) {
  return x < 0 ? Math.ceil(x) : Math.floor(x);
};

Math.sign

  • Math.signМетод используется для определения того, является ли число положительным, отрицательным или нулем. Для нечисловых значений оно сначала преобразуется в числовое значение.
    1. Параметр является положительным числом, возврат+1;
    2. Если параметр отрицательный, вернуть-1;
    3. Параметры0,вернуть0;
    4. Параметры-0,вернуть-0;
    5. Для других значений возвращается NaN.
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
  • Если параметр не является числовым значением, оно будет автоматически преобразовано в числовое значение. Для тех значений, которые не могут быть преобразованы в числовые значения, он вернетNaN.
Math.sign('')  // 0
Math.sign(true)  // +1
Math.sign(false)  // 0
Math.sign(null)  // 0
Math.sign('9')  // +1
Math.sign('foo')  // NaN
Math.sign()  // NaN
Math.sign(undefined)  // NaN
  • Реализация моделирования
Math.sign = Math.sign || function(x) {
  x = +x; // convert to a number
  if (x === 0 || isNaN(x)) {
    return x;
  }
  return x > 0 ? 1 : -1;
};

Math.cbrt

  • Math.cbrt()Метод используется для вычисления кубического корня числа.
Math.cbrt(-1) // -1
Math.cbrt(0)  // 0
Math.cbrt(1)  // 1
Math.cbrt(2)  // 1.2599210498948732
  • Для нечисловых значенийMath.cbrt()Метод также используется в первую очередьNumber()метод преобразования его в числовое значение.
Math.cbrt('8') // 2
Math.cbrt('hello') // NaN
  • Реализация моделирования
Math.cbrt = Math.cbrt || function(x) {
  var y = Math.pow(Math.abs(x), 1/3);
  return x < 0 ? -y : y;
};

Math.hypot

  • Math.hypotМетод возвращает квадратный корень из суммы квадратов всех аргументов.
Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3
  • В приведенном выше коде3квадрат плюс4квадрат, равный5в квадрате.
  • Если параметр не является числовым значением,Math.hypotметод преобразует его в число. Пока есть параметр, который не может быть преобразован в значение, он вернетNaN.
Категории