Fancy representation of JavaScript topics 26 letters

Look at the effect first.

Let's think first:

 // What does the following sentence print? 
[+ [] [0] + []] [ 0] [1 ]

We look directly at the effect:

If you feel that printing a letter is too addictive, print a word?

 // Note that printing in Chrome

[[] [0] + []] [ 0] [5 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 8] + [[[] == []] [ 0] + [] [ 0] [2] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 23] + [[] [0 ] + []] [0] [ 3] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [8 ] + [+ [1+[] [ 0] + [] [ 0] [3] + 309] [0 ] + []] [0] [ 7] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [0] + []] [ 0] [0 ]

Let's look at the effect again:

Basic test

If you want to understand how the above is implemented, first check your own understanding of JavaScript implicit type conversion:

 // What will the following values print? 
console.log (+ []);
console.log ( 1+ []);
console.log (+ undefined);
console.log ([] == []);
console.log (+ [] == + []); 

If you cannot accurately state the above results, or if you want to better understand the above conversion process, we recommend that you first look at two articles:

JavaScript thematic headache type conversion (Part 1) .md

JavaScript topic headache type conversion (bottom) .md

Start Decryption

First effect:

  [] [0]

Because the empty array does not have the first element, undefined will be printed

Second effect:

  undefined + []

undefined + [] is equivalent to undefined + “” resulting in a “undefined” string.

This time has obtained an undefined string, we can only use the corresponding letters through the subscript.

However, if we don't use parentheses, how do we get the value? At this point, we need to use a trick:

The third effect:

  ['undefined'] [ 0] [0 ]

This time we get the “u” letter, by changing the subscript, we can get u, n, d, e, f, i total of 6 letters

Isn't it interesting, but that's just the beginning.

NaN

First effect:

  +undefined

is equivalent to Number (undefined), the result is NaN

Second effect:

  NaN+ []

equivalent to NaN+“” result to NaN string

The third effect:

  [NaN] [0 ] [1]

In this way we can get the letter a.

false

First effect:

  [] == []

The result is naturally false

Note, because of the two previous examples, you may have gradually understood that when taking out a value, if you turn into a string, if you take the letter of the subscript

Second effect:

 // convert to string by value + []
false + []

The third effect:

 // take the letter by [value] [0] [n]
['false'] [ 0] [0 

]

we can take out the f letter.

In this way, we can take out the five letters “f”, “a”, “l”, “s”, “e”.

true

Take a direct look at the core steps:

  + [] == + []

equivalent to comparing “” == “”, the result is naturally true

The rest of us must have been cooked.

The

letters obtained by the above 4 methods are still limited, and we need some other way to get more letters.

Infinity

