JavaScript學習筆記(一)

1. 什麼是 JavaScript

感謝UP主狂神

1.1 概述

JavaScript是一門世界上最流行的腳本語言

一個合格的後端人員,必須要精通JavaScript

1.2 歷史

(JavaScript歷史)

ECMAScript它可以理解爲是JavaScript的一個標準

最新版本已經到了es6版本~
但是大部分瀏覽器還只停留在支持es5代碼上!
開發環境------線上環境,版本不一致

2. 快速入門

2.1 引入JavaScript

注意:script標籤必須成對出現,要不然有些會出問題

1.內部標籤

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

2.外部引入
yyc.js

//...

test.html

<script src = "yyc.js"></script>

測試代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script標籤內,寫JavaScript代碼-->
    <!--    <script>-->
    <!--        alert('hello,word');-->
    <!--    </script>-->
    <!--外部引用-->
    <!--注意:script標籤必須成對出現,要不然有些會出問題-->
    <script src="js/yyc.js"></script>
<!--不用顯示定義type,也默認JavaScript-->
    <script type="text/javascript">
    </script>
</head>
<body>
<!--這裏也可以寫-->
<script>

</script>
</body>
</html>

2.2 基本語法入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--javascript 嚴格區分大小寫-->
    <script>
        // 1.定義變量  變量類型  變量名 = 變量值;
        var score = 70;
        var name = "yyc";
        // 2.條件控制
        if (score > 60 && score < 70) {
            alert("60~70");
        } else if (score > 70 && score < 80) {
            alert("70~80");
        } else {
            alert("other");
        }
        //console.log(score) 在瀏覽器的控制檯打印變量!System.out.println();
    </script>

</head>
<body>

</body>
</html>

瀏覽器必備調試須知:
在這裏插入圖片描述

2.3 數據類型

數值、文本、圖形、音頻、視頻…

變量

var 和平精英 = "鑽石"//這個在java中也是可以的,自然在JavaScript中也是可以的

number
js不區分小數和整數,Number

123//整數123
123.3//浮點數123.3
1.123e3//科學計數法
-99//負數
NaN// not a number

字符串

‘abc’ “abc”

布爾值
true false

邏輯運算

&&    兩個爲真,結果爲真

||    一個爲真,結果爲真

!     真即假,假即真

比較運算符

=    
==   等於(類型不一樣,值一樣,也會判斷爲true)
===   絕對等於(類型一樣,值一樣,結果爲true)

這是JS的缺陷,堅持不要使用 == 比較
須知:

  • NaN === NaN,這個所有的數值不相等,包括自己
  • 只能通過isNaN(NaN)來判斷這個數是否爲NaN

浮點數問題:

console.log((1 / 3) === (1 - 2 / 3));

儘量避免使用浮點數進行運算,存在精度問題!

Math.abs(1/3-(1-2/3))<0.0000000001

null 和 undefined

  • null 空
  • undefined 未定義

數組

java的數組必須是相同類型的對象~,JS中不需要這樣

//保證代碼的可讀性,儘量使用 []
var arr = [1,2,3,4,'hello',null,true];

new Array(1,12,3,4,5,'hello');

取數組下標:如果越界了,就會

undefined

對象
對象是大括號,數組是中括號~~
每個屬性之間使用逗號隔開,最後一個不需要添加

//Person person = new Person(1,2,3.,4,5);
var person ={
        name:"yyc",
        age:3,
        tags:['js','java','web','...']
        }

取對象值:

person.age
> 3
person.name
> "yyc"

2.4 嚴格檢查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    前提:IDEA 需要設置支持ES6語法;
    'use strict';嚴格檢查模式,預防JavaScript的隨意性導致產生的一些問題,必須寫在JavaScript的
    第一行
    局部變量建議都使用let去定義
-->
    <script>
        'use strict'
        //全局變量
          i =1;

        //es6   let

    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述

3.數據類型

3.1 字符串

1.正常字符串我們使用 單引號,或者是雙引號包裹

2.注意轉義字符 " \ "

\'
\n
\t
\u4e2d     \u####     Unicode字符
\x41       Ascll字符

3.多行字符串編寫

'use strict'
     //console.log('a');
     //tab上面esc鍵下面
     var msg = `hello
     word
     你好
     `

4.模板字符串

let name = `yyc`;
let age = 3;
let msg = `你好呀,${name}`

結果爲:

你好呀,yyc

5.字符串長度

str.length

6.字符串的可變性,不可變
在這裏插入圖片描述
7.大小寫轉換

//注意,這裏是方法,不是屬性了
str.toUpperCase();
str.toLowerCase();

8.獲取指定的下標

str.indexOf('t');

9.從第一個字符串截取到最後一個字符串

