從零開始學習前端JAVASCRIPT — 2、JavaScript基礎ES5

来源:https://www.cnblogs.com/witkeydu/archive/2018/01/25/8335092.html
-Advertisement-
Play Games

1：ES5簡介 ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準的修正。 與HTML5規範進程本質類似，ES5通過對現有JavaScript方法添加語句和原生ECMAScript對象做合併實現標準化。 2：嚴格模式的意義 相對於正常模式而言 ...


1：ES5簡介

ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準的修正。 與HTML5規範進程本質類似，ES5通過對現有JavaScript方法添加語句和原生ECMAScript對象做合併實現標準化。

2：嚴格模式的意義

　　相對於正常模式而言：

1：消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。

2：消除代碼運行的一些不安全之處，保證代碼運行的安全。

3：提高編譯器效率，增加運行速度。

4：為未來新版本的Javascript做好鋪墊。

"嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大項目已經開始全面擁抱它。

3：進入嚴格模式

進入“嚴格模式”的標誌，書寫這行語句："use strict";

老版本的瀏覽器會把它當作一行普通字元串，加以忽略。

4：如何調用嚴格模式

"嚴格模式"有兩種調用方法，適用於不同的場合。

針對整個腳本文件：將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。如果這行語句不在第一行，則無效，整個腳本以"正常模式"運行。如果不同模式的代碼文件合併成一個文件，這一點需要特別註意。

針對單個函數：將"use strict"放在函數的第一行，則整個函數以"嚴格模式"運行。

腳本文件的變通寫法：因為第一種調用方法不利於文件合併，所以更好的做法是，借用第二種方法，將整個腳本文件放在一個立即執行的匿名函數之中。

eg:

// a.js (組員a的js代碼引入嚴格模式)
/*	'use strict';
	var a = 4;
	var b = 3;
	console.log(a + b);*/
// b.js（組員b的js代碼引入正常模式）
/*
	var c = 6;
	var d = 7;
	console.log(c + d);*/
//項目上線代碼合併(如果直接合併代碼，組員b的代未按照嚴格模式規範來coding，語法可能發生各種問題)。
//解決方案：將代碼分別封裝進入兩個匿名自執行函數
(function () {
	'use strict';
	var a = 4;
	var b = 3;
	console.log(a + b);
})();
(function () {
	var c = 6;
	var d = 7;
	console.log(c + d);
})();

5：嚴格模式改變語法和行為

嚴格模式對Javascript的語法和行為，都做了一些改變。

1：全局變數顯式聲明。

在正常模式中，如果一個變數沒有聲明就賦值，預設是全局變數。嚴格模式禁止這種用法，全局變數必須顯式聲明。因此，嚴格模式下，變數都必須先用var命令聲明，然後再使用。

javascrip中的變數講解中函數內部不加關鍵字var定義的全局變數如果引入嚴格模式，運行程式將會檢查出語法錯誤。採用顯示聲明全局變數。

2：函數形參不允許重覆。

3：禁止使用with語句。

4：禁止函數內部this關鍵字指向全局對象，this指向undefined。

5：函數必須聲明在頂層。

將來Javascript的新版本會引入“塊級作用域"。為了與新版本接軌，嚴格模式只允許在全局作用域或函數作用域的頂層聲明函數。也就是說，不允許在非函數的代碼塊內聲明函數。

// if(1){function a(){}} else {function a() {}}

6：ES5新增函數方法

註：新增方法IE6/7/8均不支持

this是函數內部預設內置的一個變數

1：全局環境中，this指向的是window

2：在函數內部，this指向的是window

3：在方法內部，this指向的是方法的擁有者

bind方法：改變了函數內部上下文的this。返回值是函數。在調用返回函數時，傳入的實參是在bind中傳入參數的基礎上往後排的。

var obj = {
	name: '張三'
};
var name = '李四';
function hello(x, y) {
	var name = '王五';
	console.log(arguments); 
        //輸出三個參數,參數的排序是先排bind中的參數,接著是調用參數的實參，則參數:
        //arguments[0]=6,arguments[0]=7,arguments[0]=9
        console.log(this.name); //張三 
        console.log(x + y); //13 
}
 var newHello = hello.bind(obj, 6); 
newHello(7, 9);

 

　　

 

7：ES5新增數組方法

1：forEach方法：遍曆數組。第二個參數為可選的上下文參數（改變this指向）。 

