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);

  • 相关阅读:
    HAproxy 1.5 dev14 发布
    IBM/DW 使用 Java 测试网络连通性的几种方法
    Skype 4.1 Linux 发布,支持微软帐号登录
    Dorado 7.1.20 发布,Ajax的Web开发平台
    Aspose.Slides for Java 3.0 发布
    开发版本 Wine 1.5.18 发布
    BitNami Rubystack 开始支持 Ruby 2.0
    XWiki 4.3 正式版发布
    Silverlight实例教程 Out of Browser的Debug和Notifications窗口
    Silverlight实例教程 Out of Browser与Office的互操作
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/10749618.html
Copyright © 2011-2022 走看看