现在,我们一起来看看这些技巧。
我们很快就会在 JavaScript 中学到的一件事是,并非一切都像它看起来的那样,并且在像这样的动态语言中,变量可能会以多种方式导致你出现问题。可以进行的一个非常常见的测试是检查变量是否为空或未定义,甚至“空”,如下例所示:
let username;
if (name !== null || name !== undefined || name !== '') {
userName = name;
} else {
userName = "";
进行相同评估的更简单方法是:
let userName = name || "";
如果你不相信,请测试一下!
所以你必须创建一个 Array 对象,然后用它的元素填充它,对吧?你的代码可能看起来像这样:
let a = new Array();
a[0] = "s1";
a[1] = "s2";
a[2] = "s3";
在一行中做同样的事情怎么样?
let a = ["s1", "s2", "s3"]
挺好看的吧!
注意:我知道这个技巧更简单,但对我来说很简单,它可能会帮助一些从其他编程语言开始的人。
著名的“单行 if/else”,三元运算符对于 Java 和 C# 等语言对于许多程序员来说已经是老熟人了。它也存在于 JS 中,并且可以像这样轻松地转换代码块:
let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
在这:
let big = x > 10 ? true : false;let big;
或者更简单:
let big = x > 10;
但它也适用于函数调用吗?如果我有两个不同的函数,并且我想在 if 为真时调用一个,在 if 为假的情况下调用一个,通常你会执行以下操作:
function x() { console.log('x') };
function y() { console.log('y') };
let z = 3;
if (z == 3) {
x();
} else {
y();
}
但是,你也可以使用三元进行相同的函数调用:
function x() { console.log('x') };
function y() { console.log('y') };
let z = 3;
(z==3 ? x : y)(); // Shortcut
另外,值得一提的是测试变量是否为真的 ifs,一些程序员仍然这样做:
if (likeJs === true)
当他们可以这样做时:
if (likeJs)
是的,即使是变量的声明也有其怪癖。虽然这不是一个秘密,但你仍然会看到很多程序员做出这样的声明:
let x;
let y;
let z = 3;
他们什么时候可以这样做:
let x, y, z = 3;
当涉及到文本分析和验证以及某些类型的网络爬虫的数据提取时,正则表达式是创建优雅而强大的代码的好工具。
你可以在以下链接中了解有关如何使用正则表达式的更多信息:
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Regular_Expressions
https://regexr.com/
https://regex101.com/
你只想从一个字符串中选择一个字符,在一个特定的位置,对吧?我敢打赌,你首先想到的是使用 charAt 函数,如下所示:
"string".charAt(0);
但是得到这个,通过记住 String 是一个字符数组的类比,你会得到相同的结果:
"string"[0]; // Returns 's'
这只是对 Base-10 指数数或充满零的著名数字的一种更精简的表示法。对于数学比较接近的人来说,看到其中一个不会太惊讶,但是一个数字 10000 在 JS 中可以很容易地被 1e4 替换,即 1 后跟 4 个零,如下所示:
for (let i = 0; i < 1e4; i++) {
这种语义特性是 ECMAScript 版本 6 或更高版本所独有的,并且极大地简化了读取变量集中的字符串连接。例如,下面的串联:
const question = “My number is “ + number + “, ok?”
这个很简单,你可能做了更糟糕的连接。从 ES6 开始,我们可以使用模板文字进行这种连接:
const question = `My number is ${number}, ok?`
箭头函数是声明函数的缩短方式。是的,自第一个 JavaScript 版本以来,有更多方法可以做同样的事情。例如,下面是一个求和函数:
function sum(n1,n2){
return n1 + n2;
}
我们也可以像这样声明这个函数:
const sum = function(n1,n2){
return n1+n2;
}
但是使用箭头函数:
const sum = (n1,n2) => n1 + n2;
本技巧适用于那些充满参数的函数,并且你决定用一个对象替换所有这些函数。或者对于那些真正需要配置对象作为参数的函数。
到目前为止都没有问题,毕竟谁从来没有经历过这个?问题是必须继续访问由参数传递的对象,然后是我们要读取的每个属性,对吧?像这样:
function init(config){
const s = config.s;
const t = config.t;
return s + t;// or config.s + config.t
}
init({s: "1", t: "2"});
参数解构特性正是为了简化这一点,同时通过用下面的语句替换前面的语句来帮助代码可读性:
function init({s, t}){
return s + t;
}
init({s: 1, t: 2});
最重要的是,我们仍然可以在参数对象的属性中添加默认值:
function init({s = 10, t = 20}){
return s + t;
}
init({s: 1});
这样,s 的值为 1,但 t 的值将默认为该属性,即 20。
一个非常令人上瘾的功能是为对象分配属性的缩写方式。想象一下,你有一个 person 对象,该对象具有将通过 name 变量分配的 name 属性。它看起来像这样:
const name = "Joseph"
const person = { name: name }
// { name: "Joseph" }
虽然你可以这样做:
const name = "Joseph"
const person = { name }
// { name: "Joseph" }
也就是说,如果你的变量与属性同名,则不需要调用它,只需传递变量即可。多个属性也是如此:
const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }
考虑以下对象数组:
const animals = [
{
"name": "cat",
"size": "small",
"weight": 5
},
{
"name": "dog",
"size": "small",
"weight": 10
},
{
"name": "lion",
"size": "medium",
"weight": 150
},
{
"name": "elefante",
"size": "large",
"weight": 5000
}
]
现在想象一下,我们只想将动物的名字添加到另一个数组中。通常我们会这样做:
let animalNames = [];
for (let i = 0; i < animals.length; i++) {
animalNames.push(animals[i].name);
}
但是使用 Map,我们可以这样做:
let animalNames = animais.map((animal) => {
return animal.nome;
})
请注意,map 需要一个最多三个参数的函数:
显然,这个函数将为动物数组中的每个对象调用一次。
如果我们想遍历与上一个技巧中相同的动物对象数组,但这次只返回那些大小为“小”的对象怎么办?
我们将如何使用常规 JS 来做到这一点?
let smallAnimals = [];
for (let i = 0; i < animals.length; i ++) {
if (animals[i].size === "small") {
smallAnimals.push(animals[i])
}
}
然而,使用过filter操作符,我们可以用一种更简洁、更清晰的方式来做到这一点:
let smallAnimals = animais.filter((animal) => {
return animal.size === "small"
})
Filter 期望一个函数的参数是当前迭代的对象(如在 foreach 中),它应该返回一个布尔值,指示该对象是否将成为返回数组的一部分(true 表示它通过了测试 并将成为其中的一部分)。
Javascript 的另一个重要特性是 reduce。它允许我们以非常简单和强大的方式在集合之上进行分组和计算。例如,如果我们想将动物对象数组中所有动物的重量相加,我们会怎么做?
let totalWeight = 0;
for (let i = 0; i < animals.length; i++) {
totalWeight += animals[i].weight;
}
但是使用 reduce 我们可以这样做:
let totalWeight = animals.reduce((total, animal) => {
return total += animal.weight;
}, 0)
Reduce 需要一个带有以下参数的函数:
此函数将对数组中的每个对象执行一次,并在其执行结束时返回聚合值。
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。
原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。
JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的
引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局
解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。
JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象
这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!