翼度科技»论坛 编程开发 JavaScript 查看内容

你不知道的几个JavaScript 高阶技巧

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
三元运算符

基础:
  1. let hungry = true;
  2. let eat;
  3. if (hungry === true) {
  4.        eat = 'yes';
  5. } else {
  6.        eat = 'no';
  7. }
复制代码
高阶:
  1. let hungry = true;
  2. let eat = hungry === true ? 'yes' : 'no';
复制代码
数字到字符串,字符串到数字

基础:
  1. let num = 15;
  2. let s = num.toString(); // number to string
  3. let n = Number(s); // string to number
复制代码
高阶:
  1. let num = 15;
  2. let s = num + ""; // number to string
  3. let n = +s; // string to number
复制代码
填充数组

基础:
  1. for(let i=0; i < arraySize; i++){
  2.        filledArray[i] {'hello' : 'goodbye'};
  3. }
复制代码
高阶:
  1. let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));
复制代码
对象中的动态属性

基础:
  1. let dynamic = "value";
  2. let user = {
  3.      id: 1,
  4. };
  5. user[dynamic] = "other value";
复制代码
高阶:
  1. let dynamic = "value";
  2. let user = {
  3.     id: 1,
  4.     [dynamic]: "other value"
  5. };
复制代码
删除重复项

基础:
  1. let array = [100, 23, 23, 23, 23, 67, 45];
  2. let outputArray = [];
  3. let flag = false;
  4. for (j = 0; < array.length; j++) {
  5.    for (k = 0; k < outputArray.length; k++) {
  6.       if (array[j] == outputArray[k]) {
  7.          flag = true;
  8.        }
  9.     }
  10.     if (flag == false) {
  11.       outputArray.push(array[j]);
  12.      }
  13.      flag = false;
  14. }
  15. //outputArray = [100, 23, 67, 45]
复制代码
高阶:
  1. let array = [100, 23, 23, 23, 23, 67, 45];
  2. let outputArray = Array.from(new Set(array));
  3. //outputArray = [100, 23, 67, 45]
复制代码
数组转对象

基础:
  1. let arr = ["value1", "value2", "value3"];
  2. let arrObject = {};
  3. for (let i = 0; i < arr.length; ++i) {
  4.    if (arr[i] !== undefined) {
  5.      arrObject[i] = arr[i];
  6.    }
  7. }
复制代码
高阶:
  1. let arr = ["value1", "value2", "value3"];
  2. let arrObject = {...arr};
复制代码
对象转数组

基础:
  1. let number = {
  2.   one: 1,
  3.   two: 2,
  4. };
  5. let keys = [];
  6. for (let numbers in numbers) {
  7.   if (number.hasOwnProperty(number)) {
  8.      keys.push(number);
  9.     }
  10. }
  11. // key = [ 'one', 'two' ]
复制代码
高阶:
  1. let numbers = {
  2.   one: 1,
  3.   two: 2,
  4. };
  5. let key = Object.keys(numbers); // key = [ 'one', 'two' ]
  6. let value = Object.values(numbers);  // value = [ 1, 2 ]
  7. let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]
复制代码
条件短路

基础
  1. if (docs) {
  2.     goToDocs();
  3. }
复制代码
高阶
  1. docs && goToDocs()
复制代码
使用 ^ 检查数字是否不相等
  1. //基础
  2. if(a!=123)
  3.   
  4. //高阶
  5. if(a^123)
复制代码
循环访问对象
  1. const age = {
  2.    Rahul: 20,  
  3.    max: 16
  4. };
  5. // Solution 1 - Get 'keys' and loop over
  6. const keys = Object.keys(age);
  7. keys.forEach(key => age[key]++);
  8. con
复制代码
  1. sole.log(age); // { Rahul: 21, max: 17 }
  2. // Solution 2 - for ..in loop
  3. for(let key in age){
  4.    age[key]++;
  5. }
  6. console.log(age); // { Rahul: 22, max: 18 }
复制代码
Object keys 按插入顺序存储
  1. const obj = {
  2.   name: "Rahul",
  3.   age: 16,
  4.   address: "Earth",
  5.   profession: "Developer",
  6. };
  7. console.log(Object.keys(obj)); // name, age, address, profession
复制代码
检查值是数组
  1. const arr = [1, 2, 3];
  2. console.log(typeof arr); // object
  3. console.log(Array.isArray(arr)); // true
复制代码
初始化大小为n的数组,并用默认值填充
  1. const size = 5;
  2. const defaultValue = 0;
  3. const arr = Array(size).fill(defaultValue);
  4. console.log(arr); // [0, 0, 0, 0, 0]
复制代码
双等和三等的区别
  1. //双等号(==)只比较值是否相等。
  2. //它本质上是做类型转换。这意味着在比较数值之前,它将变量的类型转换为相互匹配。
  3. console.log(0 == '0'); // true
  4. // 另一方面,三等号(===)不执行类型转换。
  5. // 它将验证被比较的变量是否具有相同的值和相同的类型。
  6. console.log(0 === '0'); // false
复制代码
接收更好的传参方式
  1. function downloadData(url, resourceId, searchTest, pageNo, limit) {}
  2. downloadData(...); // 需要记住传参顺序
复制代码
更简单的方法:
  1. function downloadData(
  2. { url, resourceId, searchTest, pageNo, limit } = {}
  3. ) {}
  4. downloadData(
  5.   { resourceId: 2, url: "/posts", searchText: "WebDev" }
  6. );
复制代码
null 和 undefined

null 是一个 value,然而 undefined 不是.
null 像一个空盒子,但 undefined 不是.
  1. const fn = (x = 'default value') => console.log(x);
  2. fn(undefined); // default value
  3. fn(); // default value
  4. fn(null); // null
复制代码
传递 null 时,不采用默认值。然而,当未定义或未传递任何内容时,将采用默认值。

来源:https://www.cnblogs.com/rjf1979/p/17767714.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具