瞭解JavaScript Object物件的isFrozen()方法的全部資訊。 接收一個物件作為參數，如果該物件被凍結則返回true，否則返回false。當物件是Object.freeze()函數的返回值時，該物件就被凍結了。 範例： const dog = {} dog.breed = 'Siberian Husky' const myDog = Object.freeze(dog) Object.isFrozen(dog) // true Object.isFrozen(myDog) // true dog === myDog // true 在這個範例中，dog和myDog都是被凍結的。傳遞給Object.freeze()的參數被改變，並且無法解凍。它也作為結果返回，因此dog === myDog（它們是同一個完全相同的物件）。

了解JavaScript的Object.isPrototypeOf()方法 isPrototypeOf()是在一個物件實例上調用的，它接受一個物件作為參數。如果你調用isPrototypeOf()的物件出現在傳入的物件的原型鏈中，它將返回true，否則返回false。 範例： const Animal = { isAnimal: true } const Mammal = Object.create(Animal) Mammal.isMammal = true Animal.isPrototypeOf(Mammal) //true const dog = Object.create(Animal) Object.setPrototypeOf(dog, Mammal) Animal.isPrototypeOf(dog) //true Mammal.isPrototypeOf(dog) //true

了解JavaScript Object对象的isSealed()方法。 接受一个对象作为参数，并在对象被封闭时返回true，否则返回false。当对象是Object.seal()函数的返回值时，对象会被封闭。 示例： const dog = {} dog.breed = 'Siberian Husky' const myDog = Object.seal(dog) Object.isSealed(dog) //true Object.isSealed(myDog) //true dog === myDog //true 在示例中，dog和myDog都是被封闭的。Object.seal()函数的参数会被修改，并且不能被解封。它也会作为返回值，因此dog === myDog（它们是完全相同的对象）。

了解JavaScript Object物件的keys()方法 Object.keys()方法接受一個物件作為參數，並返回該物件所有（自身的）可列舉屬性的陣列。 const car = { color: 'Blue', brand: 'Ford', model: 'Fiesta' } Object.keys(car) //[ 'color', 'brand', 'model' ] 我說的是可列舉屬性。這意味著它們的內部可列舉標記設置為true，這是默認值。查看MDN以獲取有關此主題的更多信息。 Object.keys 函數的一個用途是創建一個具有除了某個屬性以外的所有屬性的物件副本： const car = { color: 'blue', brand: 'Ford' } const prop = 'color' const newCar = Object.keys(car).reduce((object, key) => { if (key !== prop) { object[key] = car[key] } return object }, {})

了解JavaScript中对象的toString()方法 当在对象实例上调用时，返回该对象的字符串表示。除非被覆盖，否则返回[object Object]字符串。然后对象可以返回自己的字符串表示。 const person = { name: 'Fred' } person.toString() //[object Object] Tags: JavaScript, object, toString()

