JavaScript、Es6--基礎(chǔ)總結(jié)

一、基礎(chǔ)概念
1.原始類型：boolean、null、undefined、number、string、symbol
2.字面量：一般固定值稱為字面量，如 3.14。

  • 數(shù)字(Number)字面量有整數(shù)字面量，浮點數(shù)字面量，Infinity，NaN
  • 字符串（String）字面量 可以使用單引號或雙引號
  • 表達式字面量
  • 數(shù)組（Array）字面量
  • 對象（Object）字面量
  • 函數(shù)（Function）字面量

3.JavaScript 語句標識符

語句 描述
break 用于跳出循環(huán)。
catch 語句塊，在 try 語句塊執(zhí)行出錯時執(zhí)行 catch 語句塊。
continue 跳過循環(huán)中的一個迭代。
do ... while 執(zhí)行一個語句塊，在條件語句為 true 時繼續(xù)執(zhí)行該語句塊。
for 在條件語句為 true 時，可以將代碼塊執(zhí)行指定的次數(shù)。
for ... in 用于遍歷數(shù)組或者對象的屬性（對數(shù)組或者對象的屬性進行循環(huán)操作）。
function 定義一個函數(shù)
if ... else 用于基于不同的條件來執(zhí)行不同的動作。
return 退出函數(shù)
switch 用于基于不同的條件來執(zhí)行不同的動作。
throw 拋出（生成）錯誤 。
try 實現(xiàn)錯誤處理，與 catch 一同使用。
var 聲明一個變量。
while 當條件語句為 true 時，執(zhí)行語句塊。

4.變量提升：函數(shù)聲明和變量聲明總是會被解釋器悄悄地被"提升"到方法體的最頂部。也就是說，變量可以先使用后聲明。

注意：JavaScript 只有聲明的變量會提升，初始化的不會。

5.閉包：閉包是一種保護私有變量的機制，在函數(shù)執(zhí)行時形成私有的作用域，保護里面的私有變量不受外界干擾。直觀的說就是形成一個不銷毀的棧環(huán)境。
通俗的講，在函數(shù)A里，聲明了變量a，函數(shù)A內(nèi)嵌了一個函數(shù)B，函數(shù)B訪問了變量a，最后返回函數(shù)B，函數(shù)B就是一個閉包。
示例1：

function A(){
       var a="hello world"
        function B(){
            console.log(a);
        }
        return B;
}
var c = A();
c();//hello world

閉包有3個特性：
①函數(shù)嵌套函數(shù)
②函數(shù)內(nèi)部可以引用函數(shù)外部的參數(shù)和變量
③參數(shù)和變量不會被垃圾回收機制回收

示例2：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 計數(shù)器為 3

6.深淺拷貝：
示例：

let a={name:'hello'}
let b=a
a.name="world"
console.log(b.name) // world

上述例子中，將a拷貝到b其實是拷貝了地址，一旦對象a的name屬性發(fā)生改變，對象b的name屬性也會改變，為了解決以上問題，引出了淺拷貝和深拷貝。
如何實現(xiàn)深淺拷貝

  • 淺拷貝：
    Object.assign({}, a)
    展開運算符...
  • 深拷貝：
    JSON.parse(JSON.stringify(obj))

7.立即執(zhí)行函數(shù)
見閉包的示例2代碼。
二、常用的方法使用示例
1.indexOf ：返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
stringObject.indexOf(searchvalue,fromindex)
2.lastIndexOf：返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
stringObject.lastIndexOf(searchvalue,fromindex)
3.splice：從數(shù)組中添加/刪除項目，然后返回被刪除的項目。
arrayObject.splice(index,howmany,item1,.....,itemX)。
示例：

<!doctype html>
<html> 
<body> 
<script >
    let arr1 = [1,2,3,4]
    let arr2 = [1,2,3,4]
    arr1.splice(2,0,"88")
    document.write(arr1 + "<br />")
    arr2.splice(2,1,"88")
    document.write(arr2 + "<br />")
</script>
</body> 
</html>

