真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

前端基礎(chǔ)之JavaScript（二）

一、函數(shù)

1.1 函數(shù)定義

JavaScript中的函數(shù)和Python中的非常相似，只是定義方式有點區(qū)別。

10年的大安市網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整大安市建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“大安市網(wǎng)站設(shè)計”,“大安市網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

// 普通函數(shù)定義
function f1() {
  console.log("Hello world!");
}

// 帶參數(shù)的函數(shù)
function f2(a, b) {
  console.log(arguments);  // 內(nèi)置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數(shù)
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調(diào)用函數(shù)

// 匿名函數(shù)方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即執(zhí)行函數(shù) ==> 書寫立即執(zhí)行的函數(shù)，首先先寫兩個括號()()這樣防止書寫混亂
(function(a, b){
  return a + b;
})(1, 2);

補充：

ES6中允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就是用圓括號代表參數(shù)部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //這里的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數(shù)組或?qū)ο笾?}

1.2 函數(shù)中的arguments參數(shù)

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相當于將傳入的參數(shù)全部包含，這里取得就是第一個元素1
}

add(1,2)

輸出：

3
2
1

注意：

函數(shù)只能返回一個值，如果要返回多個值，只能將其放在數(shù)組或?qū)ο笾蟹祷亍?/p>

1.3 函數(shù)的全局變量和局部變量

  • 局部變量

    在JavaScript函數(shù)內(nèi)部聲明的變量（使用var）是局部變量，所以只能在函數(shù)內(nèi)部訪問它（該變量的作用域是函數(shù)內(nèi)部）。只要函數(shù)運行完畢，本地變量就會被刪除。

  • 全局變量

    在函數(shù)外聲明的變臉就是全局變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。

  • 變量生存周期

    • JavaScript變量的生命期從它們被聲明的時間開始。
    • 局部變量會在函數(shù)運行以后被刪除。
    • 全局變量會在頁面關(guān)閉后被刪除。

1.4 作用域

首先在函數(shù)內(nèi)部查找變量，找不到則到外層函數(shù)查找，逐步找到最外層。與Python作用域關(guān)系查找一模一樣！

幾個例子：

  1.  var city = "BeiJing";
 function f() {
   var city = "ShangHai";
   function inner(){
     var city = "ShenZhen";
     console.log(city);
   }
   inner();
 }
 
 f();  //輸出結(jié)果是ShenZhen

  2.  var city = "BeiJing";
 function Bar() {
   console.log(city);
 }
 function f() {
   var city = "ShangHai";
   return Bar;
 }
 var ret = f();
 
 ret();  // 打印結(jié)果是BeiJing

  3.  // 閉包函數(shù)
 var city = "BeiJing";
 function f(){
     var city = "ShangHai";
     function inner(){
         console.log(city);
     }
     return inner;
 }
 var ret = f();
 
 ret();  // 打印結(jié)果是ShangHai

二、詞法分析

JavaScript中在調(diào)用函數(shù)的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數(shù)調(diào)用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），并會分析以下3個方面：

  1. 函數(shù)參數(shù)，如果有，則將此參數(shù)賦值給AO，且值為undefined。如果沒有，則不做任何操作。
  2. 函數(shù)局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，并且值為undefined。
  3. 函數(shù)聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。

函數(shù)內(nèi)部無論是使用參數(shù)還是使用局部變量都到AO上找。

看兩個例子：

  1.  var age = 18;
 function foo(){
   console.log(age);
   var age = 22;
   console.log(age);
 }
 
 foo();  // 問：執(zhí)行foo()之后的結(jié)果是？


  2.  var age = 18;
 function foo(){
   console.log(age);
   var age = 22;
   console.log(age);
   function age(){
     console.log("呵呵");
   }
   console.log(age);
 }
 
 foo();  // 執(zhí)行后的結(jié)果是？

答案解析：

詞法分析過程：

  1. 分析參數(shù)，有一個參數(shù)，形成一個 AO.age=undefined;
  2. 分析變量聲明，有一個 var age, 發(fā)現(xiàn) AO 上面已經(jīng)有一個 AO.age，因此不做任何處理
  3. 分析函數(shù)聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

