黑马程序员技术交流社区

标题: 【西安校区】JS 开发常用工具函数（二） [打印本页]

作者: 逆风TO 时间: 2019-8-14 09:11
标题: 【西安校区】JS 开发常用工具函数（二）
20、Object.assign：对象属性复制，浅拷贝
Object.assign = Object.assign || function(){
if(arguments.length == 0) throw new TypeError('Cannot convert undefined or null to object');

let target = arguments[0],
      args = Array.prototype.slice.call(arguments, 1),
      key
args.forEach(function(item){
      for(key in item){
         item.hasOwnProperty(key) && ( target[key] = item[key] )
      }
})
return target
}
使用Object.assign可以浅克隆一个对象：

let clone = Object.assign({}, target)
简单的深克隆可以使用JSON.parse()和JSON.stringify()，这两个api是解析json数据的，所以只能解析除symbol外的原始类型及数组和对象

let clone = JSON.parse( JSON.stringify(target) )

21、clone：克隆数据，可深度克隆
这里列出了原始类型，时间、正则、错误、数组、对象的克隆规则，其他的可自行补充

function clone(value, deep){
if(isPrimitive(value)){
      return value
}

if (isArrayLike(value)) { //是类数组
      value = Array.prototype.slice.call(value)
      return value.map(item => deep ? clone(item, deep) : item)
   }else if(isPlainObject(value)){ //是对象
         let target = {}, key;
      for (key in value) {
         value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], deep) : value[key] )
      }
}

let type = getRawType(value)

switch(type){
      case 'Date':
      case 'RegExp':
      case 'Error': value = new window[type](value); break;
}
return value
}

22、识别各种浏览器及平台
//运行环境是浏览器
let inBrowser = typeof window !== 'undefined';
//运行环境是微信
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
//浏览器 UA 判断
let UA = inBrowser && window.navigator.userAgent.toLowerCase();
let isIE = UA && /msie|trident/.test(UA);
let isIE9 = UA && UA.indexOf('msie 9.0') > 0;
let isEdge = UA && UA.indexOf('edge/') > 0;
let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

23、getExplorerInfo：获取浏览器信息
function getExplorerInfo() {
let t = navigator.userAgent.toLowerCase();
return 0 <= t.indexOf("msie") ? { //ie < 11
      type: "IE",
      version: Number(t.match(/msie ([\d]+)/)[1])
} : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // ie 11
      type: "IE",
      version: 11
} : 0 <= t.indexOf("edge") ? {
      type: "Edge",
      version: Number(t.match(/edge\/([\d]+)/)[1])
} : 0 <= t.indexOf("firefox") ? {
      type: "Firefox",
      version: Number(t.match(/firefox\/([\d]+)/)[1])
} : 0 <= t.indexOf("chrome") ? {
      type: "Chrome",
      version: Number(t.match(/chrome\/([\d]+)/)[1])
} : 0 <= t.indexOf("opera") ? {
      type: "Opera",
      version: Number(t.match(/opera.([\d]+)/)[1])
} : 0 <= t.indexOf("Safari") ? {
      type: "Safari",
      version: Number(t.match(/version\/([\d]+)/)[1])
} : {
      type: t,
      version: -1
}
}

24、isPCBroswer：检测是否为PC端浏览器模式
function isPCBroswer() {
let e = navigator.userAgent.toLowerCase()
      , t = "ipad" == e.match(/ipad/i)
      , i = "iphone" == e.match(/iphone/i)
      , r = "midp" == e.match(/midp/i)
      , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
      , a = "ucweb" == e.match(/ucweb/i)
      , o = "android" == e.match(/android/i)
      , s = "windows ce" == e.match(/windows ce/i)
      , l = "windows mobile" == e.match(/windows mobile/i);
return !(t || i || r || n || a || o || s || l)
}

25、unique：数组去重，返回一个新数组
function unique(arr){
if(!isArrayLink(arr)){ //不是类数组对象
      return arr
}
let result = []
let objarr = []
let obj = Object.create(null)

arr.forEach(item => {
      if(isStatic(item)){//是除了symbol外的原始数据
         let key = item + '_' + getRawType(item);
         if(!obj[key]){
            obj[key] = true
            result.push(item)
         }
      }else{//引用类型及symbol
         if(!objarr.includes(item)){
            objarr.push(item)
            result.push(item)
         }
      }
})

return resulte
}

26、Set简单实现
window.Set = window.Set || (function () {
function Set(arr) {
      this.items = arr ? unique(arr) : [];
      this.size = this.items.length; // Array的大小
}
Set.prototype = {
      add: function (value) {
         // 添加元素,若元素已存在,则跳过，返回 Set 结构本身。
         if (!this.has(value)) {
            this.items.push(value);
            this.size++;
         }
         return this;
      },
      clear: function () {
         //清除所有成员，没有返回值。
         this.items = []
         this.size = 0
      },
      delete: function (value) {
         //删除某个值，返回一个布尔值，表示删除是否成功。
         return this.items.some((v, i) => {
            if(v === value){
                  this.items.splice(i,1)
                  return true
            }
            return false
         })
      },
      has: function (value) {
         //返回一个布尔值，表示该值是否为Set的成员。
         return this.items.some(v => v === value)
      },
      values: function () {
         return this.items
      },
}

return Set;
}());

27、repeat：生成一个重复的字符串，有n个str组成，可修改为填充为数组等
function repeat(str, n) {
let res = '';
while(n) {
      if(n % 2 === 1) {
         res += str;
      }
      if(n > 1) {
         str += str;
      }
      n >>= 1;
}
return res
};
//repeat('123',3) ==> 123123123

28、dateFormater：格式化时间
function dateFormater(formater, t){
let date = t ? new Date(t) : new Date(),
      Y = date.getFullYear() + '',
      M = date.getMonth() + 1,
      D = date.getDate(),
      H = date.getHours(),
      m = date.getMinutes(),
      s = date.getSeconds();
return formater.replace(/YYYY|yyyy/g,Y)
      .replace(/YY|yy/g,Y.substr(2,2))
      .replace(/MM/g,(M<10?'0':'') + M)
      .replace(/DD/g,(D<10?'0':'') + D)
      .replace(/HH|hh/g,(H<10?'0':'') + H)
      .replace(/mm/g,(m<10?'0':'') + m)
      .replace(/ss/g,(s<10?'0':'') + s)
}
// dateFormater('YYYY-MM-DD HH:mm', t) ==> 2019-06-26 18:30
// dateFormater('YYYYMMDDHHmm', t) ==> 201906261830

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2