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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類