current position:Home>JS, HTML and CSS are not compatible and do not use common knowledge

JS, HTML and CSS are not compatible and do not use common knowledge

2022-05-15 02:13:04Maple moving forward

1.startsWith()    Not at all ie

Used to detect whether a string starts with a specified substring .

grammar :string.startsWith(searchvalue, start)

2.Proxy    Not at all ie

Object is used to define the custom behavior of the basic operation ( Such as attribute search 、 assignment 、 enumeration 、 Function calls, etc ).

3.Reflect    Not at all ie and firefox

Is a built-in object , It provides interception JavaScript How to operate . These methods and proxy The same way .Reflect It's not a function object , So it's not constructable .Reflect All properties and methods of are static ( It's like Math object )

4.css function

min()    Not at all ie、Opera Mobile、Firefox for Android, And OS Safari  Support only 11.3 And above

Select a minimum value from the comma separator expression as CSS The attribute value .min() Method can be used in any of the following properties <length>, <frequency>, <angle>, <time>, <percentage>,<number>, perhaps <integer>.

width: min(1vw, 4em, 80px);

It allows us to set the maximum size of responsive components , It is easier to set the maximum width of the image .

min()    Not at all ie、Opera Mobile、Firefox for Android, And OS Safari  Support only 11.3 And above

The effect is the same

clamp()  Not at all ie、Opera Mobile、Firefox for Android, And OS Safari  Support only 11.3 And above

clamp() The function limits a value between an upper limit and a lower limit , When this value exceeds the range of minimum and maximum , Choose a value between the minimum value and the maximum value to use . It takes three parameters : minimum value 、 Preferred value 、 Maximum . clamp() Used in <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> It's all allowed in . clamp(MIN, VAL, MAX) In fact, it means max(MIN, min(VAL, MAX))

font-size: clamp(1rem, 10vw, 2rem);

5. Encoding and decoding base64 character string

stay JavaScript in , There are two functions used to deal with decoding and encoding  base64  character string :



atob()  Function can be decoded through base-64 Encoded string data . By contraries ,btoa()  The function can extract data from binary data “ character string ” Create a base-64 Coded ASCII character string .


symbol  It's a basic data type (primitive data type).Symbol() Function will return symbol Type value , This type has static properties and static methods . Its static properties expose several built-in member objects ; Its static methods expose the whole situation symbol register , And it's similar to a built-in object class , But it's not complete as a constructor , Because it doesn't support grammar :"new Symbol()".

Each from Symbol() Back to symbol Value is the only . One symbol Values can be used as identifiers for object properties ; This is the only purpose of this data type .

grammar :Symbol([description])

description yes Optional , String type . Yes symbol Description of , Can be used for debugging but not for accessing symbol In itself .

Use it directly Symbol() Create a new symbol type , And use an optional string as its description .

var sym1 = Symbol();
var sym2 = Symbol('foo');
var sym3 = Symbol('foo');

Symbol("foo") === Symbol("foo"); // false

Simulation Implementation call、apply Function can be used symbol

7.Object.freeze(obj)    Full support

Object.freeze()  Methods can be frozen An object . A frozen object can no longer be modified ; You cannot add new properties to an object when it is frozen , Cannot delete an existing property , Enumerability of existing properties of this object cannot be modified 、 Configurability 、 writability , And the value of an existing property cannot be modified . Besides , When an object is frozen, its prototype cannot be modified .freeze()  Returns the same object as the passed in parameter .

const obj = {
  prop: 42


obj.prop = 33;  // Throws an error in strict mode

console.log(obj.prop); // 42

8.Reflect    Not at all ie


Reflect.deleteProperty  Allows you to delete attributes on an object . Return to one  Boolean  Value indicates whether the attribute was successfully deleted . It's almost with non strict  delete operator  identical

9.padStart()    Not at all ie

padStart()  Method to fill the current string with another string ( If necessary , Will repeat many times ), So that the resulting string reaches the given length . Fills from the left side of the current string .

const str1 = '5';
console.log(str1.padStart(2, '0'));
//  "05"      Apparent date 、 It's convenient to fill in zeros in time

copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.

Random recommended