"JavaScript"栏目下的所有文章

JavaScript如何判断对象是否为空

2018/03/07JavaScript 标签:0

我们都知道在JavaScript中,判断一个数组是否为空,我们可以直接使用length进行判断其长度是否为>0,从而来判断数组中是否有内容。而对象却不能使用length这样的方式去判断长度。下面我们就使用两种常用方法去判断下对象。

1、JSON.stringify方法

JSON.stringify()可以将对象转换为字符串,从而我们再去比对字符串即可。如下:

let str = {}
if(JSON.stringify(str)==='{}'){
    console.log('此对象是空对象')
}else{
    console.log('此对象不是空对象')
}

2、ES6语法直接使用Object.keys

Object.keys主要是用于直接获取对象中的所有key的名称,并将其输出为一个数组。因此我们这里需要用到length来判断这个数组的长度,代码如下:

let str = {}
if(Object.keys(str).length>0){
  console.log('对象不是空对象')
}else{
  console.log('对象是空对象')
}

另外我看到有些使用for...in的去循环,但是我尝试了一下,没有成功。不建议大家使用for...in去判断

JavaScript将有相同内容的数组或对象的值进行累加

一看到这个标题,确实标题过长,不过只有长标题才能真正的说明问题。下面就使用一个实例来讲解下我到底要做什么。
其实在平时的编程中,我们可能会经常遇到如下这样的问题,就像我们的后端要从数据库中读取相同id的内容,并且合并相同id已有的值。

var arry = [{
        pid:123,
        info: '男'
    },{
        pid:123,
        info:'女'
    },{
        pid:123,
        info: '未知'
    },{
        pid:456,
        info: '东'
    },{
        pid:456,
        info:'西'
    },{
        pid:456,
        info: '南'
    },{
        pid:456,
        info: '北'
    }]

我们看到以上数组对象中,可以看到有很多个相同pid的属性值,我的目的就是将其相同的pid值的对象的info值全部合并起来,诸如
[{pid:123,info:'男/女/未知'},{pid:456,info:'东/西/南/北'}]
也就是说将相同的pid的相关内容进行合并。 阅读更多

老生常谈之惰性函数

首先我们得明白为什么要使用惰性函数?惰性函数就是第一次计算得到的值,供内部函数调用,然后用这个内部函数重置外部函数(因为同名),以后就不用计算了,也不用判断分支条件。这时函数就相当于一个被赋值的变量!
我们首先来看一个简单的实例:

var t;
function getTime(){
  if(t) return t;
  t = new Date();
  return t
}

阅读更多

javascript编写属于自己的类型检测函数

2017/11/04JavaScript 标签:0

不要跟我说类型检测不是很简单吗?好像直接使用typeof就可以检测了,这个有什么难度?但是大家都知道使用typeof检测出来的并无法检测出Arry、Date、RegExp、Error、Null等特殊类型,如我们遇到是arry的类型,检测出来的是object类型。因此我们想要得到更加精确的类型,就必须得自己动手写一个函数出来判断下类型

1、了解Object.prototype.toString

var b = null
Object.prototype.toString.call(b) //[object Null]
由Object.prototype.toString的方法我们可以知道这个方法可以获得[object Null],[object Error]等类型。这样我们就可以直接来拼接一个属于我们自己的类型检测函数啦

2、类型检测函数type

大致的思想是:假如我们检测到的是object,那么就使用Object.prototype.toString去检测,否则就使用typeof进行检测

var typeClass = {}
"Boolean Number String Function Array Date RegExp Object Error Null Undefined".split(' ').map(function(item, index){
  typeClass['[object '+ item +']'] = item.toLowerCase();
})

function type(obj){
  var objType = typeof obj ==='object' || typeof obj ==='function' ? typeClass[Object.prototype.toString.call(obj)] || 'object' : typeof obj;
  return objType
}
type(111) //number
type('111') //string
type([1,2,3]) //array
type(null) //null
type({a:1}) //object
type(new Date()) //date

