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

Souleigh ✨ 等级 948 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
17个你可能还不知道 JS 技巧!
1.三元运算符 新手 let hungry true; let eat; if (hungry true) { eat 'yes'; } else { eat 'no'; } 老手 let hungry true; let eat hungry true ? 'ye
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内
JS变量的内存分配你了解多少?
美国导演昆汀·塔伦蒂诺说:世界上80%的故事都已经拍过了。所以我们要用新方法去拍老故事。JavaScript的所有变量(包括函数)在整个处理过程中都是存放在内存中,所以要对一个变量进行处理。首先得为变量分配内存。JavaScript内存分配和其他语言一样,是根据变量的数据类型来分配内存的,而JavaScript变量的数据类型由所赋的值的类型所决定的。Java
你不可不知的JS面试题
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为\[object Type\]。 现在我们来验证一下
JS你所不知的小数取整方法
先介绍几种基本方法。 1.toFixed()方法 ============= toFixed() 方法是属于 Number 对象的方法,可以把 Number 四舍五入到指定的小数位数,括号内为小数位数,范围为0~20,为0时即取整数。 1.5.toFixed(0) //返回2 toFixed()方法是平时使用最多的方法,因为它不仅可
JS调试技术
这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没
Echarts全国地图二级钻取
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></script> </h
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八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
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