directory

Add elder brother into the daily punch group plus I also line daily brother stable update

  1. Write a method that randomly generates the specified string in js

  2. Given a SPAN tag, use pure CSS and implement a triangle in three ways

  3. Array to heavy

  4. Deep copy Shallow copy

Write a randomly generated specified string in js

       function randomStringOne(n){
           const str='dkladsd9382909183kdls';
           let res=' '; 
           for(leti=0; i<n; i++){ res+=str.charAt(Math.round(Math.random() * str.length)); }return res;
       }
       var str1=randomStringOne(3);
       console.log(str1)

       function randomStringTwo(n){
           const str='asdplsakdjfjdfkjkjsdposjp12321';
           const arr=Array.from({length : n },()=>str.charAt(Math.round(Math.random() * str.length)))
           return arr.join(' ');
       }
       var str2=randomStringTwo(4);
       console.log(str2)
Copy the code

Implement a triangle with a label

    //html 
    <div class="Triangle">
        <span class="border-triangle"></span> <! <div class= <div class="message-box"<span> <div class= <span"triangle-css3 transform ie-transform-filter"></div> </div> <! <div class= <div class="box"></div> </div> //css .border-triangle{ border: 30px solid transparent; border-bottom: 30px teal solid; display: block; width: 0; margin-bottom: 50px; */. Message-box {position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4;
        box-shadow:1px 2px 3px #E9FBE4;
        border:1px solid #C9E9C0;
        border-radius:4px;
        text-align:center;
        color:#0C7823;
    }
    .triangle-css3 {
        position:absolute;
        bottom:-8px;
        bottom:-6px;
        left:30px;
        overflow:hidden;
        width:13px;
        height:13px;
        background:#E9FBE4;
        border-bottom:1px solid #C9E9C0;
        border-right:1px solid #C9E9C0;} .transform { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /*ie7-9*/ .ie-transform-filter { -ms-filter: Progid: DXImageTransform. Microsoft. Matrix (M11 = 0.7071067811865475, M12 = 0.7071067811865477, M21 = 0.7071067811865477, M22 = 0.7071067811865475, SizingMethod ='auto expand'); filter: Progid: DXImageTransform. Microsoft. Matrix (M11 = 0.7071067811865475, M12 = 0.7071067811865477, M21 = 0.7071067811865477, M22 = 0.7071067811865475, SizingMethod ='auto expand'); } /* method three */. Box {width: 30px; height: 30px; margin-top: 100px; -webkit-background: linear-gradient(45deg, transparent 50%, red 50%, red 100%); background: linear-gradient(45deg, transparent 50%, red 50%, red 100%); }Copy the code

Array to heavy

/** * the array is deduplicated */let testArr =,3,42,3,5,2,1,52,42,64,52 [2]; //for
function distinctFor(arr=testArr){
    let result = [] , len= arr && arr.length;
    for(let i = 0; i < len ; i++){
        for(letj=i+1; j<len; j++){if(arr[i]==arr[j]){
                j=++i;
            }
        }
        result.push(arr[i])
    }
    returnresult; } / /forEach indexOf
function distinctForEachIndexOf(arr=testArr){
    let result=[];
    arr.forEach((v,i,array)=>{
        array.indexOf(v,i+1)===-1 && result.push(v)
    });
    returnresult; } // filter deduplicatesfunction distinctFilter(arr=testArr){
    returnarr.filter((v,i,array)=>array.indexOf(v,i+1) < 0); } distinctFilter(); //[3, 5, 2, 1, 42, 64, 52] distinctFor(); //[3, 5, 2, 1, 42, 64, 52] distinctForEachIndexOf(); //[3, 5, 2, 1, 42, 64, 52] var newArr=Array.from(new Set(testArr)); // setTo weigh the console. The log (newArr); //[2, 3, 42, 5, 1, 52, 64]Copy the code

  • forEach

    Arr. ForEach (callback(currentValue [, index [, array]])[, thisArg]); Arguments: Callback is a function executed for each element in the array that takes three arguments: the current element being processed in the currentValue array. Index Indicates the index of the current element being processed in the optional array. Array Optional array that the forEach() method is operating on. ThisArg Optional This parameter is optional. Used as the value of this when the callback function is executed. Return value undefined.

    Example:

    Const arraySparse = [1, 3, 7); let numCallbackRuns = 0; arraySparse.forEach(function(element){ console.log(element); numCallbackRuns++; }); console.log("numCallbackRuns: ", numCallbackRuns); // 1 // 3/7 // numCallbackRuns: 3Copy the code

  • filter

    Var newArray = callback(Element [, index[, array]])[, thisArg])

    Parameter: A function used by callback to test each element of the array. Returning true indicates that the element passed the test and is retained, false does not. It takes three parameters: the element in the element array that is currently being processed. Index Indicates the index of the element being processed in the array. Array optionally calls the array itself of filter. ThisArg Optional value for this when callback is executed.

    Filter calls callback once for each element in the array and creates a new array with all elements that cause callback to return true or its equivalent. Callback will only be called on indexes that have been assigned, not indexes that have been deleted or never assigned. Elements that do not pass the callback test are skipped and not included in the new array.

