序言

这是我踏上搬砖之路那刻起，一路走来记下的点点滴滴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 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);  // “中国

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

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/24590.html

日常搬砖JavaScript实战技巧篇

序言

Coding小技巧

数组的对象解构

创建纯对象

你没见过的valueOf

清空和截短数组

slice()

splice()

最简单的清空和截短数组的方法就是改变 length 属性

对数组中的所有值求和

条件短路

对条件使用或（OR）逻辑

逗号运算符

扩展运算符

轻松移除数组中的重复项：

使用扩展运算符可以快速扁平化二维数组：

动态属性名称

对象转换为数组

获取数组中最大或者最小值

判断两个数组是否相同

彻底屏蔽鼠标右键

取消选取、防止复制

JS不允许粘贴

JS防止复制

禁用输入法

防止被人 frame

网页禁用另存为

前端不背锅小妙招

javaScript空值合并操作符（??）

javaScript可选链操作符( ?. )

发表评论

日常搬砖JavaScript实战技巧篇

序言

Coding小技巧

数组的对象解构

创建纯对象

你没见过的valueOf

清空和截短数组

slice()

splice()

最简单的清空和截短数组的方法就是改变 length 属性

对数组中的所有值求和

条件短路

对条件使用或（OR）逻辑

逗号运算符

扩展运算符

轻松移除数组中的重复项：

使用扩展运算符可以快速扁平化二维数组：

动态属性名称

对象转换为数组

获取数组中最大或者最小值

判断两个数组是否相同

彻底屏蔽鼠标右键

取消选取、防止复制

JS不允许粘贴

JS防止复制

禁用输入法

防止被人 frame

网页禁用另存为

前端不背锅小妙招

javaScript空值合并操作符（??）

javaScript可选链操作符( ?. )

相关推荐

发表评论