Подробное объяснение семи предварительных вопросов DD каждую неделю - первый выпуск

JavaScript HTML
Подробное объяснение семи предварительных вопросов DD каждую неделю - первый выпуск

DD Weekly Seven Questions - Выпуск 1

Введение в серию

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Всем привет! Я Лин Дуан!

Начиная с этой недели, DAIDAI будет каждую неделю делиться со всеми семью предварительными вопросами под названием «DD Seven Questions per Week».

Основная форма серии:3道JavaScript + 2道HTML + 2道CSS, чтобы помочь всем нам укрепить переднюю основу.

Все темы также будут интегрированы вLinDaiDai/niubility-coding-jsизissues, каждый может предложить лучшие идеи решения проблем, спасибо 😁.

основная тема

1. В чем разница между массивом (3) и массивом (3, 4)? 

console.log(Array(3))
console.log(Array(3, 4))

console.log(new Array(3))
console.log(new Array(3, 4))

console.log(Array.of(3))
console.log(Array.of(3, 4))

"Контрольные точки знаний:"

  • Array()а такжеnew Array()
  • Array()Разная производительность при разном количестве параметров
  • Array.of()роль

"результат:"

console.log(Array(3)) // [empty x 3]
console.log(Array(3, 4)) // [3, 4]

console.log(new Array(3)) // [empty x 3]
console.log(new Array(3, 4)) // [3, 4]

console.log(Array.of(3)) // [3]
console.log(Array.of(3, 4)) // [3, 4]

"Суммировать:"

  • Arrayсделать не использоватьnewэффект такой же
  • Arrayметод, если параметр является одним битом, этот параметр представляет длину массива и создает пустой массив этой длины
  • Arrayметод, если параметр многоразрядный, каждый параметр является элементом массива, и массив будет возвращен по порядку
  • Array.of()Принятие любого количества аргументов будет элементами в возвращаемом массиве по порядку, и будет возвращен этот новый массив.

GitHub.com/Linda ID Love/You…

2. Пожалуйста, создайте массив длиной 100 и значением соответствующего индекса 

// cool点的写法：
[...Array(100).keys()]

// 其他方法：
Array(100).join(",").split(",").map((v, i) => i)
Array(100).fill().map((v, i) => i)

Я думаю, что последние два метода всем видны и понятны, и тут нечего сказать 😄, давайте рассмотрим это сравнение поближе.coolзаписывается как:

  • использоватьArray(100)Создайте контент, который будет всемemptyмассив из:[empty x 100]

  • использоватьkeys()Метод создает итерируемый объект, содержащий ключи массива из массива:

    Итерируемые объекты заставляли вас думать?generator, Да здесьkeys()даArray.prototypeМетод выше, вы можете сравнить его с тем, который мы использовали раньшеObject.keys()смущенный.

    Давайте поговорим о его роли.Он фактически создает итерируемый объект, такой же, как только что представленный, поэтому вы должны знать, что данные, возвращаемые итерируемым объектом, будут такими:

    { value: 0, done: false }

    valueДля этого возвращаемого значенияdoneЗавершен ли логический блок для текущей итерации.

    Итак, вы увидите, что следующий код выполняется так:

    let it = Array(100).keys()
console.log(it.next) // {value: 0, done: false}
console.log(it.next) // {value: 1, done: false}
console.log(it.next) // {value: 2, done: false}
console.log(it.next) // {value: 3, done: false}

  • Что касается[...arr]ЭтоES6Метод записи преобразуется в массив.Конечно, вы также можете использовать его напрямуюArray.from(). Оба метода поддерживают"повторяемый объект"Преобразовать в массив.

GitHub.com/Linda ID Love/You…

3. Реализовать arr[-1] = arr[arr.length - 1]

Этот вопрос означает: обеспечитьcreateArr()метод, массив, созданный с помощью этого метода, удовлетворяетarr[-1] = arr[arr.length - 1]:

function createArr (...elements) {
  // ...代码
  return arr
}
var arr1 = createArr(1, 2, 3)
console.log(arr1[-1]) // 3
console.log(arr1[-2]) // 2

"Идеи решения проблемы:"

На самом деле, первое, что приходит мне в голову, когда речь заходит об этой теме, этоObject.defineProperty()илиProxy.因为这里涉及到了对数组值的获取，显然用Proxyявляется более подходящим. Какой? ты спрашиваешь меня, почему нетObject.defineProperty()? Поскольку этот метод предназначен для определенного свойства объекта, он не подходит для массивов.

Итак, для этого вопроса мы могли бы использоватьProxyКаждый раз прокси передает входящий индекс, то есть перезаписывает массивgetметод, в этом методе мы разберемся с логикой этого аспекта, давайте посмотрим код вместе😊:

function createArr (...elements) {
  let handler = {
    get (target, key, receiver) { // 第三个参数传不传都可以
      let index = Number(key) // 或者 let index = ~~key
      if (index < 0) {
        index = String(target.length + index)
      }
      return Reflect.get(target, index, receiver)
    }
  }
  let target = [...elements] // 创建一个新数组
  return new Proxy(target, handler)
}
var arr1 = createArr(1, 2, 3)
console.log(arr1[-1]) // 3
console.log(arr1[-2]) // 2