在安装 Node 包时，会自动生成 package-lock.json 文件。了解一下它是做什麽的吧！ 在版本5中，npm 引入了 package-lock.json 文件。 这是什麽？你可能已经了解 package.json 文件，它更常见也存在更久。 该文件的目标是跟踪安装的每个包的确切版本，以便产品在各个环境中可以完全复制，即使包被维护者更新。 这解决了 package.json 未解决的一个非常具体的问题。在 package.json 中，您可以使用语义化版本号（SemVer）表示想要升级到的版本类型（补丁或次要），例如： 如果您写~0.13.0，您只想更新补丁版本：0.13.1是可以的，但0.14.0就不可以了。 如果您写^0.13.0，您想更新补丁和次要版本：0.13.1，0.14.0等等。 如果您写0.13.0，那就是确切的版本，将始终使用。 您不会将 node_modules 文件夹提交到 Git 中，因为它通常非常庞大。当您在另一台机器上使用 npm install 命令复制项目时，如果您指定了~语法，并已发布了一个补丁版本，该版本将会被安装。对于^和次要版本也是一样。 如果您在示例中指定了确切版本，例如0.13.0，则不受此问题的影响。 也许是您，或者是另一个人试图在世界另一端运行 npm install 来初始化该项目。 因此，您的原始项目和新初始化的项目实际上是不同的。即使补丁或者次要版本不应该引入破坏性更改，但我们都知道错误可能（将）滑入其中。 package-lock.json文件将您当前已安装的每个包的版本确定下来，npm在运行 npm install 时将使用这些确切的版本。 这个概念并不新鲜，其他的编程语言的包管理工具（例如 PHP 中的 Composer）已经使用类似的系统多年了。 需要将 package-lock.json 文件提交到您的 Git 仓库中，以便其他人可以获取，如果项目是公开的或您有协作者，或者如果您使用 Git 作为部署的源。 当您运行 npm update 命令时，package-lock.json 文件中的依赖版本将会被更新。 一个示例 以下是在空文件夹中运行 npm install cowsay 后得到的 package-lock.json 文件的示例结构： { "requires": true, "lockfileVersion": 1, "dependencies": { "ansi-regex": { "version": "3....

package.json 檔案是基於 Node.js 生態系統的許多應用程式原碼中的重要元素。如果你有在使用 JavaScript 或者曾經與 JavaScript 專案、Node.js 或者前端專案互動過，那麼你肯定遇到過 package.json 檔案。 那它有什麼作用呢？你應該知道哪些內容呢？你可以用它做哪些很酷的事情呢？ package.json 檔案可以說是你專案的宣告文件。它可以做很多種完全不相關的事情。它是工具的集中配置中心。它還是 npm 和 yarn 存儲安裝套件的名稱和版本的地方。 檔案結構 屬性解析 name author contributors bugs homepage version license keywords description repository main private scripts dependencies devDependencies engines browserslist 特定命令屬性 套件版本 檔案結構 這裡是一個 package.json 檔案的例子： { } 它是空的！對於應用程式而言，package.json 檔案中沒有固定的要求。唯一的要求是符合 JSON 格式，否則它無法被程式讀取與存取其屬性。 如果你正在建立一個希望在 npm 上分發的 Node.js 套件，事情就會發生很大的變化，你必須具備一系列的屬性，以幫助其他人使用它。稍後我們會進一步瞭解。 這是另一個 package.json 檔案的例子： { "name": "test-project" } 它定義了一個 name 屬性，該屬性告訴我們應用程式或者套件名稱，並且與該檔案所在的資料夾相同。 這是一個更複雜的範例，我從示例 Vue.js 應用程式中提取出來的： { "name": "test-project", "version": "1....

Parcel是一個網頁應用程序打包工具。它與Webpack處於同一工具類別，但有不同的價值主張。Parcel承諾可以不需要任何配置，同時保持速度快。 Parcel是一個網頁應用程序打包工具。 它與Webpack處於同一工具類別，但有不同的價值主張。 主要功能包括： 資源打包（JS、CSS、HTML、圖片） 零配置代碼拆分 使用Babel、PostCSS和PostHTML的自動轉換 熱模塊替換 使用緩存和並行處理以加快構建速度 Parcel承諾可以在不需要任何配置的情況下完成所有這些工作，同時達到快速的速度。 安裝 使用Yarn安裝Parcel： yarn global add parcel-bundler 或使用npm安裝： npm install -g parcel-bundler 啟動Parcel 可以使用以下命令啟動Parcel： parcel watch index.html 它會從HTML頁面的源代碼開始掃描資源，並用輸出文件替換它所處理的任何引用。 也可以指定一個JS文件： parcel watch entry.js 開發服務器 方便起見，Parcel內置了一個開發服務器，因此無需另外設置。可以使用以下命令啟動： parcel index.html 產品化打包 當您的應用程序滿意並且希望創建產品化打包時，運行以下命令： parcel build index.html 產品化打包將禁用熱模塊替換，不會監視更改，只有在打包完成後才存在，並且將使用壓縮工具。 它還會自動將NODE_ENV變量設置為production，以使庫生成生產代碼（例如React和Vue使用此約定） 資源 JavaScript Parcel支持ES Modules（import...）和CommonJS（require...）。 它使用動態導入執行自動代碼拆分。 這是什麼意思，為什麼有用？ 動態導入返回一個promise，它可以讓瀏覽器在需要時加載依賴項，只有當它們準備就緒時才執行應用程序的某些部分。 或者，我們可以要求瀏覽器只在需要時加載它們，例如當用戶點擊特定鏈接時。 有關詳細信息，請參閱code splitting。 CSS Parcel支持純CSS、Sass、Less和Stylus。 您可以使用CSS Modules來編寫CSS。 轉換 當Parcel發現您配置了以下之一的配置文件： Babel（.babelrc） PostCSS（.postcssrc） PostHTML（.posthtmlrc） 它會在打包過程中自動使用這些配置。 熱模塊替換 當構建應用程序時，熱模塊替換（HMR）是一個很有用的功能。當我們保存一個新的CSS或JavaScript副本時，HMR會負責更新瀏覽器中的模塊，而不需要刷新整個應用程序。 如果您的應用程序具有多個狀態，您需要觸發特定功能測試（例如：“轉到設置頁面，點擊這個，輸入那個…”），這將非常方便。 Parcel vs webpack 讓我們將Parcel與webpack進行比較，因為webpack非常流行，您可能已經聽說過它或在項目中使用過它。即使您從未使用過它們，了解它們的區別也是一件很不錯的事情。 webpack允許您做很多事情，雖然這非常酷，但也意味著我們需要仔細配置它，以便確切地做到我們想要的事情。...

我在一個使用Babel的項目中遇到了這個問題，只要我添加了一個async函數，這個問題就會出現，但對於任何最近的JavaScript功能，問題都是一樣的： 由Parcel使用的Babel生成了一個polyfill，但為了避免這個錯誤，你還需要加載regenerator-runtime運行時。 一種解決方案是在你的主JavaScript文件的頂部添加以下內容： import 'regenerator-runtime/runtime' Parcel在默認情況下會包含這個包，增加了25KB的大小。 在代碼庫方面，最有效的解決方法是在你的package.json中添加browserslist屬性。 例如： "browserslist": [ "last 1 Chrome version" ] 對於測試來說足夠好了。支持多個瀏覽器： "browserslist": [ "last 3 and_chr versions", "last 3 chrome versions", "last 3 opera versions", "last 3 ios_saf versions", "last 3 safari versions" ] 或者： "browserslist": [ "since 2017-06" ] 你需要添加一個足夠新的版本來支持async/await，這樣Babel就不會嘗試添加一個polyfill。 在這裡檢查所有有效的值：https://github.com/browserslist/browserslist

瞭解 JavaScript Number 物件的 parseFloat() 方法 將參數解析為浮點數並返回。參數是一個字串： Number.parseFloat('10') // 10 Number.parseFloat('10.00') // 10 Number.parseFloat('237,21') // 237 Number.parseFloat('237.21') // 237.21 Number.parseFloat('12 34 56') // 12 Number.parseFloat(' 36 ') // 36 Number.parseFloat('36 is my age') // 36 Number.parseFloat('-10') // -10 Number.parseFloat('-10.2') // -10.2 如你所見，Number.parseFloat() 非常靈活。它還可以將帶有文字的字串轉換為數字，並提取第一個數字，但字串必須以數字開頭： Number.parseFloat('I am Flavio and I am 36') // NaN 它僅處理基數為 10 的數字。