码迷,mamicode.com
首页 > Web开发 > 详细

WEB前端资源代码:常用篇

时间:2018-10-29 20:41:12      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:merge   asc   str   rev   block   fine   def   developer   数组   

对象的判空

  • 将json对象转化成json字符串,然后进行判断是否等于字符串‘{}‘,直接写{}无法进行判断
let isObject = {};
console.log(JSON.stringify(isObject) == ‘{}‘);
  • 使用for循环来判断,若不为空,则返回false
let listObject = { a: 1, b: 3, c: 4 };
function isEmptyObject() {
    for(let key in listObject) {
        return false;
    }
    return true;
}
console.log(isEmptyObject());
  • 使用Object.keys()来判断,返回的是一个数组,根据数组长度来判断
function isEmptyObject2(obj) {
    return Object.keys(obj).length == 0;
}
console.log(isEmptyObject2(isObject));
  • 对这个对象中一定存在的属性进行判断
console.log(isObject.id == null);

用对象的属性查找数组里的对象

var inventory = [
    {name: ‘apples‘, quantity: 2},
    {name: ‘bananas‘, quantity: 0},
    {name: ‘cherries‘, quantity: 5}
];

function findCherries(fruit) { 
    return function(value){
       return value.name == fruit
    }
}
console.log(inventory.find(findCherries(‘cherries‘))); // { name: ‘cherries‘, quantity: 5 }

将对象转换成数组

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

var obj = { foo: ‘bar‘, baz: 42 };
console.log(Object.values(obj)); // [‘bar‘, 42]

// array like object
var obj = { 0: ‘a‘, 1: ‘b‘, 2: ‘c‘ };
console.log(Object.values(obj)); // [‘a‘, ‘b‘, ‘c‘]

// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };
console.log(Object.values(an_obj)); // [‘b‘, ‘c‘, ‘a‘]

// getFoo is property which isn‘t enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = ‘bar‘;
console.log(Object.values(my_obj)); // [‘bar‘]

// non-object argument will be coerced to an object
console.log(Object.values(‘foo‘)); // [‘f‘, ‘o‘, ‘o‘]

Object.values()详细参考地址:《MDN:Object.values(obj)

将类数组对象转换成数组

  • Array.prototype.slice.call(arguments)或者[].slice.call(arguments)
/* 该方法可以将类数组对象转换为数组,所谓类数组对象,就是含 length 和索引属性的对象
*  返回的数组长度取决于对象 length 属性的值,并且非索引属性的值或索引大于 length 的值都不会被返回到数组中
*  Array.prototype.slice.call(obj,start,end) start:方法中slice截取的开始位置,end终止位置,默认从0开始
* */
let testObject = {
    0: ‘a‘,
    1: ‘b‘,
    2: ‘c‘,
    name: ‘admin‘,
    length: 3,
};

/* 对象中必须定义length,且属性值不能为非数字,非数字无法返回 */
console.log(Array.prototype.slice.call(testObject));

/* 或者简写为[].slice.call(testObject) */
console.log([].slice.call(testObject));
  • Array.from()
/* Array、Set、Map 和字符串都是可迭代对象(WeakMap/WeakSet 并不是可迭代对象)
*  这些对象都有默认的迭代器,即具有 Symbol.iterator 属性
*  所有通过生成器创建的迭代器都是可迭代对象
*  可以用 for of 循环
 * */
let testObject2 = {
    0: ‘a‘,
    1: ‘b‘,
    2: ‘c‘,
    name: ‘admin‘,
    length: 3,
};
console.log(Array.from(testObject2));

判断是否为数组

let temporaryArray3 = [1,2,1,2,3];
console.log(temporaryArray3 instanceof Array);
console.log(temporaryArray3.constructor == Array);
console.log(Array.isArray(temporaryArray3));
console.log(Object.prototype.toString.call(temporaryArray3) === "[object Array]");

将数组转换成键值对对象

let transformObject = Object.assign({}, temporaryArray3);
console.log(transformObject);
let transformObject2 = {...temporaryArray3};
console.log(transformObject2);

深拷贝与浅拷贝

较常用的对象深拷贝方法:

let copyObject = JSON.parse(JSON.stringify(obj));
  • Object.assign

assign对对象分配赋值,实现浅拷贝,但是它有一个特殊的地方,可以处理第一层的深拷贝。
assign(targetObject, obj, obj1) assign会改变targetObject的值,较好的做法就是将targetObject定义为空对象{}
assign是将这个3者合并,若有相同的属性,后面的属性会覆盖前面对象的属性

let temporaryObject2 = {a: 1, d: {e: 3}};
let temporaryObject3 = {b: 1,a: 2};
let mergeObject = Object.assign({}, temporaryObject2, temporaryObject3);
console.log(mergeObject);
/* mergeObject.d.e不会改变temporaryObject2里a的值,但会改变temporaryObject2里e的值 */
mergeObject.a = 5;
mergeObject.d.e = 5;
console.log(mergeObject);
  • 数组slice浅拷贝
let copyArray1 = copyArray.slice(0);
  • 数组concat浅拷贝
let copyArray2 = copyArray.concat();

 Date类的相关例

// 以chrome为例
new Date();
// Mon Oct 23 2017 23:38:02 GMT+0800 (CST)

new Date(false);
// Thu Jan 01 1970 08:00:00 GMT+0800 (CST)

new Date(0);
// Thu Jan 01 1970 08:00:00 GMT+0800 (CST)

new Date(null);
// Thu Jan 01 1970 08:00:00 GMT+0800 (CST)

new Date(‘‘);
// Invalid Date

new Date(undefined);
// Invalid Date

详情参考:你可能不知道的 Date 类

 JS 将有父子关系的数组转换成树形数据

data.forEach(ele => {
      let parentId = ele.parentId;
      if (parentId === 0) {
        //是根元素的hua ,不做任何操作,如果是正常的for-i循环,可以直接continue.
      } else {
        //如果ele是子元素的话 ,把ele扔到他的父亲的child数组中.
        data.forEach(d => {
          if (d.id === parentId) {
            let childArray = d.child;
            if (!childArray) {
              childArray = []
            }
            childArray.push(ele);
            d.child = childArray;
          }
        })
      }
    });
    //去除重复元素
    data = data.filter(ele => ele.parentId === 0);
    console.log(‘最终等到的tree结构数据: ‘, data);

前端通过Blob下载文件流

先看下网上一个简单的代码片段:

let blob = new Blob([res], {
    type: `application / pdf` //word文档为msword,pdf文档为pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `我的文档`; //下载文件的名字
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();

全面:

/**
 * @param {String} resource 文件流
 * @param {String} fileType 文件类型
 * @param {String} fileName 文件名
 * */
var downloadBlob=function(resource,fileType,fileName){
    var data = new Blob([resource],{
        type:fileType
    });
    if(‘download‘ in document.createElement(‘a‘)){ //非IE
        var downloadUrl = window.URL.createObjectURL(data);
        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = fileName;
        anchor.style.display = ‘none‘;
        document.body.appendChild(anchor);
        anchor.click();
        window.URL.revokeObjectURL(anchor.href); 
        document.body.removeChild(anchor);
    }else{ //IE10+下载
        navigator.msSaveBlob(data, fileName);
    }
    
}

调用方式:

downloadBlob(res,‘application/pdf‘,‘文档名称‘)

 

WEB前端资源代码:常用篇

标签:merge   asc   str   rev   block   fine   def   developer   数组   

原文地址:https://www.cnblogs.com/moqiutao/p/9848991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!