JavaScript栏目放送十五条JavaScript编程技巧。
JavaScript栏目放送十五条JavaScript编程技巧。 本文目的大多数编程语言都足够开放,以允许程序员以多种方式得到类似的结果。JavaScript 也是如此,使用 JavaScript,我们通常可以通过多种方法来达到相似的结果,虽然有时会造成混淆。 其中一些用法比其他方法要好,而这些就是我要分享的。我将在本文中一一列举,我敢肯定,您在阅读本文时会发现,在很多地方您和我的做法是相同的。 1. 使用模板字符串使用 let name = 'Charlse';let place = 'India';let isPrime = bit => { return (bit === 'P' ? 'Prime' : 'Nom-Prime'); }// 使用`+`运算符的字符串连接let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'复制代码 模板字面量(或模板字符串)允许嵌入表达式。它具有独特的语法,该字符串必须用反引号(``)括起来。模板字符串提供了可以包含动态值的占位符,以美元符号和大括号标记(${expression})。 以下是一个演示它的例子, let name = 'Charlse';let place = 'India';let isPrime = bit => { return (bit === 'P' ? 'Prime' : 'Nom-Prime'); }// 使用模板字符串let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime('P')} member.`console.log(messageTemplateStr);复制代码 2. isInteger有一种更简洁的方法可以知道值是否为整数。JavaScript 的 let mynum = 123;let mynumStr = "123";console.log(`${mynum} is a number?`, Number.isInteger(mynum));console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));复制代码 输出结果: 3. 值为数字您是否曾经注意到,即使输入框的类型为数字, 请参见下面的示例。我们有一个简单的数字类型的文本框。这意味着它仅接受数字作为输入,它具有事件处理程序来处理按键事件。 <input type='number' onkeyup="trackChange(event)" />复制代码 在事件处理程序中,我们使用 function trackChange(event) { let value = event.target.value; console.log(`is ${value} a number?`, Number.isInteger(value)); }复制代码 请改用 let valueAsNumber = event.target.valueAsNumber;console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));复制代码 4. 使用 && 运算符化简表达式让我们考虑一个具有布尔值和函数的情况。 let isPrime = true;const startWatching = () => { console.log('Started Watching!'); }复制代码 像下面这样,通过检查布尔值来确定是否调用函数,代码太多了。 if (isPrime) { startWatching(); }复制代码 能否通过 AND(&&)运算符使用简写形式?是的,完全可以避免使用 if 语句。酷吧! isPrime && startWatching();复制代码 5. 使用 || 运算符处理默认值如果您想为变量设置默认值,可以使用 OR(||)运算符轻松实现。 let person = {name: 'Jack'};let age = person.age || 35; // 如果 age 未定义,则将值设置为 35console.log(`Age of ${person.name} is ${age}`);复制代码 6. 获取随机项生成随机数或从数组中获取随机项是非常有用且方便的方法。我已经在我的许多项目中多次看到它们了。 从数组中获取随机项, let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];let randomPlanet = planets[Math.floor(Math.random() * planets.length)];console.log('Random Planet', randomPlanet);复制代码 通过指定最小值和最大值,在一个范围内生成一个随机数, let getRandom = (min, max) => { return Math.round(Math.random() * (max - min) + min); }console.log('Get random', getRandom(0, 10));复制代码 7. 函数默认参数在JavaScript中,函数实参(或形参)就像该函数的局部变量一样。调用函数时,您可以传递也可以不传递值。如果您不为参数传递值,则该值将是 有一种在定义参数时将默认值传递给函数参数的简单方法。在以下示例中,我们将默认值 let greetings = (name, message='Hello,') => { return `${message} ${name}`; }console.log(greetings('Jack'));console.log(greetings('Jack', 'Hola!'));复制代码 8. 必需的函数参数基于默认参数的特性,我们可以将参数作为必需参数。首先定义一个函数以使用错误消息抛出错误, let isRequired = () => { throw new Error('This is a mandatory parameter.'); }复制代码 然后将函数作为必需参数的默认值。请记住,在调用函数时如果为参数传递值,那么默认值会被忽略。但是,如果参数值为“undefined”,则默认值会被使用。 let greetings = (name=isRequired(), message='Hello,') => { return `${message} ${name}`; }console.log(greetings());复制代码 在上面的代码中, 9. 逗号运算符当我意识到逗号( 运算符用于从左到右计算其每个操作数,并返回最后一个操作数的值。 let count = 1;let ret = (count++, count);console.log(ret);复制代码 在上面的示例中,变量 let val = (12, 32);console.log(val);复制代码 我们在哪里使用它?有什么想法吗?逗号 ( for (var i = 0, j = 50; i <= 50; i++, j--)复制代码 10. 合并多个对象您可能需要将两个对象合并在一起,并创建一个更好的、内容更丰富的对象来使用。为此,您可以使用扩展运算符 分别考虑 let emp = { 'id': 'E_01', 'name': 'Jack', 'age': 32, 'addr': 'India'};let job = { 'title': 'Software Dev', 'location': 'Paris'};复制代码 使用扩展运算符将它们合并为 // spread operatorlet merged = {...emp, ...job};console.log('Spread merged', merged);复制代码 还有另一种实现合并的方法。你可以像下面这样使用 console.log('Object assign', Object.assign({}, emp, job));复制代码 输出结果: 注意,扩展运算符和 要进行深度合并,可以考虑使用 lodash 中的 11. 解构将数组元素和对象属性分解为变量的技术称为“解构”。让我们看几个例子, 数组在这里,我们有一系列的表情符号, let emojis = ['', '??', '', ''];复制代码 为了解构,我们将使用以下语法, let [fire, clock, , watermelon] = emojis;复制代码 这与 console.log(fire, clock, watermelon);复制代码 输出结果: 让我在这里再介绍一个叫做“rest”运算符的东西。如果您想对数组进行解构,从而将一个或多个项目分配给变量并将其余部分暂放在另一个数组中,就可以使用 let [fruit, ...rest] = emojis;console.log(rest);复制代码 输出结果: 对象像数组一样,我们也可以解构对象。 let shape = { name: 'rect', sides: 4, height: 300, width: 500};复制代码 像下面这样进行解构,我们可以把对象的 let {name, sides, ...restObj} = shape;console.log(name, sides);console.log(restObj);复制代码 输出结果: 阅读有关此主题的更多信息 from here. 12. 交换变量现在,使用我们刚刚学习的解构,变量交换将会变得非常容易。 let fire = '';let fruit = ''; [fruit, fire] = [fire, fruit];console.log(fire, fruit);复制代码 13. isArray确定输入是否为数组的另一种有用方法。 let emojis = ['', '??', '', ''];console.log(Array.isArray(emojis));let obj = {};console.log(Array.isArray(obj));复制代码 14. undefined 和 null
undefined === null // false复制代码 阅读有关此主题的更多信息 from here. 15. 获取查询参数
下面是我发现的一个非常有用的属性: window.location.search复制代码
我们可以使用另一个名为 let project = new URLSearchParams(location.search).get('project');复制代码 输出结果: 阅读有关此主题的更多信息 from here.
以上就是十五条 JavaScript 编程技巧的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |