DD weekly front seven questions detailed explanation – the first issue

DD seven questions per week – Issue one

Series is introduced

You wish the world, I wish you no bugs. Hello everyone! I’m Lin Dull!

From this week on, Dull will share seven front-end questions every week. The series is called “DD 7 Questions a week”.

The form of the series is mainly: 3 JavaScript + 2 HTML + 2 CSS, to help us consolidate the front-end foundation.

All topics will also be integrated into the issues of LinDaiDai/ Niubility -coding-js. You are welcome to provide better ideas for solving problems. Thank you 😁.

To the chase

Array(3, 4) = Array(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)) Copy the code

“Study knowledge:“

• Array()andnew Array()
• Array()Different performance of different parameter number
• Array.of()The role of

“Results:“

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] Copy the code

“Conclusion:“

• ArrayMake no usenewThe effect is the same
• ArrayMethod, which represents the length of the array if the argument is one bit, and creates an empty array of that length
• ArrayMethod, where each argument is an item in an array if the argument is multi-bit, returns the array in order
• Array.of()Receiving any of the parameters becomes the elements of the return array in order and returns the new array.

Github.com/LinDaiDai/n…

Create an array of length 100 with the corresponding index

// Cool:
[...Array(100).keys()]

// Other methods:
Array(100).join(",").split(",").map((v, i) = > i)
Array(100).fill().map((v, i) = > i) Copy the code

The back of the two methods I believe we can see understand, there is nothing to say 😄, let’s take a closer look at this more cool writing:

• Create an empty Array using Array(100) : [empty x 100]

• Create an iterable containing the array keys from the array using the keys() method:

  Keys () is the array.prototype method, which you might confuse with the more common object.keys () we used earlier.

  It creates an iterable, just like we did before, so you should know that an iterable returns something like this:

  { value: 0, done: false }
  Copy the code

  Value is the return value, and done is whether the logical block of the current iterable is completed.

  So you’ll see the following code executing like this:

  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}
  Copy the code

• As for […arr], this is ES6, converted to an Array, of course you can also use array.from (). Both methods support the conversion of an iterable to an array.

Github.com/LinDaiDai/n…

Arr [-1] = arr[arr. Length -1]

CreateArr () creates an array arr[-1] = arr[arr.leng-1] : createArr() creates an array arr[-1] = arr[arr.leng-1] :

function createArr (. elements) {
  / /... code
  return arr
}
var arr1 = createArr(1.2.3)
console.log(arr1[- 1]) / / 3 console.log(arr1[2 -]) / / 2 Copy the code

“Answer:“

In fact, the first thing THAT comes to mind for this kind of question is object.defineProperty () or Proxy. Since this involves fetching array values, Proxy is an obvious choice. What? Why don’t I use Object.defineProperty()? This method applies to a property of an object, not an array.

So for this problem, we can probably use the Proxy for each subscript passed in, which is to rewrite the array get method. In this method, we will handle the logic. Let’s take a look at the code 😊 :

function createArr (. elements) {
  let handler = {
    get (target, key, receiver) { // The third parameter is passed with or without it
      let index = Number(key) // let index = ~~key
      if (index < 0) {
 index = String(target.length + index)  }  return Reflect.get(target, index, receiver)  }  }  let target = [...elements] // Create a new array  return new Proxy(target, handler) } var arr1 = createArr(1.2.3) console.log(arr1[- 1]) / / 3 console.log(arr1[2 -]) / / 2 Copy the code

“Note:“

• The second key received by GET represents the array index. It is a string, so it needs to be converted to Number. There are many different methods, including Number() and the ~~ double non-bitwise inverse operator. The advantage over Number() is that Number(undefined) is converted to NaN; However, using ~~ ensures that the value is always a number. ~~undefined === 0. (what? You don’t know the difference? You will have to read this article: JS bitwise inverse operators ~ and other operators)

• And then we just need to check if the subscript that’s being passed in is less than 0, and if it’s less than 0 plus the length of the array

• And then returns index using reflect.get (target, index). What? Why not just target[index]? Reflect. Get (target, index) returns TypeError if the target passed in is not an Object. Target [index] will return undefined. Like this:

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

“Extension point:“

The third parameter of get, the receiver, is extended.

If the getter is specified in the target object, receiver is the this value when the getter is called.

Let’s take an example to understand 😊.

Case a

For example, we started with an object like this:

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

Now use Proxy to assign to 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() Copy the code

As you can see, receiver represents the new proxy object obj1 and target represents the proxied object obj.

So, receiver can mean “use the proxy object itself.”

Case 2

Alternatively, receiver can also mean “an object inherited from it.”

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 Copy the code

In this case, I create a proxy object for an empty object, use proxy.getReceiver to get its receiver, and discover that it is the proxy object itself.

If I use the proxy object as a stereotype object and create a new object inherits that implements the original type inheritance, then the value of the receiver is the inherits object.

Summary:

• You can useProxyProxy to change the value of the array each time it is fetched.
• ProxythegetThe second argument is a string, even if the array subscript is passed in.
• Compared toNumber()The upside is thatNumber(undefined)Will convertNaN; But the use of~ ~It’s always a number,~~undefined === 0.
• contrasttarget[index]The difference betweenReflect.get(target, index)If the incomingtargetIs not aObjectIf the array is also an object, a type error is reportedTypeErrorAnd thetarget[index]It’s going to return oneundefined.
• Proxytheget, the third parameterreceiverUsually using the proxy object itself or an object inherited from it.

Github.com/LinDaiDai/n…

AddEventListener and attachEvent

• The former is used in standard browsers, the latterIE8The following
• addEventListenerCan have bubble, can have capture;attachEventOnly bubbles, no capture.
• The former event name is not includedon, the latter withon
• In the former callback functionthisPoints to the current element, which points towindow

Github.com/LinDaiDai/n…

The third argument to the addEventListener function

The third argument, which involves bubbling and capturing, is captured when it is true and bubbling when it is false.

Or {passive: true}, for Safari, to disable/enable scrolling.

Github.com/LinDaiDai/n…

Six, text list beyond ellipsis display

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

Github.com/LinDaiDai/n…

Seven, text lines beyond ellipsis display

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

This method is applicable to WebKit browsers and mobile terminals.

“Cross-browser compatibility scheme:“

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

Github.com/LinDaiDai/n…

After the language

You wish the world, I wish you no bugs. So much for this article.

You may spend 48 hours a week at work 💻, 49 hours at sleep 😴, and maybe another 20 minutes at 7 questions, which accumulate over a long period of time. I believe we can all witness each other’s growth 😊.

What? You ask me why the series is called DD? Because dull ah, ha ha 😄.

The guy who likes “Lin Dull” also wants to follow Lin dull’s official account LinDaiDai or scan the following QR code 👇👇👇.

I will update some front-end knowledge content and my original article 🎉 from time to time

Your encouragement is the main motivation for my continuous creation 😊.

This article is formatted using MDNICE