目錄

• 什么是JavaScript
• 快速入門
• • 引入JavaScript
• 數據類型和基本語法入門
• • 1.變量
  • 2.number
  • 3.字符串
  • 4.布爾值
  • 5.邏輯運算
  • 6.比較運算符
  • 7.浮點數
  • 8.數組
  • 9.對象
  • 10.流程控制
  • 11.Map和Set集合
• 嚴格檢查模式use strict
• 函數
• • 定義函數
  • 變量的作用域
  • 方法

什么是JavaScript

概述
JavaScript是一門世界上最流行的腳本語言。
一個合格的后端人員，必須精通JavaScript

歷史
略

ECMAScript它可以理解為JavaScript的一個標準，最新版本已經到ES6版本。
但是大部分瀏覽器還只停留在支持ES5代碼上。
開發環境與線上環境容易出現版本不一致的情況。

快速入門

引入JavaScript

1.內部標簽

<script> //....<script>

2、外部引入
hello.js

aert("hello,world");

test.html

<!--外部引入 注意：script必須成對出現--><script src="hello.js"></script>?<!--不用顯示定義type，也默認就是javaScript--><script type="text/javascript"></script>

數據類型和基本語法入門

注釋格式跟java一樣
demo：

<!--JavaScript嚴格區分大小寫--><script>// 1. 定義變量 var score = 1 ;//alert(num)// 2. 條件控制?if (score > 60 && score < 70){alert("60~70");}else if(score > 70 && score < 80){alert("70~80");}else{alert("other")}</script>

瀏覽器常用調試功能（F12調出）：

1.變量

命名規則：

允許大寫、允許$或_符號開頭、允許中文變量名
不允許數字開頭

var a

2.number

JS不區分小數和整數，Number

123//整數123123.1//浮點數123.11.123e3//科學計數法-99//負數NaN //not a numberInfinity // 表示無限大

3.字符串

正常字符串使用單引號，或者雙引號包裹 ‘abc’ “abc”

轉義字符

\'\n\t\u4e2d \u##### Unicode字符 ?\x41 ASCAII字符

多行字符串編寫

// ~鍵 var msg =`helloworld你好呀nihao`

模板字符串

// ~鍵let name = 'Tom';let age = 3;var msg = `你好，${name}`

字符串長度

str.length

字符串的可變性，不可變

大小寫轉換

//注意，這里是方法，不是屬性了 student.toUpperCase(); student.toLowerCase();

indexof()
返回某字符在字符串所在位置的索引
substring

[)區間為左閉右開 student.substring(1)//從第一個字符串截取到最后一個字符串 student.substring(1,3)//[1,3)

4.布爾值

true，false

5.邏輯運算

&& 兩個都為真，結果為真
|| 一個為真，結果為真
! 真即假，假即真

6.比較運算符

= 賦值== 等于（類型不一樣，值一樣，也會判斷為true） 例如1和"1"用==的話為true=== 絕對等于（類型一樣，值一樣，結果為true）

這是一個JS的缺陷，堅持不要使用 == 比較

注意：

• NaN === NaN，這個與所有的數值都不相等，包括自己
• 只能通過isNaN（NaN）來判斷這個數是否是NaN

7.浮點數

console.log((1/3) === (1-2/3)) //false console.log(1/3) //0.3333333333333333console.log(1-2/3) //0.33333333333333337

盡量避免使用浮點數進行運算，存在精度問題！

Math.abs(1/3-(1-2/3))<0.00000001 //true,可以這樣判斷是否相等，誤差<0.000...001足夠認為兩者相等

8.數組

Java的數組必須是相同類型的對象
而JS中不需要這樣
Array可以包含任意的數據類型

//保證代碼的可讀性，盡量使用[]var arr = [1,2,3,4,5,'hello',null,true];//第二種定義方法new Array(1,2,3,4,5,'hello');

取數組下標：如果越界了，就會報undefined

長度

arr.length

注意：假如給arr.lennth賦值，數組大小就會發生變化~，如果賦值過小，元素就會丟失

indexOf，
通過元素獲得下標索引

arr.indexOf(2) 1

字符串的"1"和數字 1 是不同的

slice（）
截取Array的一部分，返回的一個新數組，類似于String中substring

push()，pop()尾部

push：壓入到尾部 pop：彈出尾部的一個元素

unshift(),shift() 頭部

unshift：壓入到頭部 shift：彈出頭部的一個元素

排序sort()

(3)["B","C","A"] arr.sort() (3)["A","B","C"]

