几个常见js问题整理

1.关于“+”和“-”中出现number类型时的转换

var a = ‘‘ + 3;   //尝试将3转化为字符串
var b = 4;
console.log(typeof a);
console.log(a+b);
console.log(a-b);   //尝试将字符串转化为number

var foo = "11"+2+"1"; //体会加一个字符串‘1‘ 和 减去一个字符串‘1‘的不同
console.log(foo);
console.log(typeof foo);

技术分享

2.js数组去重的问题

很容易想到的办法

var arrayNum = [0, 0, 0, 1, 1, 3, 3, 4, 5, 6, 7];
var arr = new Array();
var  uniqArray = function (array) {
    var newArray = [];
    for (var i = 0; i < array.length; i++) {
        if (newArray.length != 0) {
            for (var m = 0; m < newArray.length; m++) {
                var repeatNum = false;
                if (array[i] == newArray[m]) {
                    repeatNum = true;
                    break;
                }
            }
            if (repeatNum == false) {
                newArray.push(array[i]);
            }
        }
        else {
            newArray.push(array[i]);
        }
    }
    return newArray;
};

时间复杂度是O(n^2)
优化后的代码:

var arrayNum = [0, 0, 0, 1, 1, 3, 3, 4, 5, 6, 7];
var testArray = function(arry) {
    var tempArray = [];
    for (var i = 0, l = arry.length; i < l; i++) {
        //使用数组的indexof方法来判断是否在temparray中找到当前元素的索引
        if (tempArray.indexOf(arry[i])===-1 && arry != ‘‘){
            tempArray.push(arry[i]);
        }
    }
    return tempArray;
}
console.log(testArray(arrayNum));

这时的时间复杂度是O(n)

3.js对象的简单使用

在js中没有class这样的关键字来声明对象,仅仅是通过function变量名首字母大写的方式,来与js函数做区别(js函数采用驼峰命名法)

function DongJia(ver){
    var defaultValue = 0.01;
    this.version = ver ? ver : defaultValue;
    this.getVersion = function(){
        return this.version;
    }
    this.setVersion = function(ver){
        this.version = ver ;
    }
}
var dongjia = new DongJia();
//没有默认值
console.log(dongjia.getVersion());
//使用set函数改变默认值
dongjia.setVersion(0.02);
console.log(dongjia.getVersion());
//有默认值,直接给version赋值
var dongjia2 = new DongJia(0.02);
console.log(dongjia2.getVersion());

4.js中对数组的clone

使用jquery进行对象的复制

jQuery.extend( [ deep ], target , object1 [, objectN... ] )

请根据前面语法部分所定义的参数名称查找对应的参数。

参数描述
deep 可选/Boolean类型指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该”属性对象”的属性也将进行合并。
target Object类型目标对象,其他对象的成员属性将被复制到该对象上。 object1 可选/Object类型第一个被合并的对象。
objectN 可选/Object类型第N个被合并的对象。

示例代码:

    var a = { k1: 1, k2: 2, k3: 3 };
    var b = {k4:4, k5:5};
    var c ;
    c=$.extend(a);           //将a对象复制到jquery对象上,并赋值给c
    console.log(‘------------‘);
    console.log(c === $);    //c对象指向的是$对象,所以结果true
    console.log(a === $);   // false
    console.log(‘------c------‘);
    console.log(c.k2);       //相当于$.k2
    console.log(‘------c------‘);
    console.log(c);
    //c.k2 = 777;
    console.log(‘------a------‘);
    console.log(a);
    console.log(‘------b------‘);
    console.log(b);
    console.log(‘------$------‘);
    console.log($);
    console.log($.k2);

结果:
技术分享
看下面的一段代码:

    var d = $.extend({}, a)
    console.log(d);
    d.k2 = 3456;
    console.log(d);
    console.log(a);

结果为:
技术分享

可以知道,jquery中extend()不是复制引用,而是创建了新的对象

注意事项:
该函数复制的对象属性包括方法在内。此外,还会复制对象继承自原型中的属性(JS内置的对象除外)。
参数deep的默认值为false,你可以为该参数明确指定true值,但不能明确指定false值。简而言之,第一个参数不能为false值。
如果参数为null或undefined,则该参数将被忽略。
如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性,则后者会覆盖前者的属性值。

看下面一段代码对数组对象进行拷贝:

    var test = [1,2,34,];
    console.log(test);
    var contest= $.extend([],test);
    console.log(contest);
    contest.push(567);
    console.log(test);
    console.log(contest);

结果为:

技术分享

5.js闭包场景的使用

        <ul>
            <li>你是我的1</li>
            <li>你是我的2</li>
            <li>你是我的3</li>
            <li>你是我的4</li>
            <li>你是我的5</li>
        </ul>
        <div id="content">
        </div>

场景的使用是当我点击li标签的时候,移除当前li标签,并且将li标签中的内容添加到下方的div标签中

完整的代码整理如下:

<script type="text/javascript">
    $(function() {
        var $liObj = $(‘li‘),
            conText;
        for (var i = 0, l = $liObj.length; i < l; i++) {
            (function(i) {
                $liObj.eq(i).on(‘click‘, function() {
                    conText = $(‘#content‘).text();
                    $(‘#content‘).html(conText + $liObj.eq(i).text());
                    $liObj.eq(i).remove();
                    return false;
                });
            })(i);
        }
    })
    </script>

经过测试可以实现所需要的功能。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。