ECMAScript 5 特性

来源:https://www.cnblogs.com/oyang168/archive/2019/11/17/11877451.html
-Advertisement-
Play Games

ECMAScript 5 也稱為 ES5 和 ECMAScript 2009。 ECMAScript 5 特性 這些是 2009 年發佈的新特性： "use strict" 指令 String.trim() Array.isArray() Array.forEach() Array.map() Ar ...


ECMAScript 5 也稱為 ES5 和 ECMAScript 2009。

ECMAScript 5 特性

這些是 2009 年發佈的新特性：

  • "use strict" 指令
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • 屬性 Getter 和 Setter
  • 新的對象屬性和方法

ECMAScript 5 語法更改

  • 對字元串的屬性訪問 [ ]
  • 數組和對象字面量中的尾隨逗號
  • 多行字元串字面量
  • 作為屬性名稱的保留字

"use strict" 指令

“use strict” 定義 JavaScript 代碼應該以“嚴格模式”執行。

例如，使用嚴格模式，不能使用未聲明的變數。

您可以在所有程式中使用嚴格模式。它可以幫助您編寫更清晰的代碼，例如阻止您使用未聲明的變數。

“use strict” 只是一個字元串表達式。舊瀏覽器如果不理解它們就不會拋出錯誤。

 

String.trim()

String.trim() 刪除字元串兩端的空白字元。

實例

var str = "       Hello World!        ";
alert(str.trim());

 

Array.isArray()

isArray() 方法檢查對象是否為數組。

實例

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

 

Array.forEach()

forEach() 方法為每個數組元素調用一次函數。

實例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>"; 
}

 

Array.map()

這個例子給每個數組值乘以 2：

實例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

 

Array.filter()

此例用值大於 18 的元素創建一個新數組：

實例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

 

Array.reduce()

這個例子確定數組中所有數的總和：

實例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

 

Array.reduceRight()

這個例子同樣是確定數組中所有數的總和：

實例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

 

Array.every()

這個例子檢查是否所有值都超過 18：

實例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

 

Array.some()

這個例子檢查某些值是否超過 18：

實例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

 

Array.indexOf()

檢索數組中的某個元素值並返回其位置：

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

 

Array.lastIndexOf()

Array.lastIndexOf() 與 Array.indexOf() 類似，但是從數組結尾處開始檢索。

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

 

JSON.parse()

JSON 的一個常見用途是從 Web 伺服器接收數據。

想象一下，您從Web伺服器收到這條文本字元串：

'{"name":"Bill", "age":62, "city":"Seatle"}'

 

JavaScript 函數 JSON.parse() 用於將文本轉換為 JavaScript 對象：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

 

JSON.stringify()

JSON 的一個常見用途是將數據發送到Web伺服器。

將數據發送到 Web 伺服器時，數據必須是字元串。

想象一下，我們在 JavaScript 中有這個對象：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

 

請使用 JavaScript 函數 JSON.stringify() 將其轉換為字元串。

var myJSON = JSON.stringify(obj);

 

結果將是遵循 JSON 表示法的字元串。

myJSON 現在是一個字元串，準備好發送到伺服器：

實例

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

 

Date.now()

Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以來的毫秒數。

實例

var timInMSs = Date.now();

Date.now() 的返回與在 Date 對象上執行 getTime() 的結果相同。

 

屬性 Getter 和 Setter

ES5 允許您使用類似於獲取或設置屬性的語法來定義對象方法。

這個例子為名為 fullName 的屬性創建一個 getter：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用 getter 顯示來自對象的數據：
document.getElementById("demo").innerHTML = person.fullName;

 

這個例子為語言屬性創建一個 setter 和一個 getter：

實例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// 使用 setter 設置對象屬性：
person.lang = "en";

// 使用 getter 顯示來自對象的數據：
document.getElementById("demo").innerHTML = person.lang;

 

這個例子使用 setter 來確保語言的大寫更新：

實例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// 使用 setter 設置對象屬性：
person.lang = "en";

// 顯示來自對象的數據：
document.getElementById("demo").innerHTML = person.language;

 

新的對象屬性和方法

Object.defineProperty() 是 ES5 中的新對象方法。

它允許您定義對象屬性和/或更改屬性的值和/或元數據。

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};

// 更改屬性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// 枚舉屬性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

 

下一個例子是相同的代碼，但它隱藏了枚舉中的語言屬性：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};

// 更改屬性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// 枚舉屬性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

 

此例創建一個 setter 和 getter 來確保語言的大寫更新：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
};

// 更改屬性：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// 更改語言
person.language = "en";

// 顯示語言
document.getElementById("demo").innerHTML = person.language;

 

ECMAScript 5 為 JavaScript 添加了許多新的對象方法：

ES5 新的對象方法