Deep copy Shallow copy

Shallow copy copies only Pointers to an object, not the object itself, and the old and new objects still share the same memory. But deep copy will create another identical object, the new object and the original object do not share memory, modify the new object will not change to the original object.

  • Deep copy
/ * * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * deep copy && shallow copy * shallow copy only copy pointer to an object, but not to copy the object itself, the old and new objects or share the same piece of memory. But deep copy will create another identical object, the new object and the original object do not share memory, modify the new object will not change to the original object. * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / * * * * deep copy * * JSON API faults: * can't copyfunction, re, Symbol * circular reference error * duplicate copy of same reference */ vartestObj=[
    {
        txt1:"Test text",
        id:"1",
        content:"I'm a long text ahhhhh"
    },
    {
        txt1:"Test text 2",
        id:"2",
        content:"I'm the long text ahhhhh 2"
    }
    ]
// var testObj=['txt1'.'txt2'.'txt3'.'txt4']
    JSON.parse(JSON.stringify(testObj)); /* * deep copy * */function copy(obj){
        letnewobj = null; // Check whether the data type is complex, if it is, call yourself, loop again, if it is not, assign the value directly, // Since null can not loop, but the type is object, so this needs to check nullif(typeof(obj) == 'object'&& obj ! Newobj = obj instanceof Array? Newobj = obj instanceof Array? [] : {}; // The instanceof operator is used to check if the constructor's prototype property is present in the prototype chain of an instance object. // Each item in the obj loop is called recursively again if there are complex data types in itfor(var i in obj){  
                newobj[i] = copy(obj[i])
            }
        }else{
            newobj = obj
        }    
    returnnewobj; // the function must return a value, otherwise undefined} var copyTest = copy(testObj)
testObj[0].id="3";
console.log(testObj) // [0].id==3
console.log(copyTest)// [0].id==1


Copy the code
  • Shallow copy
/** * shallow copy * ***/ object.assign (testObj); / / shallow copyfunction shallowCopy(src) {
var dst = {};
for (var prop in src) {
    if(src.hasOwnProperty(prop)) { dst[prop] = src[prop]; }}returndst; } var obj1 = {'name' : 'zhangsan'.'age' :  '18'.'language' :{
    names:"Raw data"}}; var obj3 = shallowCopy(obj1); obj3.name ="lisi";
obj3.language.names = 'Test modification';
console.log('obj1',obj1) // ... name:'zhangsan',language:'Test modification'
console.log('obj3',obj3) // ... name:'lisi',language:'Test modification'

Copy the code

  • Impact of assignment, deep copy, and shallow copy on original data

    1. Assignment: Refers to the same object as the original data, and changes the assigned value of the original data with it (whether the object contains child objects or not).

    2. Shallow copy: does not point to the same object as the original data. If the first layer is a basic data type, the original data will not change with the change. If the first layer contains child objects, the value in the corresponding original data will be changed. (Shallow copy above)

    3. Deep copy: does not point to the same object as the original data, and does not affect the original data regardless of which child element is modified

Learn more >

To be continued