JavaScript基礎

JavaScript基礎

JS的基本數據類型

數值類型

• parseInt():把字符串中的數據轉換成數值
• • 例：parseInt('123') parseInt('2.34')的值爲2，此方法從轉邊開始檢查，碰到不認識的字符就停止，所以值爲2
• • 例：parseInt('100',2) 將‘100’按2進制轉換成10進制的值 爲4，parseInt('100',8) 值爲64，parseInt('100',undefined)值爲100
• toString():轉成字符串
• isFinite()：判斷是否爲數字
• isNaN():判斷是否爲非數字
• parseFloat():轉換成小數

  布爾類型

• true 和false
• 以下6種方式全爲flase：undefined, null, false, 0, NaN, ""或""(空字符串)

  字符串類型

• 用單引號或雙引號表示；多行字符串用 \n相連；ES6標準用反引號,用+拼接
  例：var hello = `hi, i am yhy`
• 引用變量：用$來引用
  `${hello}`
• hello.charAt(n):取hello中第n個字符
• 字符串接接：'a'+'b'+'c'
• hello.indexof('h'):返回h所在的位置，沒找到返回-1； indexof('i',2) 從第2個位置起查找
• hello.lastIndexof('h'):從最後邊開始查找
• hello.slice(1,9): 取hello中第一個到第9個的值
• hello.split('i'): 以i來分割字符串，得到的值中不包括i
• hello.toLowerCase():把字符串轉換成小寫
• hello.toUpperCase():把字符串轉換成大寫
• hello.includes():返回布爾值，表示是否找到了參數字符串 hello.includes('hello')
• hello.startsWith() hello.endsWith()
• hello.repeat(n):字符串重複n次
• hello.padEnd(n,'xxx'):在字符串後補充xxx來湊夠n位
• hello.padStart(n,'xxx'):在字符串前補充,第二個參數省略的話用空格補充

  內置類型之null與undefined

• null 值爲空，有類型，是一個對像不是全局標識符
• undefined 未定義，沒有類型；是全局標識符
• null === undefined false 三個=號即比較內容又比較類型
• null == undefined true 兩個=號比較內容
• ！null true
• isNaN(1+null) false 1加上一個空後變爲有值，是一個數字類型，所以爲false
• isNaN(1+undefined) true 1加上一個未定義類型後有值 ，但沒有類型，所以爲true

  symbol類型

• 一種新的類型，得到一個唯一的值，不會被輕易的改掉
• let s=Symbol() ES6之後用let定義變量名

ES6的類數組array-like對象

• 聲明：var alist=[],添加元素alist[索引]=元素
• 特性：可以存不同的數據類型，數組長度可變，索引可以是數字也可以是字符串，可以多層嵌套
• 長度：可變
• 方法：concat()連接數組,返回一個值；join()將數組元素連接起來形成一個字符串，pop()刪除並返回該元素，push()添加元素，reverse()倒序數組，shift()移出元素
  slice()返回數組的一部分，sort()排序；splice()插入，刪除或替換元素，unshift()在頭部插入元素

var aList = []
undefined
var aList = [1,2,3,4,5]
undefined
aList
Array(5) [ 1, 2, 3, 4, 5 ]
typeof aList
"object"
aList.name='yhyang'
"yhyang"
aList
(5) […]
​
0: 1
​
1: 2
​
2: 3
​
3: 4
​
4: 5
​
length: 5
​
name: "yhyang"
​
<prototype>: Array []
aList.length
5
aList.age=18
18
aList.length
5
aList.length=3
3
aList
Array(3) [ 1, 2, 3 ]
delete aList["name"]
true
aList
Array(3) [ 1, 2, 3 ]
delete aList[0]
true
aList
Array(3) [ <1 empty slot>, 2, 3 ]
aList = []
Array []
a
ReferenceError: a is not defined[詳細瞭解] debugger eval code:1:1
aList =[[1,2,3],[4,5,6],[7,8,9]]
Array(3) [ (3) […], (3) […], (3) […] ]
aList
(3) […]
​
0: Array(3) [ 1, 2, 3 ]
​
1: Array(3) [ 4, 5, 6 ]
​
2: Array(3) [ 7, 8, 9 ]
​
length: 3
​
<prototype>: Array []
aList[1][1]
5

ES6的object對象

• 概念：無序的集合，由若干個鍵值對組成；對象是屬性的容器每個屬性有k,v；對象是無類型的，可以嵌套，屬性可以動態添加，屬性都是字符串
• 創建：var obj_a = {} typeof obj_a obj_a.name = 'yhyang' 當key爲關鍵字時obj_b["for"] = 'test',key默認不允許帶-號
  可以這樣obj_b["aaa-bbb"] = 'test'取值的時候也用[""]來取