[)
str.substring(1)//從第一個字符串截取到最後一個字符串
str.substring(1,3)//[1,3)

3.2數組

Arry可以包含任意的數據類型

var arr = [1,2,3,4,5];//通過下標取值和賦值
arr[0] 
arr[0] = 1

1.長度

arr.length

注意:加入給arr.length 賦值,數組大小就會發生變化~如果賦值過小元素就會丟失!

2. arr.indexOf(2),通過元素獲得下標索引

arr.indexOf(2)

在這裏插入圖片描述
字符串的"1"和數字的1是不同的

3.slice() 截取數組的一部分,返回一個新數組,類似於String中的substring

arr.slice(1,5)

在這裏插入圖片描述
4. push(),pop() 尾部
在這裏插入圖片描述

push()  :壓入尾部
pop()   :彈出尾部的一個元素

5. unshift() , shift() 頭部

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

6. 排序 sort()

var arr = ["b","c","a"]
<-undefined
->arr.sort()
<-(3) ["a", "b", "c"]

7. 元素反轉 reverse()

->arr.reverse()
<-(3) ["c", "b", "a"]

8. concat ()

->aarr.concat([1,2,3])
<-(6) ["c", "b", "a", 1, 2, 3]

注意:concat() 並沒有修改數組,只是會返回一個新的數組

9. 連接符 join
打印拼接數組,使用特定的字符串連接

->arr.join("-")
<-"c-b-a"

10. 多維數組
在這裏插入圖片描述
數組:存儲數據(如何存,如何取,方法都可以自己實現!)

3.3、對象

若干個鍵值對

var 對象名 = {
        屬性名:屬性值,
        屬性名:屬性值,
        屬性名:屬性值    //最後這個沒有逗號
}

//定義了一個person對象,它有四個屬性
var person = {
	name: "yyc",
	age: 3,
	email:"[email protected]",
	score:0

js中的對象,{…}表示一個對象,鍵值對描述屬性xxxx:xxxx,多屬性之間使用逗號隔開,最後一個屬性不加逗號!
javascript中的所有鍵都是字符串,值是任意對象!
1、對象賦值

person.name = "cyy"
"cyy"
person.name
"cyy"

2、使用一個不存在的對象屬性,不會報錯!undefined

person.haha
undefined

3、動態的刪減屬性

delete person.name
true
person

4、動態的添加,直接給新的屬性添加值即可

person.haha = "haha"
"haha"
person

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

'age' in person
true
//繼承
'toString' in person
true

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

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4、流程控制

if判斷

var age = 3;
      if (age > 3) {
          alert("haha");
      } else {
          alert("kuwa~");
      }

for循環
要計算1+2+3,我們可以直接寫表達式:

1 + 2 + 3; // 6

要計算1+2+3+…+10,勉強也能寫出來。但是,要計算1+2+3+…+10000,直接寫表達式就不可能了。爲了讓計算機能計算成千上萬次的重複運算,我們就需要循環語句。JavaScript的循環有兩種,一種是for循環,通過初始條件、結束條件和遞增條件來循環執行語句塊:

var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x; // 50005000

讓我們來分析一下for循環的控制條件:

  • i=1 這是初始條件,將變量i置爲1;
  • i<=10000 這是判斷條件,滿足時就繼續循環,不滿足就退出循環;
  • i++ 這是每次循環後的遞增條件,由於每次循環後變量i都會加1,因此它終 將在若干次循環後不滿足判斷條件i<=10000而退出循環。

for循環最常用的地方是利用索引來遍歷數組:

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

for循環的一個變體是for … in循環,它可以把一個對象的所有屬性依次循環出來:

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

while循環

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

最後一種循環是do { … } while()循環,它和while循環的唯一區別在於,不是在每次循環開始的時候判斷條件,而是在每次循環完成的時候判斷條件:至少 執行一次!

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

3.5、map 和set

ES6 的新特性~
map

//ES6  Map
//學生的成績,學生的名字
var map = new Map([['tom',8],['jack',50],['haha',99]]);
var name = map.get('tom');//通過key獲得value
console.log(name);
map.set('yyc',135464);//新增或修改
map.delete('tom');//刪除

set

var set = new Set([3,2,1,1,1,]);//set可以去重
set.add(5);
set.delete(3);
console.log(set.has(1));

3.6、iterator

  • ES6 新特性

遍歷數組

//通過for of 來輸出數組裏面的呃所有值
//通過for in 來輸出數組的下標
var arr = [3,4,6];
for(var x of arr){
           console.log(x);
}

遍歷map

var map = new Map([['tom',100],['jack',70],['haha',99]]);
for(let i of map){
           console.log(i);
}

遍歷set

var set = new Set([5,6,7]);
        for(let x of set ){
            console.log(x);
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章