元素反轉reverse()

(3)["A","B","C"] arr.reverse() (3)["C","B","A"]

concat()

注意：concat()并沒有修改數組，只是會返回一個新的數組

連接符join

打印拼接數組，使用特定的字符串連接

多維數組

數組：存儲數據（如何存，如何取，方法都可以自己實現！）

9.對象

若干個鍵值對

var 對象名 = {屬性名：屬性值，屬性名：屬性值，屬性名：屬性值 } //定義了一個person對象，它有四個屬性 var person = {name:"Tom",age:3,email:"123456798@QQ.com",score:66 }

Js中對象，{…}表示一個對象，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最后一個屬性不加逗號！ JavaScript中的所有的鍵都是字符串，值是任意對象！
?
取對象值

person.name //"Tom"person.age //3

對象賦值

使用一個不存在的對象屬性，不會報錯！ undefined

動態地刪減屬性，通過delete刪除對象的屬性

動態地添加，直接給新的屬性添加值即可

xxx in xxx判斷屬性值是否在這個對象中

hasOwnProperty()判斷一個屬性是否是這個對象自身擁有的

10.流程控制

if判斷

while循環
要避免程序死循環

for循環

forEach循環
ES5.1特性

for…in…
for x in obj：x是打出下標來

11.Map和Set集合

Map

Set：無序不重復的集合

遍歷Map和Set
通過for…of…遍歷（for x of obj：x是打出值來，而for x in obj的x是打出下標來）

嚴格檢查模式use strict

<!--前提：IDEA需要設置支持ES6語法'use strict';嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題'use strict'必須寫在JavaScript的第一行！局部變量建議都使用let去定義~--><script>'use strict';//局部變量let i=1;//ES6 let</script>

函數

定義函數

定義方式一
絕對值函數

一旦執行到return代表函數結束，返回結果！
如果沒有執行return，函數執行完也會返回結果，結果就是undefined

定義方式二

function(x){…}這是一個匿名函數。但是可以吧結果賦值給abs，通過abs就可以調用函數！
方式一和方式二等價！

調用函數

abs(10)//10 abs(-10) //10

參數問題：javaScript可以傳任意個參數，也可以不傳遞參數~
參數進來是否存在問題？
假設不存在參數，如何規避？

arguments
arguments是一個JS免費贈送的關鍵字；
代表，傳遞進來的所有參數，是一個數組！

問題：arguments包含所有的參數，我們有時候想使用多余的參數來進行附加操作。需要排除已有參數~

rest
以前：

ES6引入的新特性，獲取除了已經定義的參數之外的所有參數~…

rest參數只能寫在最后面，必須用…標識。

變量的作用域

在javascript中，var定義變量實際是有作用于的。
假設在函數體重聲明，則在函數體外不可以使用~（閉包）

如果兩個函數使用了相同的變量名，只要在函數內部就不沖突

內部函數可以訪問外部函數的成員，反之則不行

假設，內部函數變量和外部函數變量，重名！

假設在JavaScript中，函數查找變量從自身函數開始~， 由“內”向“外”查找，假設外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量。

提升變量的作用域

結果：x undefined
說明：js執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值；

這個是在javascript建立之初就存在的特性。 養成規范：所有 的變量定義都放在函數的頭部，不要亂放，便于代碼維護；

全局變量

全局對象window

alert() 這個函數本身也是一個window的變量；

javascript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用范圍內找到，就會向外查找，如果在全局作用域都沒有找到，就會報錯 Refrence

規范

由于我們的所有變量都會綁定到window上，。如果不同的js文件，使用了相同的全局變量，就會產生沖突—>如何減少這樣的沖突？

唯一全局變量

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突問題~
jQuery中就是使用的該方法：jQuery.name，簡便寫法：$()

局部作用域

ES6的let關鍵字，解決了局部作用域沖突的問題！

let關鍵字

建議大家都用let去定義局部作用域的變量；

常量

在ES6之前，怎么定義常量：只有用全部大寫字母命名的變量就是常量；建議不要修改這樣的值。

在ES6引入了

常量關鍵字 const

方法

定義方法

方法就是把函數放在對象的里面，對象只有兩個東西：屬性和方法

this.代表什么？拆開上main的代碼看看

this是無法指向的，是默認指向調用它的那個對象的；

apply

在js中可以控制this指向

this指向了kuangshen，參數為空

總結

以上是生活随笔為你收集整理的前端基础3-1——JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。