Lanqiao Cup web group preparation

Preface

It is some records of answering questions by myself and recording the problems encountered.
The first few questions in the competition are relatively simple. They mainly test some attributes, such as flex layout, etc. These questions must be solved. Without wasting time, they all modify some small attributes. You will know after taking a look. .
Later questions require more code parts to be written by yourself.

I still need to review my main questions. This is the meaning of preparing for the competition. I have written them all, but if I haven’t written them for a long time, I will forget them.
Introduction to front-end algorithms This is really well written, and the data structure is super important.
This time I really realized the importance of data structure and algorithm in solving problems. Data structure is the foundation, really the foundation of the foundation. If the syntax of js is not good, it will appear. Various questions.

Don’t be anxious when writing questions. If there is a problem, first check if the logic is correct. If the logic is correct, then you must pay attention to check if the grammar is correct. Especially in vue and jQuery, it is easy to write incorrect grammar, and then no errors will be reported. Use more The console.log() method, this is a very unpleasant point in the competition. There is no error report from IDE, especially because there is no SFC for Vue, so it is difficult for Vue to have a good response, which also caused me to not write out the Vue questions during the exam. , the entire vue single file is all black, it is super painful to write, and there is no response! ! !

Echarts can be done first, because this is the best way to score points. You can get points by completing a small point. But during the exam, I combined it with Vue. The 14th exam was much more difficult than the previous one, and I didn’t write it out in the end. It was so uncomfortable!

Write the page question last, because it is the most time-consuming, especially time-consuming. I suggest you either put this question at the end (because you can get points for completing more than 50%, but other questions cannot), or you can do the following directly after you are almost done. For questions, don’t stick to the details, otherwise you will be the one who suffers!
Set aside half an hour to write! In the 14th session, I put the first question directly, which was worth five points. It was very uncomfortable and not worth the money!

Now it seems that I have prepared too little, and I still need to prepare a more solid foundation!
The more I write these practical questions, the more I realize that the code is not the most important. The most important thing is the idea of ​​implementation. You must clarify the idea of ​​​​implementation, divide it into steps, and make sure that the logic is correct before writing code. I really want to play chess and think through many moves in advance.

js data structures and algorithms

You must be proficient in this, as it will have a completely different effect on solving problems.

find method

It works on each element of the array, and the function
find
must be written inside . The find() method is an iterative method. It calls the provided callbackFn function for each element in the array until callbackFn returns a true value. find() then returns the element and stops iterating the array. If callbackFn never returns true, find() returns undefined.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);
// callbackFn函数里面的参数可以是：item——每一个元素、index——元素序号、array——数组本身

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

Things to note about arrow functions

Arrow function => Adding { } after it has completely different effects than
not adding it . The difference between arrow function with curly braces { } and without { }
1. There is a default no return value () => { } has no return value by default . If you need to return a value Need to write return
2. No default return () => 1 + 1 default return,

 const word=this.arr.find(item => {
    
    item.tip===this.tip}) //加了{}就不会返回了，如果返回需要自己加return
 const target = this.arr.find(item => item.tip === this.tip);

Problem with vue2

To prepare for the exam, you need to have a solid grasp of basic grammar. If you don’t understand enough, you need to write more, and you must write more code.

Vue2 is used here. One thing to note is that when we directly modify the elements in the array in data, the view will not be updated responsively. If you understand the responsiveness principle of vue2, you should understand that this is a responsive version of vue2. The flaw is that we must use $set to modify the trigger to cause the view to update.
That is to say, all changes to variables must use the $set method.

clear(i) {
    
    
  this.idiom[i] = ""
  this.$set(this.idiom, i, "")
}

Learn to use inspections to quickly see the structure of your code

When there is a lot of HTML content and it is difficult to quickly distinguish the structure, you can open the page and use Check to see the HTML structure, and it will automatically help you distinguish the structure and make it look clearer.
Be sure to clarify the DOM structure before writing the questions. Don't rush into it as soon as you start. First sort out the structural logic before getting started.
When troubleshooting problems, you must learn to use checks to see if your css is rendered. The most important thing is to see where the problem lies so that you can solve the problem.

css Transform

