整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
文首發(fā)自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎關(guān)注！
作者|慕課網(wǎng)精英講師 然冬
算術(shù)運(yùn)算符以數(shù)值（字面量或變量）作為其操作數(shù)，并返回一個(gè)單個(gè)數(shù)值。標(biāo)準(zhǔn)算術(shù)運(yùn)算符是加法（+），減法（ - ），乘法（*）和除法（/）。—— MDN
算數(shù)運(yùn)算符是用來(lái)做算數(shù)運(yùn)算的，如 + 這個(gè)符號(hào)，就是用來(lái)做加法操作。
N 代表一個(gè)數(shù)，如一元運(yùn)算，二元運(yùn)算。
N元運(yùn)算 表示由N個(gè)值產(chǎn)生一個(gè)新的值的規(guī)則。
如 * 就是一個(gè)二元運(yùn)算符，他由兩個(gè)數(shù)相乘產(chǎn)生第三個(gè)數(shù)。
JavaScript 中有三元運(yùn)算符、二元運(yùn)算符、一元運(yùn)算符。
注意：網(wǎng)絡(luò)上可以搜索到 JavaScript 中有更多元的運(yùn)算，基本上都是使用三目（元）表達(dá)式嵌套來(lái)完成的，嚴(yán)格上說(shuō)這不屬于更多元的運(yùn)算。
與算數(shù)相關(guān)的只有二元與一元運(yùn)算符：
二元運(yùn)算符：
一元運(yùn)算符：
加法用來(lái)做求和，將 + 左右兩邊的數(shù)值相加，也可以用來(lái)連接字符串。
var num1=2;
var num2=3;
var total=num1 + num2;
console.log(total); // 輸出：5
var firstName='hello';
var lastName='world';
var name=firstName + ' ' + lastName;
console.log(name); // 輸出："hello world"
代碼塊1234567891011數(shù)字的加法就是和自然數(shù)學(xué)里的加法一樣，做累加操作。
+ 碰到字符串就會(huì)把兩邊字符連接到一起，形成一個(gè)新的字符串。
減法操作是將 - 左邊的數(shù)減去 - 右邊的數(shù)，結(jié)果就是差值。
var totalApple=10; // 一共有10個(gè)蘋(píng)果
var take=4; // 小明拿走了四個(gè)蘋(píng)果
var left=totalApple - take; // 還有 10 - 4 個(gè)蘋(píng)果
console.log(left); // 輸出：6
代碼塊123456乘法操作將 * 左右兩邊的數(shù)相乘，結(jié)果就是積。
var result=5 * 6;
console.log(result); // 輸出：30
代碼塊123除法操作將 / 左邊的數(shù)作為被除數(shù)，右邊的數(shù)作為除數(shù)，最后求出結(jié)果。
var result=6 / 2;
console.log(result); // 輸出：3
代碼塊123在許多強(qiáng)類(lèi)型的語(yǔ)言中，整數(shù)相除即便無(wú)法除盡，結(jié)果必然是整數(shù)，但在 JavaScript 中，整數(shù)相除如果無(wú)法除盡，也會(huì)返回小數(shù)部分。
console.log(2 / 5); // 輸出：0.4
代碼塊1上面這個(gè)結(jié)果在 Java 中會(huì)返回 0，但是在 JavaScript 中會(huì)反回 0.4。
注意：如果拿正負(fù) 0 作為除數(shù)，則結(jié)果會(huì)返回 Infinity 與 -Infinity。
求余事實(shí)上就是取模運(yùn)算，也就是取余數(shù)。如 8 對(duì) 3 取模，結(jié)果為 2，按小學(xué)數(shù)學(xué)中的說(shuō)法就是 8 除 3 得 2余2，余2就是結(jié)果。
var result=8 % 3;
console.log(result); // 輸出：2
代碼塊123冪是 ES2016 提供的新運(yùn)算符，用來(lái)做乘方運(yùn)算。
** 左邊是底數(shù)，右邊是指數(shù)，如 2 ** 3 按數(shù)學(xué)中的表示就是 23，即求 2 的 3 次方。
var total=2 ** 3; // 2 的 3次方，結(jié)果為 2 * 2 * 2 ，即8
console.log(total); // 輸出：8
代碼塊123在 JavaScript 中的冪運(yùn)算與其他語(yǔ)言有些許區(qū)別，規(guī)范中指出禁止使用帶有歧義的冪運(yùn)算表達(dá)式。
如底數(shù)前不能跟隨一元運(yùn)算符。
console.log(-8 ** 2); // 在JavaScript會(huì)報(bào)錯(cuò)
代碼塊1以上冪運(yùn)算是會(huì)報(bào)錯(cuò)的，因?yàn)?JavaScript 無(wú)法知道是要在計(jì)算完 8 的 2 次方后求反，還是計(jì)算 -8 的 2 次方。
使用括號(hào)可以提供具體的意義，消除歧義：
console.log((-8) ** 2); // -8的2次方
console.log(-(8 ** 2)); // 計(jì)算完8的2次方后求反
代碼塊123一元正號(hào)通常不參與數(shù)學(xué)運(yùn)算，而是用作類(lèi)型轉(zhuǎn)換，一元正號(hào)可以很方便的將其他類(lèi)型轉(zhuǎn)換成數(shù)字。
var num1=+3;
var num2=+'3';
var num3=+true;
var num4=+false;
var num5=+null;
var timestamp=+new Date(); // 直接得到時(shí)間戳
代碼塊123456一元負(fù)號(hào)也可以將其他類(lèi)型的數(shù)據(jù)轉(zhuǎn)換成數(shù)字，但是轉(zhuǎn)換完后會(huì)在前面加上負(fù)號(hào)。
var num1=-3;
var num2=-'3';
var num3=-true;
var num4=-false;
var num5=-null;
var timestamp=-new Date();
代碼塊123456通常比較多的使用場(chǎng)景是對(duì)數(shù)字取反，讓數(shù)值在正負(fù)值切換。
遞增操作會(huì)讓數(shù)值本身增加 1。
var num=0;
num++;
console.log(num); // 輸出：1
num++;
console.log(num); // 輸出：2
代碼塊123456789這樣看，遞增操作有點(diǎn)像x=x + 1這種操作，其實(shí)只有在后置使用時(shí)的效果是和x=x + 1一樣的，也就是++x。
前置使用的時(shí)候，會(huì)先做遞增操作，再返回?cái)?shù)值。
后置使用時(shí)候，會(huì)先返回?cái)?shù)值，再做遞增操作。
var num=0;
var total=1 + (num++);
console.log(total, num); // 輸出：1 1
代碼塊12345這個(gè)是前置使用的情況，可以看到 num 的值是 1，total 的值也是 1，也就是說(shuō) total 再累加的時(shí)候?yàn)椋? + 0），這個(gè)時(shí)候 num 的值為 0，再這個(gè)值返回后對(duì) num 進(jìn)行了遞增，所以輸出 num 結(jié)果為 1。
var num=0;
var total=1 + (++num);
console.log(total, num); // 輸出：2 1
代碼塊12345這個(gè)是后置使用的情況，total 輸出結(jié)果為 2，在求和的時(shí)候就是(1 + 2)，num 是在遞增后再被使用的。
遞增操作會(huì)讓數(shù)值本身減去 1。
與遞增一樣，遞減也具有前置使用與后置使用的情況。
var num=1;
var total=1 + (num--);
console.log(total); // 輸出：2
var num2=1;
var total2=1 + (--num);
console.log(total2); // 輸出：0
代碼塊123456789算術(shù)符的優(yōu)先級(jí)與自然數(shù)學(xué)中的相似，按照先乘除后加減的規(guī)則來(lái)，具體的可以參考下表：
優(yōu)先級(jí) | 運(yùn)算類(lèi)型 | 符號(hào) |
6 | 括號(hào) | ( … ) |
5 | 后置遞增 | … ++ |
后置遞減 | … -- | |
4 | 一元加法 | + … |
一元減法 | - … | |
前置遞增 | ++ … | |
前置遞減 | -- … | |
3 | 冪 | … ** … |
2 | 乘法 | … * … |
除法 | … * … | |
取模 | … % … | |
1 | 加法 | … + … |
減法 | … - … |
括號(hào) > 后置遞增/后置遞減 > 一元加法/一元減法/前置遞增/前置遞減 > 冪 > 乘法/除法/取模 > 加法/減法
可以見(jiàn)到，括號(hào)的優(yōu)先級(jí)是最高的，所以建議在自己不確定優(yōu)先級(jí)的時(shí)候，盡量使用括號(hào)決定優(yōu)先級(jí)。
如：
var res=1 + 2 / 3 * 4 % 5 ** 7;
代碼塊1上面這個(gè)表達(dá)式的運(yùn)算順序，即便是知道優(yōu)先級(jí)，也不是一眼就能看出來(lái)的，所以建議即便是知道優(yōu)先級(jí)，也使用括號(hào)將計(jì)算順序做區(qū)分。
將想要的計(jì)算順序用括號(hào)包裹后：
var res=1 + (((2 / 3) * 4) % (5 ** 7));
代碼塊1算數(shù)運(yùn)算符主要參與運(yùn)算，N 元運(yùn)算就是用 N 個(gè)值產(chǎn)生一個(gè)新的值，運(yùn)算符有自己的特性和優(yōu)先級(jí)，當(dāng)表達(dá)式較長(zhǎng)的時(shí)候，建議使用括號(hào)包裹來(lái)控制執(zhí)行順序。
歡迎關(guān)注「慕課網(wǎng)」，發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識(shí)，幫助你成為更好的程序員！
一陣做需求時(shí)，有個(gè)小功能實(shí)現(xiàn)起來(lái)廢了點(diǎn)腦細(xì)胞，覺(jué)得可以記錄一下。
產(chǎn)品的具體訴求是：用戶點(diǎn)擊按鈕進(jìn)入詳情頁(yè)面，詳情頁(yè)內(nèi)的卡片標(biāo)題內(nèi)容過(guò)長(zhǎng)時(shí)，標(biāo)題的前后兩端正常展示，中間用省略號(hào)...表示，并且鼠標(biāo)懸浮后，展示全部?jī)?nèi)容。
關(guān)于鼠標(biāo)懸浮展示全部?jī)?nèi)容的代碼就不放在這里了，本文主要寫(xiě)關(guān)于實(shí)現(xiàn)中間省略號(hào)...的代碼。
html代碼
<div class="title" id="test">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財(cái)經(jīng)理表示：有意向購(gòu)買(mǎi)定期存款要盡快，不確定利率是否會(huì)再降。</div>
css代碼: 設(shè)置文本不換行，同時(shí)設(shè)置overflow:hidden讓文本溢出盒子隱藏
.title {
width: 640px;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #00b388;
border: 1px solid #ddd;
overflow: hidden;
/* text-overflow: ellipsis; */
white-space: nowrap;
/* box-sizing: border-box; */
padding: 0 10px;
}
javascript代碼：
獲取標(biāo)題盒子的寬度時(shí)要注意,如果在css樣式代碼中設(shè)置了padding, 就需要獲取標(biāo)題盒子的左右padding值。 通過(guò)getComputedStyle屬性獲取到所有的css樣式屬性對(duì)應(yīng)的值, 由于獲取的padding值都是帶具體像素單位的，比如: px，可以用parseInt特殊處理一下。
獲取盒子的寬度的代碼，我當(dāng)時(shí)開(kāi)發(fā)時(shí)是用canvas計(jì)算的，但計(jì)算的效果不太理想，后來(lái)逛社區(qū)，發(fā)現(xiàn)了嘉琪coder大佬分享的文章，我這里就直接把代碼搬過(guò)來(lái)用吧, 想了解的掘友可以直接滑到文章末尾查看。
判斷文本內(nèi)容是否超出標(biāo)題盒子
// 標(biāo)題盒子dom
const dom=document.getElementById('test');
// 獲取dom元素的padding值
function getPadding(el) {
const domCss=window.getComputedStyle(el, null);
const pl=Number.parseInt(domCss.paddingLeft, 10) || 0;
const pr=Number.parseInt(domCss.paddingRight, 10) || 0;
console.log('padding-left:', pl, 'padding-right:', pr);
return {
left: pl,
right: pr
}
}
// 檢測(cè)dom元素的寬度，
function checkLength(dom) {
// 創(chuàng)建一個(gè) Range 對(duì)象
const range=document.createRange();
// 設(shè)置選中文本的起始和結(jié)束位置
range.setStart(dom, 0),
range.setEnd(dom, dom.childNodes.length);
// 獲取元素在文檔中的位置和大小信息,這里直接獲取的元素的寬度
let rangeWidth=range.getBoundingClientRect().width;
// 獲取的寬度一般都會(huì)有多位小數(shù)點(diǎn)，判斷如果小于0.001的就直接舍掉
const offsetWidth=rangeWidth - Math.floor(rangeWidth);
if (offsetWidth < 0.001) {
rangeWidth=Math.floor(rangeWidth);
}
// 獲取元素padding值
const { left, right }=getPadding(dom);
const paddingWidth=left + right;
// status：文本內(nèi)容是否超出標(biāo)題盒子；
// width: 標(biāo)題盒子真實(shí)能夠容納文本內(nèi)容的寬度
return {
status: paddingWidth + rangeWidth > dom.clientWidth,
width: dom.clientWidth - paddingWidth
};
}
通過(guò)charCodeAt返回指定位置的字符的Unicode編碼, 返回的值對(duì)應(yīng)ASCII碼表對(duì)應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號(hào)等，這些都是占一個(gè)字節(jié)長(zhǎng)度的字符，而大于127的為占兩個(gè)字節(jié)長(zhǎng)度的字符。
截取和計(jì)算文本長(zhǎng)度
js// 計(jì)算文本長(zhǎng)度，當(dāng)長(zhǎng)度之和大于等于dom元素的寬度后，返回當(dāng)前文字所在的索引，截取時(shí)會(huì)用到。
function calcTextLength(text, width) {
let realLength=0;
let index=0;
for (let i=0; i < text.length; i++) {
charCode=text.charCodeAt(i);
if (charCode >=0 && charCode <=128) {
realLength +=1;
} else {
realLength +=2 * 14; // 14是字體大小
}
// 判斷長(zhǎng)度，為true時(shí)終止循環(huán)，記錄索引并返回
if (realLength >=width) {
index=i;
break;
}
}
return index;
}
// 設(shè)置文本內(nèi)容
function setTextContent(text) {
const { status, width }=checkLength(dom);
let str='';
if (status) {
// 翻轉(zhuǎn)文本
let reverseStr=text.split('').reverse().join('');
// 計(jì)算左右兩邊文本要截取的字符索引
const leftTextIndex=calcTextLength(text, width);
const rightTextIndex=calcTextLength(reverseStr, width);
// 將右側(cè)字符先截取，后翻轉(zhuǎn)
reverseStr=reverseStr.substring(0, rightTextIndex);
reverseStr=reverseStr.split('').reverse().join('');
// 字符拼接
str=`${text.substring(0, leftTextIndex)}...${reverseStr}`;
} else {
str=text;
}
dom.innerHTML=str;
}
最終實(shí)現(xiàn)的效果如下：
上面就是此功能的所有代碼了，如果想要在本地試驗(yàn)的話，可以在本地新建一個(gè)html文件，復(fù)制上面代碼就可以了。
下面記錄下從社區(qū)內(nèi)學(xué)到的相關(guān)知識(shí)：
通過(guò)document.createRange和document.getBoundingClientRect()這兩個(gè)方法實(shí)現(xiàn)的。也就是我上面代碼中實(shí)現(xiàn)的checkLength方法。
通過(guò)創(chuàng)建一個(gè)不會(huì)在頁(yè)面顯示出來(lái)的dom元素，然后把文本內(nèi)容設(shè)置進(jìn)去，真實(shí)的文本長(zhǎng)度與標(biāo)題盒子比較寬度，判斷是否被溢出隱藏了。
function getDomDivWidth(dom) {
const elementWidth=dom.clientWidth;
const tempElement=document.createElement('div');
const style=window.getComputedStyle(dom, null)
const { left, right }=getPadding(dom); // 這里我寫(xiě)的有點(diǎn)重復(fù)了，可以?xún)?yōu)化
tempElement.style.cssText=`
position: absolute;
top: -9999px;
left: -9999px;
white-space: nowrap;
padding-left:${style.paddingLeft};
padding-right:${style.paddingRight};
font-size: ${style.fontSize};
font-family: ${style.fontFamily};
font-weight: ${style.fontWeight};
letter-spacing: ${style.letterSpacing};
`;
tempElement.textContent=dom.textContent;
document.body.appendChild(tempElement);
const obj={
status: tempElement.clientWidth + right + left > elementWidth,
width: elementWidth - left - right
}
document.body.removeChild(tempElement);
return obj;
}
這種方法是在UI框架acro design vue中實(shí)現(xiàn)的。外層套一個(gè)塊級(jí)(block)元素，內(nèi)部是一個(gè)行內(nèi)(inline)元素。給外層元素設(shè)置溢出隱藏的樣式屬性，不對(duì)內(nèi)層元素做處理，這樣內(nèi)層元素的寬度是不變的。因此，通過(guò)獲取內(nèi)層元素的寬度和外層元素的寬度作比較，就可以判斷出文本是否被溢出隱藏了。
// html代碼
<div class="title" id="test">
<span class="content">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財(cái)經(jīng)理表示：有意向購(gòu)買(mǎi)定期存款要盡快，不確定利率是否會(huì)再降。</span>
</div>
// 創(chuàng)建一個(gè)block元素來(lái)包裹inline元素
const content=document.querySelector('.content');
function getBlockDomWidth(dom) {
const { left, right }=getPadding(dom);
console.log(dom.clientWidth, content.clientWidth)
const obj={
status: dom.clientWidth < content.clientWidth + left + right,
width: dom.clientWidth - left - right
}
return obj;
}
通過(guò)Canvas 2D渲染上下文(context)可以調(diào)用measureText方法，此方法會(huì)返回TextMetrics對(duì)象，該對(duì)象的width屬性值就是字符占據(jù)的寬度，由此也能獲取到文本的真實(shí)寬度，此方法有弊端，比如說(shuō)兼容性，精確度等等。
// 獲取文本長(zhǎng)度
function getTextWidth(text, font=14) {
const canvas=document.createElement("canvas");
const context=canvas.getContext("2d")
context.font=font
const metrics=context.measureText(text);
return metrics.width
}
通過(guò)charCodeAt獲取指定位置字符的Unicode編碼，返回的值對(duì)應(yīng)ASCII碼表對(duì)應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號(hào)等，這些都是占一個(gè)字節(jié)長(zhǎng)度的字符，而大于127的為占兩個(gè)字節(jié)長(zhǎng)度的字符。
function calcTextLength(text) {
let realLength=0;
for (let i=0; i < text.length; i++) {
charCode=text.charCodeAt(i);
if (charCode >=0 && charCode <=128) {
realLength +=1;
} else {
realLength +=2;
}
}
return realLength;
}
function getTextWidth(text) {
return text.replace(/[^\x00-\xff]/g,"aa").length;
};
作者：娜個(gè)小部呀
鏈接：https://juejin.cn/post/7329967013923962895
天學(xué)習(xí)下css3的基礎(chǔ)選擇器類(lèi)型，只有使用選擇器選中了元素，才可把樣式應(yīng)用于元素上，所以選擇器對(duì)我們來(lái)說(shuō)是至關(guān)重要的。選擇器允許開(kāi)發(fā)者根據(jù)元素的類(lèi)型、類(lèi)名、ID等屬性來(lái)選擇性地應(yīng)用樣式。
下面是一個(gè)包含HTML和CSS代碼的例子，展示了CSS3中的幾種基礎(chǔ)選擇器如何工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 基礎(chǔ)選擇器示例</title>
<style>
/* 元素選擇器 */
p {
color: blue;
}
/* 類(lèi)選擇器 */
.highlight {
background-color: yellow;
}
/* ID選擇器 */
#unique-id {
color: red;
}
/* 后代選擇器 */
div p {
font-style: italic;
}
/* 子選擇器 */
ul > li {
list-style-type: none;
}
/* 相鄰兄弟選擇器 */
h1 + p {
font-size: 18px;
}
/* 通用兄弟選擇器 */
h1 ~ p {
margin-top: 20px;
}
</style>
</head>
<body>
<p>這是一個(gè)普通的段落，應(yīng)用了元素選擇器。</p>
<p class="highlight">這是一個(gè)高亮顯示的段落，應(yīng)用了類(lèi)選擇器。</p>
<div id="unique-id">這是一個(gè)ID為unique-id的div，它的文本應(yīng)用了ID選擇器。</div>
<div>
<p>這個(gè)段落位于div內(nèi)部，應(yīng)用了后代選擇器。</p>
</div>
<ul>
<li>列表項(xiàng)1，應(yīng)用了子選擇器。</li>
<li>列表項(xiàng)2，也應(yīng)用了子選擇器。</li>
</ul>
<h1>標(biāo)題</h1>
<p>這個(gè)段落緊接在h1之后，應(yīng)用了相鄰兄弟選擇器。</p>
<p>這個(gè)段落也在h1之后，但由于不是緊接的，所以只應(yīng)用了通用兄弟選擇器的樣式。</p>
</body>
</html>在這個(gè)例子中，我們有一個(gè)HTML文檔，其中包含了各種元素，并且針對(duì)這些元素使用了CSS3中的基礎(chǔ)選擇器來(lái)應(yīng)用樣式。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