"будь осторожен:"

  • getВторой полученный параметрkeyПредставляет индекс массива в виде строки, поэтому его необходимо преобразовать вNumber, конечно, есть много способов использоватьNumber()Кроме того, используйте~~Двойной оператор не побитового отрицания также работает. в сравнении сNumber()Преимущество в том, чтоNumber(undefined)превратится вNaN; но используйте~~Гарантированно всегда будет рядом,~~undefined === 0. (Что? Вы до сих пор не понимаете разницы? Тогда вам обязательно нужно прочитать эту статью Лин Дуана:Оператор побитового отрицания ~ и другие операторы в JS)

  • Далее вам нужно только оценить, меньше ли входящий индекс 0. Если он меньше 0, добавьте длину массива.

  • затем вернутьсяindexЭтот элемент используетReflect.get(target, index). Какой? Почему бы просто не использоватьtarget[index]? Конечно можно, сравнитеtarget[index]Разница в том,Reflect.get(target, index)Если входящийtargetНе одинObjectЕсли (массивы также принадлежат объектам), будет сообщено об ошибке типаTypeError,а такжеtarget[index]вернетundefined. Например:

    var obj = 5
console.log(obj['b']) // undefined
console.log(Reflect.get(obj, 'b')) // Uncaught TypeError: Reflect.get called on non-object

"Точки расширения:"

Тупо здесь, я в основном хочу расширитьgetтретий параметрreceiver(получатель), вMDNОбъяснение выше:

еслиtargetуказанный объектgetter,receiverтогдаgetterкогда звонятthisстоимость.

Посмотрите на пример, чтобы понять, что 😊.

Дело номер один

Например, мы начинаем с такого объекта:

var obj = {
  fn: function () {
    console.log('lindaidai')
  }
}

используй сейчасProxyназначитьobj1середина:

var obj = {
  fn: function () {
    console.log('lindaidai')
  }
}
var obj1 = new Proxy(obj, {
  get (target, key, receiver) {
    console.log(receiver === obj1) // true
    console.log(receiver === target) // false
    return target[key]
  }
})
obj1.fn()

можно увидеть,receiverЗначит этоobj1Этот новый прокси-объект,targetпредставляет проксируемый объектobj.

так,receiverможет представлять"Использовать сам прокси-объект".

Случай 2

другая ситуация,receiverтакже может быть выражено как"объект, унаследованный от".

var proxy = new Proxy({}, {
  get (target, key, receiver) {
    return receiver;
  }
})
console.log(proxy.getReceiver === proxy) // true
var inherits = Object.create(proxy)
console.log(inherits.getReceiver === inherits) // true

В этом случае я создал новый прокси-объект с пустым объектом.proxy,использоватьproxy.getReceiverвозьмиreceiver, обнаружил, что это сам прокси-объект.

И если я использую этот прокси-объект в качестве объекта-прототипа, создайте новый объектinherits, то есть добиться прототипного наследования, то на этот разreceiverЗначение является унаследованным объектомinherits.

"Суммировать":

  • можно использоватьProxyпрокси, чтобы изменять значение массива каждый раз, когда он извлекается.
  • Proxyизget, второй параметр является строкой, даже если передается индекс массива.
  • в сравнении сNumber()Преимущество в том, чтоNumber(undefined)превратится вNaN; но используйте~~Гарантированно всегда будет рядом,~~undefined === 0.
  • В сравненииtarget[index]Разница в том,Reflect.get(target, index)Если входящийtargetНе одинObjectЕсли (массивы также принадлежат объектам), будет сообщено об ошибке типаTypeError,а такжеtarget[index]вернетundefined.
  • Proxyизget, Третий параметрreceiverОбычно используется сам прокси-объект или объект, который от него наследуется.

GitHub.com/Linda ID Love/You…

В-четвертых, в чем разница между addEventListener и attachEvent?

  • Первое используется в стандартных браузерах, второеIE8последующий
  • addEventListenerМожет быть бульканье, а может быть захват;attachEventТолько бульканье, захвата нет.
  • Прежнее название события не носитon, последний сon
  • в бывшей функции обратного вызоваthisуказывает на текущий элемент, который указывает наwindow

GitHub.com/Linda ID Love/You…

5. Третий параметр функции addEventListener

Третий параметр включает всплытие и захват, иtrueзахват, даfalseпузырится.

или объект{passive: true}, дляSafariБраузер, используемый при отключении/включении прокрутки.

GitHub.com/Linda ID Love/You…

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

div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

GitHub.com/Linda ID Love/You…

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

div {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Этот метод подходит для браузеров WebKit и мобильных терминалов.

"Кроссбраузерное решение:"

p {
  position:relative;
  line-height:1.4em;
  /* 3 times the line-height to show 3 lines */
  height:4.2em;
  overflow:hidden;
}
p::after {
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:0 20px 1px 45px;
}

GitHub.com/Linda ID Love/You…

послесловие

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Эта статья представлена ​​здесь.

вы можете проводить каждую неделю48Часы рабочего времени 💻 будут потрачены49Часы сна 😴, можно и больше потратить20Я потратил несколько минут на унылые 7 вопросов, накопившихся со временем, я верю, что мы все можем стать свидетелями роста друг друга😊.

Какой? ты спрашиваешь меня почему сериал называетсяDD? потому что呆呆Ага, хаха 😄.

подобно"Лин Дуан"Также парень надеется обратить внимание на паблик Лина.LinDaiDaiИли отсканируйте QR-код ниже👇👇👇.

Время от времени я буду обновлять некоторый внешний контент знаний и свои собственные оригинальные статьи🎉

Ваша поддержка - главная мотивация для меня продолжать творить 😊.

В этой статье используетсяmdniceнабор текста

Категории