前端学习--JavaScript小技巧


(1)过滤唯一值,利用set类型的成员唯一性和扩展运算符...
可以达到过滤数组重复值得功能
例子:
const array=[1,2,3,5,5,1,1];
const uniqueArray=[...new Set(array)];
console.log(uniqueArray);
注意:这个技巧的适用方位是数组中包括的数值类型为
undefined,null,boolean,string ,number
当包含object,function,array时,则不适用
(2)短路求值(只有在仅靠左操作数的值无法确定该逻辑表达式的结果时,才求解其右操作数

&&:与运算符,将返回第一个false/'falsely'的值,当所有操作数都是true时,返回最后一个表达式的值
例子:let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3

console.log(0 && null); // Result: 0

||:或运算符,将返回第一个true/'truth'的值,当所有操作数都是false时,返回最后一个表达式的结果
例子:let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

对比下面两种等价的写法
if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}
等价于
return (this.state.data || 'Fetching Data');

(3)转换Boolean型
在JavaScript中,除0,"",null,undefined,NaN ,false,其他的都可以认为是truth
可以通过非运算符!将一系列变量转换为Boolean型
例如:
const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof isTrue); // Result: "boolean"

(4)转换String型
通过+可以将一个number类型的变量转换为string类型
例子:
const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

(5)转换Number类型
与上一条对应的,可以通过+将string型变量变为number类型
例子:
let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

还有~~(两个波浪号)也可以达到相同的效果
例子
const int = ~~"15"

console.log(int); // Result: 15
console.log(typeof int); Result: "number"
注意:~(一个波浪号)被称为“按位不运算符”,~n等价于-n-1
也就是~15=-16
两个波浪号也就是-(n-1)-1=n

(6)快速求幂
以下几种写法等价
Math.pow(2, n);
2 << (n - 1);
2**n;
说明:<<位左移位操作符

(7)快速Float转Integer
我们经常用以下几种方式将float转为Integer
Math.floor()向下取整
Math.ceil()向上取整
Math.round()将数字舍入为最接近的整数

还有一种方式是使用|位或运算符,将浮点数截断为整数(将小数点后的的内容删除,将浮点数截断为整数)
使用场景:从整数末尾删除任意数量的数字
let str = "1553"; 
Number(str.substring(0, str.length - 1));
可以不这样写,而是如下写:
console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

(8)截取数组
slice()方法
以下两种方法等价,但是使用slice速度更快
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]
等价于
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

(9)获取数组最后的元素
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]

(10)格式化json

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'
认识一下JSON.stringify(value[, replacer [, space]])
它对字符串进行序列化
支持3个参数,后两个参数是可选的
stringify对第一个参数的要求
1.非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
2.布尔值、数字、字符串的包装对象在序列化过程中会自动转换哼原始的值
3.undefined、任意的函数以及symbol值,在序列化过程中被忽略(出现在非数组对象的属性值中)
或者被转换成null(出现在数组中时)
4.所有以symbol为属性键的属性都会被完全忽略,几遍replacer参数中强制指定包含了它们
5.不可枚举的属性会被忽略

第二个参数,可以为过滤函数,也可以为数组
当为过滤函数时被序列化的值的每个属性都会经过该函数的转换和处理,
当为数组时则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串
中。

第三个参数
用来控制结果字符串里面的间距,可以为数字或字符串
数字:当前级别比上一级别缩进多少个空格
字符串:当前级别比上一级别多缩进,用该字符串(例如\t,制表符)

toJson方法:
如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值