JavaScript基礎(chǔ)

申明：本篇文章內(nèi)所有內(nèi)容都是在參考學(xué)習此教程時所作的筆記，如有興趣可參考原博。

一、基本語法

js的語法和java類似，每句以;結(jié)尾，代碼塊用{...}

if(i > 2){
  x = 1;
  y = 2;
}

和java語法完全相同的地方：

  • 單行和多行注釋
  • 嚴格區(qū)分大小寫
  • 代碼塊的嵌套、邏輯判斷等等

二、JS中的變量

Number：用于存儲數(shù)值了類型

123; // 整數(shù)123
0.456; // 浮點數(shù)0.456
1.2345e3; // 科學(xué)計數(shù)法表示1.2345x1000，等同于1234.5
-99; // 負數(shù)
NaN; // NaN表示Not a Number，當無法計算結(jié)果時用NaN表示
Infinity; // Infinity表示無限大，當數(shù)值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity

字符串

用'..'和"..."括起來都可以。

布爾值

true或者false，也可以是運算的返回結(jié)果，比如：與或非邏輯運算或者大小比較。

比較運算符

有這幾種：>,<,>=,<=,==,===

  1. 由于js允許對任意數(shù)據(jù)類型進行比較，所以要區(qū)別==和===：

第一種是==比較，它會自動轉(zhuǎn)換數(shù)據(jù)類型再比較，很多時候，會得到非常詭異的結(jié)果；

第二種是===比較，它不會自動轉(zhuǎn)換數(shù)據(jù)類型，如果數(shù)據(jù)類型不一致，返回false，如果一致，再比較。

  1. 這兩種比較方式都不能比較NaN，NaN使用isNaN()方法判斷

由于js的設(shè)計缺陷，比較浮點型應(yīng)使用下列方式：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.00001; // true
//而不是
1 / 3 === (1 - 2 / 3); // false

數(shù)組

特殊點在于同一數(shù)組內(nèi)可以存儲多種數(shù)據(jù)類型，有下標

new Array(1, 2, 3); // 創(chuàng)建了數(shù)組[1, 2, 3]
[1, 2, 3.14, 'Hello', null, true];
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引為0的元素，即1
arr[5]; // 返回索引為5的元素，即true
arr[6]; // 索引超出了范圍，返回undefined

對象

js的對象時有鍵值對組成的無序集合。

var student = {
    name: 'Bixuan',
    age: 22,
    tags: ['js', 'web', 'mobile'],
    school: 'High School',
    hasGirlFriend: true,
    zipcode: null
};

//獲取也很簡單，直接  對象名.鍵  獲取
student.name;

變量

建議變量不要使用中文命名

  • 申明一個變量使用var關(guān)鍵字
  • 變量名使用數(shù)字大小寫字母和符號$、_的組合，數(shù)字不能開頭
  • 變量名不能是js中的關(guān)鍵字
  • 由于js是動態(tài)語言的原因，所以變量可以存儲任意類型的數(shù)據(jù)
//這樣的代碼也是完全可以的 
var i = 10;
i = "lalal";

strict模式：javascript允許變量的申明不使用var關(guān)鍵字，但是此變量將變成全局變量，如果要禁止此種行為，可以開啟strict模式，開啟后不使用var關(guān)鍵字申明的變量被使用時將會報錯。啟用strict模式的方法是在JavaScript代碼的第一行寫上：

'use strict';
// 如果瀏覽器支持strict模式

三、字符串

JS的字符串就是用'...',"..."括起來的字符表示。如果'本身也是一個字符時，那就使用"..."括起來，也可以使用轉(zhuǎn)義字符：\'

轉(zhuǎn)義字符也可以用來表示十六進制或者Unicode編碼等等

'\x41'; // 完全等同于 'A'
'\u4e2d\u6587'; // 完全等同于 '中文'

在JS中有多行字符串的概念：

//此時，解釋器并不會忽略換行，而是換行符也會存儲在字符串中
//當然了，使用\n顯示標注也是可以的

var s = `這是一個
多行
字符串`;

要把多個字符串連接起來，可以使用+或者模板字符串

var name = '楊比軒';
var age = 22;
var message = name + "今年" + age + "歲了";
var message = "${name}今年${age}歲了";
//當然了，有的老的瀏覽器可能不支持ES6模板字符串

操作字符串，直接見demo;

var s = 'Hello World';
s.length; // 11
//字符串是不可變的，如果對字符串的某個索引賦值
//不會有任何錯誤，但是，也沒有任何效果：
s[0];//H
//toUpperCase把一個字符串全部變?yōu)榇髮?s.toUpperCase();//HELLO WORLD
//toLowerCase把一個字符串全部變?yōu)樾?s.toLowerCase();//hello world
//indexOf返回字符串的出現(xiàn)位置
s.indexOf('world'); // 沒有找到指定的子串，返回-1.
s.indexOf('World'); // 返回6
//subtring，切割字符串，參數(shù)為開始到結(jié)束，都是下標，
s.substring(0,3);// Hel

