JavaScript技巧

js一些技巧记录

---

1.指数运算：

1. ** 运算符
2. << 运算符
3. Math.pow()

// 计算n的m次方：
// n**m
console.log(2**3); // 8
// n<<m-1
console.log(2<<3-1); // 8
// Math.pow(n, m)
console.log(Math.pow(2, 3)); // 8

2.数字转字符串：

1. 连接一个空字符串
2. toString() 方法
3. String() 构造器

let num = 15;
console.log(num+'');
console.log(num.toString());
console.log(String(num));

3.字符串转数字：

1. +连接
2. ~~ 连接
3. parseInt() 方法
4. Number() 构造器

let str = '15';
console.log(+str);
console.log(+true);
console.log(~~str);
console.log(~~true);
console.log(Number(str));
console.log(parseInt(str));

4.判断对象是否为空对象：

1. JSON字符串比较

 JSON.stringify(obj) === "{}"

5.判断字符串是否为子串：

1. indexOf 包含子串，则返回大于等于0的索引，否则返回-1

 str.indexOf(substr) >= 0

2. 正则表达式

 new RegExp(substr).test(str)

6.对象数组根据某一属性去重：

1. filter + map

    uniqueFunc(arr, uniKey) {
      const res = new Map();
      return arr.filter(
        (item) => !res.has(item[uniKey]) && res.set(item[uniKey], 1)
      );
    },

7.对象数组根据属性返回对象：

  // 对象数组根据属性返回对象
  findObj(arr, key, value) {
    return arr.find((item) => item[key] === value);
  },

8.叫“缺值合并”（nullish coalescing）操作符：

求值其先定义的操作数，如果其左操作数不是null或undefined，就返回该值。否则，它会返回右操作数的值。与&&或||操作符类似，??是短路的：它只在第一个操作数求值为null或undefined时才会求值第二个操作数。如果表达式a没有副效应，那么表达式a ?? b等价于：(a !== null && a !== undefined) ? a : b

  let a = 1;
  a ?? 2; // 1
  null ?? a; // 1

9.中断forEach：

forEach迭代遍历数组时使用return、break等不会终止遍历。可以使利用try catch包裹，然后在forEach中throw错误打断遍历。

10.使用reduce找出数组中最大值：

let arr = [1, 3, 6, 2];
arr.reduce((x, y) => {
  return (x > y) ? x : y;
})

11.解构：

数组解构

// 1.使用逗号可跳过内容
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"

// 2.设置默认值
let [greeting = "hi",name = "Sarah"] = ["hello"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"

// 3.交换变量的值
let a = 3;
let b = 6;

[a,b] = [b,a];

console.log(a);//6
console.log(b);//3

对象解构

// 默认值
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name = "myName", friend = "Annie"} = person;
console.log(name);//"Sarah"
console.log(friend);//"Annie"

// 重命名
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name: foo, job: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Developer"

// 重命名同时设置默认值
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name:foo = "myName", friend: bar = "Annie"} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Annie"

// 嵌套
let person = {
    name: "Sarah",
    place: {
        country: "Nigeria", 
        city: "Lagos" }, 
    friends : ["Annie", "Becky"]
};

let {name:foo,
     place: {
         country : bar,
         city : x}
    } = person;

console.log(foo);//"Sarah"
console.log(bar);//"Nigeria"