JQ中的type函数

type: function( obj ) {
    if ( obj == null ) {
       return obj + "";
    }
    return typeof obj === "object" || typeof obj === "function" ?
       class2type[ toString.call( obj ) ] || "object" :
       typeof obj;
}

JQ中对IE浏览器做了兼容!

老生常谈系列之this、call、apply

2017/11/04JavaScript 标签:0

在JavaScript中我们经常要使用到this关键字,但是有时候this的指向总是让我们搞不明白,理不清楚。总之刚开始接触的时候直接是一头雾水,当然this指向都没法搞清楚,那么就很难判断出很多代码输出的结果。比如以下代码中,大家可以猜一猜this指向的是谁?

function getUrl(){
  console.log(this)
}
getUrl()

以上代码中很简单的一个例子,其实我们打印出来后this指向的是window对象
然而这并没有什么卵用,最多就是我们知道了this的指向。由此JavaScript中就出现了call、apply方法,这两个方法主要是用于动态改变this指向的,他们的使用方法一样,只不过是传递的参数不一样罢了。
使用方法:
如果call或apply的第一参数是null的话, this指向window 阅读更多

javascript中数组去重的多种方法

数组去重,简单来说就是一个数组中如果同时存在两个相同的值,但是我们只需要其中一个即可,不需要将两个相同的值都一起展示出来,这个时候就必须得使用到javascript的数组去重方法了,在javascript中并没有专门的方法直接去重的,因此我们得自己来写一个这样的方法。下面我仅介绍其中的容易理解的4种方法,当然还有其他更多的方法,希望大家能够自己去寻找和学习了,因为目前我就仅能理解这3种方法。
大概的思路应该是这样的:
1)、定义一个变量数组 res 保存结果,遍历需要去重的数组,如果该元素已经存在在 res 中了,则说明是重复的元素,如果没有,则放入 res 中。
2)、将原数组中重复元素的最后一个元素放入结果数组中
下面我们直接来看代码,代码可以让你一目了然。

1、万能的for循环

阅读更多

JavaScript中的对象拷贝

对象拷贝,可能很多人并不是很清楚,而且也使用的不多,简单的说拷贝对象就是直接复制一个数组或者一个对象,听到复制可能大家都蒙了,该如何才能达到复制一个对象或者数组?我们可以将这里的复制理解为是赋值,我们可以将一个数组或者一个对象直接赋值给一个变量,这个过程就可以称为复制(或者对象拷贝),大家一定不要被“复制、拷贝”这样的名词给搞晕了。下面我们来看几个简单的示例

1、JavaScript拷贝数组(浅拷贝)

var arry = [1,2,3]
var arry1 = arry
console.log(arry) //输出[1,2,3],说明拷贝数组成功
arry1[1] = 6
console.log(arry1) //改变arry1拷贝过来数组中的值,输出[1,6,3]

这就是一个简单的数组拷贝的过程,其意义在于,当我们需要使用和arry相同数据的时候,并且只需要更改其中的一个值,从而达到另一个效果,那么我们就可以使用这一的方式进行数组拷贝。
当然,以上方法主要是属于数组的浅拷贝。 阅读更多

简简单单理解JavaScript闭包

2017/10/18JavaScript 标签:0

也许你在很多前端面试中都被问及闭包是什么?闭包有什么作用?闭包有什么弊端?但是你真的理解闭包吗?闭包确实对于初学者来说要理解他有些困难,它主要是属于作用域链的问题,下面就由我带领你学习一下或者理解一下JavaScript的闭包。

1、作用域

我们可以将闭包简单的理解为函数内的函数,首先我们来看一个作用域的示例

function Fn(){
  var a = 3;
}
console.log(a); // 此处是报错了,因为我们在函数外部是无法获取函数内部的变量的

那么我们可以将上面的函数修改为如下的函数即可得到a的值

