一次弄懂JavaScript各種運算符，滿滿干貨，速

一次弄懂JavaScript各種運算符，滿滿干貨，速來圍觀！

文首發(fā)自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎關(guān)注！

作者|慕課網(wǎng)精英講師然冬

算術(shù)運算符以數(shù)值（字面量或變量）作為其操作數(shù)，并返回一個單個數(shù)值。標(biāo)準(zhǔn)算術(shù)運算符是加法（+），減法（ - ），乘法（*）和除法（/）。—— MDN

算數(shù)運算符是用來做算數(shù)運算的，如 + 這個符號，就是用來做加法操作。

1. N元運算

N 代表一個數(shù)，如一元運算，二元運算。

N元運算表示由N個值產(chǎn)生一個新的值的規(guī)則。

如 * 就是一個二元運算符，他由兩個數(shù)相乘產(chǎn)生第三個數(shù)。

JavaScript 中有三元運算符、二元運算符、一元運算符。

注意：網(wǎng)絡(luò)上可以搜索到 JavaScript 中有更多元的運算，基本上都是使用三目（元）表達(dá)式嵌套來完成的，嚴(yán)格上說這不屬于更多元的運算。

與算數(shù)相關(guān)的只有二元與一元運算符：

二元運算符：

+ 加法
- 減法
* 乘法
/ 除法
% 求余
** 冪（ES2016 提案）

一元運算符：

+ 一元正號
- 一元負(fù)號
++ 遞增
-- 遞減

2. 二元運算符

2.1 加法（+）

加法用來做求和，將 + 左右兩邊的數(shù)值相加，也可以用來連接字符串。

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é)里的加法一樣，做累加操作。

+ 碰到字符串就會把兩邊字符連接到一起，形成一個新的字符串。

2.2 減法（-）

減法操作是將 - 左邊的數(shù)減去 - 右邊的數(shù)，結(jié)果就是差值。

var totalApple=10; // 一共有10個蘋果
var take=4; // 小明拿走了四個蘋果

var left=totalApple - take; // 還有 10 - 4 個蘋果

console.log(left); // 輸出：6
代碼塊123456

2.3 乘法（*）

乘法操作將 * 左右兩邊的數(shù)相乘，結(jié)果就是積。

var result=5 * 6;

console.log(result); // 輸出：30
代碼塊123

2.4 除法（/）

除法操作將 / 左邊的數(shù)作為被除數(shù)，右邊的數(shù)作為除數(shù)，最后求出結(jié)果。

var result=6 / 2;

console.log(result); // 輸出：3
代碼塊123

在許多強類型的語言中，整數(shù)相除即便無法除盡，結(jié)果必然是整數(shù)，但在 JavaScript 中，整數(shù)相除如果無法除盡，也會返回小數(shù)部分。

console.log(2 / 5); // 輸出：0.4
代碼塊1

上面這個結(jié)果在 Java 中會返回 0，但是在 JavaScript 中會反回 0.4。

注意：如果拿正負(fù) 0 作為除數(shù)，則結(jié)果會返回 Infinity 與 -Infinity。

2.5 求余（%）

求余事實上就是取模運算，也就是取余數(shù)。如 8 對 3 取模，結(jié)果為 2，按小學(xué)數(shù)學(xué)中的說法就是 8 除 3 得 2余2，余2就是結(jié)果。

var result=8 % 3;

console.log(result); // 輸出：2
代碼塊123

2.6 冪（**）

冪是 ES2016 提供的新運算符，用來做乘方運算。

