Cheng Zhihui's Blog - A Pseudo Literary and Artistic Youth
Persistence is important, persistence is difficult, and persistence is successful!
Cheng Zhihui

One song Xiang Yunduan almost died in Wugong Mountain

July 3, 2023
  • Liu Lang The theme of this circle of friends is very good. This is just a blog to record life!!
  • Lvtu It seems that it has grown a lot...
  • Cheng Zhihui author reply Lvtu Ha ha, yes, I gained 40 jin
  • Google Optimization Wugong Mountain is very beautiful, especially at sunrise and sunset
  • Three autumn leaves I also want to go. My friend hasn't had a holiday. Is there anything I should pay attention to
  • Cheng Zhihui author reply Three autumn leaves Avoid the peak period. There are many people going up the mountain in the afternoon, and many people going down the mountain after sunrise in the morning.
  • Leaf rain Where is Wugong Mountain
  • Cheng Zhihui author reply Leaf rain Pingxiang, Jiangxi
  • See more
Cheng Zhihui

I am the rice dumpling. How do you rate it?

June 25, 2023
  • Mr.Chou Green dumplings, I saw... haha. Full score
  • roughly The last one is already cosplay, and you have to stand and row. If you have an unstable center of gravity, you should not be afraid of colds or clothes fading. Is life so hard?
  • Cheng Zhihui author reply roughly They are all professional paddle enthusiasts. They invite people to perform in the past and make money while playing.
Cheng Zhihui

Tencent Cloud COS data Vientiane, the text watermark uses URL safe Base64 encoding

 //Base64 decoding export const URLSafeBase64 = { encode: (str) => { //Convert string to UTF-8 encoded byte array let utf8Bytes = new TextEncoder().encode(str); //Convert byte array to Base64 encoded string let base64Str = btoa(String.fromCharCode(...utf8Bytes)); //According to the Base64 encoding rule, it will be encoded as "SGVsbG8=" Note the "=" place filler at the end. //If the URL safe Base64 encoding is used, it will be encoded as "SGVsbG8" without a place filler. In decoding, place filling characters need to be added or removed according to the encoding method. //Replace unsafe characters and remove place filling characters return base64Str.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); }, decode: (encodedStr) => { //Add place filler and replace safe characters encodedStr = encodedStr.replace(/-/g, "+").replace(/_/g, "/"); //The reason for using the while loop here is to ensure that the correct number of place fillers are added. //Because in some cases, you need to add more than one "=" place filler, while using the if statement can only add one "=". For example, if the length of the encoded string is 2, you need to add two "=" placeholders to make the string length 4. while (encodedStr.length % 4) { encodedStr += "="; } //Convert Base64 encoded string to byte array let base64Bytes = Uint8Array.from(atob(encodedStr), (c) => c.charCodeAt(0)); //Convert byte array to UTF-8 encoded string return new TextDecoder().decode(base64Bytes); }, }

Use Scenarios

Use Tencent Cloud COS data Vientiane image watermark function to customize the image watermark

 >>>URLSafeBase64.encode ("I can customize the text watermark settings") <<< '5oiR5Y-v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w'

http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?watermark/2/text/5oiR5Y -v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w/font/dGFob21hLnR0Zg/fontsize/30/fill/IzAwMDAwMA/dissolve/70/shadow/0/gravity/center/dx/0/dy/0

April 27, 2023
Cheng Zhihui

Today, I completed my public defense, which is the official end of campus life.

May 11, 2022
Cheng Zhihui

Deconstruction content shared by Shang Silicon Valley

The deconstruction assignment syntax is a JavaScript expression. By deconstruction assignment, you can take attributes/values from objects/arrays and assign them to other variables. This syntax is a new syntax introduced by the ECMAscript 6 specification, which makes it easier to get values from arrays and objects.

  1. Extract Data

Let's first look at how to deconstruct objects in JavaScript, starting with a simple example of this commodity object.

 const product = { id: 1, title: "Nike Air Zoom Pegasus 38", product_image: "/resources/products/01.jpeg", shown: "White/Pure Platinum/Midnight Navy/Wolf Grey", price: 120, }; const { id, price, title } = product;

In this way, you can access the corresponding properties in the following ways:

 console.log(id); //  one console.log(price); //  one hundred and twenty console.log(title); //  Nike Air Zoom Pegasus 38

Deconstruction can make the code clearer and simpler. What if you need to deconstruct a more complex object? That is, the object in the object.

Now suppose you need to obtain the attribute of one of the commodities from the commodity list data, as follows:

 const products = [ { id: 1, title: "Nike Air Zoom Pegasus 38", price: 120, }, { id: 2, title: "Nike Air Zoom Alphafly NEXT%", price: 275, }, { id: 3, title: "Nike Zoom Fly 4", price: 89.0, }, ];

Here, the product list is nested with several layers. You need to access the product information. You can deconstruct as many levels as possible to obtain the attributes of the product object.

 const [tmp, { id, title, price }] = products; console.log(id); //  two console.log(title); //  Nike Air Zoom Alphafly NEXT% console.log(price); //  two hundred and seventy-five

The above code is only used to show its usage. It is not recommended to obtain object information like this in an array during project development.

In general, the data list does not have to be an array. In terms of acquisition efficiency, the access of map objects is more efficient than that of arrays. You can change the above data into a map object, as follows:

 const products = { 1: { title: "Nike Air Zoom Pegasus 38", price: 120, }, 2: { title: "Nike Air Zoom Alphafly NEXT%", price: 275, }, 3: { title: "Nike Zoom Fly 4", price: 89.0, }, }; const { 2: { id, title, price }, } = products; console.log(id); //  two console.log(title); //  Nike Air Zoom Alphafly NEXT% console.log(price); //  two hundred and seventy-five

