序言：
这是我踏上搬砖之路那刻起，一路走来记下的点点滴滴coding技巧。蓦然回首才发现已经不是一时半会可以看完的了，随机选取部分进行分享给大家，希望能给你带去收获的喜悦。无论此时此刻你是多么的不可一世，但若干年后回首时依旧会觉得曾经的自己是多么的可笑与幼稚，但是正是这点滴的可笑与幼稚成就了最好的你吖。成长之路如此，技术之路亦是如此。
不积跬步，无以至千里；不积小流，无以成江海。点点滴滴终将成就最好的你！
通过此次Coding小技巧学习,不但可以让你的代码质量更上一层楼，而且可以让你的coding速度直逼火箭！！！
Coding小技巧
数组的对象解构
使用对象解构将数组项赋值给变量：
const str = "1997,kangkang,boy,23"
const {1:name,2:sex,0:age} = str.split(',')
console.log(name,sex,age) //kangkang boy 1997
注：本例中，2为 split 之后的数组下标，sex 为指定的变量，值为 boy
创建纯对象
创建一个对象打印出来是这样的
const obj = {}
console.log(obj)
console.log(obj.constructor)
console.log(obj.toString)
console.log(obj.hasOwnProperty)
创建一个100%的纯对象，这个对象不会继承Object的任何属性和方法（比如 constructor，toString() 等）：
const obj = Object.create(null)
console.log(obj)//{}
console.log(obj.constructor)//undefined
console.log(obj.toString)//undefined
console.log(obj.hasOwnProperty)//undefined
你没见过的valueOf
const obj = {
i:1,
valueOf:function(){
if(this.i === 1){
this.i ++
return 1
}else{
return 2
}
}
}if(obj==1&&obj==2){
console.log(obj)
}
一个对象居然可以等于两个值？？？猜一猜这个console.log(obj)会不会执行？最终的结果会是什么？（这个大概率会出现在面试题哦~）
给个总结，相信你已经得出答案：
清空和截短数组
下面有一个数组，现在我想截取前五个，如何操作
const arr = [1,2,3,4,5,6,7,8,9]
这时候可能你会想到slice()和splice()
slice()
返回一个索引和另一个索引之间的数据(不改变原数组),slice(start,end)有两个参数(start必需,end选填),都是索引,返回值不包括end
const arr = [1,2,3,4,5,6,7,8,9]
const arr2 = arr.slice(0,5)
console.log(arr2)//[1,2,3,4,5]
splice()
用来添加或者删除数组的数据,只返回被删除的数据,类型为数组(改变原数组)
const arr = [1,2,3,4,5,6,7,8,9]
arr.splice(5)console.log(arr)//[1,2,3,4,5]
最简单的清空和截短数组的方法就是改变length 属性
const arr = [1,2,3,4,5,6,7,8,9]
arr.length = 5console.log(arr)//[1,2,3,4,5]
arr.length = 0//清空数组
对数组中的所有值求和
大家第一时间想到的可能是使用一个循环，但是那样会很浪费。
var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // returns 17
条件短路
下面是常写的代码
if (hungry) {
goToFridge();
}
我们可以进一步简化代码，同时使用变量和函数：
hungry && goToFridge()
对条件使用或（OR）逻辑
以前在函数开始时声明变量，只是为了避免在出现意外错误时遇到undefined。
function doSomething(arg1){
arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}
逗号运算符
这个写出来，同事肯定请教你。
let x = 1;
x = (x++, x);console.log(x);// expected output: 2
x = (2, 3);console.log(x);// expected output: 3
扩展运算符
轻松移除数组中的重复项：
const removeDuplicate = arr=>[...new Set(arr)]
let result = removeDuplicate([42,42,'11','11',true,true,null,null])
console.log(result)//[42, "11", true, null]
使用扩展运算符可以快速扁平化二维数组：
const arr = [1,[2,3],[4,5]]
const flatArr = [].concat(...arr)
console.log(flatArr)//[1, 2, 3, 4, 5]
不幸的是，上面的技巧只能适用二维数组，但是使用递归，我们可以扁平化任意纬度数组：
function flattenArray(arr){
const flatArr = [].concat(...arr)
return flatArr.some(item=>Array.isArray(item))?flattenArray(flatArr):flatArr
}
const arr = [1,[2,3],[4,5,[6,7,[8,9]]]]
console.log(flattenArray(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9]
动态属性名称
const dynamic = 'flavour';var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}console.log(item); // { name: "Coke", flavour: "Cherry" }
对象转换为数组
//注意对象必须是以下格式的才可以通过此方式转化为数组
//获取的DOM集合，以及函数的arguments也可以通过此方式转化为数组
var obj = {
0: 'qian',
1: 'long',
2: 'chu',
3: 'tian',
length: 4
}
var objArr = Array.prototype.slice.call(obj);
// var objArr = [].slice.call(obj);
// var objArr = Array.prototype.slice.apply(obj);
console.log(objArr)
获取数组中最大或者最小值
function maxAndMin(arr){
return {
max:Math.max.apply(null,arr),
min:Math.min.apply(null,arr)
}
}
判断两个数组是否相同
/**
* 判断数组是否相同
* @param {Array} array1
* @param {Array} array2
*/export function scalarArrayEquals(array1, array2) {
return array1.length === array2.length && array1.every(function(v, i) { return v ===array2[i]})
}
彻底屏蔽鼠标右键
oncontextmenu=”window.event.returnValue=false”
< table border oncontextmenu=return(false)>< td>no< /table>可用于 Table
取消选取、防止复制
< body onselectstart=”return false”>
JS不允许粘贴
onpaste=”return false”
JS防止复制
oncopy=”return false;” oncut=”return false;”
禁用输入法
< input style=”ime-mode:disabled”>
防止被人frame
if (top.location != self.location)top.location=self.location;
网页禁用另存为
< no>< iframe src=*.html>< /iframe>< /no>
前端不背锅小妙招
javaScript空值合并操作符（??）
只有当左侧为null和undefined时，才会返回右侧的数
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null或者undefined时，返回其右侧操作数，否则返回左侧操作数。
与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。
let str = null||undefined
let result = str??'你真好看'
console.log(result)//你真好看
const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;
const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;
console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42
javaScript可选链操作符( ?. )
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish) (null或者undefined)的情况下不会引起错误，该表达式短路返回值
const demo = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};console.log(dog.dog); //正常输出会直接报错console.log(demo.someNonExistentMethod());
使用可选链操作符( ?. )浏览器不会出现报错！
const demo = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
console.log(demo.dog?.name);
// expected output: undefined
console.log(demo.what?.());
// expected output: undefined
函数调用：
let result = someOne.customMethod?.();
如果希望允许someOne也为null或者 undefined，那么你需要像这样写someOne?.customMethod?.()
可选链与表达式：
let nestedProp = obj?.['prop' + 'Name'];
可选链访问数组：
let arrayItem = arr?.[42];
短路计算：
let potentiallyNullObj = null;let x = 0;let prop = potentiallyNullObj?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0
//当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算
连用可选链操作：
let customer = {
name: "Carl",
details: {
age: 82,
location: "Paradise Falls" // details 的 address 属性未有定义
}
};let customerCity = customer.details?.address?.city;
// … 可选链也可以和函数调用一起使用let duration = vacations.trip?.getTime?.();
空值合并操作符可以在使用可选链时设置一个默认值：
let customer = {
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "中国";console.log(customerCity); // “中国”
实际项目中能用到的地方很多哦~后端接口问题的锅，我前端靓仔才不背！！！
[ 有兴趣的小伙伴可以来我的技术交流群：164549428欢迎各位大佬来交流~也可加威dingyu-003私信]
写在最后
与你相逢，我很开心。
文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，请 “点赞” “评论” “关注
” 一键三连哦！关注我,每天进步一点点，我们一起加油，共同进步。