** 左邊是底數(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 中的冪運算與其他語言有些許區(qū)別，規(guī)范中指出禁止使用帶有歧義的冪運算表達(dá)式。

如底數(shù)前不能跟隨一元運算符。

console.log(-8 ** 2); // 在JavaScript會報錯
代碼塊1

以上冪運算是會報錯的，因為 JavaScript 無法知道是要在計算完 8 的 2 次方后求反，還是計算 -8 的 2 次方。

使用括號可以提供具體的意義，消除歧義：

console.log((-8) ** 2); // -8的2次方

console.log(-(8 ** 2)); // 計算完8的2次方后求反
代碼塊123

3. 一元運算符

3.1 一元正號

一元正號通常不參與數(shù)學(xué)運算，而是用作類型轉(zhuǎn)換，一元正號可以很方便的將其他類型轉(zhuǎn)換成數(shù)字。

var num1=+3;
var num2=+'3';
var num3=+true;
var num4=+false;
var num5=+null;
var timestamp=+new Date(); // 直接得到時間戳
代碼塊123456

3.2 一元負(fù)號

一元負(fù)號也可以將其他類型的數(shù)據(jù)轉(zhuǎn)換成數(shù)字，但是轉(zhuǎn)換完后會在前面加上負(fù)號。

var num1=-3;
var num2=-'3';
var num3=-true;
var num4=-false;
var num5=-null;
var timestamp=-new Date();
代碼塊123456

通常比較多的使用場景是對數(shù)字取反，讓數(shù)值在正負(fù)值切換。

3.3 遞增

遞增操作會讓數(shù)值本身增加 1。

var num=0;

num++;

console.log(num); // 輸出：1

num++;

console.log(num); // 輸出：2
代碼塊123456789

這樣看，遞增操作有點像x=x + 1這種操作，其實只有在后置使用時的效果是和x=x + 1一樣的，也就是++x。

前置使用的時候，會先做遞增操作，再返回數(shù)值。

后置使用時候，會先返回數(shù)值，再做遞增操作。

var num=0;

var total=1 + (num++);

console.log(total, num); // 輸出：1 1
代碼塊12345

這個是前置使用的情況，可以看到 num 的值是 1，total 的值也是 1，也就是說 total 再累加的時候為（1 + 0），這個時候 num 的值為 0，再這個值返回后對 num 進(jìn)行了遞增，所以輸出 num 結(jié)果為 1。

var num=0;

var total=1 + (++num);

console.log(total, num); // 輸出：2 1
代碼塊12345

這個是后置使用的情況，total 輸出結(jié)果為 2，在求和的時候就是(1 + 2)，num 是在遞增后再被使用的。

3.4 遞減

遞增操作會讓數(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

4. 優(yōu)先級

算術(shù)符的優(yōu)先級與自然數(shù)學(xué)中的相似，按照先乘除后加減的規(guī)則來，具體的可以參考下表：

優(yōu)先級	運算類型	符號
6	括號	( … )
5	后置遞增	… ++
5	后置遞減	… --
4	一元加法	+ …
	一元減法	- …
	前置遞增	++ …
	前置遞減	-- …
3	冪	… ** …
2	乘法	… * …
	除法	… * …
	取模	… % …
1	加法	… + …
1	減法	… - …

括號 > 后置遞增/后置遞減 > 一元加法/一元減法/前置遞增/前置遞減 > 冪 > 乘法/除法/取模 > 加法/減法

可以見到，括號的優(yōu)先級是最高的，所以建議在自己不確定優(yōu)先級的時候，盡量使用括號決定優(yōu)先級。

如：

var res=1 + 2 / 3 * 4 % 5 ** 7;
代碼塊1

上面這個表達(dá)式的運算順序，即便是知道優(yōu)先級，也不是一眼就能看出來的，所以建議即便是知道優(yōu)先級，也使用括號將計算順序做區(qū)分。

將想要的計算順序用括號包裹后：

var res=1 + (((2 / 3) * 4) % (5 ** 7));
代碼塊1

4. 小結(jié)

算數(shù)運算符主要參與運算，N 元運算就是用 N 個值產(chǎn)生一個新的值，運算符有自己的特性和優(yōu)先級，當(dāng)表達(dá)式較長的時候，建議使用括號包裹來控制執(zhí)行順序。

歡迎關(guān)注「慕課網(wǎng)」，發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識，幫助你成為更好的程序員！

一陣做需求時，有個小功能實現(xiàn)起來廢了點腦細(xì)胞，覺得可以記錄一下。

產(chǎn)品的具體訴求是：用戶點擊按鈕進(jìn)入詳情頁面，詳情頁內(nèi)的卡片標(biāo)題內(nèi)容過長時，標(biāo)題的前后兩端正常展示，中間用省略號...表示，并且鼠標(biāo)懸浮后，展示全部內(nèi)容。

關(guān)于鼠標(biāo)懸浮展示全部內(nèi)容的代碼就不放在這里了，本文主要寫關(guān)于實現(xiàn)中間省略號...的代碼。

實現(xiàn)思路

獲取標(biāo)題盒子的真實寬度, 我這里用的是clientWidth；
獲取文本內(nèi)容所占的實際寬度；
根據(jù)文字的大小計算出每個文字所占的寬度；
判斷文本內(nèi)容的實際寬度是否超出了標(biāo)題盒子的寬度；
通過文字所占的寬度累加之和與標(biāo)題盒子的寬度做對比，計算出要截取位置的索引；
同理，文本尾部的內(nèi)容需要翻轉(zhuǎn)一下，然后計算索引，截取完之后再翻轉(zhuǎn)回來；

代碼

html代碼

<div class="title" id="test">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經(jīng)理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</div>

css代碼: 設(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)題盒子的寬度時要注意,如果在css樣式代碼中設(shè)置了padding, 就需要獲取標(biāo)題盒子的左右padding值。通過getComputedStyle屬性獲取到所有的css樣式屬性對應(yīng)的值, 由于獲取的padding值都是帶具體像素單位的，比如: px，可以用parseInt特殊處理一下。

獲取盒子的寬度的代碼，我當(dāng)時開發(fā)時是用canvas計算的，但計算的效果不太理想，后來逛社區(qū)，發(fā)現(xiàn)了嘉琪coder大佬分享的文章，我這里就直接把代碼搬過來用吧, 想了解的掘友可以直接滑到文章末尾查看。

判斷文本內(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
    }
}
// 檢測dom元素的寬度，
function checkLength(dom) {
     // 創(chuàng)建一個 Range 對象
    const range=document.createRange();
    
    // 設(shè)置選中文本的起始和結(jié)束位置
    range.setStart(dom, 0),
    range.setEnd(dom, dom.childNodes.length);
    
    // 獲取元素在文檔中的位置和大小信息,這里直接獲取的元素的寬度
    let rangeWidth=range.getBoundingClientRect().width;
    
    // 獲取的寬度一般都會有多位小數(shù)點，判斷如果小于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)題盒子真實能夠容納文本內(nèi)容的寬度
    return {
        status: paddingWidth + rangeWidth > dom.clientWidth,
        width: dom.clientWidth - paddingWidth
    };
}

通過charCodeAt返回指定位置的字符的Unicode編碼, 返回的值對應(yīng)ASCII碼表對應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號等，這些都是占一個字節(jié)長度的字符，而大于127的為占兩個字節(jié)長度的字符。

截取和計算文本長度

js// 計算文本長度，當(dāng)長度之和大于等于dom元素的寬度后，返回當(dāng)前文字所在的索引，截取時會用到。
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是字體大小
        }
        // 判斷長度，為true時終止循環(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('');
        
        // 計算左右兩邊文本要截取的字符索引
        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;
}

最終實現(xiàn)的效果如下：

上面就是此功能的所有代碼了，如果想要在本地試驗的話，可以在本地新建一個html文件，復(fù)制上面代碼就可以了。

下面記錄下從社區(qū)內(nèi)學(xué)到的相關(guān)知識：

js判斷文字被溢出隱藏的幾種方法;
JS獲取字符串長度的幾種常用方法，漢字算兩個字節(jié);

1、 js判斷文字被溢出隱藏的幾種方法

1. Element-plus這個UI框架中的表格組件實現(xiàn)的方案。

通過document.createRange和document.getBoundingClientRect()這兩個方法實現(xiàn)的。也就是我上面代碼中實現(xiàn)的checkLength方法。

2. 創(chuàng)建一個隱藏的div模擬實際寬度

通過創(chuàng)建一個不會在頁面顯示出來的dom元素，然后把文本內(nèi)容設(shè)置進(jìn)去，真實的文本長度與標(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); // 這里我寫的有點重復(fù)了，可以優(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;
}

3. 創(chuàng)建一個block元素來包裹inline元素

這種方法是在UI框架acro design vue中實現(xiàn)的。外層套一個塊級(block)元素，內(nèi)部是一個行內(nèi)(inline)元素。給外層元素設(shè)置溢出隱藏的樣式屬性，不對內(nèi)層元素做處理，這樣內(nèi)層元素的寬度是不變的。因此，通過獲取內(nèi)層元素的寬度和外層元素的寬度作比較，就可以判斷出文本是否被溢出隱藏了。

