了算术运算符和位运算符外,C语言还提供了一些其他类型的运算符,包括逗号运算符、条件运算符、sizeof运算符、指针运算符等。这些运算符在C语言中具有特定的功能和用途,对于编写复杂的程序和实现各种算法非常有用。本文将深入介绍C语言中的这些其他运算符,帮助读者更好地理解和掌握这一重要概念。
以下是我整理的关于C语言的一些入门级资料,免费分享给大家:https://m.hqyjai.net/emb_study_blue_short.html?xt=zxy
位编程爱好者,今天由小蓝与大家分享13个基本的JavaScript 函数,如果您是 Web前端开发人员,您应该熟悉这些函数。
您可以将本文所有 JavaScript 函数加入收藏至您的工具箱,以便在您的软件项目中尽可能使用这些片段。
1. 检索任何 JavaScript 数组中的第一个/最后一个项目
通常,如果使用 JavaScript,我需要数组的第一个元素。为了可用性,我创建了一个简单的 head 函数,我可以将其用于数组并将返回第一项。
作为奖励,我添加了 JavaScript last 函数,它从数组中检索最后一项。
const head=(arr)=> arr[0];
const last=(arr)=> arr[arr.length - 1];
head([1, 2, 3, 4, 5, 6, 7, 8]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8
2. JavaScript 中的逗号运算符
JavaScript 中的逗号运算符起初可能很复杂。
但是,实际上,这真的很容易!
例如,使用 [x,y] 总是返回正确的操作数。请参阅以下 JavaScript 片段以更好地理解:
console.log([1, 2, 3, 4][1]); // 2
console.log([1, 2, 3, 4][(1, 2)]); // 3
console.log([1, 2, 3, 4][2]); // 3
3. 将任何内容复制到剪贴板
在开发网站时,您有时希望将特定内容复制到剪贴板以提高可用性。
在 JavaScript 中,这可以通过直接使用文档(旧方法)或使用导航器组件(新方法)来完成。
function copyToClipboard() {
const copyText=document.getElementById('myInput');
copyText.select();
document.execCommand('copy');
}
// new API
function copyToClipboard() {
navigator.clipboard.writeText(document.querySelector('#myInput').value);
}
4. JavaScript 中的嵌套解构
解构是一个重要的 JavaScript 主题,之前也有详细的分享过。
但是今天这个代码片段显示了简单的对象重组,仅从对象中提取两个变量。
const user={
id: 459,
name: 'Paul Knulst',
age: 29,
job: {
role: 'Tech Lead',
},
};
const {
name,
job: { role },
}=user;
console.log(name); // Paul Knulst
console.log(role); // Tech Lead
5. 为任何对象添加全局可用的函数
在 JavaScript 中,可以使用新方法扩展任何对象。
以下 JavaScript 片段显示了如何将 toUpperCase 函数添加到数组。
Array.prototype.toUpperCase=function () {
let i;
for (let i=0; i < this.length; i++) {
this[i]=this[i].toUpperCase();
}
return this;
};
const myArray=['paul', 'knulst', 'medium'];
console.log(myArray); // ['paul', 'knulst', 'medium']
console.log(myArray.toUpperCase()); // ['PAUL', 'KNULST', 'MEDIUM']
这个概念称为原型继承,本文对此进行了详细介绍。
6. 在 JavaScript 中将数组本地转换为对象
JavaScript 有一个原生函数 Object.fromEntries,可用于将任何输入数组转换为对象。
const anArray=[
['firstname', 'Paul'],
['surname', 'Knulst'],
['address', 'worldwide'],
['role', 'Senior Engineer'],
['followers', 'not much'],
];
const anObj=Object.fromEntries(anArray);
console.log(anObj);
// {
// firstname: 'Paul',
// surname: 'Knulst',
// address: 'worldwide',
// role: 'Senior Engineer',
// followers: 'not much'
// }
7. 递归得到一个数的斐波那契
递归是每个软件开发者必须知道的概念!
此 JavaScript 片段显示了以递归方式实现的斐波那契函数。
const getFibonacci=(n, memo={})=>
memo[n] ||
(n <=2
? 1
: (memo[n]=getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));
console.log(getFibonacci(4)); // 3
console.log(getFibonacci(8)); // 21
8. 检查约会对象是否在周末
这个 JavaScript 片段显示了检查每个 Date 对象是否为周末是多么容易。
您可以更改周数(6 和 0)并将其替换为任何其他工作日编号以检查不同的日子。
const isWeekend=(date)=> date.getDay()===6 || date.getDay()===0;
console.log(isWeekend(new Date())); // false
console.log(isWeekend(new Date('2022-10-28'))); // false
console.log(isWeekend(new Date('2022-10-29'))); // true
9. 将 24 小时制时间格式转换为 am/pm
使用不同的时间格式是一件痛苦的事情。
这个简单的 JavaScript 片段显示了一个将任何 24 小时制时间转换为上午/下午时间的函数。
const toAMPMFormat=(h)=>
`${h % 12===0 ? 12 : h % 12}${h < 12 ? ' am.' : ' pm.'}`;
console.log(toAMPMFormat(12)); // 12 pm.
console.log(toAMPMFormat(21)); // 9 pm.
console.log(toAMPMFormat(8)); // 8 am.
console.log(toAMPMFormat(16)); // 4 pm
10. 检查对象中是否存在属性
有时你想在打印或使用它们之前检查属性是否存在。
JavaScript 没有在使用它之前执行 if property !==undefined ,而是有一个内置函数来执行此操作。
const developer={
name: 'Paul Knulst',
role: 'Tech Lead',
extra: 'Loves DevOps',
company: 'Realcore',
os: 'Windows',
};
const laptop={
os: 'Windows',
buydate: '27.10.2022',
extra: 'looks cool',
};
console.log('name' in developer); // true
console.log('extra' in developer); // true
console.log('name' in laptop); // false
console.log('extra' in laptop); // true
结合 nullish 合并运算符,它可以使您的 JavaScript 代码更清晰!
11. 检查数组是否包含相同的值
在某些情况下,您需要知道两个数组是否包含相同的值。
此 JavaScript 代码段包含一个函数 containSameValues,它通过排序和连接两个数组并比较它们的字符串来执行此操作。
const containSameValues=(arr1, arr2)=>
arr1.sort().join(',')===arr2.sort().join(',');
console.log(containSameValues([1, 2, 3], [1, 2, 3])); // true
console.log(containSameValues([1, 2, 3], [2, 3, 4])); // false
console.log(containSameValues([1, 2, 3], [1, 2, 3, 4])); // false
请记住,数组必须是可排序的才能真正正确地比较它们!
12.确保变量在指定范围内
这个 JavaScript 函数对我来说非常有用!
它检查变量是否在特定范围内,如果不在范围内,它将把它限制在最接近的最小值或最大值。
const clamp=(min, max, value)=> {
if (min > max) {
throw new Error('min cannot be greater than max');
}
return value < min ? min : value > max ? max : value;
};
clamp(0, 6, -5); // 0
clamp(0, 6, 20); // 6
clamp(0, 6, 3); // 3
13、在一行中交换两个变量
这不是 JavaScript 函数,但它是交换两个变量的一种非常酷的方法。
它展示了如何在一行中完成,而不是将值放入“临时”对象(必须在其他一些编程语言中完成)
let x=50;
let y=100;
console.log(x, y); //50 100
[y, x]=[x, y];
console.log(x, y); //100 50
结束语
以上就是今天所分享的内容,如果您在学习或者工作中有很好的 JavaScript 片段,可以评论,一起共同学习。
CSS的代码是类似 json 数据的键值对,也就是key : value,当然,每一句都必须以分号(;)结束,切记,没有分号会出问题的。
其实类似 json 数据在我们生活中很常见,比如以下例子:
姓名:小明
性别:男
班别:19计机预师班
在以上例子中,“姓名”可以称为字段或者属性,姑且叫它“属性”吧,而后面的“小明”则是属性值,这样子就形成了一种明确的数据组,同样道理,先看一下CSS代码:
background-color:red;
color:green;
font-size:2em;
......
发现没有?其实这两种方式是差不多一样的,“background-color”是属性(property),而它的值(value)则是“red”,用这种方式,就设定了背景颜色为红色。只不过CSS代码后面必须要加分号(;)结束,在这里再次提醒。
当然,还有一点要提醒初学者,在计算机程序设计中,所有的标点符号的输入必须切换到英文输入的状态,不然,也会出现一些莫名其妙错误出来。
好了,上面介绍了CSS代码长啥样,那么接下来就要明确一个问题:代码写出来后,我们怎么应用到HTML中去?也就是说,怎么用CSS控制HTML的显示效果。
在具体的应用中,我们引入“选择器(selector)”这个概念。
什么是选择器(selector)?其实按照我们的理解,你写好了CSS代码以后,那你要把这些写好的代码应用到某个地方去对吧,而这些受体就是选择器。
CSS有三种选择器,分别是标签(tag)、类(class)和ID.
标签,指的是HTML标签,也就是说,所有的HTML标签都是标签选择器。要注意的是,如果要用标签选择器,必须是HTML标签,不允许自定义。先看以下例子(大家可以把以下代码保存为html文件,然后用浏览器打开看效果):
<html>
<head>
<style>
p{
background-color:red;
color:green; font-size:2em;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧,再次留意这里的颜色</b>
</body>
</html>
以上代码中,第4~8行是标签选择器的应用方式,格式很简单,就是直接写HTML标签(上面的例子中用了p标签),然后后面跟着一对大括号({}),大括号里面写具体的CSS代码,以上案例的功能就是,给HTML中所有的p标签内容(第12~13行)应用上“红色背景、绿色字和2em的字体大小”的效果,而第14行中是b标签,没有该效果。
我们有这么一个场景:在以下代码中,我们给p标签加上了绿色的字体颜色,也就是说第12~13行的文字是绿色的,那如果我需要给“注意这里显示的颜色”和“再留意显示这里的颜色”这两行文本添加不同的颜色,怎么办呢?
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧,再次留意这里的颜色</b>
</body>
</html>
有两种方法,分别是类和ID可以解决。
先用类的方法:我们可以手动地在两个p标签中都加上类,或者为其中一个加上即可。具体做法如下。
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧,再次留意这里的颜色</b>
</body>
</html>
在以上代码中,我在第15行的p标签内加了一个class属性,属性值为“yellow”,然后第9~11行则是对yellow类的具体实现,像这样就可以给“注意这里显示的颜色”这行文本加了黄色(yellow)的效果了。
总结一下类的语法:.<类名>{<具体的CSS代码>}。
注意:类名是自定义的,你喜欢用什么类名就什么类名,但是,你所起的类名也要符合一些规则:一是必须以字母或者下划线(_)作为开头,后面可以加数字,不能加其他符号;二是类名是对大小写敏感的,也就是说一个字母的大写和小写状态是两个不一样的类名。
好了,接下来是另外一种实现方法,用ID.
ID方法的实现在形式上跟类(class)差不多,在CSS选择器中,类的语法是,在类名前面加一个点(.),而ID的不一样的地方在于,它在ID名前面加的是一个#号,具体做法如下:
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
#yellow{
color:yellow;
}
</style>
</head>
<body>
<p id="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧,再次留意这里的颜色</b>
</body>
</html>
以上案例中,通过ID的方法,也可以把“注意这里显示的颜色”文本修改成黄色(yellow)显示效果。
大家可以对比类和ID的实现方法,两者只是在符号和引用方式上存在不一样,那真的只是在形式上不一样吗?
并不是这样的,之所以存在这两种方式,因为这两者它们有各自的特性。
类的特性:类的最大特征是可复用,可以在多个不同的标签中应用同一个类。比如以下这个案例:
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b class="yellow">好吧,再次留意这里的颜色</b>
</body>
</html>
在以上代码中,我定义了一个yellow类(第9~11行),然后分别应用到“注意这里显示的颜色”(第15行)和“好吧,再次留意这里的颜色”(第17行)文本上。
ID的特性:ID,顾名思义,就是身份标识,身份标识具有唯一性,而ID的作用,就是标识唯一性,也就是说,只要在某个标签上应用一个ID,那就不能再在其他标签上使用该ID了。
至于这三种选择器的优先级,这里直接说结论,ID优先级最高,类其次,标签优先级最低。大家可以运行以下代码看结果:
<html>
<head>
<style>
p{
color: brown;
}
.cl{
color: black;
}
#ii{
color: green;
}
</style>
</head>
<body>
<p class="cl">注意这里显示的颜色</p> <!-- 显示颜色为black -->
<p class="cl" id="ii">再留意这里显示的颜色</p> <!-- 显示颜色为green -->
</body>
</html>
符号选择器,严格来讲,不能称之为“选择器”,它指的是在使用选择器的时候,用上一些符号,使得选择器的功能更加丰富。在这里介绍三个。
1.星号(*):星号代表“包含所有”的意思,比如:
2.空格:空格在这里有限定作用。
比如以下例子,我现在有这么一个需求,我需要把基础科目中的三个科目(语文、数学、英语)设置为蓝色显示,并加粗;而专业科目中两个科目(计算机和幼儿教育)文本设置成绿色,并加粗,那怎么处理呢?
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<p>基础科目:</p>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<ul>
<p>专业科目</p>
<li>计算机</li>
<li>幼儿教育</li>
</ul>
</body>
</html>
假如我对“li”标签设置CSS,那所有的“li”标签都是同一个样式,那就没有基础科目和专业科目的区别了。在这里,我可以这样解决:
解决方法如下代码:
<html>
<head>
<style>
.ul1 li{
color: blue;
font-weight: bold;
}
.ul2 li{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="ul1">
<p>基础科目:</p>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<ul class="ul2">
<p>专业科目</p>
<li>计算机</li>
<li>幼儿教育</li>
</ul>
</body>
</html>
特别说明:在HTML标签中,每个标签都称为“节点(node)”,每个节点随着HTML标签的包含关系,存在着相对的父子节点之分,包含元素的称为父节点,被包含元素被称为子节点。在以上代码中,ul和li的关系,ul是父节点,li是子节点。
3.逗号:对多个选择器应用同样的CSS样式。
在对多个选择器,无论是标签选择器、类选择器还是ID选择器,如果把这些选择器冠以同样的CSS样式,则可以用逗号分隔,把多个选择器写在一起,代码如下:
<html>
<head>
<style>
p,b,.cl,#ii{
color: brown;
font-weight: bold;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧,再次留意这里的颜色</b>
<div class="cl">用类的方式标识选择器</div>
<p id="ii">用ID的方式标识选择器</p>
</body>
</html>
在以上代码的第4~7行中,用逗号把p、b、.cl以及#ii这四个选择器都应用上了同样的CSS样式。
VS Code一些常用快捷键
CTRL+?:添加注释
CTRL+Enter:强制换行,无论光标在不在末端。
好了,当你看到这里,你对CSS是什么应该有详尽的了解了,那就开始先相关技术文档自学吧!
*请认真填写需求信息,我们会在24小时内与您取得联系。