• 對象的引用，不會被複制：a = b a與b用的是同一份內容
• prototype是標配對象：委託：屬性通過原型鏈往上查找，Object.prototype沒有的屬性會產生undefined 如：obj_a.book這裏book是一個不存在的屬性，
  查找時會一層層的向上查找Object.prototype查找不到時顯示undefined
• 屬性判斷hasOwnProperty:不檢查原型鏈
• 刪除：delete
• 全局變量：命名空間，唯一使用，靈活可靠

this 關鍵字

• 直接被調用的函數，this爲全局對象
• 被某個對象調用的函數，this爲當前對象

var obj_this = {name:'yhyang'}
obj_this.doSomeThing = function(){
    console.log(this);   //此處的this爲對象obj_this調用，所以值爲name:'yhyang'
    var that = this;
    function test(){
        console.log(this);  //此處this爲全局this
        console.log(that);
    }
    test();
}
obj_this.doSomeThing();

function hello(){
    console.log(this);   //此處this爲全局this
    obj = {}
    obj.f = function test(){
        console.log(this);   //此處this爲對象f的this，所以值爲f
    }
    obj.f();
  }
 hello();

函數

函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
JavaScript 函數語法

函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：

function functionname()
{
這裏是要執行的代碼
}

函數表達式

JavaScript 函數可以通過一個表達式定義。

函數表達式可以存儲在變量中：

var x = function (a, b) {return a * b};

在函數表達式存儲在變量後，變量也可作爲一個函數使用：

var x = function (a, b) {return a * b};
var z = x(4, 3);

作用域

塊級作用域

function f5(){
    let n = 5;
    if(true){
    let n=10;
    }
    console.log(n);   
}

f5();

此時打印的值爲5，let定義的n=5 n=10分屬於兩個塊

function f10(){
    var n=5;
    if(true){
    var=10;
    }
    console.log(n);
}
f10();

此時打印10，當變量用var定義時，後邊的會把前邊的的覆蓋，var n=10會提升到var n=5的位置。

function foo(){
    const a=true;
    function bar(){
    const a=false;
    console.log(a);
    }
    bar();
    console.log(a);
}

foo();

在不同的塊中，同名的const變量可以重新賦值

var tmp = new Date();
function ff(){
    //var tmp;
    console.log(tmp);
    if(false){
    console.log(tmp);
    var tmp='hello';
}
}
ff();

上例中第一個console.log(tmp)會打印undefined，原因是最後邊的var tmp='hello'會提升到function的下邊變成var tmp，只是定義，沒有值，所以會打印undefined

//var的for循環

var s='hello';
for(var i=0;i<s;i++){
    console.log(s[i]);
}
i;

會打印i的值爲5，把var換成let可讓i只在for內部使用，i的值變爲is not defined

閉包

• 定義在函數內部的函數，作用爲讀取函數裏面的變量

function createIncrementor(start){
    return function (){
        return start++;
    };
}

var inc =  createIncrementor(5);
console.log(inc());
console.log(inc());
console.log(inc());
console.log(inc());

5的值會累加

箭頭函數

• 定義語法： =>
• 支持表達式模式和語句模式

var f = v => v;
// 相當於下邊
var f = function (v) {
    return v;
    };

• 如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分

var f = () => 5;
var f = function () {return 5;};
var sum = (num1,num2) => num1 + num2;
var sum = function(num1,num2){return num1 + num2;};

• 代碼塊部分多於一條語句要用{}括起來並且要有return 語句返回

[,'A'].forEach((x,i) => console.log(i));  // forEach方法  x,i對應前邊數組的下標
[7,'A'].forEach((x,i) => console.log(i));
[7,'A'].forEach(i => console.log(i));
['a',,'b'].filter(x =>true);
[1,2,3,4,5].filter(x => x>2);
[,'a'].every(x => x==='a');
[1,2,3,4,5].every(x => x>2);
[1,,2].reduce((x,y) => x+y);
[,'a'].some(x=>x !=='a')
[,'a'].map(x=>1);
[1,2,3,4,5].map(x => x*2);

箭頭函數作用域

• 和父作用域具有一樣的this,綁定定義時所在的作用域
• 箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this

function Timer(){
    this.s1 = 0;
    this.s2 = 0;
    setInterval(() => this.s1++, 1000);
    setInterval(function(){
    this.s2++;},1000);
    }

var timer = new Timer();

setTimeout(() => console.log('s1:',timer.s1),3100);
setTimeout(() =>console.log('s2:',timer.s2),3100);

ES6的數據結構 Set與Map

• Map 是一級鍵值對的結構，按插入順序排列 const map= new Map() cm.set('name','yhyang')
• • 相關方法:set添加，delete刪除，get獲取值，size查看大小,forEach遍歷內容，clear清空，keys查看鍵，values查看值
• Set 也是一組key的集合，存儲唯一的值 var s1 = new Set() s1.add(1) s1.add(2)
• • 相關方法：add 添加，delete刪除，has判斷有沒有值，clear清空，size大小