四、數(shù)組

JavaScript的數(shù)組可以包含任意的數(shù)據(jù)類型，并通過數(shù)組下標來訪問單個元素。

要獲取數(shù)組長度，直接訪問length屬性，直接給length屬性賦值，會改變數(shù)組長度：

var arr = [1,2.3,4,"abc",null];
arr.length;//5
arr.length = 7; //arr = [1,2.3,4,"abc",null,undefined,undefined];
//如果給超出索引長度的元素賦值，會使數(shù)組發(fā)生變化
arr[9] = 20;
//arr = [1,2.3,4,"abc",null,undefined,undefined,undefined,20];

indexOf()

返回該元素在數(shù)組中的位置，沒有找到返回-1

var arr = [12,34,45,56,67];
arr.indexOf(12);// 0 
arr.indexOf(45);// 2

slice()

和string中的substring基本類似，截取并返回一個新的數(shù)組，傳遞一個參數(shù)則是從指定位置到結(jié)束，不傳遞任何參數(shù)則是直接復(fù)制一個新的一模一樣的數(shù)組

var arr = [1,2,3,4,5];
arr.slice(0,3);//[1,2,3]
var arrCopy = arr.slice();
arrCopy === arr;//true

push()和pop()方法

push()是向array的末尾添加元素，pop()則是把最后一個元素刪除

var s = ['a','b','c','d'];
s.push('e','f');//s =  ['a','b','c','d','e','f'];
s.pop();s.pop();s.pop();
alert(s);// ['a','b','c']

unshift()和shift()

和上面的兩個方法對應(yīng)，操作arr的頭部

var s = ['a','b','c','d'];
s.unshift('e','f');//s =  ['e','f','a','b','c','d'];
s.shift();s.shift();s.shift();
alert(s);// ['b','c','d'];
//如果全部pop或者shift完，則再輸出就會報出undefined

sort()

對array進行排序，順序為默認的順序arr.sort()

reverse()

翻轉(zhuǎn)array

splice()

修改arr的萬能方法，刪除指定開始位置和指定個數(shù)的元素，移位添加指定的元素

var s = ['a','b','c','d','e','f'];
//添加元素的個數(shù)沒有限制
s.splice(2,3,'qwe','qwe')
//只刪除 ，不添加
s.splice(2,2);
//只添加， 不刪除
s.splice(3,0,"insert");

concat()

concat()方法把當前的Array和另一個Array連接起來，并返回一個新的Array，實際上concat可以添加任意個元素，并且會把其中的arr全部拆開，添加進新的arr中

var arr = ['A', 'B', 'C'];
var added = arr.concat('x','y',[1, 2, 3]);
added; // ['A', 'B', 'C', 'x','y',1, 2, 3]
arr; // ['A', 'B', 'C']

join()

join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串。join并不會更改數(shù)組值，而是返回一個字符串。

var arr = [1,2,3,4];
arr.join('~');// [1~2~3~4]

多維數(shù)組

JS是支持多維數(shù)組操作，具體格式和其他語言類似。

'use strict';
var arr = [1,[2,3],[4,5,6],[7,8,9,10]];

var x = arr[0];//x為1
x = arr[1][1];//x為3

練習：

arr中存儲了學(xué)生姓名，請排序后按照如下格式輸出：

歡迎XXX，XXX，...，XXX和XXX同學(xué)！

'use strict';
var arr = ['小明','小剛', '小花', '小紅', '大軍', '阿黃'];
var s = "歡迎" + arr.sort().slice(0,arr.length-1).join("，")+ "和" + arr[arr.length-1] + "同學(xué)";
alert(s);

五、對象

JS的對象是一種無序的集合數(shù)據(jù)類型，由若干鍵值對組成。

具體形式如下：

//對象的鍵值對用{}括起來，鍵值對的形式為：XXX:XXX 
//鍵值對之間用 ‘,’ 隔開，最后一個不用加
var student = {
  name:'楊比軒',
  age:20,
  school:'ynu',
  
  //鍵中含有特殊字符時，用''括起來
  //此時，此屬性就不是有效屬性了
  'high-shcool':'guozhen high school'
}

alert(student.name);//輸出的就是：楊比軒
//非有效屬性訪問不用 . 直接['...']訪問
student['high-shcool'];//guozhen high school

