javascript进阶书（日常搬砖JavaScript实战技巧篇）

javascript进阶书（日常搬砖JavaScript实战技巧篇）const obj = Object.create(null) console.log(obj)//{} console.log(obj.constructor)//undefined console.log(obj.toString)//undefined console.log(obj.hasOwnProperty)//undefined你没见过的valueOfconst obj = { i:1 valueOf:function(){ if(this.i === 1){ this.i return 1 }else{ return 2 } } } if(obj==1&&obj==2){ console.log(obj) }一个对象

序言

这是我踏上搬砖之路那刻起，一路走来记下的点点滴滴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 = 5 console.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.join(' ').split(' ')) min:Math.min.apply(null arr.join(' ').split(' ')) } }判断两个数组是否相同

/** * 判断数组是否相同 * @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 falseJS防止复制

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); // 42javaScript可选链操作符( ?. )

　可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(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); // “中国

实际项目中能用到的地方很多哦~后端接口问题的锅，我前端靓仔才不背！！！