17个你可能还不知道 JS 技巧!

Souleigh ✨ 等级 870 1 1
标签: 数组前端

1.三元运算符

新手

let hungry = true;
let eat; 
if (hungry == true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

老手

let hungry = true;
let eat = hungry == true ? 'yes' : 'no';

2.数字转字符串/字符串转数字

新手

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

老手

let num = 15;
let s = num + ""; // 数字转字符串
let n = +s; // 字符串转数字

3.填充数组

新手

for(let i=0; i < arraySize; i++){
  filledArray[i] {'hello' : 'goodbye'};
} 

老手

let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));

4.对象的动态属性

新手

let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic]: "other value"; 

老手

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic] = "other value"
};

5.删除重复项

新手

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0; j < array.length; j++) {
   for (k = 0; k < outputArray.length; k++) {
      if (array[j] == outputArray[k]) {
         flag = true;
       }
    }
    if (flag == false) {
      outputArray.push(array[j]);
     }
     flag = false;
}
// tArray = [100, 23, 67, 45]

老手

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = Array.from(new Set(array))

6. 数组到对象

新手

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

老手

let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr}; 

7.对象到数组

新手

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in numbers) {
  if (number.hasOwnProperty(number)) {
     keys.push(number);
    }
}
// key = [ 'one', 'two' ]

老手

let number = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

8. 短路条件

新手

if (docs) {
    goToDocs();
}

老手

docs && goToDocs()

9. 使用^检查数字是否相等

if(a!=123) // before // 一般开发者

if(a^123) // after // B格比较高的

10.对象遍历

const age = {
   Rahul: 20,  
   max: 16
};

// 方案1:先得 key 在遍历 key
const keys = Object.keys(age); 
keys.forEach(key => age[key]++);

console.log(age); // { Rahul: 21, max: 16 }

// 方案2 - `for...in` 循环
for(let key in age){
   age[key]++;
}

console.log(age); // { Rahul: 22, max: 18 }

11. 获取对象的所有键

cosnt obj = {
  name: "前端小智", 
  age: 16, 
  address: "厦门", 
  profession: "前端开发", 
}; 

console.log(Object.keys(obj)); // name, age, address, profession

12.检查值是否为数组

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

13.初始化大小为n的数组并填充默认值

const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

14. 真值和虚值

虚值:false,0, "",null,undefinedNaN

真值:"Values",0",{},[]

15. 三等号和双等号的区别

// 双等号 - 将两个操作数转换为相同类型,再比较
console.log(0 == 'o'); // true

// 三等号 - 不转换为相同类型
console.log(0 === '0'); // false

16. 接收参数更好的方式

function downloadData(url, resourceId, searchTest, pageNo, limit) {}

downloadData(...); // need to remember the order

更简单的方法

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "WebDev" }
);

17.null vs undefined

null =>它是一个值,而undefined不是。

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

传递null时,不采用默认值,而 undefined或未传递任何内容时,将采用默认值。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

收藏
评论区

相关推荐

😎手撕吊打面试官系列面试题
js基础 1. 用js打印一个乘法表 这一题面试官考察的是你关于js的打印相关基础api的熟悉程度,以及基本的数学常识,送分题 console.log( 111 212 224 313 326 339 414 428 4312 4416 515 5210 5315 5420 5525
前端高效开发必备的 js 库梳理
前端高效开发必备的 js 库梳理 之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内
你不可不知的JS面试题
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为\[object Type\]。 现在我们来验证一下
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
15 个有趣的 JS 和 CSS 库
前端开发者们,一起来看看有木有你需要的前端库。 1.DisplayJS ----------- ![](https://oscimg.oschina.net/oscnet/a6f076a2-3828-479a-be8b-c09e572a4e9e.jpg) DisplayJS 是一个帮助你渲染 DOM 的简易框架。使用它,你可以更容易地将 J
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
JS调试技术
这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没
Express+Socket.io 404,400解决方案
404错误: ------     意思是在你js脚本中找不到提供websocket的服务,后端没有开启相应的服务。 var app=require('express'); var server=require('http').createServer(app); var socket=require('socket.io')(s
GitHub:爬虫入门JS 模拟登陆各大网站
GitHub:爬虫入门JS 模拟登陆各大网站 ====================== hello,小伙伴们,大家好,今天给大家介绍的开源项目是:`Spider-Crack_Js`,想学习爬虫解密js登陆的可以看看这个开源项目,这个开源项目可以给你提供一个不错的思路。 ### **代码教程** * * * * [【OpenLaw】登陆参数加密
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript逆向教程之破解某麦参数加密的思路
正文共:2533 字 10 图 预计阅读时间: 7 分钟 作者:ThreeTails 原 文: http://www.threetails.xyz/2019/05/19/初探js逆向(二) ![](https://oscimg.oschina.net/oscnet/80c2c326-a706-47bc-b2cc-15c11bc80e24.jp
NodeJS 中文乱码解决
如果使用NodeJS 。当有中文时,如果不做任何处理就会出现乱码。因为,NodeJS 不支持 GBK。当然,UTF-8是支持的。所以,要确保不出现乱码:  1.保证你的 JS文件是以UTF-8格式保存的。  2. 在你的JS文件中的 writeHead 方法中加入 "**charset=utf-8**" 编码,如下例所示:   var http = r
OSChina 开源周刊第三十三期 —— Node.js 和 io.js 准备合作!
**每周技术抢先看,总有你想要的!** ### 开源资讯 1. [Node.js 和 io.js 准备合作!合久必分,分久必合?](http://www.oschina.net/news/62149/node-js-and-io-js-convergence) 2. [Nervana 开源深度学习软件,性能超 Facebook、Nvidia