js 基本知識
一,簡單的開發環境
瀏覽器,工具,開發者工具,console區域可以編寫js程式碼,按enter 執行。
二,基本語法
1,語句
常用語句:
輸出:alert("hello world")
資料型別:
Number
123; // 整數123
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000,等同於1234.5
-99; // 負數
NaN; // NaN表示Not a Number,當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大,當數值超過了JavaScript的Number所能表示的最大值時,就表示為Infinity
JavaScript把null
、undefined
、0
、NaN
和空字串''
視為false
,其他值一概視為true
比較符 == 和===
第一種是==比較,它會自動轉換資料型別再比較,很多時候,會得到非常詭異的結果;
第二種是===比較,它不會自動轉換資料型別,如果資料型別不一致,返回false,如果一致,再比較。
由於JavaScript這個設計缺陷,不要使用==比較,始終堅持使用===比較。
另一個例外是NaN這個特殊的Number與所有其他值都不相等,包括它自己:
NaN === NaN; // false
唯一能判斷NaN的方法是通過isNaN()函式:
isNaN(NaN); // true
陣列:
定義 var array = [1,2,3.14,"hello",null,false] . 也可以 var array = new Array(1,2,3)
陣列大小,array.length;
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr變為[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr變為[1, 2]
常用函式:
indexof(): arr.indexof(i) 等同於 arr[i],索引
slice():擷取子陣列 var arr = [1,2,3];arr.slice(0,2)從0到2不包括2.arr.slice()表示全部擷取。
push,pop:表示插入和推出陣列元素。
unshift和shift
如果要往Array的頭部新增若干元素,使用unshift()方法,shift()方法則把Array的第一個元素刪掉:
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空陣列繼續shift不會報錯,而是返回undefined
arr; // []
splice()方法是修改Array的“萬能方法”,它可以從指定的索引開始刪除若干元素,然後再從該位置新增若干元素:
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再新增兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不新增:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只新增,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
push和pop對陣列尾部進行操作,shift和unshift對陣列頭部進行操作,splice表示對任意陣列元素進行刪減。
sort
sort()可以對當前Array進行排序,它會直接修改當前Array的元素位置,直接呼叫時,按照預設順序排序:
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
能否按照我們自己指定的順序排序呢?完全可以,我們將在後面的函式中講到。
reverse
reverse()把整個Array的元素給掉個個,也就是反轉:
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']
splice
concat
concat()方法把當前的Array和另一個Array連線起來,並返回一個新的Array:
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
請注意,concat()方法並沒有修改當前Array,而是返回了一個新的Array。
實際上,concat()方法可以接收任意個元素和Array,並且自動把Array拆開,然後全部新增到新的Array裡:
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
join
join()方法是一個非常實用的方法,它把當前Array的每個元素都用指定的字串連線起來,然後返回連線後的字串:
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
如果Array的元素不是字串,將自動轉換為字串後再連線。
物件:
var person = {
name: 'Bob',
age: 20,
show: function(){
} ,
} .
delete person.name ,刪除物件的一個元素。
"name" in person: //true,判斷物件是不是有這個屬性
其實js的函式就可以表示一個物件。以下用建構函式和原型定義了一個物件類
function Car(colors,doors){
this.colors = colors;
this.doors = doors;
}
Car.prototype.showColor = function showColor(){
alert(this.color);
};
var car1 = new Car("red",4);
var car2 = new Car("blue",6);
字串:
var str = "hello" + "world";
常用介面函式
toUpperCaset:把一個字串全部變為大寫:
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
toLowerCase:把一個字串全部變為小寫:
var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'並賦值給變數lower
lower; // 'hello'
indexOf:會搜尋指定字串出現的位置:
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 沒有找到指定的子串,返回-1
substring:返回指定索引區間的子串:
var s = 'hello, world'
s.substring(0, 5); // 從索引0開始到5(不包括5),返回'hello'
s.substring(7); // 從索引7開始到結束,返回'world'
多行字串
由於多行字串用\n寫起來比較費事,所以最新的ES6標準新增了一種多行字串的表示方法,用反引號 ` ... ` 表示:
`這是一個
多行
字串`;
Map:是一組鍵值對的結構。
var map = new Map(["name","vince"]);
map.set("age",1);
map.has("name")
map.get("age")
一個key只能對應一個value。
2,函式
arguments
類似array,表示當前函式呼叫者傳入的所有引數
相關文章
- Vuejs基本知識(九)【路由】VueJS路由
- ExtJs 基本知識學習JS
- Vuejs基本知識(十)【使用樣式】VueJS
- nodejs:window10下的nodejs基本知識NodeJS
- Vuejs基本知識(十三)【表單的提交】VueJS
- javaweb基本知識JavaWeb
- shell基本知識
- ldap基本知識LDA
- Thymeleaf基本知識
- Ajax基本知識
- NBU基本知識
- WiFi基本知識WiFi
- ORACLE基本知識Oracle
- 1、基本知識
- DAX 基本知識
- Uboot基本知識boot
- git基本知識Git
- Vuejs基本知識(一)【專案資料夾基本結構】VueJS
- Vuejs基本知識(五)【檢視中的渲染】VueJS
- Vuejs基本知識(十二)【表單的繫結】VueJS
- Vuejs基本知識(四)【頁面渲染過程 】VueJS
- Vagrant (一) - 基本知識
- 影像的基本知識
- 基本網路知識
- Oracle 基本知識(轉)Oracle
- SYBASE IQ 基本知識
- 閥門基本知識
- 脫殼基本知識
- Vuejs基本知識(三)【語法簡寫說明】VueJS
- (二)前端基本功:JS必記知識點+案例前端JS
- C++基本知識點C++
- Javascript物件的基本知識JavaScript物件
- buffer cache基本知識點
- java 基本知識導航Java
- QuickReport基本知識 (轉)UI
- java基本知識備註Java
- 磁碟的基本知識和基本命令
- Vuejs基本知識(八)【頁面間的引數傳遞】VueJS