阅读 19756

学会这些鲜有人知的coding技巧,从此早早下班liao-JavaScript实战技巧篇

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

序言

这是我踏上搬砖之路那刻起,一路走来记下的点点滴滴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)
复制代码

image.png 创建一个 100% 的纯对象,这个对象不会继承Object的任何属性和方法(比如 constructortoString() 等):

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)会不会执行?最终的结果会是什么?(这个大概率会出现在面试题哦~)

image.png 给个总结,相信你已经得出答案: image.png

清空和截短数组

下面有一个数组,现在我想截取前五个,如何操作

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),
       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空值合并操作符(??)

只有当左侧为nullundefined时,才会返回右侧的数

  • 空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 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());
复制代码

image.png

image.png 使用可选链操作符( ?. )浏览器不会出现报错!

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);  // “中国”
复制代码

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

写在最后

我是凉城a,一个前端,热爱技术也热爱生活。

与你相逢,我很开心。

如果你想了解更多,请点这里,期待你的小⭐⭐

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞👍和关注😊

  • 本文首发于掘金,未经许可禁止转载💌

文章分类
前端
文章标签