js dict 遍历 ReactNative中的一些技巧将是有益的,这些技巧值得一看
IT服务圈儿
有温度、有态度的IT自媒体平台
来源:翻译 | web前端开发 (ID:web_qdkf)
英文 | eeks.org/javascript-top-10-tips-and-tricks/?ref=rp
对于Web开发或跨平台开发,JavaScript越来越流行。以前,它仅被认为是一种前端脚本语言js dict 遍历,但现在它也越来越流行为后端脚本语言。甚至Facebook的React Native也基于JavaScript。
因此,了解JavaScript中的一些技巧无疑将是有益的,这些技巧不仅不会阻止我们编写额外的代码行,而且还将使我们的代码清晰高效。
1、数组索引
考虑一个数组[10、9、8、7、6],如果我们想将此数组的值分配给任何变量,则我们的定位方法将是const a = array [0]。如果我们想分配多个变量,那么继续这样做将很繁琐。
代码1:旧代码做法
<pre class="code-snippet__js" data-lang="xml">
` var array1 = [10, 9, 8, 7, 6]; var x = array1[0];
var y = array1[1]; var z = array1[2];
document.write("x = " + x + " "); document.write("y = " + y + " ");
document.write("z = " + z + " "); `
</pre>
输出:
<pre class="code-snippet__js" data-lang="ini">x = 10
`y = 9`z = 8
</pre>
代码2:更聪明的方式
<pre class="code-snippet__js" data-lang="xml">
` var array2 = [10, 9, 8, 7, 6]; var [x, y, z, ...rest] = array2;
document.write("x = " + x + " "); document.write("y = " + y + " ");
document.write("z = " + z + " "); document.write("rest = " + rest + " ");
`</pre>
输出:
<pre class="code-snippet__js" data-lang="ini">x = 10
`y = 9z = 8
rest = 7, 6`</pre>
因此,像这样分配多个变量可以节省时间和代码。但是,应注意,其余部分是剩余部分的集合数组,而不是每个项目都单独使用。
2、定义函数
想法是将一些常见或重复的任务放在一起并创建一个函数,这样我们就可以调用该函数,而不必为不同的输入一次又一次地编写相同的代码。每个人都必须在JavaScript中使用过类似的功能。
代码1:以常规形式定义功能。
<pre class="code-snippet__js" data-lang="xml">
`
<p>Usual function in JavaScript
</p>
function myFunction(p1, p2) {
return p1 * p2; }
document.getElementById("demo").innerHTML = myFunction(4, 3);
`</pre></p>
输出:
<pre class="code-snippet__js" data-lang="bash">Usual function in JavaScript
`12`</pre>
代码2:还有另一种方法将函数视为变量,而不是一个非常有用的技巧,但仍然是新事物。将函数保持在变量中,它利用像这样的箭头函数。
<pre class="code-snippet__js" data-lang="xml">
`
<p> Function treated as
variable in JavaScript: ``
</p>
var myFunction = (p1, p2) => {
return p1 * p2; }
document.getElementById("demo") .innerHTML = myFunction(4, 3);
`</pre></p>
输出:
<pre class="code-snippet__js" data-lang="javascript">Function treated as variable in JavaScript
`12`</pre>
3、在一行中定义功能
现在,这个技巧真的很酷。如果你了解Python,则可能知道lambda函数,该函数的行为与任意函数相同,并且用一行编写。好吧,我们不在JavaScript中使用lambda函数,但是我们仍然可以编写单行函数。
假设我们要计算两个数字a和b的乘积,我们可以在一行脚本中完成。我们不必专门编写return语句,因为这种定义方式已经意味着它将自行返回输出。
<pre class="code-snippet__js" data-lang="xml">
`
<p> Function treated as
variable in JavaScript ``
</p>
const productNum = (a, b) => a * b
document.getElementById("demo")
.innerHTML = myFunction(4, 3);
`
</pre></p>
输出:
<pre class="code-snippet__js" data-lang="javascript">Function treated as variable in JavaScript
`12`</pre>
4、布尔值
虽然每种编程语言都只有两个布尔值True和False。JavaScript通过引入使用户能够创建bool的功能使它更进一步。
与True和False不同,它们通常分别称为“ Truthy”和“ Falsy”。为避免混淆,除0,False,NaN,null,“”之外的所有值均默认为Truthy。布尔的这种广泛使用有助于我们有效地检查状况。
<pre class="code-snippet__js" data-lang="xml">
` const a = !1; const b = !!!0;
console.log(a); console.log(b);
`</pre>
输出:
<pre class="code-snippet__js" data-lang="php">False
`True`</pre>
5、过滤布尔值
有时我们可能希望过滤掉所有布尔值,例如从数组中说“ Falsy”布尔值(0,False,NaN,null,“”),这可以通过结合使用map和filter函数来完成。在这里,它使用Boolean关键字过滤掉Falsy值。
<pre class="code-snippet__js" data-lang="xml">
`arrayToFilter .map(item => {
// Item values })
.filter(Boolean);
`</pre>
<pre class="code-snippet__js" data-lang="php">Input: [1, 2, 3, 0, "Hi", False, True]
`Output: [1, 2, 3, "Hi", True]`</pre>
6、创建完全空的对象
如果要求在JavaScript中创建一个空的对象,我们的第一个转到方法将在花括号中使用并将其分配给变量。但这不是空白对象,因为它仍然具有JavaScript的对象属性,例如__proto__和其他方法。
可以通过一种方法来创建没有任何对象属性的对象。为此,我们使用字典并将其__proto__定义为空值。
<pre class="code-snippet__js" data-lang="xml">
` let dict = Object.create(null); // dict.__proto__ === "undefined"
`</pre>
除非用户另行定义,否则此对象将没有默认的__proto__或其他属性。
7、截断数组
<pre class="code-snippet__js" data-lang="xml">
`let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0];
arrayToTruncate.length = 6; console.log(arrayToTruncate)
`</pre>
输出:如所见,我们必须知道要以这种方式截断的数组的长度,否则将导致错误。此处的运行时间为O(k),其中k是将在数组中保留的元素数。
<pre class="code-snippet__js" data-lang="json">[10、5、7、8、3、4]
</pre>
8、合并对象
散布运算符(…)的引入使用户可以轻松地合并到一个或多个对象,而先前通过创建一个单独的函数来实现此操作可以实现合并。
代码1:
<pre class="code-snippet__js" data-lang="xml">
`function mergeObjects(obj1, obj2) { for (var key in obj2) {
if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key]; }
return obj1; }
`</pre>
代码2:通过使用扩展运算符,可以轻松实现上述任务js dict 遍历,并且代码也很清楚。
<pre class="code-snippet__js" data-lang="xml">
`const obj1 = {}; // Items inside the object
const obj2 = {}; // Items inside the object
const obj3 = {...obj1, ...obj2};`
</pre>
9、条件检查
检查和遍历条件是每种编程语言的重要组成部分。在JavaScript中,我们这样做是:
代码1:
<pre class="code-snippet__js" data-lang="xml">
`if (codition) { doSomething();
} `
</pre>
代码2:但是,按位运算符的使用使检查条件更加容易,并且使代码仅一行:
<pre class="code-snippet__js" data-lang="xml">
` condition && doSomething(); `
</pre>
10、使用正则表达式替换所有字符
经常出现一种情况,每次出现一个字符或一个子字符串,但不幸的是.replace()方法仅替换一个出现的实例。我们可以通过将regex与.replace()方法配合使用来解决此问题。
<pre class="code-snippet__js" data-lang="xml">
` var string = "GeeksforGeeks"; // Some string console.log(string.replace(/eek/, "ool"));
`</pre>
输出:
<pre class="code-snippet__js">“ GoolsforGools”
</pre>
*版权声明:转载文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
热评文章
最新评论
Z.
11月29日
博主你好,Deng插件,这个点击不进去,提示这个(Warning: require_once(/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php): failed to open stream: No such file or directory in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26
Fatal error: require_once(): Failed opening required '/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php' (include_path='.:/www/server/php/72/lib/php') in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26)
点都德
2天前
:喷::喜欢::怒::黑线: