JavaScript 箭頭函數(shù)特點(diǎn)與用法詳解

家好，很高興又見面了，我是姜茶的編程筆記，我們一起學(xué)習(xí)前端相關(guān)領(lǐng)域技術(shù)，共同進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力

我們來聊聊箭頭函數(shù)（就是下面這個(gè)東西）！箭頭函數(shù)的語法比傳統(tǒng)的函數(shù)表達(dá)式更簡(jiǎn)潔，而且它們沒有自己的 this、arguments、super 或 new.target。它們非常適合用在需要匿名函數(shù)的地方，同時(shí)不能作為構(gòu)造函數(shù)使用。

// 當(dāng)只有一個(gè)參數(shù)時(shí)，圓括號(hào)不是必須的
(singleParam) => { statements }
singleParam => { statements }

// 沒有參數(shù)的函數(shù)必須加圓括號(hào)
() => { statements }

箭頭函數(shù)有兩個(gè)主要優(yōu)點(diǎn)：

1?? 語法更簡(jiǎn)潔

2?? 不會(huì)綁定 this

切入正題【特點(diǎn)】

沒有自己的 this

箭頭函數(shù)不會(huì)創(chuàng)建自己的 this，它只會(huì)繼承外層作用域的 this。

function Person() {
 this.age = 0;

 setInterval(() => {
  // this 正確地指向 p 實(shí)例
  console.log(this === p); // true
  this.age++;
 }, 1000);
}

var p = new Person();

與嚴(yán)格模式的關(guān)系

由于 this 是詞法綁定的，嚴(yán)格模式中與 this 相關(guān)的規(guī)則將被忽略。

var f = () => { 'use strict'; return this; };
f() === window; // 或 global

通過 call、apply 或 bind 調(diào)用

因?yàn)榧^函數(shù)沒有自己的 this，使用這些方法調(diào)用時(shí)只能傳遞參數(shù)，它們的第一個(gè)參數(shù) this 會(huì)被忽略。

let adder = {
 base: 1,
 add: function (a) {
  console.log(this === adder); // true
  let f = (v) => v + this.base;
  return f(a);
 },
 addThruCall: function (a) {
  let f = (v) => {
   console.log(this === adder); // true
   console.log(`v 的值是 ${v}，this.base 的值是 ${this.base}`); // 'v 的值是 1，this.base 的值是 1'
   return v + this.base;
  };
  let b = { base: 3 };
  // call() 方法不能綁定 this 為 b 對(duì)象，第一個(gè)參數(shù) b 被忽略了
  return f.call(b, a);
 }
};

console.log(adder.add(1)); // 輸出 2
console.log(adder.addThruCall(1)); // 輸出 2

使用箭頭函數(shù)作為方法

箭頭函數(shù)沒有 this 綁定。

"use strict";
var obj = {
 i: 10,
 b: () => console.log(this.i, this), // undefined, Window{...}
 c: function () {
  console.log(this.i, this); // 10, Object {...}
 }
};
obj.b();
obj.c();

使用 new 操作符

箭頭函數(shù)不能用作構(gòu)造函數(shù)，用 new 調(diào)用會(huì)拋出錯(cuò)誤。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

作為匿名函數(shù)

ES6 的箭頭函數(shù)表達(dá)式是匿名函數(shù)的一種簡(jiǎn)寫方式：

// 匿名函數(shù)
let show = function () {
    console.log("匿名函數(shù)")
};
show(); // "匿名函數(shù)"

let show1 = () => console.log("匿名函數(shù)");
show1(); // "匿名函數(shù)"

不過，箭頭函數(shù)和傳統(tǒng)匿名函數(shù)在實(shí)際操作中還是有一些區(qū)別的。

最后

如果你有任何問題或建議，歡迎在評(píng)論區(qū)留言交流！祝你編程愉快！

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

使用Tailwind CSS掌握動(dòng)畫技術(shù)，為用戶帶來難忘的體驗(yàn)

開篇

動(dòng)畫已經(jīng)成為網(wǎng)頁設(shè)計(jì)的重要組成部分，使開發(fā)人員能夠創(chuàng)建引人入勝和互動(dòng)的用戶體驗(yàn)。

Tailwind CSS，一款流行的實(shí)用型CSS框架，提供了一套強(qiáng)大的工具，可以輕松地創(chuàng)建令人驚艷的動(dòng)畫效果。

在這篇博客文章中，我們將探索使用Tailwind CSS進(jìn)行高級(jí)動(dòng)畫的令人興奮的世界，并揭示一些令人驚嘆的技巧，將使您的網(wǎng)絡(luò)項(xiàng)目達(dá)到一個(gè)新的水平。

Transition 與 Transform

Tailwind CSS 提供了一系列利用 CSS 過渡和變換的實(shí)用類。這些屬性使您能夠輕松創(chuàng)建平滑的動(dòng)畫和令人驚嘆的變換效果，而無需花費(fèi)太多的精力。

除了 transitions 和 transforms 之外，Tailwind CSS還支持關(guān)鍵幀動(dòng)畫。關(guān)鍵幀允許您通過在不同時(shí)間點(diǎn)指定一系列樣式變化來定義自定義動(dòng)畫。

讓我們深入探討不同類型的動(dòng)畫。

漸變動(dòng)態(tài)文字

為了給漸變文字添加動(dòng)畫效果，我們將包含 animate-pulse 類。這個(gè)類會(huì)給元素應(yīng)用一個(gè)脈動(dòng)動(dòng)畫，給它一個(gè)微妙但引人注目的效果。

<div class="ms-52 my-10 text-5xl font-extrabold">
  <span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span>
</div>

在這個(gè)例子中，我們有一個(gè)包含文本“漸變文本”的 <span> 元素。為了創(chuàng)建漸變效果，我們使用 text-transparent 類使文本透明。最后，我們使用 bg-gradient-to-r 類來指定從紫色到藍(lán)色的水平漸變。

用途：我們可以使用這個(gè)動(dòng)畫來突出或聚焦細(xì)節(jié)。

骨架屏（占位區(qū)域）

在這個(gè)例子中，我們將使用Tailwind CSS創(chuàng)建一個(gè)占位符內(nèi)容區(qū)域，用于在沒有網(wǎng)絡(luò)連接或正在加載數(shù)據(jù)時(shí)使用 :)

<div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4">
  <div class="animate-pulse space-x-4">
    <div class="grid">
      <div class="flex">
        <div class="w-10 rounded-full bg-slate-200"></div>
        <div class="ms-4 w-full space-y-6">
          <div class="h-2 rounded bg-slate-200"></div>
          <div class="space-y-3">
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2 h-2 rounded bg-slate-200"></div>
              <div class="col-span-1 h-2 rounded bg-slate-200"></div>
            </div>
            <div class="h-2 rounded bg-slate-200"></div>
          </div>
        </div>
      </div>
      <div class="mt-5 space-y-6 py-1">
        <div class="h-2 rounded bg-slate-200"></div>
        <div class="space-y-3">
          <div class="grid grid-cols-3 gap-4">
            <div class="col-span-2 h-2 rounded bg-slate-200"></div>
            <div class="col-span-1 h-2 rounded bg-slate-200"></div>
          </div>
          <div class="h-2 rounded bg-slate-200"></div>
        </div>
        <div class="h-2 rounded bg-slate-200"></div>
      </div>
    </div>
  </div>
</div>

在這個(gè)例子中，我們使用嵌套的 <div> 和 flex 類來使加載文本在水平和垂直方向上居中。 justify-center 和 items-center 類確保內(nèi)容在父容器中居中顯示。

通過應(yīng)用 animate-pulse 類，整個(gè)占位區(qū)域?qū)⒄故疽粋€(gè)脈動(dòng)動(dòng)畫，給用戶一種活動(dòng)的錯(cuò)覺，并提示內(nèi)容正在加載。

用途：我們可以使用這個(gè)動(dòng)畫來展示請(qǐng)求的數(shù)據(jù)正在加載。

3. 無限旋轉(zhuǎn)的球

這段動(dòng)畫代碼創(chuàng)建了一個(gè)帶有邊框和旋轉(zhuǎn)效果的圓形元素。在圓形元素內(nèi)部，有一個(gè)較小的圓形元素位于右上角。

<div class="my-40 flex">
  <div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4">
    <span class="absolute right-5 top-2 flex h-3 w-3">
      <span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span>
    </span>
  </div>
</div>

上面的代碼片段中有一個(gè)帶有類 my-40 和 flex 的 div 元素。在這個(gè) div 內(nèi)部，我們可以使用 animate-spin 類創(chuàng)建一個(gè)具有無限旋轉(zhuǎn)動(dòng)畫效果的圓形元素。我們可以用它來顯示數(shù)據(jù)加載的處理過程或圖像或文件的上傳過程。

用途：使用此動(dòng)畫，我們可以展示數(shù)據(jù)加載、圖像加載或文件上傳的處理過程。

4、雙重彈力圓形

這段動(dòng)畫代碼創(chuàng)建了一個(gè)包含兩個(gè)圓的動(dòng)畫。其中一個(gè)是較大的圓形，會(huì)反彈，另一個(gè)是較小的圓形，在其下方旋轉(zhuǎn)。動(dòng)畫效果營(yíng)造出加載或活動(dòng)的錯(cuò)覺。

<div class="my-40 flex">
  <div class="relative mx-auto h-10 w-10 animate-bounce">
    <div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div>
    <span class="absolute flex h-5 w-5 animate-spin">
      <span class="h-4 w-4 rounded-full bg-gray-400"> </span>
    </span>
  </div>
</div>

在這個(gè)動(dòng)畫中，我們有一個(gè)具有相對(duì)定位、居中、大小調(diào)整和彈跳動(dòng)畫效果的 div 類。在第二個(gè) div 內(nèi)，有另一個(gè)具有居中、大小調(diào)整、脈沖動(dòng)畫效果和灰色背景顏色的 div 元素。

我們?cè)诟冈?div 上應(yīng)用了 animate-bounce 類，因此所有內(nèi)部元素都具有默認(rèn)的彈性效果。我們還在一個(gè)更大的圓圈上應(yīng)用了 animat-pulse 效果，以實(shí)現(xiàn)脈沖效果。

用途：我們可以使用這個(gè)動(dòng)畫來展示用戶的活動(dòng)或數(shù)據(jù)加載效果。

5、旋轉(zhuǎn)的點(diǎn)狀正方形

這個(gè)動(dòng)畫代碼由一個(gè)旋轉(zhuǎn)的圓角矩形形狀組成，表示某種活動(dòng)或加載。該矩形框具有虛線的灰色輪廓，以增加視覺效果。

<div class="my-40 flex">
  <div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div>
</div>

上面的代碼片段有一個(gè)應(yīng)用旋轉(zhuǎn)動(dòng)畫效果到內(nèi)部 animate-spin 的類。 rounded-3xl 類將內(nèi)部 div 的角落變圓，創(chuàng)造出更圓潤(rùn)的形狀。 outline-dotted ， outline-2 和 outline-gray-500 類將內(nèi)部 div 應(yīng)用了一個(gè)寬度為2個(gè)單位的虛線灰色輪廓。

用途：我們可以在多個(gè)地方使用這個(gè)動(dòng)畫，比如突出顯示幀、加載數(shù)據(jù)、文件或圖像處理等。

6. 彈力圓圈

這段動(dòng)畫代碼將創(chuàng)建一個(gè)帶有兩個(gè)彈跳元素的加載動(dòng)畫效果。最外層的元素將彈跳，而在其中，將有一個(gè)嵌套的元素也會(huì)彈跳。

此外，還有一個(gè)小點(diǎn)狀元素會(huì)隨著其他元素一起移動(dòng)和彈跳。

<div class="my-40 flex">
  <div class="relative mx-auto h-10 w-10">
    <div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2">
      <div class="absolute bottom-0 right-10">
        <div class="relative h-40 animate-bounce">
          <div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div>
        </div>
      </div>
    </div>
  </div>
</div>

最外層的 div 具有類 animate-bounce 將創(chuàng)建一個(gè)彈跳動(dòng)畫效果。

在那個(gè) div 里面，有一個(gè)嵌套的 div ，它的類是 animate-bounce ，也會(huì)產(chǎn)生一個(gè)彈跳效果。在第二個(gè)嵌套的 div 里面，有一個(gè)黑色的背景顏色（ bg-black ）和一個(gè)小尺寸的 h-2 和 w-2 。這樣就創(chuàng)建了一個(gè)小的黑點(diǎn)或指示器，它也會(huì)參與彈跳動(dòng)畫。

用途：我們可以使用這個(gè)動(dòng)畫來展示文件或圖像的處理和加載。

7. 移動(dòng)的箭頭

這段動(dòng)畫代碼將在SVG元素上創(chuàng)建一個(gè)移動(dòng)動(dòng)畫效果。SVG代表一個(gè)綠色箭頭，動(dòng)畫將通過改變箭頭的X位置來使其水平來回移動(dòng)。

<div class="my-40 flex">
  <div class="relative mx-auto mt-5 animate-[propel_5s_infinite]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16">
      <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
    </svg>
  </div>
</div>

現(xiàn)在，在你的tailwind.config.js文件中添加關(guān)鍵幀以實(shí)現(xiàn)對(duì)象的動(dòng)畫效果。根據(jù)你的需求進(jìn)行修改。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
         propel: {
          '0%': { transform: 'translateX(0)' },
          '20%': { transform: 'translateX(25%)' },
          '40%': { transform: 'translateX(-25%)' },
          '60%': { transform: 'translateX(25%)' },
          '100%': { transform: 'translateX(-25%)' },
        },
      },
    },
  },
  plugins: [],
}

最外層的 div 具有 my-40 和 flex 類，提供垂直間距并啟用彈性盒布局。在第二個(gè) div 內(nèi)，有一個(gè)帶有XML命名空間、視口框和類屬性的 svg 元素。 h-16 和 w-16 類設(shè)置SVG的高度和寬度， fill="green" 屬性將SVG的填充顏色設(shè)置為綠色。

用途：我們可以使用這個(gè)動(dòng)畫來引導(dǎo)、聚焦和突出顯示區(qū)域。

8. 旋轉(zhuǎn)的方塊

這段動(dòng)畫代碼將創(chuàng)建一個(gè)容器，并對(duì)其應(yīng)用旋轉(zhuǎn)動(dòng)畫效果，使其不斷地來回位移或旋轉(zhuǎn)。

容器內(nèi)部有一個(gè)較小的元素，它也應(yīng)用了翻轉(zhuǎn)動(dòng)畫效果，使其垂直來回連續(xù)旋轉(zhuǎn)。

<div class="my-40 flex">
  <div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200">
    <div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div>
  </div>
</div>

現(xiàn)在，在你的tailwind.config.js文件中添加關(guān)鍵幀以動(dòng)畫化對(duì)象。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        displace: {
          '0%': { transform: 'rotate(0deg)' },
          '20%': { transform: 'rotate(-90deg)' },
          '40%': { transform: 'rotate(0deg)' },
          '60%': { transform: 'rotate(0deg)' },
          '80%': { transform: 'rotate(90deg)' },
          '100%': { transform: 'rotate(0deg)' },
        },
      },
    },
  },
  plugins: [],
}

animate-[displace_5s_infinite] 類將“displace”動(dòng)畫效果應(yīng)用于該元素，使其不斷來回旋轉(zhuǎn)。

在內(nèi)部的 div 中， h-14 、 animate-[flip_5s_infinite] 和 bg-red-100 類代表容器內(nèi)的內(nèi)容具有14個(gè)單位的高度，紅色背景色，并應(yīng)用了“翻轉(zhuǎn)”動(dòng)畫效果，使其垂直來回連續(xù)旋轉(zhuǎn)。

用途：我們可以將此動(dòng)畫用于加載數(shù)據(jù)、文件或圖像處理或上傳。

將動(dòng)畫與其他 Tailwind 功能（暗模式）結(jié)合使用

Tailwind CSS的動(dòng)畫功能可以與框架提供的其他功能無縫集成。例如，您可以將動(dòng)畫與響應(yīng)式設(shè)計(jì)類結(jié)合使用，以在各種設(shè)備上創(chuàng)建適應(yīng)性和引人入勝的用戶體驗(yàn)。

您還可以利用Tailwind CSS的暗模式功能，根據(jù)用戶的首選顏色方案應(yīng)用不同的動(dòng)畫效果。通過使用動(dòng)態(tài)類和實(shí)用程序變體，您可以創(chuàng)建復(fù)雜而交互式的動(dòng)畫，以增強(qiáng)您的網(wǎng)頁設(shè)計(jì)。

結(jié)束

上述設(shè)計(jì)的動(dòng)畫展示了使用CSS和Tailwind CSS框架可以實(shí)現(xiàn)的多樣性和創(chuàng)造力。這些示例展示了各種動(dòng)畫效果，如旋轉(zhuǎn)、彈跳、脈動(dòng)、翻轉(zhuǎn)和擺動(dòng)。

通過利用CSS關(guān)鍵幀和Tailwind CSS實(shí)用類的力量，這些動(dòng)畫為博客或網(wǎng)站帶來了動(dòng)態(tài)和引人入勝的元素。無論是旋轉(zhuǎn)圖標(biāo)、彈跳形狀還是擺動(dòng)文本，這些動(dòng)畫都可以吸引用戶的注意力，增強(qiáng)視覺體驗(yàn)。

此外，Tailwind CSS 配置文件中的自定義和定義關(guān)鍵幀的能力使得動(dòng)畫能力得以精細(xì)調(diào)整和擴(kuò)展。這種靈活性賦予開發(fā)者創(chuàng)造獨(dú)特且引人注目的效果，以滿足其特定設(shè)計(jì)需求的能力。

總的來說，將動(dòng)畫效果融入博客中可以幫助創(chuàng)造令人難忘和愉悅的用戶體驗(yàn)，給訪問者留下深刻的印象。然而，重要的是要謹(jǐn)慎使用動(dòng)畫效果，并考慮它們對(duì)性能和可訪問性的影響，以確保所有用戶都能享受無縫和包容的瀏覽體驗(yàn)。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

心箭頭

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實(shí)心箭頭</title>
<style>
.con{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 50px auto;
    background-color:#ccc;
}
.arrow-top{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}

.arrow-bottom{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>

非實(shí)心箭頭

在線咨詢

上一篇：學(xué)會(huì)這幾種方法，css居中其實(shí)很簡(jiǎn)單
下一篇：canvas基礎(chǔ)及圖片縮放的實(shí)現(xiàn)

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商