形參釋義：v:代表value　　k:代表key　　arr:代表array數組

forEach方法中的function回調支持3個參數，第1個是遍歷的數組內容；第2個是對應的數組索引，第3個是數組本身。forEach不會遍歷空位置的內容。如：[1, , 3]，只會遍歷1和3。

// 數組對象新增的方法
var arr = [1, 4, 7, 9];
// forEach方法
// 語法：arr.forEach(function (v, k, arr) {}, context);
arr.forEach(function (v, k, arr) {
	 console.log(this);//小明
	 console.log(v, k, arr);
}, '小明');

2：map方法：將數組映射成新數組。回調函數需要有返回值。 

var newArr = arr.map(function (v) {
	return v * 2;
});

3：filter方法：指數組過濾後，返回過濾後的新數組。 filter的callback函數需要返回布爾值true或false。 

// 語法：arr.filter(function (v, k, arr) {}, context)
var newArr = arr.filter(function (v) {
	if(v > 5) {
		return true;//返回true將值添加到新的數組
	}
　　　　 else {
		return false;//返回false將值不添加新的數組
} });

 

4：some方法：指是否“某些項”合乎條件。返回布爾值。只要數組中有一項符合條件，則返回true。 

// 語法：arr.some(function (v, k, arr) {}, context)
var bool = arr.some(function (v) {
	if(v > 10) {
		return true;//只要進入此語句接收到的返回值true，否則為false
	} else {
		return false;
	}
});

5：every方法：所有項都必須合乎條件。返回布爾值。   

// 語法：arr.every(function (v, k, arr) {}, context)
var bool = arr.every(function (v) {
	if(v > 0) {
		return true;
	} else {
		return false;//只要進入此語句接收到的返回值false，否則為true
} });

語法：array.every(callback, [ thisobject]); 必須每一項都要符合條件，否則返回false。 

6：indexOf方法：返回整數索引值，如果沒有匹配（嚴格匹配），返回-1。 fromIndex可選，表示從這個位置開始搜索，若預設或格式不合要求，使用預設值0。 

var arr=[1,4,7,9];
arr.indexOf(7,-2) 
 //2  從-2的位置開始從左向右查找7，下標為2 
arr.indexOf(4,-2) 
 //-1 從-2的位置從左向右開始查找4，未找到4   輸出-1

 

7：lastIndexOf方法：從數組的末尾開始查找，而不是從開頭。還有一個不同就是fromIndex的預設值是array.length - 1而不是0。 

// lastIndexOf：在數組中查找某個元素。從右往左

var arr = [1, 4, 7, 9, 8, 7, 10];

var iIndex = arr.lastIndexOf(7, 4);  
//從數組值為8的位置4，從右向左查找  返回數組下標註   返回值為2

console.log(iIndex);　

8：reduce方法：歸併。遞歸減少。

 reduce語法：arr.reduce(function (previous, current, index, arr) {}, initialValue);

callback函數接受4個參數：之前值、當前值、索引值以及數組本身。initialValue參數可選，表示初始值。

1》若指定，則當作最初使用的previous值；

 案例：

var arr = [1, 4, 7, 9];

var result = arr.reduce(function (previous, current) {
console.log(previous, current);
return previous + current;
}, 10);

console.log(result); //結果為31

 結果列表：

 

解析：previous值：initialValue初始值 10，current值：數組的第一個元素arr[0]=1，緊接著進行迭代current值即當前值  ，最終結果為數組arr元素值得和加初始值，則為31

2》如果預設，則使用數組的第一個元素作為previous初始值，同時current往後排一位，相比有initialValue值少一次迭代。

案例：

var arr = [1, 4, 7, 9];

var result = arr.reduce(function (previous, current) {
console.log(previous, current);
return previous + current;
});

console.log(result); //結果為21

結果列表：

解析：previous值：initialValue初始值為數組arr[0]=1，current值：數組的第一個元素arr[1]=4，緊接著進行迭代current值即當前值  ，最終結果為數組arr元素值得和加初始值，則為21

1：因為initialValue不存在，因此一開始的previous值等於數組的第一個元素。

2：從而current值在第一次調用的時候就是2。

3：最後兩個參數為索引值index以及數組本身array。

9：reduceRight方法：和reduce用法類似，實現上差異在於reduceRight是從數組的末尾開始實現。

 案例： 

var arr = [1, 4, 7, 9];

var result = arr.reduceRight(function (previous, current) {
	console.log(previous, current);
	return previous + current;
}, 10);

console.log(result);

結果列表：

 

10：Array.isArray()：判斷一個變數是否為數組。

8：ES5新增字元串方法

　　trim方法：去除字元串首尾的空白字元。 

// trim：忽略字元串左右兩側的空格。

var str = '  hello world  ';

console.log(str.trim());//值：hello world

9：ES5新增JSON(javascript object notation)對象方法 

1：JSON.parse：將一個JSON格式的字元串轉換成對象。

var obj = {
    name: '張三',
     hello: function () {
        console.log('hello world!')
    }
};
console.log(JSON.stringify(obj));   
//將對象屬性轉換成字元串，函數直接省略

2：JSON.stringify：將對象轉換成JSON格式的字元串。

var str = '{"name": "張三", "age": 28, "hello":{"child": "李四"}}';
//嚴格按照對象的屬性進行創建字元串，字元串內可包含對象的屬性及嵌套的對象，不能包含函數
console.log(JSON.parse(str));

　　

 


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

-Advertisement-
Play Games
更多相關文章
  • cocoapods的安裝和安裝過程中遇到的問題
    1.$ ruby -v //查看當前的ruby版本，我的版本是ruby 2.0.0p648 小於2.2 所以在下麵的安裝cocoapods時會遇到問題 2. $ gem sources -l //查看當前ruby源，預設為 https://rubygems.org/ 因為防火牆的問題我們需要更換成國 ...
  • 小劉同學的第三十三篇博文
    一天了，都下著很冷很冷的雨啊...氣溫下降了很多喲，小伙伴們要照顧好自己(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ 今天還是沒有能堅持2個小時的學習時間，每天晚上拿出2個小時來學前端很難麽？不難啊，真的不難啊，為什麼做不到呢？？？總是被各種各樣的事情耽誤，自己沒有跳脫一種狀態的環境，明明知道應該來圖書館自習 ...
  • JQuery顯示，隱藏和淡入淡出效果
    為了把JQuery搞熟悉，看著菜鳥教程，一個一個例子打，邊看邊記，算是一晚上的一個小總結吧。加油，我很本但是我很勤奮啊。系統的瞭解它，就要花時間咯。 ...
  • Vue到底是怎樣個框架？
    一、Vue介紹 二、使用VUE 1、引入vue.js文件 2、通過下麵的代碼展示用，創建一個Vue的實例，然後通過應用的id嵌入根元素，將數據放入一個對象data中，並且將表達式傳入div中{{msg}}（一定註意必須是雙大括弧） 三 、指令 指令：帶有首碼 v-，以表示它們是 Vue 提供的特殊特 ...
  • 從零開始學習前端JAVASCRIPT — 6、JavaScript基礎DOM
    1：DOM（Document Object Model）的概念和作用 document對象是DOM核心對象：對html中的內容，屬性，樣式進行操作。 節點樹中節點之間的關係：父子，兄弟。 2：DOM常用屬性 title：返回或設置當前文檔的標題。 all：返回所有元素的集合。 forms：返回對文檔 ...
  • 從零開始學習前端JAVASCRIPT — 5、JavaScript基礎BOM
    1：BOM（Browser Object Model）概念 window對象是BOM中所有對象的核心。 2：window屬性（較少用） self：self代表自己，相當於window。 parent：返回父視窗。 top：返回頂層視窗，和parent作用一樣。 opener：視窗開啟者。 3：win ...
  • 從零開始學習前端JAVASCRIPT — 4、JavaScript基礎Math和Date對象的介紹
    Math對象的介紹 1：Math對象 Math 對象用於執行數學任務。並不像 Date 和 String 那樣是對象的類，因此沒有構造函數 Math()。您無需創建它，通過把 Math 作為對象使用就可以調用其所有屬性和方法。 2：Math屬性 PI：返回圓周率（約等於3.14159）。 3：Mat ...
  • Vue基本指令
    一：模板對象 二、Vue指令 指令：是帶有V-首碼的特殊屬性，通過屬性來操作元素 1.v-text和v-html v-text:在元素當中插入值,只能是文本 v-html:在元素不中不僅可以插入文本，還可以插入標簽 <!DOCTYPE html> <html lang="en"> <head> <m ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類