江苏龙网

  1. 主页 > 生活百科 > >

JavaScript各种技巧操作

JavaScript

  1. 模板字符串的使用
使用：`` 两个反引号
在两个 `` 中可以使用${expression}表达式 ， 在做动态字符串的拼接时非常有用 。
示例：
JavaScript各种技巧操作

文章插图
 
let [a, b, c] = [10, 20, 'JS']let str = `a = ${a}, b = ${b}, c = ${c}`输出：a = 10, b = 20, c = JS模版字符串还可以定义多行文本
let str = `sdfjkasdfasdfasdfsdfasdfasdfasdfsdfasdfasdfasdf`
  1. 判断是否数组
方式一
JavaScript各种技巧操作

文章插图
 
方式二
JavaScript各种技巧操作

文章插图
 
  1. 函数参数校验
传统方式
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 requiredat paramRequire (<anonymous>:1:38)at validForm (<anonymous>:1:27)at <anonymous>:1:1调用2：validForm('JS')输出2：JS success
JavaScript各种技巧操作

文章插图
 
  1. || 或运算符
通过 || 运算符 设定默认值
JavaScript各种技巧操作

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

文章插图
 
详细参见：4个未听说过的强大JavaScript操作符
  1. 整数判断

JavaScript各种技巧操作

文章插图
 
  1. 解构
对象
JavaScript各种技巧操作

文章插图
 

JavaScript各种技巧操作

文章插图
 
数组
JavaScript各种技巧操作

文章插图
 
这里也可以通过 展开 符号 ... (3个英文点)用来接收剩余的所有值（数组） 。
  1. 展开运算符
function sum(x, y, z) {return x + y + z;}const numbers = [1, 2, 3];console.log(sum(...numbers));// expected output: 6console.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 };
  1. 求幂运算符
方式1
Math.pow(4, 3)64方式2
4 ** 364注意：求幂运算符是是右结合的: a ** b ** c 等于 a ** (b ** c).
如下：
2 ** 2 ** 3 ==》 2 ** (2 ** 3)2562的8次方
  1. 逗号操作符
逗号操作符: 对它的每个操作数求值（从左到右） ， 并返回最后一个操作数的值 。
let x = 1;x = (x++, x);console.log(x);// expected output: 2x = (2, 3);console.log(x);// expected output: 3
  1. 地址栏查询参数
var url = new URL('https://example.com?foo=1&bar=2');var params = new URLSearchParams(url.search);params.get('foo') // 1params.get('bar') // 2项目中可以这么用
// localhost:8080/login?username=zs&password=123var params = new URLSearchParams(location.search);params.get('username') // zsparams.get('password') // 123


推荐阅读


上一篇：冷宫的妃子怎么生活 打入冷宫的妃子是什么样的生活

下一篇：称女婿为东床出自哪个典故