Note: In the front we have taken the letter e.

  + (“1e309")

to a number, the equivalent of 1 times 10 309 times, greater than the maximum number of JavaScript, so the result will be Infinity, and the rest of the The steps are the same as above and will not be discussed later.

We can remove t and y from it.

function

Note: By this point we have obtained u n d e f i t r f a l s t y, from which we can spell the string “find”.

[]["find"]

displays the find function of the array, with the result:

function find() { [native code] }

With this approach, we can take out c o v.

But note: taking the letter v this way will have compatibility issues!!!

The magic constructor

Note that we already have 17 letters, we can now spell “constructor”!

constructor can be a magical property because through it we can get constructors for various types of value objects!

0["constructor"] // function Number() { [native code] }

""["constructor"] // function String() { [native code] }

...

In the above way, we can take m, g

Perhaps we wonder, how does“” mean it?

[] + [] === "" // true

name

With m, we can now spell the name, but what is the use of name?

"to" + ""["constructor"]["name"] // "toString"

Our ultimate goal is to spell out the “toString” string

The almight toString

The reason

we spelled out toString is because using toString this method can represent 26 letters!

At this time, we would like to introduce the usual obscure, but here indeed the final protagonist toString method!

The following quote from W3C school:

Role:

The

toString () method converts a Number object to a string and returns the result.

Usage:

NumberObject.toString (radix)

Parameter Explanation:

radix: Represents the radix of a number, making an integer between 2 and 36. If this parameter is omitted, base 10 is used. Note, however, that if the parameter is a value other than 10, the ECMAScript standard allows the implementation to return arbitrary values

To take an example:

var number = new Number(10);
number.toString('16');

That is, 10 is represented in hexadecomals. The above example prints the result “a”.

Note that radix can represent 36 maximum!!!!

var number = new Number(35);
number.toString('36');

The printed letter is “z”! In this way, we can represent all the remaining letters!

But how do we use this toString method? To be precise, how do we generate a number object? Do you still need to spell new Number?

I

don't even need it! At this point, the advantages of JavaScript implicit type conversion are highlighted:

35["toString"](36) // z

Note: By this time, we also had to use ()!

By this point, we can already show all the letters, some are very easy to show, some are somewhat troublesome, and the display is very long, such as the letter p:

25[[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6] + [[] + []][0][[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]][[[][0] + []][0][1]+[+[][0] + []][0][1]+[0[[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]]+[]][0][11]+[[][0] + []][0][3]]](27)

The Basics of JS Must Know “Strict Mode 'use strict'”

JS's strict mode'use strict'should be familiar with knowledge, literally to explain is to follow strict behavior patterns to Write code. But what are the rules that constrain us to use strict mode to regulate our own code during development? So the purpose of this article is simply to deepen the understanding of the strict model once again. Although this article is the basics, I hope it helps you.

Definitions of Strict Mode

use strict is a (strict) running mode added to ECMAscript5, which makes Javascript Operate in stricter conditions. The implementation of strict mode makes your program or function follow a strict operating environment.

The purpose of establishing the “strict model” is to:

• Eliminate some unreasonable and inrigorous aspects of Javascript syntax and reduce some weird behavior;
• Eliminate some insecure aspects of code operation and ensure the safe operation of code;
• Improve compiler efficiency and increase running speed;
Padders
• for future versions of Javascript.

Use of strict mode

Enable strict mode for scripts

To open strict mode for the entire script file, you need to put a specific statement “use strict”before all statements; (or 'use strict';)

 // syntax for opening strict mode for the entire script
“ use strict”;
var v =  “Hi! I'm a strict mode script!” 

;

This syntax is stuck if you merge a script in strict mode with a script in non-strict mode: the merge appears to be strict mode. And vice versa: non-strict merging is strictly seeming non-strict. It is therefore recommended to either switch on strict mode or not use non-strict mode.

Enable strict mode for functions

To turn on strict mode for a function, you have to put “use strict”; (or 'use strict' ;) declarations are placed without leakage before all statements of the function body.

 function  strict ( ) {
 // function level strict mode syntax
 'use strict';
 function  nested ( ) { 
 return ” And so am I!” ; 
 }
 return ” Hi! I'm a strict mode function!  “ + nested ();
}

function  notStrict ( ) { 
 return ” I'm not strict.” ; 

}

Specifications for Strict Mode

variable

Rules for using variables in strict mode

1. Do not allow accidental creation of global variables
2. Declaring variables cannot be deleted using delete operator
3. Do not use reserved words (e.g. implements, interface, let, package, private, protecte, public, static, and yield identifiers) as variable names

Rule 1

 // create a global variable called message
message = “Hello JavaScript! “; //this line will throw ReferenceError 

Rule 2

 var x;
delete x; //!!! syntax error

eval(” var y; delete y;”); //!!! syntax error

Rule 3

 var private = 123; // !!! syntax error
var public = ' hello '; //!!! syntax error

object

Rules for using objects in strict mode

1. A value for a read-only attribute throws TypeError
2. Using the delete operator on non-configurable properties throws TypeError
3. Adding properties to non-extensible objects throws TypeError
4. When using object literal, attribute names must be unique

Rule 1

 // give a value to the read-only property
var obj2 = { get x () { return  17;}};
obj2.x = 5; // Throw TypeError error

// give a value to a non-writing property
var obj1 = {};
Object.defineProperty (obj1, “ x”, {  value: 42, writable:   false});
obj1.x = 9; // Throw TypeError error

Rule 2

  delete Object.prototype; // Throw TypeError error

Rule 3

 // give a value to the new property of an object that is not expensible
var fixed = {};
Object.preventExtensions (fixed);
fixed.newProp = “ohai”; // Throw TypeError error

Rule 4

  var o = {  p: 1, p: 2 }; //!!!! syntax error

Functions

Rules for using functions in strict mode

1. Requires unique parameters for named functions

 function  sum ( a, a, c){ //!!! syntax error
 return a +a+c; // code running here will go wrong

}

eval vs. arguments

Rules for using eval and arguments in strict mode

1. eval does not create variables or functions in the context of
2. eval and arguments cannot be bound or assigned by program syntax
3. The value of the parameter does not change as the value of the arguments object changes
4. The use of arguments.callee is prohibited

 function  doSomething ( ) {
 eval(” var x=10");
 alert (x); //Throw TypeError error

}

Rule 2All attempts below will cause a syntax error:

 eval =  17;
arguments++;
++eval;
var obj = { set p (arguments) {}};
var  eval;
try {} catch ( arguments) {}
function  x ( eval){}
function  arguments ( ) {}
var y = function  eval ( ) {};
var f = new  Function (“arguments”, “ 'use strict'; return 17;”); 

Rule 3

 function  f ( a){
 a = 42;
 return [Aa arguments[ 0]];
}
var pair = f ( 17);
console.assert (pair [ 0] ==42 );
console.assert (pair [ 1] ===17 );

Rule 4

 var f = function (){ 
 return arguments.callee; 
};
f (); //throw a type error

Suppressing traversing the call stack inside a function

 function  restricted ( ) {
 restricted.caller; //throws a type error
 restricted.arguments; //throw a type error

}

Static Bindings

1. Prohibit the use of the with statement
2. eval () declaration variables and functions are valid only in the scope of the current eval

Rule 1

 var x =  17;
with (obj) { //!!! syntax error
 // If strict mode is not enabled, the x in with will point to the x above with, or obj.x? 
 // If you don't run the code, we can't know it, so this code does not allow the engine to be optimized, and the speed will change. Slow. 
 x;

}

Rule 2

 var result = eval(” var x=10, y=11; x+y”);
alert (result); //21

this points to

This
1. in a function in a global scope no longer points to global but undefined.
2. If you forget to add new when using the constructor, this no longer points to the global object, but instead undefined

 // Rule 1
function  bar ( ) {
 console.log ( this)
}
bar () //undefined


// Rule 2
function  Person ( ) {
 this.name= “ Vincent” // Uncaught TypeError: Unset property 'name' of undefined
}

Person () //error is reported. If you forget to add new, this no longer points to global object, but undefined.name. 

summary

Now a lot of people are working with various frameworks and tools, but in fact, there is no problem in our development, because it brings efficiency gains. But all things can grow without root, so the foundation is always the basic core. I also know that everyone's time is limited, and it's not enough to take care of it. But I recommend taking some time on the basis, even if it takes 10 to 20 minutes a day to take a look at the basics, because every time I read it, there will be a certain gain.

I don't have a good technical skills or a solid foundation, so I remind myself every day not to stop moving forward.

### References
- [ JavaScript Advanced Programming (3rd Edition)] ( https://item.jd.com/10951037.html)
- [Strict Mode MDN] ( https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode 

)

Full version of JavaScript for Loop Loop Guide

Take a few minutes to relive the basics of the JavaScript loop guide and remember a figure



During front-end development, we often use JavaScript to provide a lot of loop and iteration methods, commonfor, for... of,for... in,while, Array.forEach, as well as Array.* (There are also some Array methods similar to loop/iterator: Array.values (), Array.keys (), Array.map () , Array.reducer (), etc.), and these are very basic things, there must be people who think these are very basic. Something, what's good looking at? The purpose of these things is to be framed and brainized. So it's simple to make a diagram of a JS loop. Integrate cluttered, fragmented knowledge into everything, making it easier to remember thebasics.

Simple Loop

for

The for loop repeats as long as certain conditions are met. It is usually used to execute a code block a certain number of times.

array loop

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

break statement

Use break statement to terminate a loop

 for (  let i = 0 ;; i++) {
 console.log ( ' loop ')
 break
}

// output: loop

In this case, in the for loop, the break keyword exits the loop when it encounters the loop.

continue statement

The continue statement can be used to continue execution (skip the rest of the code block and go to the next loop)

 for (  let i = 0 ; i < 3; i++) {
 if (i === 2)  continue
 console.log (i)
}

// output: 0, 1

The above code can enter the result, when condition i === 2 is established, encounter continue keyword to skip and proceed to the next loop.

for…of

The for... of statement creates a loop on an iterable object (including Array, Map, Set, arguments, and so on), with each unique property of the value with one iteration.

string string loop

let string = 'text'

for (let value of string) {
  console.log(value) // output "t", "e", "x", "t"
}

array array loop

let arr = [0, 1, 2]
for (let value of arr) {
  console.log(value) // output 0, 1, 2
}

objects object loop

For... of loop works only for iterable values, objects are not iterable, so it is not feasible to loop objects directly using for... of. The following example:

let object = { a: 1, b: 2, c: 3 }

for (let value of object) // Error: object is not iterable
  console.log(value)

You can convert an object to an iterable object using the built-in Object method:.keys (),.values () or.entries (), see the following example:

let enumerable = { property : 1, method : () => {} };

for (let key of Object.keys( enumerable )) console.log(key);
> property
> method

for (let value of Object.values( enumerable )) console.log(value);
> 1
> () => {}

for (let entry of Object.entries( enumerable )) console.log(entry);
> (2) ["prop", 1]
> (2) ["meth", ƒ()]

It can also be achieved by using a for... in loop without using the built-in Object method.

for…in

A for... in loop is a special type of loop that traverses the properties of an object or the elements of an array. When traversing objects, you can display enumerable object properties

let object = { a: 1, b: 2, c: 3, method: () => {} }

for (let value in object) {
  console.log(value, object[value])
}

// output: 1, 2, 3, () => { }

while

A while statement executes its block as long as the specified condition evaluates to true (true).

 let c =  0

while (c++ < 5) {
 console.log (c)
}

// output: 1, 2, 3, 4, 5 

do... while

is very similar to while, while the do... while statement repeats until the specified condition evaluates to a false value (false).

 var i =  1
do {
 console.log (i)
 i++
} while (i <= 5)

// output: 1, 2, 3, 4, 5 

Arrays Loops



Array has several iteration methods. Usually we recommend using the built-in Array method for loop operations instead of using for or while loops. The array method is attached to the Array.prototype property, which means that it is used directly from the array object.

For example, usingArray.forEach ()method to manipulate an array

forEach

Definition: The forEach method executs the given function once on each element of the array.
Return value: none

let arr = ['jack', 'tom', 'vincent']

arr.forEach((name) => console.log(`My name is ${name}`))

//output
// My name is jack
// My name is tom
// My name is vincent

every

Definition: checks whether all elements of the array meet the judgment criteria, returns true, otherwise false
Return value: boolean

const isBelowThreshold = (currentValue = currentValue < 40)
const array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.every(isBelowThreshold))

// output: true

 some



Definition: whether there are elements in the array that satisfy the judgment criteria. If at least one of the judgment conditions is satisfied, the return value isfalse ifnone are satisfied:
boolean

filter

Definition: Execres the given function once on each element of the array, returning a new array
Return value: New array

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

map

Definition: The method creates a new array whose result is the return value after each element of the array has been called once.
Return value: New array

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

reduce && reduceRight



Definition: Thereducemethod performs a reducer function (in ascending order) supplied by you on each element of the array, summarising its results as A single return value.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Definition:reduceRightmethod accepts a function as accumulator and each value of an array (right to left) ) to reduce it to a single value.

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

find()& findIndex()



Definition: Thefind method is used to find the first array member that matches the condition, and returns the member if there are no members that match the condition undefined.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

Definition:findIndexreturns the position of the first array member that matches the condition, or -1 if all members do not match the condition.

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

Is it appropriate to import on demand in vue.js components, or to import globally?

Beginners don't understand, ask: On-demand import is appropriate in vue.js components, or global import is appropriate? Which way will make the final packed volume smaller?

Not half written yet, so much volume [cover face.jpg]:

code solutions

Direct creation of JS file in main.js is the introduction of use; global too large；

import Vue from 'vue'
import {
  Collapse,
  CollapseItem,
  Button,
  Row,
  progress,
  Col,
  Form,
  FormItem,
  InputNumber,
  Input,
  Select,
  Option,
  Message,
  MessageBox,
  Scrollbar,
  Menu,
  MenuItemGroup,
  Submenu,
  MenuItem,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Badge,
  Table,
  TableColumn,
  Tag,
  Tabs,
  TabPane,
  Timeline,
  TimelineItem,
  Card,
  Pagination,
  Notification,
  Dialog,
  DatePicker,
  Tree,
  Upload,
  Carousel,
  CarouselItem,
  Cascader
} from 'element-ui'
Message.install = () => {
  Vue.prototype.$message = Message
}
MessageBox.install = () => {
  Vue.prototype.$confirm = MessageBox.confirm
}
Notification.install = () => {
  Vue.prototype.$notify = Notification
}
Vue.use(InputNumber)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(progress )
Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Message)
Vue.use(MessageBox)
Vue.use(Notification)
Vue.use(Scrollbar)
Vue.use(Menu)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Tooltip)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Badge)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Timeline)
Vue.use(TimelineItem)
Vue.use(Card)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(DatePicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Tree)
Vue.use(Upload)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Cascader)

