[绍棠] 前端小技巧

 技巧一

有时候读取变量属性时，他可能不是Ojbect，你引用的时候就会出现如下错误

这个这个你就要判断这个变量是否为对象，如果是在如引用

var obj;if(obj instanceof Object){  console.log(obj.a);}else{  console.log('对象不存在');}

其实ES6中有简便写法，可以帮我们简短代码，从而更加明确

var obj;console.log(obj?.a || '对象不存在');

 技巧二

1,2,3,4,5,6....10,11,12 小于10的前面给我加个0凑成2位的和后面一致好看！！！

其实我们用slice函数可以巧妙解决这个问题

slice(start,end);

start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var list=[1,2,3,4,5,6,7,8,9,10,11,12,13];list=list.map(ele=>('0' + ele).slice(-2));console.log(list);

技巧三

使用 console.table() 来进行控制台展示

var obj = { name: 'Jack' };console.table(obj);
obj.name= 'Rose';console.table(obj);

展示出来的结果是这样的

但这个东西也不是任何场景下都好用

我们来打印一个 DOM 元素看看

var div = document.getElementById('box')console.table(div)

技巧四

获取数组中的最后的元素

数组方法slice()可以接受负整数，如果提供它，它将从数组的末尾开始截取数值，而不是开头。let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Result: [9]console.log(array.slice(-2)); // Result: [8, 9]console.log(array.slice(-3)); // Result: [7, 8, 9]

 技巧五

模板文字（或模板字符串）允许嵌入表达式。它具有独特的语法，也就是字符串必须用反引号（``）括起来。模板字符串可以包含动态值的占位符。这些可以通过美元符号和大括号（${expression}）进行标记。

我们来用这种方法做一个演示：

let name = "Charlse"let place = "India";let isPrime = bit =>{  return (bit === 'P'? 'Prime' : 'Nom-Prime')}let messageConcat = `Mr.name' is form ${place} .He is a   ${isPrime('P')} member`;

技巧六

1.数字取整​​​​​​​

let floatNum = 100.5;let intNum = ~~floatNum;
console.log(intNum); // 100

2.字符串转数字

let str="10000";let num = +str;
console.log(num); // 10000

3.交换对象键值

​​​​​​​

let obj = {    key1: "value1",    key2: "value2"};let revert = {};Object.entries(obj).forEach(([key, value]) => revert[value] = key);console.log(revert);

4.数组去重

let arrNum = [    1, 2, 3, 4, 5, 6, 7, 8, 9, 0,    1, 2, 3, 4, 5, 6, 7, 8, 9, 0];let arrString = [    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];let arrMixed = [    1, "1", "2", true, false, false, 1, 2, "2"];
arrNum = Array.from(new Set(arrNum));arrString = [...new Set(arrString)];arrMixed = [...new Set(arrMixed)];
console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]console.log(arrMixed); // [1, "1", "2", true, false, 2]

 技巧七

1.数组转化为对象

数组转化为对象，大多数同学首先想到的就是这种方法：​​​​​​​

var obj = {};var arr = ["1","2","3"];for (var key in arr) {    obj[key] = arr[key];}console.log(obj)

但是有一种比较简单快速的方法：​​​​​​​

const arr = [1,2,3]const obj = {...arr}console.log(obj)

一行代码就能搞定的事情为什么还要用遍历呢？

2.合理利用三元表达式

有些场景我们需要针对不同的条件，给变量赋予不同的值，我们往往会采用下面这种方式：​​​​​​​

const isGood = true;let feeling;if (isGood) {  feeling = 'good'} else {  feeling = 'bad'}console.log(`I feel ${feeling}`)

但是为什么不采用三元表达式呢？​​​​​​​

const isGood = true;const feeling = isGood ? 'good' : 'bad'console.log(`I feel ${feeling}`)

种也就是所谓的Single line（单行）思想，其实就是代码趋向于简洁性。

3.合并对象

两个对象合并大家用的比较多的可能就是Object.assign了​​​​​​​

const obj1 = { a: 1 }const obj2 = { b: 2 }console.log(Object.assign(obj1, obj2))

其实有一种更简洁的方式：​​​​​​​

const obj1 = { a: 1 }const obj2 = { b: 2 }const combinObj = { ...obj1, ...obj2 }console.log(combinObj)

也就是通过展开操作符(spread operator)来实现。

4.获取数组中的最后一项

通常，获取数组最后一项，我们用的比较多的是：​​​​​​​

let arr = [0, 1, 2, 3, 4, 5];const last = arr[arr.length - 1];console.log(last);

但我们也可以通过slice操作来实现：

let arr = [0, 1, 2, 3, 4, 5];const last = arr.slice(-1)[0];console.log(last);