// html代碼
<div class="title" id="test">
    <span class="content">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經(jīng)理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</span>
</div>

// 創(chuàng)建一個block元素來包裹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;
}

4. 使用canvas中的measureText方法和TextMetrics對象來獲取元素的寬度

通過Canvas 2D渲染上下文(context)可以調(diào)用measureText方法，此方法會返回TextMetrics對象，該對象的width屬性值就是字符占據(jù)的寬度，由此也能獲取到文本的真實寬度，此方法有弊端，比如說兼容性，精確度等等。

// 獲取文本長度
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
}

2、JS獲取字符串長度的幾種常用方法

1. 通過charCodeAt判斷字符編碼

通過charCodeAt獲取指定位置字符的Unicode編碼，返回的值對應(yīng)ASCII碼表對應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號等，這些都是占一個字節(jié)長度的字符，而大于127的為占兩個字節(jié)長度的字符。

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;
}

2. 采取將雙字節(jié)字符替換成"aa"的做法，取長度

function getTextWidth(text) {
    return text.replace(/[^\x00-\xff]/g,"aa").length;
};

作者：娜個小部呀
鏈接：https://juejin.cn/post/7329967013923962895

天學(xué)習(xí)下css3的基礎(chǔ)選擇器類型，只有使用選擇器選中了元素，才可把樣式應(yīng)用于元素上，所以選擇器對我們來說是至關(guān)重要的。選擇器允許開發(fā)者根據(jù)元素的類型、類名、ID等屬性來選擇性地應(yīng)用樣式。

下面是一個包含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;  
    }  
  
    /* 類選擇器 */  
    .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>這是一個普通的段落，應(yīng)用了元素選擇器。</p>  
  
<p class="highlight">這是一個高亮顯示的段落，應(yīng)用了類選擇器。</p>  
  
<div id="unique-id">這是一個ID為unique-id的div，它的文本應(yīng)用了ID選擇器。</div>  
  
<div>  
    <p>這個段落位于div內(nèi)部，應(yīng)用了后代選擇器。</p>  
</div>  
  
<ul>  
    <li>列表項1，應(yīng)用了子選擇器。</li>  
    <li>列表項2，也應(yīng)用了子選擇器。</li>  
</ul>  
  
<h1>標(biāo)題</h1>  
<p>這個段落緊接在h1之后，應(yīng)用了相鄰兄弟選擇器。</p>  
<p>這個段落也在h1之后，但由于不是緊接的，所以只應(yīng)用了通用兄弟選擇器的樣式。</p>  
  
</body>  
</html>

在這個例子中，我們有一個HTML文檔，其中包含了各種元素，并且針對這些元素使用了CSS3中的基礎(chǔ)選擇器來應(yīng)用樣式。

元素選擇器：所有的<p>元素都會應(yīng)用藍(lán)色文本顏色。
類選擇器：具有class="highlight"的<p>元素會有黃色背景。
ID選擇器：ID為unique-id的<div>元素內(nèi)的文本會變成紅色。
后代選擇器：位于<div>內(nèi)部的<p>元素會以斜體顯示。
子選擇器：<ul>元素的直接子<li>元素將不會有列表樣式（即無圓點或數(shù)字）。
相鄰兄弟選擇器：緊接在<h1>之后的<p>元素會有18px的字體大小。
通用兄弟選擇器：所有在<h1>之后的<p>元素都會有20px的頂部外邊距，但由于相鄰兄弟選擇器更具體，緊接在<h1>之后的<p>還會受到它的影響（這里兩個選擇器都作用于相同的元素，但樣式會累加或根據(jù)CSS的層疊規(guī)則來應(yīng)用）。不過，在這個特定的例子中，字體大小只由相鄰兄弟選擇器設(shè)置，頂部外邊距則由通用兄弟選擇器設(shè)置。

在線咨詢

上一篇：新手php入門之 Smarty模板簡介及使用步驟
下一篇：ipython常用方法說明

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商