// 添加或更改對象屬性
Object.defineProperty(object, property, descriptor)

// 添加或更改多個對象屬性
Object.defineProperties(object, descriptors)

// 訪問屬性
Object.getOwnPropertyDescriptor(object, property)

// 將所有屬性作為數組返回
Object.getOwnPropertyNames(object)

// 將可枚舉屬性作為數組返回
Object.keys(object)

// 訪問原型
Object.getPrototypeOf(object)

// 防止向對象添加屬性
Object.preventExtensions(object)

// 如果可以將屬性添加到對象，則返回 true
Object.isExtensible(object)

// 防止更改對象屬性（而不是值）
Object.seal(object)

// 如果對象被密封，則返回 true
Object.isSealed(object)

// 防止對對象進行任何更改
Object.freeze(object)

// 如果對象被凍結，則返回 true
Object.isFrozen(object)

 

對字元串的屬性訪問

charAt() 方法返回字元串中指定索引（位置）的字元：

實例

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

 

ECMAScript 5 允許對字元串進行屬性訪問：

實例

var str = "HELLO WORLD";
str[0];                   // 返回 H

 

對字元串的屬性訪問可能有點不可預測。

尾隨逗號(Trailing Commas)

ECMAScript 5 允許在對象和數組定義中使用尾隨逗號：

Object 實例

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

 

Array 實例

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

 

警告！！！

Internet Explorer 8 將崩潰。

JSON 不允許使用尾隨逗號。

JSON 對象：

// 允許：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)

// 不允許：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

 

JSON 數組：

// 允許：
points = [40, 100, 1, 5, 25, 10]

// 不允許：
points = [40, 100, 1, 5, 25, 10,]

 

多行字元串

如果使用反斜杠轉義，ECMAScript 5 允許多行的字元串文字（字面量）：

實例

"Hello \
Kitty!";

 

\ 方法可能沒有得到普遍的支持。

較舊的瀏覽器可能會以不同的方式處理反斜杠周圍的空格。

一些舊的瀏覽器不允許 \ 字元後面的空格。

分解字元串文字的一種更安全的方法是使用字元串添加：

實例

"Hello " + 
"Kitty!";

 

保留字作為屬性名稱

ECMAScript 5允許保留字作為屬性名稱：

對象實例

var obj = {name: "Bill", new: "yes"}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何給HTML標簽中的文本設置修飾線
    text decoration屬性介紹 屬性是用來設置文本修飾線呢， 屬性一共有4個值。 text decoration屬性值說明表 值|作用 | none |去掉文本修飾線 underline | 設置下劃線 overline|設置上劃線 line through|設置刪除線 HTML標簽自帶修飾 ...
  • 巧妙利用引用，將數組轉換成樹形數組
    前言 筆者所做的一個項目需要做一個前端的樹形菜單，後端返回的數據是一個平行的list，list中的每個元素都是一個對象，例如 的值為 ，每個元素都指定了父元素，生成的菜單可以無限級嵌套。一開始找的插件需要手動將生成好的樹形數組傳進去才能使用（儘管後來找到了一個UI框架，可以直接傳list進去，只需要 ...
  • Web前端基礎(6):CSS(三)
    1. 定位 定位有三種：相對定位、絕對定位、固定定位 1.1 相對定位 現象和使用： 1.如果對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。 2.設置相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right。 特性：1.不脫標 2.形影分離 3.老家留坑 ...
  • Web前端基礎(5):CSS(二)
    1. 盒模型 在CSS中，"box model"這一術語是用來設計和佈局時使用，然後在網頁中基本上都會顯示一些方方正正的盒子。我們稱為這種盒子叫盒模型。 盒模型有兩種：標準模型和IE模型。我們在這裡重點講標準模型。 1.1 盒模型示意圖 1.2 盒模型的屬性 width：內容的寬度 height: ...
  • 前端之js
    [TOC] JavaScript簡介 JavaScript是前端的一門編程語言 node.js 支持前端js代碼可以跑在後端伺服器上 JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插 ...
  • Web前端基礎(4):CSS(一)
    1. CSS介紹 現在的互聯網前端分三層： HTML：超文本標記語言。從語義的角度描述頁面結構。 CSS：層疊樣式表。從審美的角度負責頁面樣式。 JS：JavaScript 。從交互的角度描述頁面行為 CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽 ...
  • 【前端知識體系】CSS佈局知識強化
    本文介紹了CSS常見的表格、浮動、定位佈局等方式，也介紹了聖杯佈局和雙飛翼佈局高級佈局的實現方式。 ...
  • 【前端知識體系】CSS基礎知識強化
    本文整理了CSS相關的基礎知識，包括CSS權重、雪碧圖、Base64編碼、自定義字體等知識點在CSS中的使用。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類