Clamp.js plugin, resolving text multi-line omitting, IE compatible and other browsers

Download
Clamp.js Project Address: https://github.com/josephschmitt/Clamp.js

Introduced

<!-- Text Multiline Omit Plugin -->
<script src="./assets/js/common/clamp.min.js"></script>

Use
Text needs to use p tag span not

// Text omitted, compatible with browsers such as IE
var newsSummary = $('.news-right-items-single-content-summary');
for (var i = 0; i < newsSummary.length; i++) {
    $clamp(newsSummary[i], { clamp: 2 });   //Show two rows
}

How to gracefully use anti-vibration flow in Vue

1. What is anti-vibration flow

Stabilizing: Prevents repeated click triggering events

First of all, what is shaking? Shaking is a shiver! Originally, now three! I don't know if the old iron mind is very picturesque! Ha ha ha ha ha ha ha ha ha

A typical application is to prevent users from repeatedly requesting data.

Code implementation points: set a timer, go through closures, grab timer variables, control timer additions and clears


Directly on the code

  function debounce(fn, time) {
      let _arguments = arguments
      let timeout = null
      return function () {
          if (timeout) {
              clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
              fn.call(this, _arguments)
          }, time);
      }
  }

Throw: The task will only be executed once during a given interval

Everyone has played FPS games (haven't played???? (Shoot knows it!) The speed of the item is certain, will not increase because you click the mouse faster.

Key to Code Implementation: Determine whether code needs to be executed by a boolean variable as a state

Directly on the code

  function throttle(fn, time) {
      let _arguments = arguments
      let canRun = true 
      return function () {
          if (!canRun) return
          canRun = false
          setTimeout(() => {
              fn.call(this, _arguments)
              canRun = true
          }, time);
      }
  }

2. Elegant use in Vue 

 My Application Scene: Avatar Cropping Component, image image stabilization after scrolling wheel zoom