javascript感叹号1_18个JavaScript入门技巧！

本文已经过原作者 Mehul Lakhanpal  授权翻译&＃xff01;

1. 转字符串

const input &＃61; 123;

console.log(input &＃43; &＃39;&＃39;); // &＃39;123&＃39;
console.log(String(input)); // &＃39;123&＃39;
console.log(input.toString()); // &＃39;123&＃39;



2. 转数字

const input &＃61; &＃39;123&＃39;;

console.log(&＃43;input); // 123
console.log(Number(input)); // 123
console.log(parseInt(input)); // 123


3.转布尔值

const input &＃61; 1;

// 方案1 -使用双感叹号(!!)转换为布尔值
console.log(!!input); // true

// 方案2 - 使用 Boolean() 方法
console.log(Boolean(input)); // true


4.字符串&＃39;false&＃39;有问题

const value &＃61; &＃39;false&＃39;;
console.log(Boolean(value)); // true
console.log(!!value); // true

// 最好的检查方法
console.log(value &＃61;&＃61;&＃61; &＃39;false&＃39;);


5. null vs undefined

null是一个值&＃xff0c;而undefined不是一个值。null就像一个空盒子&＃xff0c;而undefined没有盒子。

const fn &＃61; (x &＃61; &＃39;默认值&＃39;) &＃61;> console.log(x);

fn(undefined); // 默认值
fn(); // 默认值

fn(null); // null


如果传递null&＃xff0c;则不采用默认值&＃xff0c;而传递undefined或不传递任何参数时&＃xff0c;采用默认值。

6. 真值和虚值

虚值&＃xff1a;false,0, "",null,undefined和NaN。

真值&＃xff1a;"Values",0",{},[]。

7. const 声明变量哪些类型可以被更改

如果值不想被改变时&＃xff0c;可以使用 const:

const name &＃61; &＃39;前端小智&＃39;;
name &＃61; &＃39;王大冶&＃39;; // 报错

const list &＃61; [];
list &＃61; [1]; // 报错

const obj &＃61; {};
obj &＃61; { name: &＃39;前端小智&＃39; }; // 报错


但用 const 声明的引用类型&＃xff0c;它里面值是可以被更改的&＃xff1a;

const list &＃61; [];
list.push(1); // 可以工作
list[0] &＃61; 2; // 可以工作

const obj &＃61; {};
obj[&＃39;name&＃39;] &＃61; &＃39;前端小智&＃39;; // 可以工作


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

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

// 三等号 - 不转换为相同类型
console.log(0 &＃61;&＃61;&＃61; &＃39;0&＃39;); // false


9. 接收参数更好的方式

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

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


更简单的方法

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } &＃61; {}
) {}

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


10.把普通函数改成箭头函数

const func &＃61; function() {
    console.log(&＃39;a&＃39;);
    return 5;
};
func();


可以改写成

const func &＃61; () &＃61;> (console.log(&＃39;a&＃39;), 5);
func();


11.从箭头函数返回对象/表达式

const getState &＃61; (name) &＃61;> ({name, message: &＃39;Hi&＃39;});


12. 将 set 转换为数组

const set &＃61; new Set([1, 2, 1, 4, 5, 6, 7, 1, 2, 4]);
console.log(set); // Set(6) {1, 2, 4, 5, 6, 7}

set.map((num) &＃61;> num * num); // TypeError: set.map is not a function


转换为数组

const arr &＃61; [...set]


13.检查值是否为数组

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


14. 获取对象的所有键

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

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


15. 双问号语法

const height &＃61; 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0


这个 ?? 的意思是&＃xff0c;如果 ?? 左边的值是 null 或者 undefined&＃xff0c;那么就返回右边的值。

16. map()

map() 方法创建一个新数组&＃xff0c;其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const numList &＃61; [1, 2, 3];

const square &＃61; (num) &＃61;> {
  return num * num
}

const squares &＃61; numList.map(square);

console.log(squares); // [1, 4, 9]


17. try..catch..finally

const getData &＃61; async () &＃61;> {
  try {
    setLoading(true);
    const response &＃61; await fetch(
      "https://jsonplaceholder.typicode.com/posts"
    );
    const data &＃61; await response.json();
    setData(data);
  } catch (error) {
    console.log(error);
    setToastMessage(error);
  } finally {
    setLoading(false); // 不管是否报错&＃xff0c;最后都会执行
  }
};

getData();


18. 解构

const response &＃61; {
  msg: "success",
  tags: ["programming", "Javascript", "computer"],
  body: {
    count: 5
  },
};

const {
  body: {
    count,
        unknownProperty &＃61; &＃39;test&＃39;
  },
} &＃61; response;

console.log(count, unknownProperty); // 5 &＃39;test&＃39;


作者&＃xff1a;Mehul Lakhanpal  译者&＃xff1a;前端小智  来源&＃xff1a;dev

原文&＃xff1a;https://dev.to/318097/18-tips-for-junior-Javascript-developer-57oa

❤️爱心三连击

1.看到这里了就点个在看支持下吧&＃xff0c;你的「点赞&＃xff0c;在看」是我创作的动力。

2.关注公众号大迁世界&＃xff0c;回复「1」加入前端进阶交流群&＃xff01;「在这里有好多 前端 开发者&＃xff0c;会讨论 前端 知识&＃xff0c;互相学习」&＃xff01;

3.也可添加微信【qq449245884】&＃xff0c;一起成长。