這篇文章主要介紹JavaScript中必須掌握的基礎知識案例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
思路：首先，使用indexOf查找要刪除的數組元素的索引(index)，然后使用splice方法刪除該索引所對應的項。
splice()是一個非純函數，通過刪除現有元素和/或添加新元素來更改數組的內容。
const array = [2, 5, 9]
const index = array.indexOf(5)
if (index > -1) {
array.splice(index, 1)
}
console.log(array)
// [ 2, 9 ]復制代碼splice的第二個參數是要刪除的元素數量。注意，splice會在適當的位置修改數組，并返回一個包含已刪除元素的新數組。
接著，我們可以來完善一下。下面有兩個函數，第一個函數僅刪除一個匹配項（即從[2,5,9,1,5,8,5]中刪除第一個匹配項5），而第二個函數則刪除所有匹配項：
// 僅刪除第一個匹配項
function removeItemOnce (arr, value) {
let index = arr.indexOf(value)
if (index > -1) {
arr.splice(index, 1)
}
return arr
}
// 刪除所有匹配項
function removeItemAll (arr, value) {
let i = 0
while(i < arr.length) {
if (arr[i] === value) {
arr.splice(i, 1)
} else {
++i
}
}
}復制代碼刪除數組中索引i處的元素：
刪除數組中索引i處的元素:
array.splice(i, 1)復制代碼
如果你想從數組中刪除值為number的每個元素，可以這樣做：
for (let i = array.length - 1; i>=0; i--) {
if (array[i] === number) {
array.splice(i, 1)
}
}復制代碼如果你只想使索引i處的元素不再存在，但又不想更改其他元素的索引：
delete array[i]復制代碼
jQuery 不是必需的，window.location.replace(…)最適合模擬 HTTP 重定向。window.location.replace(...)優于使用window.location.href，因為replace()不會將原始頁面保留在會話歷史記錄中，這意味著用戶將不會陷入永無休止回退按鈕。
如果要模擬單擊鏈接，可以使用location.href，如果要模擬HTTP重定向，請使用location.replace。
事例：
//模擬HTTP重定向
window.location.replace("http://stackoverflow.com")
// 模擬單擊鏈接
window.location.href = "http://stackoverflow.com"復制代碼你還可以這樣做：
$(location).attr('href', 'http://stackoverflow.com')復制代碼閉包是一個函數和對該函數外部作用域的引用(詞法環境)，詞法環境是每個執行上下文（堆棧）的一部分，并且是標識符（即局部變量名稱）和值之間的映射。
JavaScript 中的每個函數都維護對其外部詞法環境的引用。此引用用于配置調用函數時創建的執行上下文。不管何時調用函數，該引用使函數內的代碼能夠查看在函數外聲明的變量。
在下面的代碼中，inner與調用foo時創建的執行上下文的詞法環境一起形成一個閉包，并對外部隱藏了變量secret：
function foo() {
const secret = Math.trunc(Math.random()*100)
return function inner() {
console.log(`The secret number is ${secret}.`)
}
}
const f = foo() // secret 不能從foo 外部直接訪問
f() // 訪問 secret 的唯一辦法就是調用 f復制代碼換句話說，在JavaScript中，函數帶有對私有狀態的引用，只有它們(以及在相同的詞法環境中聲明的任何其他函數)可以訪問該私有狀態。這個狀態對函數的調用者是不可見的，這為數據隱藏和封裝提供了一種優秀的機制。
請記住，JavaScript中的函數可以像變量一樣傳遞，這意味著這些功能和狀態的對可以在程序中傳遞:類似于在c++中傳遞類的實例。
如果JavaScript沒有閉包，則必須在函數之間顯式傳遞更多狀態，從而使參數列表更長，代碼更冗余。
所以，如果你想讓一個函數總是能夠訪問私有狀態，你可以使用一個閉包，我們經常想把狀態和函數聯系起來。例如，在Java或c++中，當你向類添加私有實例變量和方法時，這是將狀態與功能關聯起來。
在 C 語言和大多數其他編程語言中，函數返回后，由于堆棧被銷毀，所有的局部變量都不再可訪問。在JavaScript中，如果在另一個函數中聲明一個函數，那么外部函數的本地變量在返回后仍然可以訪問。這樣，在上面的代碼中，secret在從foo返回后仍然對函數對象內部可用。
閉包在需要與函數關聯的私有狀態時非常有用。這是一個非常常見的場景，JavaScript直到2015年才有類語法，它仍然沒有私有字段語法，閉包滿足了這一需求。
私有實例變量
在下面的事例中，函數 toString 隱藏了 Car 類的一些細節。
function Car(manufacturer, model, year, color) {
return {
toString() {
return `${manufacturer} ${model} (${year}, ${color})`
}
}
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())復制代碼函數式編程
在下面的代碼中，函數inner隱藏了fn和args。
function curry(fn) {
const args = []
return function inner(arg) {
if(args.length === fn.length) return fn(...args)
args.push(arg)
return inner
}
}
function add(a, b) {
return a + b
}
const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5復制代碼面向事件的編程
在以下代碼中，函數onClick隱藏了變量BACKGROUND_COLOR。
const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'
function onClick() {
$('body').style.background = BACKGROUND_COLOR
}
$('button').addEventListener('click', onClick)復制代碼<button>Set background color</button>復制代碼
模塊化
在下面的示例中，所有實現細節都隱藏在一個立即執行的函數表達式中。函數tick和toString隱藏了私有狀態和函數，它們需要完成自己的工作。閉包使我們能夠模塊化和封裝我們的代碼。
let namespace = {};
(function foo(n) {
let numbers = []
function format(n) {
return Math.trunc(n)
}
function tick() {
numbers.push(Math.random() * 100)
}
function toString() {
return numbers.map(format)
}
n.counter = {
tick,
toString
}
}(namespace))
const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())復制代碼事例 1：
此示例演示局部變量未在閉包中復制。 閉包保留對原始變量本身的引用。 似乎即使外部函數退出后，堆棧仍在內存中保留。
function foo () {
let x = 42
let inner = function () {
console.log(x)
}
x = x + 1
return inner
}
let f = foo()
f()復制代碼事例 2：
在下面的代碼中，三種方法log ，increment 和update 都在同一詞法環境閉包中。
function createObject() {
let x = 42;
return {
log() { console.log(x) },
increment() { x++ },
update(value) { x = value }
}
}
const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42復制代碼事例 3：
如果使用的變量是使用var聲明的，需要注意的一點是，使用var聲明的變量被提升。 由于引入了let和const，這在現代JavaScript 中幾乎沒有問題。
在下面的代碼中，每次循環中，都會創建一個新的inner函數，變量i被覆蓋，但是因var會讓 i 提升到函數的頂部，所以所有這些inner函數覆蓋的都是同一個變量，這意味著i(3)的最終值被打印了三次。
function foo () {
var result = []
for (var i = 0; i < 3; i++) {
result.push(function inner () {
console.log(i)
})
}
return result
}
const result = foo()
for(var i = 0; i < 3; i++) {
result[i]()
}
// 3 3 3復制代碼最后一點：
每當在JavaScript中聲明函數時，都會創建一個閉包。
從一個函數內部返回另一個函數是閉包的經典例子，因為外部函數內部的狀態對于返回的內部函數是隱式可用的，即使外部函數已經完成執行。
只要在函數內使用eval()，就會使用一個閉包。eval的文本可以引用函數的局部變量，在非嚴格模式下，甚至可以通過使用eval('var foo = ')創建新的局部變量。
new Function()(Function constructor)時，它不會覆蓋其詞法環境，而是覆蓋全局上下文。新函數不能引用外部函數的局部變量。聲明函數時創建一個閉包。 當調用函數時，此閉包用于配置執行上下文。
每次調用函數時都會創建一組新的局部變量。
JavaScript 中的每個函數都維護與其外部詞法環境的鏈接。 詞法環境是所有名稱的映射（例如，變量，參數）及其范圍內的值。因此，只要看到function關鍵字，函數內部的代碼就可以訪問在函數外部聲明的變量。
function foo(x) {
var tmp = 3;
function bar(y) {
console.log(x + y + (++tmp)); // 16
}
bar(10);
}
foo(2);復制代碼上面輸出結果是16，參數x和變量tmp都存在于外部函數foo的詞法環境中。函數bar及其與函數foo的詞法環境的鏈接是一個閉包。
函數不必返回即可創建閉包。 僅僅憑借其聲明，每個函數都會在其封閉的詞法環境中關閉，從而形成一個閉包。
function foo(x) {
var tmp = 3;
return function (y) {
console.log(x + y + (++tmp)); // 16
}
}
var bar = foo(2);
bar(10); // 16
bar(10); // 17復制代碼上面還是打印16，因為bar內的代碼仍然可以引用參數x和變量tmp，即使它們不再直接的作用域內。
但是，由于tmp仍然在bar的閉包內部徘徊，因此可以對其進行遞增。 每次調用bar時，它將增加1。
閉包最簡單的例子是這樣的:
var a = 10;
function test() {
console.log(a); // will output 10
console.log(b); // will output 6
}
var b = 6;
test();復制代碼當調用一個JavaScript函數時，將創建一個新的執行上下文ec。連同函數參數和目標對象，這個執行上下文還接收到調用執行上下文的詞法環境的鏈接，這意味著在外部詞法環境中聲明的變量(在上面的例子中，a和b)都可以從ec獲得。
每個函數都會創建一個閉包，因為每個函數都有與其外部詞法環境的鏈接。
注意，變量本身在閉包中是可見的，而不是副本。
引用一些有趣的部分：
嚴格模式是ECMAScript 5中的一個新特性，它允許我們將程序或函數放置在嚴格的操作上下文中。這種嚴格的上下文會防止某些操作被執行，并引發更多異常。
嚴格模式在很多方面都有幫助：
另外，請注意，我信可以將“strict mode”應用于整個文件，也可以僅將其用于特定函數。
// Non-strict code...
(function(){
"use strict";
// Define your library strictly...
})();
// Non-strict code...
復制代碼如果是在混合使用舊代碼和新代碼的情況，這可能會有所幫助。它有點像在Perl中使用的“use strict”。通過檢測更多可能導致損壞的東西，幫助我們減少更多的錯誤。
現在所有主流瀏覽器都支持嚴格模式。
在原生ECMAScript模塊(帶有import和export語句)和ES6類中，嚴格模式始終是啟用的，不能禁用。
ECMAScript 6 引入了string .prototype.include
const string = "foo"; const substring = "oo"; console.log(string.includes(substring));復制代碼
不過，IE 不支持 includes。在 CMAScript 5或更早的環境中，使用String.prototype.indexOf。如果找不到子字符串，則返回-1:
var string = "foo"; var substring = "oo"; console.log(string.indexOf(substring) !== -1);復制代碼
為了使其在舊的瀏覽器中運行，可以使用這種polyfill：
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}復制代碼不同之處在于functionOne是一個函數表達式，因此只在到達這一行時才會定義，而functionTwo是一個函數聲明，在它周圍的函數或腳本被執行(由于提升)時就定義。
如，函數表達式
// TypeError: functionOne is not a function
functionOne();
var functionOne = function() {
console.log("Hello!");
};復制代碼函數聲明:
// "Hello!"
functionTwo();
function functionTwo() {
console.log("Hello!");
}復制代碼過去，在不同的瀏覽器之間，在塊中定義的函數聲明的處理是不一致的。嚴格模式(在ES5中引入)解決了這個問題，它將函數聲明的范圍限定在其封閉的塊上。
'use strict';
{ // note this block!
function functionThree() {
console.log("Hello!");
}
}
functionThree(); // ReferenceError復制代碼function abc(){}也具有作用域-名稱abc在遇到該定義的作用域中定義。 例：
function xyz(){
function abc(){};
// abc 在這里定義...
}
// ...不是在這里復制代碼如果想在所有瀏覽器上給函數起別名，可以這么做：
function abc(){};
var xyz = abc;復制代碼在本例中，xyz和abc都是同一個對象的別名
console.log(xyz === abc) // true復制代碼
它的名稱是自動分配的。但是當你定義它的時候
var abc = function(){};
console.log(abc.name); // ""復制代碼它的name稱為空，我們創建了一個匿名函數并將其分配給某個變量。使用組合樣式的另一個很好的理由是使用簡短的內部名稱來引用自身，同時為外部用戶提供一個長而不會沖突的名稱：
// 假設 really.long.external.scoped 為 {}
really.long.external.scoped.name = function shortcut(n){
// 它遞歸地調用自己:
shortcut(n - 1);
// ...
// 讓它自己作為回調傳遞：:
someFunction(shortcut);
// ...
}復制代碼在上面的例子中，我們可以對外部名稱進行同樣的操作，但是這樣做太笨拙了(而且速度更慢)。另一種引用自身的方法是arguments.callee，這種寫法也相對較長，并且在嚴格模式中不受支持。
實際上，JavaScript對待這兩個語句是不同的。下面是一個函數聲明：
function abc(){}復制代碼這里的abc可以定義在當前作用域的任何地方：
// 我們可以在這里調用
abc();
// 在這里定義
function abc(){}
// 也可以在這里調用
abc();
復制代碼此外，盡管有 return 語句，也可以提升：
// 我們可以在這里調用
abc();
return;
function abc(){}復制代碼下面是一個函數表達式:
var xyz = function(){};復制代碼這里的xyz是從賦值點開始定義的:
// 我們不可以在這里調用
xyz();
// 在這里定義 xyz
xyz = function(){}
// 我們可以在這里調用
xyz();
復制代碼函數聲明與函數表達式之間存在差異的真正原因。
var xyz = function abc(){};
console.log(xyz.name); // "abc"復制代碼就個人而言，我們更喜歡使用函數表達式聲明，因為這樣可以控制可見性。當我們像這樣定義函數時:
var abc = function(){};復制代碼我們知道，如果我們沒有在作用域鏈的任何地方定義abc，那么我們是在全局作用域內定義的。即使在eval()內部使用，這種類型的定義也具有彈性。而定義:
function abc(){};復制代碼取決于上下文，并且可能讓你猜測它的實際定義位置，特別是在eval()的情況下，—取決于瀏覽器。
我們可以這樣刪除對象的屬性：
delete myObject.regex; // 或者 delete myObject['regex']; // 或者 var prop = "regex"; delete myObject[prop];復制代碼
事例：
var myObject = {
"ircEvent": "PRIVMSG",
"method": "newURI",
"regex": "^http://.*"
};
delete myObject.regex;
console.log(myObject);復制代碼JavaScript 中的對象可以看作鍵和值之間的映射。delete操作符用于一次刪除一個鍵(通常稱為對象屬性)。
var obj = {
myProperty: 1
}
console.log(obj.hasOwnProperty('myProperty')) // true
delete obj.myProperty
console.log(obj.hasOwnProperty('myProperty')) // false復制代碼delete 操作符不是直接釋放內存，它不同于簡單地將null或undefined值賦給屬性，而是將屬性本身從對象中刪除。
注意，如果已刪除屬性的值是引用類型(對象)，而程序的另一部分仍然持有對該對象的引用，那么該對象當然不會被垃圾收集，直到對它的所有引用都消失。
delete只對其描述符標記為configurable的屬性有效。
嚴格相等運算符(===)的行為與抽象相等運算符(==)相同，除非不進行類型轉換，而且類型必須相同才能被認為是相等的。
==運算符會進行類型轉換后比較相等性。 ===運算符不會進行轉換，因此如果兩個值的類型不同，則===只會返回false。
JavaScript有兩組相等運算符:===和!==，以及它們的孿生兄弟==和!=。如果這兩個操作數具有相同的類型和相同的值，那么===的結果就是 true，而!==的結果就是 false。
下面是一些事例：
'' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true復制代碼
上面有些看起來會挺困惑的，所以盡量還是使用嚴格比較運算符(===)。對于引用類型，==和===操作一致(特殊情況除外)。
var a = [1,2,3];
var b = [1,2,3];
var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };
var e = "text";
var f = "te" + "xt";
a == b // false
a === b // false
c == d // false
c === d // false
e == f // true
e === f // true復制代碼特殊情況是，當你將一個字符串字面量與一個字符串對象進行比較時，由于該對象的toString或valueOf方法，該對象的值與相字面量的值一樣。
考慮將字符串字面量與由String構造函數創建的字符串對象進行比較：
"abc" == new String("abc") // true
"abc" === new String("abc") // false復制代碼在這里，==操作符檢查兩個對象的值并返回true，但是===看到它們不是同一類型并返回false。哪一個是正確的?這取決于你想要比較的是什么。
我們的建議是完全繞開該問題，只是不要使用String構造函數來創建字符串對象。
使用==運算符（等于）
true == 1; //true, 因為 true 被轉換為1，然后進行比較 "2" == 2; //true, 因為 “2” 被轉換成 2，然后進行比較復制代碼
使用===操作符
true === 1; //false "2" === 2; //false復制代碼
快速克隆，數據丟失– JSON.parse/stringify
如果您沒有在對象中使用Date、函數、undefined、Infinity、RegExp、Map、Set、blob、、稀疏數組、類型化數組或其他復雜類型，那么可以使用一行簡單代碼來深拷貝一個對象：
JSON.parse(JSON.stringify(object))復制代碼
const a = {
string: 'string',
number: 123,
bool: false,
nul: null,
date: new Date(),
undef: undefined, // 丟失
inf: Infinity, // 被設置為 null
re: /.*/, // 丟失
}
console.log(a);
console.log(typeof a.date); // object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
/*
object
{
string: 'string',
number: 123,
bool: false,
nul: null,
date: '2020-09-04T00:45:41.823Z',
inf: null,
re: {}
}
*/
console.log(typeof clone.date); // string復制代碼使用庫進行可靠的克隆
由于克隆對象不是一件簡單的事情(復雜類型、循環引用、函數等等)，大多數主要的庫都提供了拷貝對象的函數。如果你已經在使用一個庫，請檢查它是否具有對象克隆功能。例如
lodash – cloneDeep; 可以通過lodash.clonedeep模塊單獨導入，如果你尚未使用提供深拷貝功能的庫，那么它可能是你的最佳選擇
AngularJS – angular.copy
jQuery – jQuery.extend(true, { }, oldObject); .clone()僅克隆DOM元素
ES6
ES6 提供了兩種淺拷貝機制:Object.assign()和spread語法。它將所有可枚舉的自有屬性的值從一個對象復制到另一個對象。例如
var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1}; // Spread Syntax復制代碼在以前的測試中，速度是最主要的問題
JSON.parse(JSON.stringify(obj))復制代碼
這是深拷貝對象的最慢方法，它比jQuery.extend慢 10-20%。
當deep標志設置為false（淺克?。r，jQuery.extend非?？?。 這是一個不錯的選擇，因為它包括一些用于類型驗證的額外邏輯，并且不會復制未定義的屬性等，但這也會使你的速度變慢。
如果想拷貝的一個對象且你知道對象結構。那么，你可以寫一個簡單的for (var i in obj)循環來克隆你的對象，同時檢查hasOwnProperty，這將比jQuery快得多。
var clonedObject = {
knownProp: obj.knownProp,
..
}復制代碼注意在 Date 對象JSON上使用JSON.parse(JSON.stringify(obj))方法。JSON.stringify(new Date())以ISO格式返回日期的字符串表示，JSON.parse()不會將其轉換回Date對象。
舊版本的JavaScript沒有import、include或require，因此針對這個問題開發了許多不同的方法。
但是從2015年(ES6)開始，JavaScript已經有了ES6模塊標準，可以在Node中導入模塊。為了與舊版瀏覽器兼容，可以使用Webpack和Rollup之類的構建工具和/或Babel這樣的編譯工具。
ES6 Module
從v8.5開始，Node.js就支持ECMAScript (ES6)模塊，帶有--experimental-modules 標志，而且至少Node.js v13.8.0沒有這個標志。要啟用ESM(相對于Node.js之前的commonjs風格的模塊系統[CJS])，你可以在 package.json中使用“type”:“module”?；蛘邽槲募峁U展名.mjs。(類似地，如果默認為ESM，則用 Node.js 以前的CJS模塊編寫的模塊可以命名為.cjs。)
使用package.json：
{
"type": "module"
}復制代碼在 module.js： 中
export function hello() {
return "Hello";
}復制代碼main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";復制代碼使用.mjs，會有對應的module.mjs：
export function hello() {
return "Hello";
}復制代碼在main.mjs 中
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";復制代碼自Safari 10.1，Chrome 61，Firefox 60 和 Edge 16 開始，瀏覽器就已經支持直接加載ECMAScript模塊（不需要像Webpack這樣的工具）。無需使用Node.js的.mjs擴展名； 瀏覽器完全忽略模塊/腳本上的文件擴展名。
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>復制代碼// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const p = document.createElement('p');
p.textContent = `Hello ${text}`;
document.body.appendChild(p);
}復制代碼大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
瀏覽器中的動態導入
動態導入允許腳本根據需要加載其他腳本
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>復制代碼Node.js require
在 Node.js 中用的較多還是 module.exports/require
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}復制代碼// server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello"
動態加載文件
我們可以通過動態創建 script 來動態引入文件：
function dynamicallyLoadScript(url) {
var script = document.createElement("script");
document.head.appendChild(script);
}復制代碼檢測腳本何時執行
現在，有一個個大問題。上面這種動態加載都是異步執行的，這樣可以提高網頁的性能。 這意味著不能在動態加載下馬上使用該資源，因為它可能還在加載。
例如：my_lovely_script.js包含MySuperObject：
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined復制代碼然后，按F5重新加載頁面，可能就有效了。那么該怎么辦呢？
我們可以使用回調函數來解決些問題。
function loadScript(url, callback)
{
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = callback;
head.appendChild(script);
}復制代碼然后編寫在lambda函數中加載腳本后要使用的代碼
var myPrettyCode = function() {
// Here, do whatever you want
};復制代碼然后，運行代碼：
loadScript("my_lovely_script.js", myPrettyCode);復制代碼請注意，腳本可能在加載DOM之后或之前執行，具體取決于瀏覽器以及是否包括行script.async = false;。
以上是JavaScript中必須掌握的基礎知識案例的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