最終，AO上的屬性只有一個age，并且值為一個函數(shù)聲明

執(zhí)行過程：
注意：執(zhí)行過程中所有的值都是從AO對象上去尋找

1、執(zhí)行第一個 console.log(age) 時，此時的 AO.age 是一個函數(shù)，所以第一個輸出的一個函數(shù)；
2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 22；
3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了；

三、內(nèi)置對象和方法

JavaScript中的所有事物都是對象：字符串、數(shù)字、數(shù)組、日期等等。在JavaScript中，對象是擁有屬性和方法的數(shù)據(jù)。

之前在學(xué)習(xí)基本數(shù)據(jù)類型的時候已經(jīng)帶大家了解了，JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的區(qū)別：typeof s1 --> string 而 typeof s2 --> Object

3.1 自定義對象

JavaScript的對象（Object）本質(zhì)上是鍵值對的集合（Hash結(jié)構(gòu)），但是只能用字符串作為鍵。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷對象中的內(nèi)容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

但事情并沒有那么簡單……

創(chuàng)建對象：

var person=new Object();  // 創(chuàng)建一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

注意：

ES6中提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當做鍵。

也就是說。Object結(jié)構(gòu)提供了“字符串--值”的對應(yīng)，Map結(jié)構(gòu)提供了“值--值”的對應(yīng)，是一種更完善的Hash結(jié)構(gòu)實現(xiàn)。

Map：

var m = new Map();

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

擴展（了解）：

// 父類構(gòu)造函數(shù)
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構(gòu)造函數(shù)
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復(fù) constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};

3.2 Date對象

創(chuàng)建Date對象：

//方法1：不指定參數(shù)
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：參數(shù)為日期字符串
var d2 = new Date("2022/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/22 11:12");
console.log(d3.toLocaleString());

//方法3：參數(shù)為毫秒數(shù)（默認從1970/1/1/8:00開始）
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數(shù)為年月日小時分鐘秒毫秒（其中月份是從0開始計數(shù)）
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接顯示

Date對象的方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完整年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(shù)(從1970/1/1午夜)

案例：將當前日期按“2022-2-12 11:11 星期六”格式輸出。

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定義一個數(shù)字與星期的對應(yīng)關(guān)系對象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是從0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元運算

    var week = WEEKMAP[d1.getDay()];  //星期是從0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

詳細Date對象方法：點我

3.3 JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉(zhuǎn)換成對象——反序列化
var obj = JSON.parse(str1); 
// 對象轉(zhuǎn)換成JSON字符串——序列化
var str = JSON.stringify(obj1);

關(guān)于序列化：

"""
Python中:
       json.dumps()  # 序列化
       json.loads()  # 反序列化
JS中:
    	JSON.stringify()  # 序列化
       JSON.parse()  # 反序列化
"""

3.4 RegExp對象

// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗數(shù)據(jù)
reg1.test('jason666')
reg2.test('jason666')

/*第一個注意事項，正則表達式中不能有空格*/ 
/*第二個注意事項，全局匹配時有一個lastIndex屬性*/
// 全局匹配
var s1 = 'jasondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('jasondsb');
reg2.test('jasondsb');
reg2.lastIndex;


// 校驗時不傳參數(shù)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

擴展閱讀

3.5 Math對象

abs(x)      返回數(shù)的絕對值。
exp(x)      返回 e 的指數(shù)。
floor(x)    對數(shù)進行下舍入。
log(x)      返回數(shù)的自然對數(shù)（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數(shù)。
round(x)    把數(shù)四舍五入為最接近的整數(shù)。
sin(x)      返回數(shù)的正弦。
sqrt(x)     返回數(shù)的平方根。
tan(x)      返回角的正切。

當前標題：前端基礎(chǔ)之JavaScript（二）
轉(zhuǎn)載注明：http://weahome.cn/article/dsojejc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部