var a = 5;
function Fn(){
  var a = 3;
  return a;
}
consolog.log(a); //返回5
Fn(); //返回 3

阅读更多

原生JavaScript模拟事件点击

在某些功能上可能我们会使用到模拟用户点击,当然在jQuery中的模拟事件已经很强大了,但是我们再使用其他库或者使用原生JavaScript的时候,不可能使用jQuery的美元号去实现这个功能了,因此只能通过原生JavaScript去实现,下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为,如点击(click),触屏(touchStart)操作等,我们都可以进行模拟。

1、自动触发内置事件

自动触发事件有两种方法,目前支持IE内核以及Firefox内核浏览器,但是并不支持chrome

//自动触发内置事件
function commonTrigger(el, type) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent(type, true, true);
    el.dispatchEvent(evt);
}
//自动触发内置事件
function trigger(el, type) {
    var event = new MouseEvent(type, {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    el.dispatchEvent(event);
}

2、触发自定义事件

以上的内置事件,在chrome中无法执行,我们只能通过触发自定义事件的方法进行触发,相关代码如下:

function customTrigger(el, type) {
    var event = new Event(type);
    el.addEventListener(type, function (e) {
        alert('ok');
    }, false);
    el.dispatchEvent(event);
}

3、使用方法

一看上面的函数,就知道使用方法很简单了,使用如下

var el = document.getElementById('element');
var type = 'click';
commonTrigger(el, type);
trigger(el, type);
customTrigger(el, type);

虽然这个代码能够在浏览器中,特别是chrome中实现点击事件,但是总是无法真实的模拟用户点击,大家慎用,jQuery中的方法,我没有尝试过,不知道是否能够真实模拟用户点击。如果你要模拟真实用户点击事件,得通过其他类库实现!

使用setTimeout出现内存溢出的解决办法

setTimeout就是一个定时器,它可以很容易地实现在规定时间内所要执行的函数或方法。但是我再setTimeout的使用过程中就出现了内存溢出的各种问题。下面我将使用一个当前时间与过去的某个时间差的计算方式来进行讲解setTimeout,首先来看逻辑思想部分。
对于任何编程语言,我们刚开始都需要进行需求分析,需求分析就是一个实现功能的想法或者步骤。
比如我在这个例子中将会使用本地当前时间减去我所获得的时间,得到它们之间的时间差。

1、获得当前时间

获得当前时间可以直接使用new Date(),即可获得当前本地或者说本机时间。

2、目前已知时间为:2017-05-20 00:29:10

3、如何对时间进行相减

其实在JavaScript中,时间是可以直接进行减法运算的,不过必须是JavaScript的Date日期格式,如果是其他的则不支持,比如我们直接使用2017-05-20 00:29:10 - 2017-05-20 00:28:10,这样的相减是会报错的。而且也是无法相减的,因为他们两个是字符串,无法进行相减。那该怎么办?
很简单,我们将2017-05-20 00:29:10转换为Date对象即可。而JavaScript的Date对象得到的日期格式应该是这样的“Sat May 20 2017 00:33:26 GMT+0800”,我们可以通过new Date()对我们上面的字符串“2017-05-20 00:29:10”进行转换,但是转换之前必须将此字符串,转换为如下格式“2017/05/20 00:29:10”,这样的格式才能被JavaScript的Date()识别。
如此一来,他们就可以进行相减了。

4、相减后获得的秒数该如何计算?

两个日期相减得到的是毫秒数,根据1000毫秒=1秒的计算方式,我们可以得到要将毫秒转换为秒,我们需要将当前的毫秒数除以(1000*60)再乘以60,由此可以得到公式(毫秒/(1000*60)*60就可以得到秒数)。

5、在页面上实时显示秒数

这里就进入了我们今天的正题了,使用setTimeout定时器即可实现,其用法setTimeout(code,time),其中code是即将执行的代码,time为执行的毫秒数。

6、使内存溢出的setTimeout

阅读更多

12

share

AD