开发实用小技巧

开发实用小技巧

模板字符串

可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，所有的空格、缩进和换行都会被保留在输出中
示例

`aaa '\n' bbb`
"aaa '
' bbb"

`\'hello\' World!`
"'hello' World!"

var a = 'test01'
var b = 'test02'
`http://api/${a}/hi/${b}`
"http://api/test01/hi/test02"

需优化代码

Alt
优化后

windowObjectReference = window.open(
    `${window.location.protocol}//${window.location.hostname}:${window.location.port}/jw?toAccessRouter=/warningScreen&pluginIds=TdPluginWarningScreen,TdPluginDeviceGis`,
     "newWindow",
     `width=${width}, height=${height},status=no,toolbar=no,resizable=yes,menubar=no,directories=no,location=no`
);

短路原则

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

0 || 1
1

1 || 0
1

0 && 1
0

1 && 0
0

css实现文字超出显示省略号
示例

width: 130px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

width: 130px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果

AltAlt
需优化代码

Alt
优化后

<p class="dec_detail_id" :title="item.sSysCode">{{ $t('interviewRecord.OBJECT_NUMBER') }}{{ item.sSysCode }}</p>

.dec_detail_id {
    width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

数组转字符串逗号拼接

[1, 2, 3].toString()
"1,2,3"

([1, 2, 3] + [1, 2, 3]).toString()
"1,2,31,2,3"

([1, 2, 3] + ['', 1, 2, 3]).toString()
"1,2,3,1,2,3"

[1,[2,3],[4,5],[6,[7,[8,9],0]]].toString()
"1,2,3,4,5,6,7,8,9,0"

[1, 2, 3].toLocaleString()
"1,2,3"

[1, 2, 3].join(',')
"1,2,3"

数字取整四舍五入、上舍入、下舍入

Math.round(1.6)
2

Math.round(1.4)
1

Math.ceil(1.4)
2

Math.floor(1.6)
1

parseInt(1.4)
1

parseInt(1.6)
1

~~1.6
1

// 带有范围的随机数生成
let min = 10;
let max = 60;
Math.floor(Math.random() * (max - min) + min);

数字补0操作

let NumFun1= (num, len = 2) => (`0${num}`).slice(-len);
let NumFun2= (num, len = 2) => (`${num}`).padStart(len, '0');
let NumFun3= (num, len = 2) => (`${num}`).padEnd( len, '0');

NumFun1(1)
"01"
NumFun1(10)
"10"
NumFun2(1, 3)
"001"
NumFun3(1, 3)
"100"

交换数组值的位置

let arrFun = (arr, i, j) => {
	let arrCopy = [...arr];
	[arrCopy[i], arrCopy[j]] = [arrCopy[j], arrCopy[i]];
	return arrCopy;
}

arrFun([1, 2, 3], 0, 1)
[2, 1, 3]

arrFun([{a:1}, {a:2},{a:3}], 1, 2)
[{a:1}, {a:3},{a:2}]

object常见方法总结

Object.keys({a: 1, b: 1})
["a", "b"]

Object.values({a: 1, b: 1})
[1, 1]

Object.entries({a: 1, b: 1})
[['a', 1], ['b', 1]]

let obj = {name: 'hello'};
obj.hasOwnProperty('name')
true
obj.hasOwnProperty('age')
false

Object.assign({a: 1, b: 1}, {c: 1})
{a: 1, b: 1, c: 1}

Object.assign({a: 1, b: 1}, {c: 1}, {c: 2})
{a: 1, b: 1, c: 2}

let obj1 = {a: 1, b: {c: 1}};
let obj2 = Object.assign({}, obj1);
obj1.a = 2;
obj2.a
1
obj1.b.c = 2;
obj2.b.c
2

浅拷贝与深拷贝

赋值其实是赋该对象的在栈中的地址，而不是堆中的数据；

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；

浅拷贝的实现方式

Object.assign()
见上

slice()
let a = [1,2,3,4];
let b = a.slice();

concat()
let a = [1,2,3,4]
let c = [];
let b = c.concat(a);

扩展运算符"..."
let a = [1,2,3,4]
let b = [...a];

深拷贝的实现方式

JSON.parse(JSON.stringify())：可以实现数组或对象深拷贝，但不能处理函数及一些特殊情况

手写递归方法：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

/**
 * 判断是否是基本数据类型
 * @param value
 */
function isPrimitive(value){
  return (typeof value === 'string' ||
  typeof value === 'number' ||
  typeof value === 'symbol' ||
  typeof value === 'boolean')
}
 
/**
 * 判断是否是一个js对象
 * @param value
 */
function isObject(value){
  return Object.prototype.toString.call(value) === "[object Object]"
}
 
/**
 * 深拷贝一个值
 * @param value
 */
function cloneDeep(value){
  // 记录被拷贝的值，避免循环引用的出现
  let memo = {};

  function baseClone(value){
    let res;
    // 如果是基本数据类型，则直接返回
    if(isPrimitive(value)){
      return value;
    // 如果是引用数据类型，我们浅拷贝一个新值来代替原来的值
    }else if(Array.isArray(value)){
      res = [...value];
    }else if(isObject(value)){
      res = {...value};
    }
 
    // 检测我们浅拷贝的这个对象的属性值有没有是引用数据类型。如果是，则递归拷贝
    Object.keys(res).forEach(key=>{
      if(typeof res[key] === "object" && res[key]!== null){
        // 此处我们用memo来记录已经被拷贝过的引用地址。以此来解决循环引用的问题
        if(memo[res[key]]){
          res[key] = memo[res[key]];
        }else{
          memo[res[key]] = res[key];
          res[key] = baseClone(res[key])
        }
      }
    })
    return res;
  }
 
  return baseClone(value)
}