标签归档：javascript

JavaScript

JavaScript如何判断对象是否为空

留下评论

我们都知道在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

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的相关内容进行合并。 继续阅读JavaScript将有相同内容的数组或对象的值进行累加 →

HTML5+CSS3

个性化html5中的video，打造属于自己的html5视频播放器

留下评论

本文使用的都是CSS3以及html5中的video实现的播放器，在PC与手机端都可以完美播放，目前还未实现播放进度条的拖移功能，后续会增加这个功能。
demo效果查看地址：https://king2088.github.io/html5-vPlayer/
先看效果图：

html5 video
html5 video

首先我们要了解一下html5中的media事件以及属性 继续阅读个性化html5中的video，打造属于自己的html5视频播放器 →

JavaScript

老生常谈之惰性函数

留下评论

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

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

继续阅读老生常谈之惰性函数 →

JavaScript

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

留下评论

不要跟我说类型检测不是很简单吗？好像直接使用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浏览器做了兼容！

JavaScript

javascript中数组去重的多种方法

留下评论

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

1、万能的for循环

继续阅读javascript中数组去重的多种方法 →

编程技术

[转]Async/Await是这样简化JavaScript代码的

留下评论

译者按： 在Async/Await替代Promise的6个理由中，我们比较了两种不同的异步编程方法：Async/Await和Promise，这篇博客将通过示例代码介绍Async/Await是如何简化JavaScript代码的。

原文: ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER
译者: Fundebug
为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

Async/Await是JavaScript的ES7新特性，来源于.NET和C#。它可以不用回调函数，像同步代码那些编写异步代码。这篇博客将通过一些代码示例，来说明Async/Await如何简化JavaScript代码。

1. 去除回调函数

运行本文的示例代码，并不需要额外的函数库。对于最新版的主流浏览器中，例如Chrome，Firefox, Safari以及Edge，它们都支持Async/Await语法。另外，Node.js 7.6+也支持了Async/Await语法。

我们编写了一些简单的API接口，用于模拟异步操作。这些接口都返回Promise，并在200ms后resolve一些数据。

class Api {
  constructor () {
    this.user = { id: 1, name: 'test' }
    this.friends = [ this.user, this.user, this.user ]
    this.photo = 'not a real photo'
  }
  getUser () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.user), 200)
    })
  }
  getFriends (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.friends.slice()), 200)
    })
  }
  getPhoto (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.photo), 200)
    })
  }
  throwError () {
    return new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error('Intentional Error')), 200)
    })
  }
}

嵌套Promise

继续阅读[转]Async/Await是这样简化JavaScript代码的 →

JavaScript

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中的对象拷贝 →

JavaScript

简简单单理解JavaScript闭包

留下评论

也许你在很多前端面试中都被问及闭包是什么？闭包有什么作用？闭包有什么弊端？但是你真的理解闭包吗？闭包确实对于初学者来说要理解他有些困难，它主要是属于作用域链的问题，下面就由我带领你学习一下或者理解一下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闭包 →

nodejs

使用webpack配置ES6开发环境

留下评论

1、ES6简介

由于ES6无法直接运行在浏览器中，只能通过babel来进行解析转换（编译）成ES5才可以运行在浏览器中，因此我们就需要给ES6搭建相关的环境，才可以开心的写ES6。
目前很多框架都使用了ES6，比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码，让我们可以少写很多代码，当然如果你还了解typescript以及coffeescrpt，那么就更加方便你进行各种开发了。但是问题来了，这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具，简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件，将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS（安装方法请到官方查看）
2)、使用npm初始化项目

npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息，并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境，我们需要安装以下几个必须的依赖包 继续阅读使用webpack配置ES6开发环境 →