對象屬性相關(guān)

  • 訪問不存在的屬性時返回undefined

  • JS的對象時動態(tài)類型，屬性可以后加

    var student = {
    name: 'bixuan'
};
student.age;//undefined
student.age = 10; //后加的屬性
delete student.age;//刪除該屬性，刪除不存在的屬性不會報錯

  • 檢測某一對象是否包含某一屬性可以使用 in 操作符

  • 使用in時，如果父類包含，也會返回true，所有僅判斷對象本身是否包含某一屬性時，可以用hasOwnProperty()方法

    var student = {
    name: 'bixuan'
};
student.hasOwnProperty('name'); // true
student.hasOwnProperty('toString'); // false

六、條件判斷

條件判斷就是if{...}esle{...}或者if{...}else if{...}else{...}，如果之前學(xué)過C\C++或者java的話，基本不用看了，全部是一樣的，這里也就沒有任何筆記。

七、循環(huán)

循環(huán)這里基本上也都是一樣的，有一個for in循環(huán)值的來說一下。

基本語法：

//這樣就可以遍歷對象內(nèi)的所有屬性或者元素，無論對象內(nèi)的元素時什么類型的值，value永遠是String類型的。
for(var value in object){
  value....;
}

其他的for、while、do...while循環(huán)全部和java等一樣。

八、map和set

JS中的默認對象表達方式{}其實和java中的map數(shù)據(jù)類型比較相似，都是鍵值對的形式。但是JS的默認對象有一個缺陷，key只能是String類型，更像java中的Properties。于是ES6版本中新增了數(shù)據(jù)類型Map。

Map

Map是一組鍵值對的結(jié)構(gòu)，具有相對更快的查找速度。

語法如下：

//創(chuàng)建一個map數(shù)據(jù)類型
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('bixuan', 100); // 添加新的key-value
m.delete('bixuan');
m.has('bixuan');//false

特性和java中的也比較相似，但是一些小區(qū)別

  • 添加新元素使用set，不是put
  • 判斷是否存在某個key使用has()，不是containsKey
  • 刪除元素使用delete()，不是remove()
  • 重復(fù)set進key相同的鍵值對，后進去的會覆蓋之前的，和java相同

Set

創(chuàng)建set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3, 3]); // 含1, 2, 3,重復(fù)元素會被過濾掉

添加和刪除元素

var set = new Set();
//添加是add()
set.add('1');
set.delete('1');

iterable

如同java集合中的繼承體系一樣，JS中的Map和Set也有類似的繼承體系，只是比較簡單而已。

Map和Set都繼承自iterable（感覺就像java中的迭代器Iterator)，而屬于iterable類型的集合可以使用for ..of來進行遍歷（就像java中的增強for循環(huán)的感覺類似），同樣這些都是ES6中新增的內(nèi)容。

var set = new Set([1,2,3,4,5,6]);
for(var value of set){
  console.log(value);
}

關(guān)于for...in和for...of

其實for...of是用來修復(fù)for...in的歷史遺留問題的。首先來看一個demo

//for of 也可以遍歷Array
var arr = [1,2,3,4,5,6];
for(var value of arr){
  console.log(value + 1);
}
//for of 輸出結(jié)果為：2,3,4,5,6,7
for(var value in arr){
  console.log(value + 1);
}
//for of 輸出結(jié)果為：01,21,31,41,51,61

這個例子說明，for...of遍歷的是對象的值，而for...in可以說遍歷的是對象的屬性名稱，再看下面這個demo

var arr = [1,2,3];
arr.name = 'hello';
for(var value in arr){
  console.log(value); //輸出為：1,2，3，name
}

for...in遍歷給對象添加的額外的屬性，但是卻沒有遍歷對象本身的屬性length。所以這就是問什么引進行的for...of，就是為了修復(fù)這些歷史遺留問題，for...of只遍歷集合或者對象本身的元素。

除了for...of循環(huán)之外，也可以使用ES5.1中新增的forEach()來進行遍歷集合。

遍歷Array：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    console.log(element);
});

遍歷set，由于set沒有下標，所以第二個參數(shù)也指向了元素

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

遍歷map，則為 value，key，map

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

JS的函數(shù)調(diào)用其實不要求參數(shù)必須一致，所以可以進行簡寫，例如遍歷Array的element

var a = ['A', 'B', 'C'];
a.forEach(function (element) { //此處的element是寫給自己看的，其實些什么都是獲取的是元素的值
    console.log(element);
});

//set也一樣
var set = new Set(['A', 'B', 'C']);
set.forEach(function (BALALALA) {
    console.log(BALALALA);
});

//map輸出的是value
var map = new Map([['A',1], ['B',2], ['C',3]]);
map.forEach(function (BALALALA) {
    console.log(BALALALA);
});
最后編輯于 ：
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

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