网站首页 > 基础教程 正文
技巧一
有时候读取变量属性时,他可能不是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.数字取整
et 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);
?
猜你喜欢
- 2024-10-16 「译」你不知道的Chrome调试技巧DAY1-DAY6
- 2024-10-16 Java8 Stream 拼接字符串 Collectors.joining
- 2024-10-16 开发人员要点:JavaScript console methods
- 2024-10-16 前端异常监控和容灾 前端架构师成长之路
- 2024-10-16 高级Web必备:网络优化,拿去镇住面试官
- 2024-10-16 JS 调试心得 前端js调试
- 2024-10-16 这几个JS调试方法知道很受益 js怎么调试
- 2024-10-16 小窍门分享:如何使用Chrome控制台创建表格
- 2024-10-16 10个JavaScript调试技巧,帮你更好、更快地调试代码
- 2024-10-16 5个控制台技巧助你在Chrome开发者工具更好的调试web应用(翻译)
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)