JavaScript各种技巧操作

1. 模板字符串的使用

使用：`` 两个反引号

在两个 `` 中可以使用${expression}表达式，在做动态字符串的拼接时非常有用。

示例：

let [a, b, c] = [10, 20, 'JS']
let str = `a = ${a}, b = ${b}, c = ${c}`
输出：a = 10, b = 20, c = JS

模版字符串还可以定义多行文本

let str = `sdfjka
              sdfasdfasdf
               sdfasdfasdfasdf
               sdfasdfasdfasdf`

2. 判断是否数组

方式一

方式二

3. 函数参数校验

传统方式

function fn(name) {
  if (!name) {
      // todo
  }
}

默认值方式（推荐）

let paramRequire = (param) => {throw new Error(`${param} is required`)}
function validForm(name = paramRequire('name')) {
  console.log(`${name} success`)
}
调用1：validForm()
输出1：
VM539:1 Uncaught Error: name is required
    at paramRequire (<anonymous>:1:38)
    at validForm (<anonymous>:1:27)
    at <anonymous>:1:1
调用2：validForm('JS')
输出2：
JS success

4. || 或运算符

通过 || 运算符 设定默认值

当 || 第一个表达式为false时 返回第二个表达式的值

注意这里如果第一个表达式为0时，需要特殊处理，在js中0 也表示false，这里可能0算是一个正常的值，结果也返回了 第二个表达式。解决方式：??(两个问号)

详细参见：4个未听说过的强大JavaScript操作符

5. 整数判断

6. 解构

对象

数组

这里也可以通过 展开 符号 ... (3个英文点)用来接收剩余的所有值（数组）。

7. 展开运算符

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.Apply(null, numbers));
// expected output: 6

// 数组复制
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

数组拼接

方式1

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);

方式2

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

对象展开及合并

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };

8. 求幂运算符

方式1

Math.pow(4, 3)
64

方式2

4 ** 3
64

注意：求幂运算符是是右结合的: a ** b ** c 等于 a ** (b ** c).

如下：

2 ** 2 ** 3 ==》 2 ** (2 ** 3)
256
2的8次方

9. 逗号操作符

逗号操作符: 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。

let x = 1;
x = (x++, x);
console.log(x);
// expected output: 2

x = (2, 3);
console.log(x);
// expected output: 3

10. 地址栏查询参数

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);
params.get('foo') // 1
params.get('bar') // 2

项目中可以这么用

// localhost:8080/login?username=zs&password=123
var params = new URLSearchParams(location.search);
params.get('username') // zs
params.get('password') // 123

浏览器支持：

11. 字符串

访问指定位置字符

// 通过索引下标访问
let str = 'abcd'
str[1] // b

字符串填充

padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

const str1 = 'Breaded Mushrooms';
console.log(str1.padEnd(25, '.'));
// expected output: "Breaded Mushrooms........"
const str2 = '200';
console.log(str2.padEnd(5));
// expected output: "200  "

padStart() 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

const str1 = '5';
console.log(str1.padStart(2, '0'));
// expected output: "05"
const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber);
// expected output: "************5581"

repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。

"abc".repeat(0)      // ""
"abc".repeat(1)      // "abc"
"abc".repeat(2)      // "abcabc"
"abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数.
"abc".repeat(1/0)    // RangeError: repeat count must be positive and less than inifinity

12. new.target运行检查

new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的。在通过new运算符被初始化的函数或构造方法中，new.target返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是undefined。

13. 数组最大值最小值

14. 对象深克隆浅克隆

深克隆

JSON.parse(JSON.stringify(...))

浅克隆

Object.assign(...)