zoukankan      html  css  js  c++  java
  • 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==》实现数组去重 通过 new Set(数组名)
    // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6];
    // var newarr1 = new Set(arr);
    // console.log([...newarr1]);
    // 输出的值是  [12, 3, 4, 5, 6]


    第2题==》深拷贝:
    ==》拷贝出来的对象互相的独立,不会影响 使用的JSON.stringify和JSON.parse(user2);

    var user1={name:"张三",age:18,sex:"男"};
    var user2=JSON.stringify(user1); //用JSON.stringify()把对象转为一个字符串
    var user3=JSON.parse(user2); //JSON.parse()会根据这个字符串转为一个新的对象。
    console.log(user3);

    第3题===>获取 你当前被点击的文本内容
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

    $("li").on("click",function(){
    console.log($(this).text());
    })

    on语法是==》父辈的元素对象.on("事件类型","触发的元素",function(){})


    第4题==》 设置奇数偶数背景色
    odd 奇数 和 even偶数 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)
    li:nth-child(odd) { background: #0f0;} 设置奇数行

    计算交集数组
    var a = [1,2,3,4,5];
    var b = [2,4,6,8,10];

    var c = a.filter(function(v){ return b.indexOf(v) > -1 }) //交集


    var d = a.filter(function(v){ return b.indexOf(v) == -1 }) //差集


    var e = a.filter(function(v){ return !(b.indexOf(v) > -1) }) //补集
    .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))

    //并集
    var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));

    console.log("a与b的交集:", c); // a与b的交集: (2) [2, 4]
    console.log("a与b的差集:", d); //  [1, 3, 5]
    console.log("a与b的补集:", e); // [1, 3, 5, 6, 8, 10]
    console.log("a与b的并集:", f); //(8) [1, 2, 3, 4, 5, 6, 8, 10]


    第五题: JS中检测变量为string类型的方法
    var aa = "hello world";
    function stringCheck (str) {
    if(typeof str =="string" || str.constructor == String) {
    return true;
    } else {
    return false;
    }
    }
    console.log(stringCheck(aa)) ;

    第6题闭包
    // 子函数跨作用域访问了父函数的变量 形成闭包 num不会给释放 。它利用了必报的缺点
    var getNum = (function () {
    var num = 10;
    return function () {
    return num++
    };
    })();

    var rst1 = getNum();
    var rst2 = getNum();
    console.log(rst1, rst2); //10 11


    第7题==》 将两个数组合并为一个数组
    var a = [1, 2, 3,4,5];
    var b = [4, 5, 6];

    var c = a.concat(b); //链接
    var d=new Set(c); //数组去重
    console.log([...d]); //将伪数组变为真实的数组


    第8题==》 怎样添加、移除、移动、复制、创建和查找节点?
    1)创建新节点
      createDocumentFragment() //创建一个DOM片段
      createElement() //创建一个具体的元素
      createTextNode() //创建一个文本节点

      appendChild() //添加
      removeChild() //移除
      replaceChild() //替换
      insertBefore() //插入

    3)查找
      getElementsByTagName() //通过标签名称
      getElementsByName() //通过元素的Name属性的值
      getElementById() //通过元素Id,唯一性


    第9题==》计算某个


    第10题,原型继承提
    function Child(name, age){
    this.name = name;
    this.age = age;
    }
    Child.prototype = new People();
    var child = new Child('Rainy', 20);
    child.say()

    第11题==》构造函数的继承
    function Child(name, age){
    People.call(this)
    this.name = name;
    this.age = age;
    }
    var child = new Child('Rainy', 20);
    child.say();


    第12题 ===》对一个数组实现随机排序
    var a=[12,34,1,2,3,0,-23]; //对这个数组实现随机排序
    function shuffle(arr) {
    arr.sort(function () {
    return Math.random() - 0.5;
    });
    }
    shuffle(a);
    console.log(a);

    第13题==》让元素水平 垂直居中的三种方式
    /* 第一种方式 绝对定位 距离石中玉为0 最后margin:auto 兼容性:,IE7及之前版本不支持 这种方式的兼容性是最好的了*/
    div {
    200px;
    height: 200px;
    background: green;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    }


    /* 第二种方式 div绝对定位 【margin 负间距】*/
    /* div {
    200px;
    height: 200px;
    background: green;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
    } */


    /* 第三种方式 用了css3的知识 div绝对定位水平垂直居中【Transforms 变形】 IE8不支持*/
    div {
    200px;
    height: 200px;
    background: green;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }

    第14题===》通过jQuery的extend方法实现深拷贝
    var array = [1,2,3,4];
    var newArray = $.extend(true,[],array);

  • 相关阅读:
    Oracle 11G单机 无网络环境静默安装
    Centos 7 编译安装llvm 8.0.0
    linux下测试读写
    Linux 初始化 init 系统(1):sysvinit
    自动挂载文件/etc/fstab功能详解
    虚拟机安装LINUX网络配置注意的问题
    rhel7报错整理
    16/4/4二代支付硬盘故障处理
    RedHat Enterprise Linux 7关闭防火墙方法
    Linux命令之awk数组使用范例
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/10749618.html
Copyright © 2011-2022 走看看