In JavaScript, data can be variables and methods, so deconstruction assignment is also suitable for the definition of function parameters, as follows:

 const printArticle = ({ title, remark }) => { console.log(title); console.log(remark); }; printArticle({ Title: "JavaScript Deconstruction Assignment", Remark: "Introduction to practical scenarios for deconstructing assignment", });

When using frameworks such as React or Vue, there are many places to deconstruct assignment, such as the introduction of methods.

  1. Alias value

If you want to create a variable that is different from the attribute name, you can use the alias function of object deconstruction.

const { identifier: aliasIdentifier } = expression;

Identifier is the name of the attribute to be accessed, and aliasIdentifier is the name of the variable. The specific usage is as follows:

 const products = { 1: { title: "Nike Air Zoom Pegasus 38", price: 120, }, 2: { title: "Nike Air Zoom Alphafly NEXT%", price: 275, }, 3: { title: "Nike Zoom Fly 4", price: 89.0, }, }; const { 2: { price: productPrice }, } = products; console.log(productPrice); //  two hundred and seventy-five
  1. Dynamic Attributes

You can use dynamic names to extract variable attributes (the attribute names are known at runtime):

const { [propName]: identifier } = expression;

The propName expression should be evaluated as an attribute name (usually a string), and the identifier should indicate the variable name created after deconstruction. The usage is as follows:

 const products = { 1: { title: "Nike Air Zoom Pegasus 38", price: 120, }, 2: { title: "Nike Air Zoom Alphafly NEXT%", price: 275, }, 3: { title: "Nike Zoom Fly 4", price: 89.0, }, }; const productKey = "1"; const { [productKey]: product } = products; console.log(product); //  { title: 'Nike Air Zoom Pegasus 38', price: 120 }

In the above code, the value of product can be changed by updating the value of productKey.

  1. Rest in Object Deconstruction

Add the rest syntax to the deconstruction. The Rest attribute collects the remaining enumerable attribute keys that have not been picked up by the deconstruction mode.

const { identifier, ...rest } = expression;

After deconstruction, the variable identifier contains the attribute value. The rest variable is a normal object with other properties.

 const product = { title: "Nike Air Zoom Pegasus 38", price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45, }; const { title, ...others } = product; console.log(others); //  { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

For arrays, you can obtain the first and last values through Rest:

 const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); //  one console.log(tail); //  [ 2, 3 ]
  1. Default

As described earlier, you can assign default values to arrays when they are destructed:

 const RGBA = [255, 34]; const [R, G, B = 0, A = 1] = RGBA; console.log(R); //  two hundred and fifty-five console.log(G); //  thirty-four console.log(B); //  zero console.log(A); //  one

In this way, you can ensure that there is a default value when B and A are not defined.

It is concluded that deconstruction is a very practical feature, Front end training It has been added to the ES6 version of JavaScript. By deconstruction, you can quickly and easily extract attributes or data from objects and arrays into individual variables. It is applicable to nested objects, and you can use Operator assigns values to array assignments.

Author: Shang Silicon Valley
Link: https://juejin.cn/post/7037314654065917983
Source: Rare earth gold mining
The copyright belongs to the author. For commercial reproduction, please contact the author for authorization, and for non-commercial reproduction, please indicate the source.


Deconstruction of WeChat applet actual parameter transmission object

Use dataset in traditional way

 <button bind:tap="sayHello" data-content="My name is SayHello">button</button> sayHello(e){ let content = e.target.dataset.content; console.log(content) }

Official WeChat applet document dataset usage

Deconstruction of function parameter objects

 <button bind:tap="sayHello" data-content="My name is SayHello">button</button> sayHello({ currentTarget: { dataset: { content } } }){ console.log(content) }

If you don't understand it, just read it like this

 let myObj = { currentTarget: { dataset: { content: "My name is SayHello" } } } const { currentTarget: { dataset: { content } } } = myObj console.log(content)
March 1, 2022
Cheng Zhihui

problem

In the development process, we often encounter such a situation: when an object or array (the value in the array is an object) is declared or assigned in the data of vue, a new attribute is added to the array object. If you directly update the value of this attribute, the view will not be updated.

According to the official document definition: if new properties are added to the instance after the instance is created, it will not trigger the view update.

realization

HTML section

 <div id="app"> <ul> <li v-for="value in obj" :key="value"> {{value}} </li> </ul> <button @ click="addObjB">Add obj. b</button> </div>

JS part

 data() { return { obj: { a: "obj.a" } } }, methods: { addObjB() { //By default // this.obj.b = "obj.b" //The first solution // let obj = { //     a: "obj.a", //     b: "obj.b" // }; // this.obj = obj //The second solution // this.$ set(this.obj,"b","obj.b") } }

By default, click button to find that obj. b has been successfully added, but the view has not been refreshed

The reason is that when Vue instances are created, obj. b is not declared, so Vue does not convert it into a responsive attribute, and naturally does not trigger the view update. At this time, Vue's global api - $set() needs to be used

The $set() method is equivalent to manually processing obj. b into a responsive property, and the view will change accordingly

In the development process, I used the first method to solve the problem, but the disadvantage is that it is troublesome, and many scenarios are very unfriendly to implement.

Use the $set provided by the vue official Vue.set( target, propertyName/index, value )

reference resources:
one What happens when a new attribute is added to the object attribute in data in Vue, and how to solve it?
two Vue -- add attribute/responsive data to the object in the data data (use Vue. $set()), and trigger the view update

February 17, 2022
Icefox Theme . E ICP Bei 16001608-1