前端总结系列(杂七杂八)

木星
251 阅读6分钟

目录

戳我->原文地址 加老哥进每日打卡群加我也行 每日老哥稳定更新

  1. 用js写一个随机生成指定字符串的方法

  2. 给定一个span标签，用纯css并且用3种方式实现一个三角形

  3. 数组去重

  4. 深拷贝 浅拷贝

用js写一个随机生成指定字符串

       function randomStringOne(n){
           const str='dkladsd9382909183kdls';
           let res=''; 
           for(let i=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)

用标签实现一个三角形

    //html 
    <div class="Triangle">
        <span class="border-triangle"></span>
        <!-- 方法二 -->
        <div class="message-box">  
            <span>我是利用 css transfrom 实现的</span>  
            <div class="triangle-css3 transform ie-transform-filter"></div>
        </div>
        <!-- 方法三 -->
        <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');
    }
    /* 方法三 */
    .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%);
    }

如图

数组去重

/**
    *数组去重
*/

let testArr=[2,3,42,3,5,2,1,52,42,64,52];
//for
function distinctFor(arr=testArr){
    let result = [] , len= arr && arr.length;
    for(let i = 0; i < len ; i++){
        for(let j=i+1; j<len;j++){
            if(arr[i]==arr[j]){
                j=++i;
            }
        }
        result.push(arr[i])
    }
    return result;
}
// forEach indexOf
function distinctForEachIndexOf(arr=testArr){
    let result=[];
    arr.forEach((v,i,array)=>{
        array.indexOf(v,i+1)===-1 && result.push(v)
    });
    return result;
}
// filter 去重
function distinctFilter(arr=testArr){
    return arr.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)); // set 去重
console.log(newArr);//[2, 3, 42, 5, 1, 52, 64]

  • forEach

    语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg]); 参数：callback 为数组中每个元素执行的函数，该函数接收三个参数： currentValue 数组中正在处理的当前元素。 index 可选 数组中正在处理的当前元素的索引。 array 可选 forEach() 方法正在操作的数组。 thisArg 可选 可选参数。当执行回调函数 callback 时，用作 this 的值。 返回值 undefined。

    示例：

      const arraySparse = [1,3,,7];
  let numCallbackRuns = 0;

  arraySparse.forEach(function(element){
  console.log(element);
  numCallbackRuns++;
  });

  console.log("numCallbackRuns: ", numCallbackRuns);// ,, 会被跳过

  // 1
  // 3
  // 7
  // numCallbackRuns: 3

  • filter

    语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

    参数：callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数： element 数组中当前正在处理的元素。 index可选 正在处理的元素在数组中的索引。 array可选 调用了 filter 的数组本身。 thisArg可选 执行callback 时，用于 this 的值。

    filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

深拷贝 浅拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身， 新旧对象还是共享同一块内存。但深拷贝会另外创造一 个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

  • 深拷贝
/**
    *------------------------------------------------
    *               深拷贝 && 浅拷贝
    *       浅拷贝只复制指向某个对象的指针，而不复制对象本身，
            新旧对象还是共享同一块内存。但深拷贝会另外创造一
            个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
    *------------------------------------------------
**/ 
/* 
    *深拷贝
    *JSON api
    *缺点：
    *不能复制 function 、正则、Symbol
    *循环引用报错
    *相同引用重复复制
    */
    var testObj=[
    {
        txt1:"测试文本",
        id:"1",
        content:"我是长文本啊啊啊啊"
    },
    {
        txt1:"测试文本2",
        id:"2",
        content:"我是长文本啊啊啊啊2"
    }
    ]
// var testObj=['txt1','txt2','txt3','txt4']
    JSON.parse(JSON.stringify(testObj));

/* 
    * 深拷贝 
    * 
    */

    function copy(obj){
        let newobj = null;   //声明一个变量用来储存拷贝之后的内容
        
    //判断数据类型是否是复杂类型，如果是则调用自己，再次循环，如果不是，直接赋值即可，
    //由于null不可以循环但类型又是object，所以这个需要对null进行判断
        if(typeof(obj) == 'object' && obj !== null){ 
        
    //声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
            newobj = obj instanceof Array? [] : {};    //instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链
            
    //循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数
            for(var i in obj){  
                newobj[i] = copy(obj[i])
            }
        }else{
            newobj = obj
        }    
    return newobj;    //函数必须有返回值，否则结构为undefined
}

    
var copyTest = copy(testObj)
testObj[0].id="3";
console.log(testObj) // [0].id==3
console.log(copyTest)// [0].id==1
  • 浅拷贝
/**
    * 浅拷贝
    * ***/
    Object.assign(testObj); 


// 浅拷贝
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
        dst[prop] = src[prop];
    }
}
return dst;
}

//  浅拷贝修改第一层数据及 包含子对象的数据 呆萌   //

var obj1 = {
'name' : 'zhangsan',
'age' :  '18',
'language' :{
    names:"原始数据"
},
};
var obj3 = shallowCopy(obj1);
obj3.name = "lisi";
obj3.language.names = '测试修改';
console.log('obj1',obj1) // ... name:'zhangsan',language:'测试修改'
console.log('obj3',obj3) // ... name:'lisi',language:'测试修改'

  • 赋值、深拷贝、浅拷贝对原始数据影响

    1. 赋值：和原数据指向同一对象，修改赋的值原始数据也会一同改变（不管对象中是否包含子对象）

    2. 浅拷贝：和原数据不指向同一对象，如果第一层为基本数据类型修改后原始数据不会一同改变，如果修改第一层中含子对象的元素，会改变相应原始数据里的值。（如上面的浅拷贝 ）

    3. 深拷贝：和原数据不指向同一对象，不管修改那个子元素都不会影响原始数据

了解更多 >

未完待续 -_-#

avatar
文章
阅读
粉丝