輸出結(jié)果：

1,2,88,3,4
1,2,88,4

4.slice：從已有的數(shù)組中返回選定的元素。該方法并不會修改數(shù)組，而是返回一個子數(shù)組。
arrayObject.slice(start,end)

5.split：用于把一個字符串分割成字符串數(shù)組。
stringObject.split(separator,howmany)
示例：

<script >
var str="1,2,3,4,5"
document.write(str.split(",") + "<br />")
document.write(str.split(",",3))
</script>

輸出結(jié)果：

1,2,3,4,5
1,2,3

6.replace：用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
stringObject.replace(regexp/substr,replacement)
示例：

<script >
var str="hello world！hello，123"
document.write(str.replace(/hello/g, "你好"))
</script>

輸出結(jié)果：

你好 world！你好，123

More
7.substr：在字符串中抽取從 start 下標開始的指定數(shù)目的字符。
stringObject.substr(start,length)
8.substring：用于提取字符串中介于兩個指定下標之間的字符。
stringObject.substring(start,stop)
注意：與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數(shù)
9.toLocaleLowerCase();toLowerCase()轉(zhuǎn)小寫
10.toLocaleUpperCase();toUpperCase()轉(zhuǎn)大寫
11.trim：用于刪除字符串的頭尾空格。
string.trim()

12.map、filter、reduce

  • map：生成一個新數(shù)組，遍歷原數(shù)組，將每個元素拿出來做一些變換然后放入到新的數(shù)組中。另外 map 的回調(diào)函數(shù)接受三個參數(shù)，分別是當前索引元素，索引，原數(shù)組
[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]
  • filter：生成一個新數(shù)組，在遍歷數(shù)組的時候?qū)⒎祷刂禐?true 的元素放入新數(shù)組，我們可以利用這個函數(shù)刪除一些不需要的元素。
let array = [1, 2, 4, 6]
let newArray = array.filter(item => item !== 6)
console.log(newArray) // [1, 2, 4]
  • reduce:可以將數(shù)組中的元素通過回調(diào)函數(shù)最終轉(zhuǎn)換為一個值。它接受兩個參數(shù)，分別是回調(diào)函數(shù)和初始值。
const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

13.reverse：reverse() 方法用于顛倒數(shù)組中元素的順序
arrayObject.reverse()

14、every、some、join

  • every:用于檢測數(shù)組所有元素是否都符合指定條件。
    every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素：
    如果數(shù)組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
    如果所有元素都滿足條件，則返回 true。
    語法：array.every(function(currentValue,index,arr), thisValue)
var ages = [32, 33, 12, 40];
function checkAge(age) {
    return age >= 18;
}
function myFunction() {
   ages.every(checkAge);
}
  • some:測試數(shù)組中是不是至少有1個元素通過了被提供的函數(shù)測試。它返回的是一個Boolean類型的值。
    Array.some()
const array = [1, 2, 3, 4, 5];
const even = (element) => element%2===0;
console.log(array.some(even));
//true
  • join:用于把數(shù)組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
    arrayObject.join(separator)
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
//George,John,Thomas

15.Math

  • Math.floor() 返回小于或等于一個給定數(shù)字的最大整數(shù)
Math.floor( 45.95); // 45
  • Math.round()把一個數(shù)字舍入為最接近的整數(shù)
<script type="text/javascript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</script>
//output
1
1
0
-4
-5

16.正則表達式：使用單個字符串來描述、匹配一系列符合某個句法規(guī)則的字符串搜索模式。

三、其他
1.==和===的區(qū)別
== ，如果對比的數(shù)據(jù)類型不相同，先進行類型轉(zhuǎn)換，再進行比較；
===，判斷兩者類型和值是否相同。
2.在條件判斷時，除了 undefined， null， false， NaN， ' '， 0， -0，其他所有值都轉(zhuǎn)為 true。
類型轉(zhuǎn)換
3.理解this
JavaScript this 關(guān)鍵字
JavaScript中this詳解

參考網(wǎng)址：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容