Transform property of CSS3 (The Transform property is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.) rotate rotation: transform
: rotate (angle)
This exam was also tested, mainly Transform is more important, this application has more price comparisons.

Some forgotten native DOM operations

It's silly to use default as a variable name. This cannot be used as a variable name!
I remember that Teacher Pink explained the operation logic of dom in great detail and it was easy to understand. I will look it up and review it.
Isn't it just to get the DOM element first, bind the variable, then bind the event, and execute!
The problem with this question is that I have forgotten the syntax of the timer. I really need to remember it proficiently, otherwise I will really not be able to remember it if I forget it. It is still the basics, the basics, the basics!

Question 4: The color change of the light is amazing, and the promise is fulfilled. Is it necessary to use asynchronous operation here? However, you can write it this way. After all, it is a timer, and then use await to perform the promise operation. It is absolutely perfect, but it is complicated.
The practical operations of promise and async+await need to be strengthened!

When you don’t understand the js logic, print it in console.log and take a look.

Maybe this will make the logic clearer

Use of jquery

$('.li'+num).addClass("active").siblings().removeClass("active")
adds the active selected class to the specified element we obtained
. siblings() obtains all sibling nodes of the current element
.siblings().removeClass("active") is the active class that removes sibling nodes. You
can learn jQuery. I think it can be used as an understanding of
$() to get elements. '#id' is the element to get the id' .class' is the element to get the class name.
Don’t forget to add . or # because you use this to find the element
. text is the text content of the element, the same as innerHtml.

I also forgot about vue2. If I haven’t written it for a month, I will forget it like a dog.

Absolutely, I still need to write more so that I won’t forget it.
Make good use of Vue's official documentation. If you forget anything, just read the official documentation. The official documentation is very well written.

The processing of data obtained by aixos, that is, promise, needs to be further understood, because axios returns a promise object and needs to be processed before the array data can be obtained.

Binding of attributes, especially class binding, is very common, but I always remember it wrong, causing the operation to fail, which is a pity. You can write down the class binding switching case separately.

Dynamic binding of class and style

I didn't understand the operation logic of binding classes at the beginning. It is different from other bindings. Vue has been enhanced separately!
Vue official documentation: Class and Style binding
Vue provides special functional enhancements for the v-bind usage of class and style. In addition to strings, the value of an expression can also be an object or array. ,
so remember here that when binding class and style, you must use object, object, object

首先要知道的是绑定之后"   "里面必须要放的是一个对象,以及对象中字符串类型就必须要加'    '  
而不绑定的写法是class="active"  
:class="{'active':true/false }"

还有语法问题：
:class="active?'grid':'list'"
//这里active是属性，但是其他的就必须要加字符串来表示字符串，否则就无法显示成功，很绝，就因为这个卡住了。
还有其实这样也可以用v-if来写，其实我一开始也是打算用v-if的，如果是我想到的话

axios gets data

How to put it, the main problem is the processing after getting the promise.
Here is to check whether the data can be obtained. Note that res must be printed in then to see the obtained promise.

If you want to get the data array format, then Just put res=> this.list=res.data directly in then.

Shopping cart problem

This question is really interesting. I have figured out the logic, but it is a pity that I didn't come up with a.
Obviously its logic has come out, that is, a judgment needs to be made in the shopping cart array. If it already exists, don't add it to it, instead of adding it if it already exists. I still have a problem
. I am still not familiar with the syntax in js, including arrow functions, etc., so it is very inconvenient to write, and it is still the crappy syntax of java.

错误代码展示,这里之所以错就是因为了用来错误的循环结构for...in，一定要记住它是用来遍历下标/属性
  let flag=false;
                for(item in this.cartList){
    
    
                  if(item.id=goods.id){
    
    
                    flag=true; 
                    item.num++;
                  }
                }

This really exposes a lot of my grammatical problems! You really can't underestimate these problems. These problems will expose your weak foundation. In this case, you will get stuck because of this small point, whether in projects or algorithm questions.

Don't use for...in anymore, it's stupid. Remember it is used to traverse the object properties, not the objects in the array.

for...in is an ES5 standard. This method is inefficient in traversing arrays and is mainly used to loop through the properties of objects .
Disadvantages of traversing arrays: the subscript index value of the array is a number, and the index values ​​"0", "1", "2", etc. traversed by for-in are strings.
Object.defineProperty, the created property, is not enumerable by default.

Both forEach and for of can be used here.

for...of is a new method in ES6, but for...of cannot traverse ordinary objects . The advantage of for...of is that you can use break to jump out of the loop.

The for-of method avoids all the defects of the for-in loop.
Unlike forEach(), it can correctly respond to break, continue and return statements. The
for-of loop not only supports arrays, but also supports most array-like objects, such as DOM NodeList object.
for-of loops also support string traversal

In the process of reviewing the questions, I also truly discovered my own shortcomings. I finally realized that what I had learned on paper was shallow, and I knew that I had to do it in detail. You still need more practice to really understand the knowledge, otherwise you will never understand it.

The final complete code:

    methods:{
    
    
            addToCart(goods){
    
    
                // TODO：修改当前函数，实现购物车加入商品需求
                let flag=false;
                for(item of this.cartList){
    
    
                  //啊啊啊 被自己蠢死，都是小错误，啊啊啊啊，好气啊
                  if(item.id===goods.id){
    
    
                    flag=true; 
                    item.num++;
                  }
                }
                if(!flag){
    
    
                   goods.num = 1;
                   this.cartList.push(goods);
              }
               
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },
            removeGoods(goods){
    
    
                // TODO：补全代码实现需求
                if(goods.num<2){
    
    
                  this.cartList.pop(goods);
                }else{
    
     goods.num--;}
            
            }
        }

Looking for the Little Werewolf

The most important thing is to know what the filter function of the array does. It filters the elements in the array that meet the conditions and finally returns an array. The parameter in the filter() function is also a callback function.

The filter method is used to filter array members, and the members that meet the conditions form a new array and return it.
Its parameter is a function. All array members execute the function in sequence, and the members whose return result is true form a new array and return it.
This method does not change the original array.

使用myarray：
    let newcardList = cardList.myarray(
          (item) => item.category == "werewolf"
        );

myarray方法：
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
    
    
  // TODO：待补充代码
  let newArr=[];
  this.forEach(item => {
    
    
   if(cb(item)){
    
    
    newArr.push(item);
   }
  });
   return newArr;
};

Since all members of the filter must be executed, a loop must be created to allow all members to execute. So what does cb (callback function) do? It is a function used for judgment. When the judgment conditions are met, this The elements are put into the new array, and finally a new array that meets the conditions is returned.

The last question - paging

I must have written about this topic in vue learning! But it seems that Vue is not allowed to be used here, and it must be written with native DOM, which is awesome.
If it was an exam, I should give up. I can look at the code to understand it. It is too troublesome.
This question is still a bit difficult at the end, but I think for those who are very skilled, these questions should be very simple, almost easy to grasp.
It is very strange that you have to write the full path when getting data in Axios. Even if it is in the same folder, you have to write the absolute path.

I think after writing this set of questions, I can take a look at the Lanqiao Cup course, and then look at es6 and jQuery. I think it's pretty good.

Simulation 1

Type judgment

Learned the method of type judgment:
Object.prototype.toString.call(data).slice(8,-1);
I have studied this method before. Why add 8 and -1 because the previous paragraph is object, so Cut this paragraph off

Color picker

I think the most difficult thing about this question is that I forgot addEventListener(), the change method, and the final setProperty method. DOM and BOM really need to be reviewed carefully.
I feel that whether it is a written test or a Blue Bridge Cup, I really like to test the BOM operation of js. I think BOM is still the key point, so review it carefully.

addEventListener(event,function);

const inputs = document.querySelectorAll(".controls input");

/**
 * 上面已经选取了两个取色器
 * 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）
 * 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦
 *  */
 const gra=document.querySelector(".gradient")
 inputs.forEach((item,index)=>{
    
    
     item.addEventListener("change",
         ()=>{
    
    
             gra.style.setProperty('--color'+[index+1],item.value);
         }
     )
 })

Summarize

The 14th competition was much more difficult than the 13th competition. Perhaps because the first competition was relatively simple, the difficulty increased this time, and the overall questions also had some changes. Generally speaking, the basics are very important. At the same time, you should go to the official website to learn more about the content in the game.