日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web基础学习

發布時間:2023/12/18 编程问答 34 豆豆
生活随笔 收集整理的這篇文章主要介紹了 web基础学习 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第3章 web基礎之JavaScript

0.1瀏覽器簡介

瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件(標準通用標記語言的一個應用)內容,并讓用戶與這些文件交互的一種軟件。

國內網民計算機上常見的網頁瀏覽器有,QQ瀏覽器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲游瀏覽器、世界之窗瀏覽器等,瀏覽器是最經常使用到的客戶端程序。

常用的五大瀏覽器:chrome,firefox,Safari,ie,opera;

我們用的最多的則是 chrome(谷歌瀏覽器) 和 Firefox(火狐瀏覽器)

0.2 編輯器

Sublime Text、VSCode、Atom、Brackets、WebStorm、Notepad++、HBuilder、Vim、記事本…

0.3JavaScript語言的強大

http://impress.github.io/impress.js/
http://naotu.baidu.com/
http://echarts.baidu.com/index.html

總結:

擺正學習心態;編程基本功要練好;編程使用的工具要熟悉且順手;我們要學的 JavaScript 很強大;

第1章 JavaScript介紹

1.1 JavaScript編程語言

JavaScript,簡稱JS,是一種客戶端腳本語言,主要用來向HTML網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。

可以直接嵌入HTML頁面,但寫成單獨的js文件有利于結構和行為的分離。

在絕大多數瀏覽器的支持下,可以在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等)

JS主要運行于客戶端(瀏覽器),也可以運行在服務端(操作系統)

JavaScript 和 Java 是兩種不同的編程語言:JavaScript主要用于客戶端,Java用于服務端。

JavaScript現在的意義(應用場景)

JavaScript 發展到現在幾乎無所不能。

  • 網頁特效
  • 服務端開發(Node.js)
  • 命令行工具(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物聯網(Ruff)
  • 游戲開發(cocos2d-js)
  • 1.2 發展及歷史

    1994年Netscape公司推出免費版本瀏覽器 Netscape Navigator(網景瀏覽器1.0)
    1995年微軟公司發布 Internet Explorer 1.0。
    1995年網景公司為適應市場變化,需要開發一門專門在瀏覽器運行的腳本語言,這個任務交給了布蘭登,為了應付公司安排的任務,
    他只用10天時間就提交了工作,并將這門語言命名為 LiveScript;
    后來為了蹭sun公司java的熱度,與sun公司合作,將其臨時改名為“JavaScript”;
    1996年8月,微軟模仿JavaScript開發了一種相近的語言,取名為JScript,首先內置于IE 3.0
    1997年7月,ECMA組織發布ECMAScript 1.0版;
    此后,明爭暗斗不斷,1998年6月,ECMAScript 2.0版發布,1999年12月,ECMAScript 3.0版發布;
    2007年10月,ECMAScript 4.0版草案發布,2008年7月中止ECMAScript 4.0的開發,并發布3.1版本;
    會后不久,ECMAScript 3.1就改名為ECMAScript 5。
    2011年6月,ECMAscript 5.1版發布,現在使用最為廣泛的版本 版發布,現在使用最為廣泛的版本;
    2015年6月,ECMAScript 6正式發布,并且更名為“ECMAScript 2015”;
    隨后,ECMA組織決定,每年發布一個升級版本,以年號來代替版本號,如:ECMAScript 2016、ECMAScript 2017;

    另外:
    1996年,樣式表標準CSS第一版發布;
    1997年,DOM模式第一版正式應用,目前的通用版本是DOM3,下一代版本DOM 4正在擬定中。
    1999年,IE5部署了XMLHttpRequest接口,允許JavaScript發出HTTP請求;
    2001年,提出了JSON格式,用于取代XML格式。
    2002年,Mozilla項目發布第一版Firefox。
    2003年,蘋果公司發布了Safari瀏覽器的第一版。
    2006年,jQuery函數庫誕生
    2007年,Webkit引擎在iPhone手機中得到部署;
    2008年,為Chrome瀏覽器而開發的V8編譯器(解析引擎)誕生;
    2009年,基于V8解析引擎的Node.js項目誕生,迎來前后端JS的霸權時代;
    2009年,Google發布Chrome OS
    2009年,Google發布Angular框架;
    2013年,Mozilla基金會發布手機操作系統Firefox OS,該操作系統的整個用戶界面都使用JavaScript;
    2013年5月,Facebook發布UI框架庫React;
    2014年,尤雨溪發布開源前端開發庫Vue.js;
    2015年3月,Facebook公司發布了 React Native項目;

    1.3 JavaScript和HTML、CSS

  • HTML:提供網頁的結構,提供網頁中的內容

  • CSS: 用來樣式排版、美化網頁

  • JavaScript: 可以用來控制網頁內容,給網頁增加動態的效果

  • 1.4 JavaScript的組成

    ECMA 歐洲計算機制造聯合會;
    ECMAScript 是一套標準,定義了一種語言的標準,規定了基本語法、數據類型、關鍵字、具體API的設計規范等,解析引擎設計的參考標準,但與具體實現無關;

    1.4.1 ECMAScript - JavaScript的核心

    ECMAScript是一套語法標準,描述了JavaScript語言的基本語法和數據類型,是JavaScript的核心。 ES5 ES6

    1.4.2 BOM - 瀏覽器對象模型

    一套操作瀏覽器功能的API

    通過BOM可以操作瀏覽器窗口,比如:彈出框、控制瀏覽器跳轉、獲取分辨率等

    1.4.3 DOM - 文檔對象模型

    一套操作頁面元素的API

    DOM可以把HTML看做是文檔樹,通過DOM提供的API可以對樹上的節點進行操作

    1.5 JS學習概況

    我們在學習JS時,需要學習的內容分為兩部分,語言結構宿主環境提供的API;

    語言結構部分主要時語言規則及內置對象;

    而宿主環境的API,根據宿主環境不同而不同,以瀏覽器為例(js還可以運行在服務器/操作系統),最常見的三個類型:
    瀏覽器控制類、DOM操作類、網絡控制類;

    總結:

    JavaScript編程語言簡稱 JS,是一種嵌入式的腳本語言,應用范圍及其廣泛,由布蘭登-艾奇開發,在20+年的發展中歷經滄桑,學習 JS 分為語言規則及宿主環境兩部分;

    第2章 入門

    2.1 如何寫一段JS代碼并運行

    • 寫在行內
    01.html: <input type="button" value="按鈕" onclick="alert('Hello World')" />
    • 寫在script標簽中 *
    02.html: <head><script>alert('Hello World!');</script> </head>
    • 寫在外部js文件中,在頁面引入
    03.html: <script src="main.js"></script> main.js:alert('Hello World!');

    注意點: 引用外部js文件的 script 標簽中不可以再寫JavaScript代碼,即使寫了也不會執行,沒有作用

    2.3 變量

    2.3.1 什么是變量

    • 什么是變量

      變量是計算機內存中存儲數據的標識符,根據變量名稱可以獲取到內存中存儲的數據

    • 為什么要使用變量

      使用變量可以方便的獲取或者修改內存中的數據

    變量就是存儲數據的容器;

    2.3.2 如何使用變量

    • var聲明變量
    var age;
    • 變量的賦值
    var age; age = 18;
    • 同時聲明多個變量
    var age, name, sex; age = 10; name = 'zs';
    • 同時聲明多個變量并賦值
    var age = 10, name = 'zs';

    2.3.3 變量的命名規則和規范

    • 規則 - 不遵守會報錯

      • 由字母、數字、下劃線、$符號組成,且不能以數字開頭

      • 區分大小寫

      • 不能是關鍵字和保留字,例如:for、while。

    • 規范 - 不遵守不會報錯

      • 變量名必須有意義
      • 遵守駝峰命名法。(首字母小寫,后面單詞的首字母需要大寫。例如:userName、userPassword)
    • 下面哪些變量名不合法

      a 1 age18 18age name $ $name _sex &sex theworld theWorld

    name變量名,本身不是保留字/關鍵字, 建議少用。 name在有的瀏覽器中,是自動聲明過的。

    2.3.4 案例

  • 交換兩個變量的值
  • var a = '1'; var b = '2'; // 借助第三個變量 var c = a; a=b; b=c; console.log(a,b);
  • 不使用臨時變量,交換兩個數值變量的值
  • //第二種方式 var num1 = 10; var num2 = 20; //計算的方式:累加,然后相減 num1 = num1 + num2;//num1的結果是30 num2 = num1 - num2;//num2的結果是10 num1 = num1 - num2;//num1的結果是20 console.log(num1); console.log(num2);

    2.3.5 代碼調試(輸出變量)

  • alert 彈框 :瀏覽器頁面彈框
  • var num1 = 10; alert(num1);
  • console.log() 瀏覽器console控制臺
  • var num1 = 10; var num2 = 20; console.log(num1); console.log(num1, num2);
  • document.write() 瀏覽器頁面中
  • var num1 = 10; document.write(num1);

    2.4 數據類型

    2.4.1 簡單數據類型

    Number、String、Boolean、Undefined、Null

    獲取變量的類型

    typeof

    var age = 18; console.log(typeof age); // 'number'
    Number類型
    • 數值字面量:數值的固定值的表示法(數值直接量)

      110 1024 60.5

    • 浮點數(小數)

    • 浮點數的精度問題

    浮點數var n = 5e-324; // 科學計數法 5乘以10的-324次方 浮點數值的最高精度是 17 位小數,但在進行算術計算時其精確度遠遠不如整數var result = 0.1 + 0.2; // 結果不是 0.3,而是:0.30000000000000004console.log(0.07 * 100);不要判斷兩個浮點數是否相等
    • 數值范圍

      最小值:Number.MIN_VALUE// 這個值為: 5e-324 5乘以10的-324次方 最大值:Number.MAX_VALUE// 這個值為: 1.7976931348623157e+308 無窮大:Infinity 無窮小:-Infinity
    String類型
    • 字符串字面量(直接量)

    • ‘abc’ “abc” 單雙引號引起來的一連串字符

      注: 轉義后單雙引號 只能 就近和轉義后的單雙引號進行配對

    • 轉義符

    注: \b 退格符 \f又叫走紙或進紙或 換頁符

    var s = '我很喜歡 \"黑馬 \'程序猿\' \"'; console.log(s);
    • 字符串長度

    length屬性用來獲取字符串的長度

    var str = '黑馬程序猿 Hello World'; console.log(str.length);
    • 字符串拼接

    字符串拼接使用 + 連接

    console.log(11 + 11); console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log('male:' + true);
  • 兩邊只要有一個是字符串,那么+就是字符串拼接功能
  • 兩邊如果都是數字,那么就是算術功能。
  • Boolean類型
    • Boolean字面量: true和false,區分大小寫
    • 計算機內部存儲:true為1,false為0
    Undefined和Null
  • undefined表示一個聲明了沒有賦值的變量,變量只聲明的時候值默認是undefined
  • null表示一個空,變量的值如果想為null,必須手動設置
  • 注: 關于undefined和null是一個面試中很容易被問到的問題

    2.4.2 復雜數據類型

    ? Object 對象:保存很多數據的一種數據類型

    console.log('ss',2,null,undefined,true);

    2.5 注釋

    被注釋的內容是不執行的,不管什么內容都不會運行;

    單行注釋

    用來描述下面一個或多行代碼的作用

    // 這是一個變量 var name = 'hm';

    多行注釋

    用來注釋多條代碼

    /* var age = 18; var name = 'zs'; console.log(name, age); */

    總結:

    JS代碼的書寫,變量的聲明方式,數據類型,注釋;

    第3章 數據類型轉換

    3.1 轉換成字符串類型

    • toString()

      var num = 5; console.log(num.toString());
    • String()

      var s = null; console.log(s.toString()); console.log(String(s));// String()函數存在的意義:有些值沒有toString(), // 這個時候可以使用String()。比如:undefined和null
    • 拼接字符串方式

      num + “”,當 + 兩邊一個操作符是字符串類型,一個操作符是其它類型的時候,會先把其它類型轉換成字符串再進行字符串拼接,返回字符串

    3.2 轉換成數值類型

    • Number()

      var a = Number('1'); var b = Number(1); var c = Number('c'); var d = Number(null); var e = Number(undefined);console.log(a,b,c,d,e); // 1 1 NaN 0 NaN// Number()可以把任意值轉換成數值,如果要轉換的字符串中有一個不是數值的字符,返回NaN
    • parseInt()

      var a = parseInt('1.2df'); var b = parseInt(1); var c = parseInt('c12'); var d = parseInt(null); var e = parseInt(undefined);console.log(a,b,c,d,e); //1 1 NaN NaN NaN// 如果第一個字符是數字會解析,直到遇到非數字結束 // 如果第一個字符不是數字或者符號就返回NaN
    • parseFloat()

      var a = parseFloat('1.2df'); var b = parseFloat('1.3.4'); var c = parseFloat('c12'); var d = parseFloat(null); var e = parseFloat(undefined);console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN// parseFloat() 把字符串轉換成浮點數 // parseFloat()和parseInt非常相似, // 不同之處在與parseFloat會解析第一個 . 遇到第二個.或者非數字結束 // 如果解析的內容里只有整數,解析成整數
    • +,-,-0 等運算

      var str = '500'; console.log(+str); // 取正 console.log(-str); // 取負 console.log(str - 0);

    3.3 轉換成布爾類型

    • Boolean()
    var a = Boolean('0'); var b = Boolean(0); var c = Boolean('1'); var d = Boolean(null); var e = Boolean(undefined); var f = Boolean(NaN);console.log(a,b,c,d,e,f); //true false true false false false// 0、''(空字符串) 、null、 undefined 、NaN 會轉換成false 其它都會轉換成true

    總結:

    字符串、數值及布爾類型的數據類型轉換

    第4章 操作符

    表達式:值和操作符,運算會有一個結果;

    同時,表達式中的每個數值及部分表達式,又稱為 子表達式

    4.1 算術運算符

    + - * / % 取余(取模)

    4.2 一元運算符 *

    一元運算符:只有一個操作數的運算符,一元運算會直接修改原始變量的數據;

    5 + 6 兩個操作數的運算符 二元運算符

    ++ 自身加 (自增)

    – 自身減 (自減)

    • 前置++

      var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2); //13
    • 后置++

      var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++); //12
    • 猜猜看

      var a = 1; var b = ++a + ++a; console.log(b); //5var a = 1; var b = a++ + ++a; console.log(b);//4var a = 1; var b = a++ + a++; // console.log(b); // 3var a = 1; var b = ++a + a++; console.log(b);//4

      總結
      前置++:先加1,后參與運算
      后置++:先參與運算,后加1

      后置++ 運算的兩個條件,滿其一就會執行

      1:整個表達式結束;2表達式沒結束但是又被使用了;

      上面兩個理解后,下面兩個自通
      前置-- :先減1,后參與運算
      后置-- :先參與運算,后減1

    4.3 邏輯運算符(布爾運算符) *

    && 與 左邊為真則取右邊,左邊為假則取左邊 || 或 左邊為真則取左邊,左邊為假則邊右邊 ! 非 取反 var a = 1; var b = 2; var c = 0;console.log(a || b); //1 console.log(b || a); //2 console.log(c && a); //0 console.log(a || c && b); //1// JS邏輯運算中的邏輯或和邏輯與的運算結果: // 決定整個表達式的子表達式的值

    4.4 關系運算符(比較運算符)

    < > >= <= == != === !== =====的區別:==只進行值得比較,===類型和值同時相等,則相等var result = '55' == 55; // true var result = '55' === 55; // false 值相等,類型不相等 var result = 55 === 55; // true

    4.5 賦值運算符

    注意與數學符號的差別;

    = += -= *= /= %=

    例如: var num = 0; num += 5; //相當于 num = num + 5;

    4.6 運算符的優先級 *

    優先級從高到底 1. () 優先級最高 2. 一元運算符 ++ -- ! 3. 算數運算符 先* / % 后 + - 4. 關系運算符 > >= < <= 5. 相等運算符 == != === !== 6. 邏輯運算符 先&& 后|| 7. 賦值運算符 // 練習1: var s = 4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true console.log(s); //true// 練習2: var num = 10; var f = 5 == num / 2 && (2 + 2 * num) console.log(f.toString() === 22) //false

    總結:

    操作符的使用,基本數學運算,一元運算符自增自減及前置后置的區別,邏輯運算符及取值,關系比較運算符,賦值運算符,運算符優先級;

    第5章 流程控制

    程序的三種基本結構

    順序結構: 從上到下執行的代碼就是順序結構

    程序默認就是由上到下順序執行的;

    分支結構:根據不同的情況及判斷,執行對應代碼;

    循環結構:重復執行一段代碼;

    5.1 分支結構

    if語句

    語法結構

    if (/* 條件表達式 */) {// 執行語句 }if (/* 條件表達式 */){// 成立執行語句 } else {// 否則執行語句 }if (/* 條件1 */){// 成立執行語句 } else if (/* 條件2 */){// 成立執行語句 } else if (/* 條件3 */){// 成立執行語句 } else {// 最后默認執行語句 }

    案例

    //獲取兩個數字中的最大值 var num1=100; var num2=20; if(num1>num2){console.log(num1); }else{console.log(num2); } // 判斷一個數是偶數還是奇數 var n = 10; if(n%2==0){console.log('偶數'); }else{console.log('奇數'); } /** 例子:* 獲取考試的分數,如果成績是在90(含)分以上的,則顯示級別:A* 如果成績是大于等于80的則:B* 如果成績是大于等于70的則:C* 如果成績是大于等于60的則:D* 如果成績是小于60的則:E** */var score = 91;if (score >= 90) {console.log("A");} else if (score >= 80) {console.log("B");} else if (score >= 70) {console.log("C");} else if (score >= 60) {console.log("D");} else {console.log("E");}

    案例:判斷一個年份是閏年還是平年

    閏年:能被4整除,但不能被100整除的年份 或者 能被400整除的年份

    var n = 2016; if(n%4==0){if(n%100 !=0){console.log('閏年');}else if(n%400 ==0){console.log('閏年');}else{console.log('平年');} }else{console.log('平年'); }
    三元運算符
    表達式1 ? 表達式2 : 表達式3 是對if……else語句的一種簡化寫法

    案例:

    // 是否年滿18歲 var age = 18; var s = age>=18?'Yes':'no'; console.log(s); // 從兩個數中找最大值 var a1 = 110; var a2 = 19; var s = a1>a2?a1:a2; console.log(s);
    switch語句

    語法格式:

    switch (expression) {case 常量1:語句;break;case 常量2:語句;break;case 常量n:語句;break;default:語句;break; }/* * 執行過程: * 獲取表達式的值,和值1比較,相同則執行代碼1,遇到break跳出整個語句,結束 * 如果和值1不匹配,則和值2比較,相同則執行代碼2,遇到break跳出整個語句,結束 * 如果和值2不匹配,則和值3比較,相同則執行代碼3,遇到break跳出整個語句,結束 * 如果和值3不匹配,則和值4比較,相同則執行代碼4,遇到break跳出整個語句,結束 * 如果和之前的所有的值都不一樣,則直接執行代碼5,結束 */ break可以省略,如果省略,代碼會繼續執行下一個case switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換(例如,字符串'10' 不等于數值 10) /* * * 判斷這個人的成績的級別: * 如果是A,則提示,分數在90分以上 * 如果是B,則提示,分數在80分以上 * 如果是C,則提示,分數在70分以上 * 如果是D,則提示,分數在60分以上 * 否則提示,不及格 * */var jiBie="B"; switch (jiBie){case "A" : console.log("分數在90分以上的");break;case "B" : console.log("分數在80分以上的");break;case "C" : console.log("分數在70分以上的");break;case "D" : console.log("分數在60分以上的");break;default :console.log("不及格"); }

    5.2 循環結構

    在JS語言中,循環語句有三種,while、do…while、for循環。

    5.2.1 while語句

    基本語法:

    // 當循環條件為true時,執行循環體, // 當循環條件為false時,結束循環。 while (循環條件) {//循環體 }

    案例1:計算1-100之間所有數的和

    // 初始化變量 var i = 1; var sum = 0; // 判斷條件 while (i <= 100) {// 循環體sum += i;// 自增i++; } console.log(sum);

    案例2:打印100以內 7的倍數

    var i = 1; while(i<100){if(i%7==0){console.log(i);}i++; }

    案例3:打印100以內所有偶數

    var i = 1; while(i<=100){if(i%2==0){console.log(i);}i++; }

    案例4:打印100以內所有偶數的和

    var i = 1; var s = 0; while(i<=100){if(i%2==0){s = s+i;}i++; } console.log(s);

    5.2.2 do…while語句

    do…while循環和while循環非常像,二者經常可以相互替代,

    但是do…while的特點是不管條件成不成立,都會執行一次。

    do {// 循環體; } while (循環條件);

    案例:計算1+2+3+4+……+99+100 的結果

    // 初始化變量 var i = 0; var sum = 1; do {sum += i;//循環體i++;//自增 } while (i <= 100);//循環條件

    5.2.3 for語句

    while和do…while一般用來解決無法確認次數的循環。for循環一般在循環次數確定的時候比較方便

    for循環語法:

    // for循環的表達式之間用的是;號分隔的,千萬不要寫成, for (初始化表達式1; 判斷表達式2; 自增表達式3) {// 循環體4 }

    執行順序:1243 ---- 243 -----243(直到循環條件變成false)

  • 初始化表達式
  • 判斷表達式
  • 自增表達式
  • 循環體
  • //打印1-100之間所有數 for(var i=1;i<=100;i++){console.log(i); }//求1-100之間所有數的和 var s = 0; for(var i=0;i<=100;i++){s+=i; } console.log(s);//求1-100之間所有偶數的和 var s = 0; for(var i=1;i<=100;i++){if(i%2==0){s+=i;} } console.log(s);//打印正方形 var start = ''; for (var i = 0; i < 10; i++) {for (var j = 0; j < 10; j++) {start += '* ';}start += '\n'; } console.log(start);//打印直角三角形 var start = ''; for (var i = 0; i < 10; i++) {for (var j = i; j < 10; j++) {start += '* ';}start += '\n'; } console.log(start);//打印9*9乘法表 var str = ''; for (var i = 1; i <= 9; i++) {for (var j = i; j <=9; j++) {str += i + ' * ' + j + ' = ' + i * j + '\t';}str += '\n'; } console.log(str);

    5.2.4 continue和break

    break:立即跳出整個循環,即循環結束,開始執行循環后面的內容(直接跳到大括號)

    continue:立即跳出當前循環,繼續下一次循環(跳到i++的地方)

    案例1:求1-100之間不能被7整除的整數的和(用continue)

    var s = 0; for(var i=0;i<100;i++){if(i%7==0){continue;}s+=i; } console.log(s);

    案例2:求200-300之間所有的奇數的和(用continue)

    var s = 0; for(var i=200;i<=300;i++){if(i%2==0){continue;}else{s+=i;} } console.log(s);

    案例3:求200-300之間第一個能被7整數的數(break)

    for(var i=200;i<=300;i++){if(i%7==0){console.log(i);break;} }

    總結:

    代碼的執行流程分為順序、分支和循環三種結構,順序結構是默認的,判斷結構主要有if-else和switch-case兩種,循環結構有while、do-while、for三種,其中continue和break是跳出循環;

    第6章 JS中特殊的對象-數組

    基本數據類型,只能存儲一個值(比如:Number/String)。我們想在一個變量中存儲多個值,應該如何存儲?

    所謂數組,就是將多個元素(通常是同一類型)按一定順序排列放到一個集合中,那么這個集合我們就稱之為數組。

    6.1 數組的創建

    // 字面量方式創建數組 var arr1 = []; //空數組 // 創建一個包含3個數值的數組,多個數組項以逗號隔開 var arr2 = [1, 3, 4]; // 創建一個包含2個字符串的數組 var arr3 = ['a', 'c']; console.log(arr1); console.log(arr2); console.log(arr3);// 可以通過數組的length屬性獲取數組的長度 console.log(arr3.length); // 可以設置length屬性改變數組中元素的個數 arr3.length = 0;console.log(arr3[0]);//undefined

    數組的元素可以是任意類型的數據,因此,有時數組中的某個元素的值又是一個數組,而這樣的數組被稱為多維數組,如果數組中只有其他類型的數據,而沒有另外的數組值,這樣的數組被稱為一維數組;

    通常,數組被嵌套N層,則稱為N維數組,最常見的就是二維數組、三維數組、四維數組,超過一維的數組都會被泛稱為多維數組;

    數組的維度值越大,復雜度就越高,開發中盡量避免產生高維度值的數組;

    var arr1 = [a,b,c]; // 一維數組 var arr2 = [a,b,c,[d,e]]; // 二維數組 var arr3 = [a,b,c,[d,e,[f,g]]]; // 三維數組 var arr4 = [a,b,c,[d,e,[f,g,[h,t,y]]]]; // 四維數組

    6.2 獲取數組元素

    // 格式:數組名[下標] 下標又稱索引 // 下標從0開始 // 功能:獲取數組對應下標的那個值,如果下標不存在,則返回undefined。 var arr = ['red',, 'green']; arr[0]; // red arr[1]; // undefined 下標位置沒有數據 arr[2]; // green arr[5]; // 這個數組的最大下標為2,因此返回undefined // 獲取多維數組的數據 var arr = ['路飛','娜美',['巴基','女帝',['佐助','喬巴']]]; console.log(arr[2][2][0]); //佐助

    6.3 遍歷數組

    遍歷:遍及所有,對數組的每一個元素都訪問一次就叫遍歷。

    for循環數組遍歷的基本語法:

    for(var i = 0; i < arr.length; i++) {// 數組遍歷的固定結構 }

    for循環示例:

    var arr1 = [1, 3, 4]; for(var i = 0;i<arr1.length;i++){console.log(arr1[i]); }

    whil循環示例:

    var arr1 = [1, 3, 4]; var i = 0; while(i<arr1.length){console.log(arr1[i]);i++; }

    6.4 為數組修改添加元素

    // 格式:數組名[下標/索引] = 值; // 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。 var arr = ["red", "green", "blue"]; // 把red替換成了yellow arr[0] = "yellow"; // 給數組新增加了一個pink的值 arr[3] = "pink";

    6.5 數組操作案例

    案例1:求數組中的所有數的和

    //求和 var arr = [10, 20, 30, 40, 50]; //定義變量存儲和 var sum = 0; for (var i = 0; i < arr.length; i++) {sum += arr[i]; } console.log("和為:" + sum);

    案例2:獲取數組中的最大值

    //最大值 var arr = [10, 20, 30, 40, 50, 60]; //假設這個變量中的值是最大的 var maxNum = arr[0]; //遍歷數組 for (var i = 0; i < arr.length; i++) {//判斷if (maxNum < arr[i]) {maxNum = arr[i];} } console.log("最大值是:" + maxNum);

    案例3: 遍歷出數組中所有的偶數

    // 遍歷出數組中所有的偶數 var arr = [1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){//判斷if(arr[i]%2==0){console.log(arr[i]);} }

    案例4:將數組轉為字符串并以 | 分割

    //把數組中的每個名字后面拼接一個|然后以字符串的方式輸出 var names = ["卡卡西", "佐助", "鳳姐", "鳴人", "黑崎一護"]; var str = "";//空的字符串,用來存儲最后的拼接的結果的字符串 //不停的遍歷數組的數據,并且拼接字符串 for (var i = 0; i < names.length - 1; i++) {str += names[i] + "|";//拼接字符串的方式 } str += names[names.length - 1]; console.log(str);

    總結:

    數組就是多個數據的集合,有一維數組和多維數組之分,可以使用字面量方式創建數組,使用下標來獲取數組元素數據,使用for或者while循環來遍歷數組元素;

    第7章 函數

    把一段相對獨立的具有特定功能的代碼塊封裝起來,形成一個獨立實體,就是函數,起個名字(函數名),在后續開發中可以反復調用

    函數的作用就是封裝一段代碼,將來可以重復使用

    7.1 函數的聲明及調用

    7.1.1 聲明

    • 關鍵字聲明
    function 函數名(){// 函數體 }
    • 表達式聲明
    var fn = function() {// 函數體 }
    • 特點:

      函數聲明的時候,函數體并不會執行,只要當函數被調用的時候才會執行。
      一個函數一般都特定的用來干 一件 事情

    7.1.2 調用

    • 調用函數的語法:
    函數名();
    • 特點:

      函數體只有在調用的時候才會執行,調用需要()進行調用。
      可以調用多次(重復使用)

    // 聲明函數 function sayHi() {console.log("吃了沒?"); } // 調用函數 sayHi();// 求1-100之間所有數的和 function getSum() {var sum = 0;for (var i = 0; i < 100; i++) {sum += i;}console.log(sum); } // 一段代碼可以多次調用 getSum(); getSum(); getSum();

    7.2 參數

    • 為什么要有參數
    function getSum() {var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(); }// 雖然上面代碼可以重復調用,但是只能計算1-100之間的值 // 如果想要計算n-m之間所有數的和,應該怎么辦呢?
    • 語法:
    // 函數內部是一個封閉的環境,可以通過參數的方式,把外部的值傳遞給函數內部 // 帶參數的函數聲明 function 函數名(形參1, 形參2, 形參...){// 函數體 }// 帶參數的函數調用 函數名(實參1, 實參2, 實參3);
  • 形式參數:在聲明一個函數的時候,為了函數的功能更加靈活,有些值是固定不了的,對于這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值,僅僅起到一個占位置的作用,我們通常稱之為形式參數,也叫形參。
  • 實際參數:如果函數在聲明時,設置了形參,那么在函數調用的時候就需要傳入對應的參數,我們把傳入的參數叫做實際參數,也叫實參。
  • function fn(a, b) {console.log(a + b); } var x = 5, y = 6; fn(x,y); // x,y實參,有具體的值。 // 函數執行的時候會把x,y復制一份給函數內部的a和b, // 函數內部的值是復制的新值,無法修改外部的x,y

    JS 函數在調用時,允許傳多個實參,就是實參個數可以比形參個數多;

    7.3 函數的返回值

    當函數執行完的時候,并不是所有時候都要把結果打印。我們期望函數給我一些反饋(比如計算的結果返回進行后續的運算),這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個值

    返回值語法:

    //聲明一個帶返回值的函數 function 函數名(形參1, 形參2, 形參...){//函數體return 返回值; }//可以通過變量來接收這個返回值 var 變量 = 函數名(實參1, 實參2, 實參3);

    返回值詳解:
    如果函數沒有顯示的使用 return語句 ,那么函數有默認的返回值:undefined
    如果函數使用 return語句,那么跟在return后面的值,就成了函數的返回值
    如果函數使用 return語句,但是return后面沒有任何值,那么函數的返回值也是:undefined
    函數使用return語句后,這個函數會在執行完 return 語句之后停止并立即退出,也就是說return后面的所有其他代碼都不會再執行。

    7.4 函數相關的其它事情

    7.4.1 匿名函數與自調用函數

    匿名函數:沒有名字的函數

    匿名函數如何使用:

    將匿名函數賦值給一個變量,這樣就可以通過變量進行調用

    var fun1 = function(){console.log(1); } fun1();

    匿名函數如果沒有任何變量來表示它,那么就不能直接調用來執行,因此可以通過匿名函數的自調用的方式來執行

    (function () {alert(123); })();

    關于自執行函數(匿名函數自調用)的作用:防止全局變量污染。

    7.4.2 函數本身也是值 *

    function fn() {} console.log(typeof fn);
    • 函數作為參數

    因為函數也是一種值類型,可以把函數作為另一個函數的參數,在另一個函數中調用

    function f1(f){f(); } function f2(){console.log(2); } f1(f2); //2
    • 函數做為返回值

    因為函數是一種類型,所以可以把函數可以作為返回值從函數內部返回。

    function fn(b) {var a = 10;return function () {alert(a+b);} } var f = fn(5); f(); //15

    總結:

    函數是一段代碼的封裝,可重復多次運行,函數的聲明有表達式聲明和關鍵字聲明,使用 ·函數名()· 的方式進行調用,調用時傳入的參數為實參,聲明時的參數時形參,函數使用return返回值,函數可以是沒有名字的匿名函數,函數本身也可以當做值使用;

    第8章 作用域與JS代碼的運行 *

    作用域:變量可以起作用的范圍和區域

    8.1 全局變量和局部變量 *

    • 全局變量與全局作用域

      在任何地方都可以訪問到的變量就是全局變量,全局變量所在的區域就是全局作用域

    • 局部變量

      只在固定的代碼片段內可訪問到的變量,最常見的例如函數內部的變量,就是局部變量。局部變量所在的區域就是局部作用域(函數作用域)

    不使用var聲明的變量是全局變量,不推薦使用。 變量退出作用域之后會銷毀,全局變量關閉網頁或瀏覽器才會銷毀

    8.2 變量提升

    console.log(a); // undefined var a = 2; console.log(a); // a is not defined
    • 變量提升

      定義變量的時候,變量的聲明會被提升到作用域的最上面,變量的賦值不會提升。

    • 函數提升

      JavaScript解析器首先會把當前作用域的函數聲明提前到整個作用域的最前面

    f(); function f(){console.log(12); //12 } var f = 1; function f(){console.log(12); //12 } // 由于函數提升在前,所以被變量聲明替換了; // 執行階段,變量被復制為1,不再是一個函數, f(); // f is not a function

    注:不管是普通變量還是函數,盡量不要出現重名;

    8.3 JS代碼的運行 *

    console.log(s); //undefined var s = 2;

    JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。

    JavaScript解析器執行JavaScript代碼的時候,分為兩個過程:預解析(編譯)過程和代碼執行過程

    預解析過程:

  • 語法檢查,如果有錯誤,直接停止后續步驟不再運行。

  • 把變量和函數的聲明提升到當前作用域的最前面,只會提升聲明,不會提升賦值和調用。

  • 先提升變量后提升函數,如果函數和變量同名,則被替換;

  • 代碼執行過程

    變量的賦值,函數的調用,循環判斷等,根據代碼由上往下順序執行;

    var a = 25; function abc (){alert(a);//undefinedvar a = 10; } abc();// 如果變量和函數同名的話,函數優先做提升 console.log(a); function a() {console.log('aaaaa'); } var a = 1; console.log(a); // 1、---------------- var num = 10; fun(); function fun() {console.log(num); //undefinedvar num = 20; }// 2、---------------- var a = 18; f1(); function f1() {var b = 9;console.log(a); //undefinedconsole.log(b); // 9var a = '123'; }

    8.4 詞法作用域

    變量的作用域是在定義時決定而不是執行時決定的,也就是說詞法作用域取決于編譯階段,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域。

    在 js 中詞法作用域規則:

    • 函數允許訪問函數外的數據.
    • 整個代碼結構中只有函數可以限定作用域.
    • 作用域規則首先使用提升規則分析
    • 如果當前作用規則中有名字了, 就不考慮外面的名字
    var num = 123; function foo() {console.log( num ); } foo();if ( false ) {var num = 123; } console.log( num ); // undefiend

    也就是說:

    函數內部可以訪問函數外部的變量,但是函數外部不可以訪問函數內部的變量;

    函數內部如果有變量,則優先使用內部的變量,如果函數內部沒有,才會使用函數外部的變量;

    8.5 作用域鏈

    只有函數可以制造作用域結構, 那么只要是代碼,就至少有一個作用域, 即全局作用域。凡是代碼中有函數,那么這個函數就構成另一個作用域。如果函數中還有函數,那么在這個作用域中就又可以誕生一個作用域。將這樣的所有的作用域列出來,可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。 var a = 1; function fn1(){function fn2(){function fn3(){console.log(a);}fn3();}fn2(); } fn1(); var a = 1; function fn1(){var a = 2;function fn2(){var a = 3;function fn3(){console.log(a);}fn3();}fn2(); } fn1();

    總結:

    函數內部是JS代碼的局部作用域,函數外部是全局作用域,JS 代碼的運行分為與解析階段和執行階段,變量的聲明實在與解析階段的,所以變量存在提升,而變量只在自己的作用域中起作用,但是自己作用域是可以訪問上級作用域的;

    第9章 對象(Object)

    9.1 什么是對象

    萬物皆對象

    現實生活中:萬物皆對象,對象是一個具體的事物,一個具體的事物就會有行為和特征。

    9.2 JavaScript中的對象

    JavaScript中的對象其實就是生活中對象的一個抽象 JavaScript的對象是無序屬性的集合。 其屬性可以包含基本值、對象、數組或函數。 對象就是一組沒有順序的值。 我們可以把JavaScript中的對象想象成鍵值對,其中值可以是數據和函數。 對象的行為和特征特征---屬性行為---方法

    事物的特征在對象中用屬性來表示。

    事物的行為在對象中用方法來表示。

    屬性和方法統稱為對象的成員。

    9.3 如何得到一個對象

    • 字面量方式創建對象

      var obj1 = {};//得到一個空對象 var obj2 = {name:'張三',age:18};//得到擁有兩個屬性的對象 //得到擁有兩個屬性和一個方法的對象 var obj3 = {name:'張三',age:18,fei:function(){console.log('你上天啊!');} }
    • new Object() 創建對象 (內置構造函數)

      var person = new Object();person.name = 'lisi'; person.age = 35; person.sayHi = function(){console.log('Hello,everyBody'); }
    • 自定義構造函數創建對象

      function Person(name,age,job){this.name = name;this.age = age;this.job = job;this.sayHi = function(){console.log('Hello,everyBody');} } var p1 = new Person('張三', 22, 'actor');

    new關鍵字和構造函數

    構造函數 ,是一種特殊的函數,又叫做函數構造器。主要用來在創建對象時初始化對象, 即為對象成員變量賦初始值,總與new運算符一起使用在創建對象的語句中。

  • 構造函數用于創建一類對象,首字母通常大寫。

  • 構造函數要和new一起使用才有意義。

  • new 關鍵字也讀做實例化。實例化構造函數,得到一個對象。

  • 9.4 this 的指向

    JavaScript中的this指向問題,比較復雜,有時候會讓人難以捉摸,隨著學習的深入,我們會不斷接觸this,

    在學習過程中,我們可以不斷總結,最終搞清楚this在何種情況下指向何處……

    目前,我們只需要記住以下兩點就可以了:

    1: 函數如果在某個對象下,this就指向這個對象

    2: 函數如果被直接調用,this指向window對象

    var o1 = {name: '山治',f: function () {console.log(this.name);} } o1.f(); // 山治 function f(){console.log(this); } f(); console.log(window);

    9.5 對象的使用

    • 方法及屬性的使用
    對象.方法名()//調用對象的方法 對象.屬性; //獲取對象的屬性
    • 遍歷對象的屬性

    通過for…in語法可以遍歷一個對象

    var obj1 = {name:'路飛',age : 17,sex : '男', }for(var k in obj1){console.log(k);console.log(obj1[k]); }

    注意:使用for …in語法,同樣可以遍歷數組

    注意:如果屬性名或方法名,是一個變量,則使用對象[變量名] 語法

    • 刪除對象的屬性
    var obj1 = {name:'路飛',age : 17,sex : '男', }console.log(obj1.age); //17 delete obj1.age; //刪除對象中指定的屬性 console.log(obj1.age); // undefined

    總結:

    創建對象有三種方式,字面量、new內置構造函數及自定義構造函數;對象中有屬性及方法,this指向當前對象,使用 . (點) 語法調用屬性及方法;

    第10章 標準庫對象(內置對象)

    JavaScript 提供了很多個內置對象:Math/Array/Number/String/Boolean…

    對象只是帶有屬性方法的特殊數據類型。

    這里推薦兩個查找資料社區:

    火狐開發者社區–MDN

    微軟開發者社區–MSDN

    10.1 Math對象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

    10.1.1 常用屬性和方法

    Math 是一個內置對象, 它具有數學常數和函數的屬性和方法。不是一個函數對象。

    與其它全局對象不同的是, Math 不是一個構造函數. Math 的所有屬性和方法都是靜態的.

    跟數學相關的運算直接使用Math中的成員即可

    console.log(Math.PI); //圓周率3.141592653589793 Math.random();//介于 0 和 1 之間的偽隨機數。Math.ceil(6.6);//獲取大于或等于提供數值的最小整數--向上取整 Math.floor(8.8);//獲取小于或等于提供數值的最大整數--向下取整 Math.round(9.9);//四舍五入 Math.max(10,20,15);//取多個值中的最大值 Math.min(10,20,15);//取多個值中的最小值 Math.pow(10,2);//返回x的y次冪 Math.sqrt(100);//求平方根

    10.1.2 案例

    • 求10-20之間的隨機數

      Math.floor(Math.random() * (max - min)) + min;

    10.1.3 屬性方法對照表

    Math對象的屬性(常量)

    屬性(常量)描述
    Math.E 常量數學常數 e。這是歐拉數,自然對數的底。
    Math.LN2 常量2 的自然對數。
    Math.LN10 常量10 的自然對數。
    Math.LOG2E 常量以 2 為底 e 的對數。
    Math.LOG10E 常量以 10 為底 e 的對數。
    Math.PI 常量Pi。這是圓的周長與直徑的比值。
    Math.SQRT1_2 常量0.5 的平方根,或相當于 1 除以 2 的平方根。
    Math.SQRT2 常量2 的平方根。

    Math對象的方法(函數)

    方法(函數)描述
    Math.abs 函數返回數字的絕對值。
    Math.acos 函數返回數字的反余弦值。
    Math.acosh 函數返回數字的雙曲反余弦值(或反雙曲余弦值)。
    Math.asin 函數返回數字的反正弦值。
    Math.asinh 函數返回數字的反雙曲正弦。
    Math.atan 函數返回數字的反正切值。
    Math.atan2 函數將與 X 軸的角度(以弧度為單位)返回到由 y 和 x 坐標表示的點。
    Math.atanh 函數返回數字的反雙曲正切。
    Math.ceil 函數返回大于或等于提供的數值表達式的最小整數。
    Math.cos 函數返回數字的余弦值。
    Math.cosh 函數返回數字的雙曲余弦。
    Math.exp 函數返回 e(自然對數的底)的乘冪數。
    Math.expm1 函數返回 e(自然對數的底)的乘冪數減去 1 的結果。
    Math.floor 函數返回小于或等于提供的數值表達式的最大整數。
    Math.hypot 函數返回參數平方和的平方根。
    Math.imul 函數返回被視為 32 位帶符號整數的兩個數字的積。
    Math.log 函數返回數字的自然對數。
    Math.log1p 函數返回 1 加上一個數字的的自然對數。
    Math.log10 函數返回數字以 10 為底的對數。
    Math.log2 函數返回數字以 2 為底的對數。
    Math.max 函數返回提供的兩個數值表達式中的較大值。
    Math.min 函數返回提供的兩個數字中的較小值。
    Math.pow 函數返回基表達式的指定乘冪數的值。
    Math.random 函數返回介于 0 和 1 之間的偽隨機數。
    Math.round 函數返回舍入到最近整數的指定數值表達式。
    Math.sign 函數返回數字符號,它指示數字為正數、負數還是 0。
    Math.sin 函數返回數字的正弦值。
    Math.sinh 函數返回數字的反雙曲正弦。
    Math.sqrt 函數返回數字的平方根。
    Math.tan 函數返回數字的正切值。
    Math.tanh 函數返回數字的雙曲正切。
    Math.trunc 函數返回數字的整數部分,刪除任何小數數字。

    10.2 Date對象(構造函數)

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

    10.2.1 常用屬性和方法

    創建 Date 實例用來處理日期和時間。Date 對象基于1970年1月1日(世界標準時間)起的毫秒數。

    // 獲取當前時間,UTC世界時間,距1970年1月1日(世界標準時間)起的毫秒數 var now = new Date(); console.log(now.getTime()); // 獲取距1970年1月1日(世界標準時間)起的毫秒數 console.log(now.valueOf()); // valueOf用于獲取對象的原始值,與getTime()方法相同Date構造函數的參數 1. 毫秒數 1498099000356 new Date(1498099000356) 2. 日期格式字符串 '2015-5-1' new Date('2015-5-1') 3. 年、月、日…… new Date(2015, 4, 1) // 月份從0開始
    • 獲取日期的毫秒形式
    var now = new Date(); console.log(now.getTime()); // valueOf用于獲取對象的原始值 console.log(now.valueOf());// HTML5中提供的方法,有兼容性問題 var now = Date.now();// 不支持HTML5的瀏覽器,可以用下面這種方式 var now = + new Date(); // 隱式調用 Date對象的valueOf()
    • 日期格式化方法
    toString() // 轉換成字符串 valueOf() // 獲取毫秒值 // 下面格式化日期的方法,在不同瀏覽器可能表現不一致,一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()
    • 獲取日期指定部分
    getTime() // 返回毫秒數和valueOf()結果一樣,valueOf()內部調用的getTime() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期幾 0周日 6周6 getDate() // 返回當前月的第幾天 getMonth() // 返回月份,***從0開始*** getFullYear() //返回4位的年份 如 2016

    10.2.2 案例

    • 案例1:寫一個函數,格式化日期對象,返回yyyy-MM-dd HH:mm:ss的形式
    function formatDate(d) {//如果date不是日期對象,返回if (!date instanceof Date) {return;}var year = d.getFullYear(),month = d.getMonth() + 1, date = d.getDate(), hour = d.getHours(), minute = d.getMinutes(), second = d.getSeconds();month = month < 10 ? '0' + month : month;date = date < 10 ? '0' + date : date;hour = hour < 10 ? '0' + hour : hour;minute = minute < 10 ? '0' + minute:minute;second = second < 10 ? '0' + second:second;return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second; }
    • 計算時間差,返回相差的天/時/分/秒
    function getInterval(start, end) {var day, hour, minute, second, interval;interval = end - start;interval /= 1000;day = Math.round(interval / 60 /60 / 24);hour = Math.round(interval / 60 /60 % 24);minute = Math.round(interval / 60 % 60);second = Math.round(interval % 60);return {day: day,hour: hour,minute: minute,second: second} }

    10.2.3 方法對照表

    Date對象 的方法。

    方法描述
    getDate 方法使用當地時間返回一個月某天的值。
    getDay 方法使用當地時間返回一個星期某天的值。
    getFullYear 方法使用當地時間返回年份值。
    getHours 方法使用當地時間返回小時值。
    getMilliseconds 方法使用當地時間返回毫秒值。
    getMinutes 方法使用當地時間返回分鐘值。
    getMonth 方法使用當地時間返回月份值。
    getSeconds 方法使用當地時間返回秒值。
    getTime 方法Date 對象中的時間值返回為自 1970 年 1 月 1 日午夜起經過的毫秒數。
    getTimezoneOffset 方法返回主機的時間與協調通用時間 (UTC) 之間的分鐘差值。
    getUTCDate 方法使用 UTC 返回一個月某天的值。
    getUTCDay 方法使用 UTC 返回一個星期某天的值。
    getUTCFullYear 方法使用 UTC 返回年份值。
    getUTCHours 方法使用 UTC 返回小時值。
    getUTCMilliseconds 方法使用 UTC 返回毫秒值。
    getUTCMinutes 方法使用 UTC 返回分鐘值。
    getUTCMonth 方法使用 UTC 返回月份值。
    getUTCSeconds 方法使用 UTC 返回秒值。
    getVarDate 方法Date 對象中的 VT_DATE 值返回。
    getYear 方法返回年份值。
    hasOwnProperty 方法返回一個布爾值,該值指示一個對象是否具有指定名稱的屬性。
    isPrototypeOf 方法返回一個布爾值,該值指示對象是否存在于另一個對象的原型鏈中。
    propertyIsEnumerable 方法返回一個布爾值,該值指示指定屬性是否為對象的一部分以及該屬性是否是可枚舉的。
    setDate 方法使用當地時間設置一個月中某一日的數值。
    setFullYear 方法使用當地時間設置年份值。
    setHours 方法使用當地時間設置小時值。
    setMilliseconds 方法使用當地時間設置毫秒值。
    setMinutes 方法使用當地時間設置分鐘值。
    setMonth 方法使用當地時間設置月份值。
    setSeconds 方法使用當地時間設置秒值。
    setTime 方法設置 Date 對象中的日期和時間值。
    setUTCDate 方法使用 UTC 設置一個月中某一日的數值。
    setUTCFullYear 方法使用 UTC 設置年份值。
    setUTCHours 方法使用 UTC 設置小時值。
    setUTCMilliseconds 方法使用 UTC 設置毫秒值。
    setUTCMinutes 方法使用 UTC 設置分鐘值。
    setUTCMonth 方法使用 UTC 設置月份值。
    setUTCSeconds 方法使用 UTC 設置秒值。
    setYear 方法使用當地時間設置年份值。
    toDateString 方法以字符串值的形式返回一個日期。
    toGMTString 方法返回使用格林尼治標準時間 (GMT) 轉換為字符串的日期。
    toISOString 方法以字符串值的形式返回采用 ISO 格式的日期。
    toJSON 方法用于在 JSON 序列化之前轉換目標類型的數據。
    toLocaleDateString 方法將一個日期以字符串值的形式返回,該字符串應適合于宿主環境的當前區域設置。
    toLocaleString 方法返回使用當前區域設置轉換為字符串的對象。
    toLocaleTimeString 方法以字符串值的形式返回一個時間,此字符串值應與宿主環境的當前區域設置相適應。
    toString 方法返回表示對象的字符串。
    toTimeString 方法以字符串值形式返回時間。
    toUTCString 方法返回使用 UTC 轉換為字符串的日期。
    valueOf 方法返回指定對象的原始值。

    10.3 Array對象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

    10.3.1 常用屬性和方法

    length屬性: 返回數組的成員數量。

    var arr = ['a', 'b']; console.log(arr.length) // 2

    常用方法

    • push方法用于在數組的末端添加一個或多個元素,并返回添加新元素后的數組長度。注意,該方法會改變原數組。

      var a = []; a.push(1) // 1 a.push('a') // 2 a.push(true, {}) // 4 console.log(a); //[1, 'a', true, {}]
    • pop方法用于刪除數組的最后一個元素,并返回該元素。注意,該方法會改變原數組

      var a = ['a', 'b', 'c']; a.pop() // 'c' console.log(a);// ['a', 'b']
    • slice方法用于提取原數組的一部分,返回一個新數組,原數組不變。

      它的第一個參數為起始位置(從0開始),第二個參數為終止位置(但該位置的元素本身不包括在內)。 如果省略第二個參數,則一直返回到原數組的最后一個成員。

      var a = ['a', 'b', 'c']; a.pop() // 'c' console.log(a);// ['a', 'b']
    • join方法用于將數組元素以指定字符拼接為字符串,返回一個字符串,原數組不變。

      var a = ['a','b','c','d','e']; console.log(a.join('-')) // 'a-b-c-d-e'
    • 返回數組的字符串表示形式。

      var arr = [1, 2, 3, 4]; console.log(arr.toString()); //1,2,3,4

    10.3.2 方法和屬性對照表

    Array 對象的屬性。

    屬性描述
    length 屬性返回一個整數值,此整數比數組中所定義的最高位元素大 1,是實際元素個數。

    Array 對象的方法。

    方法描述
    concat 方法(數組)返回由兩個數組組合而成的新數組。
    entries 方法返回包含數組的鍵/值對的迭代器。
    every 方法檢查定義的回調函數是否為數組中的所有元素返回 true
    fill 方法使用指定值填充數組。
    filter 方法對數組的每個元素調用定義的回調函數,并返回回調函數為其返回 true 的值的數組。
    findIndex 方法返回滿足回調函數中指定的測試條件的第一個數組元素的索引值。
    forEach 方法為數組中的每個元素調用定義的回調函數。
    hasOwnProperty 方法返回一個布爾值,該值指示某個對象是否具有指定名稱的屬性。
    indexOf 方法(數組)返回某個值在數組中的第一個匹配項的索引。
    isPrototypeOf 方法返回一個布爾值,該值指示某個對象是否存在于另一個對象的原型鏈中。
    join 方法返回由一個數組的所有元素串聯而成的 String 對象。
    keys 方法返回包含數組的索引值的迭代器。
    lastIndexOf 方法(數組)返回指定值在數組中的最后一個匹配項的索引。
    map 方法對數組的每個元素調用定義的回調函數并返回包含結果的數組。
    pop 方法從數組中移除最后一個元素并將該元素返回。
    propertyIsEnumerable 方法返回一個布爾值,該值指示指定屬性是否為對象的一部分且是否可枚舉。
    push 方法將新元素追加到一個數組中,并返回數組的新長度。
    reduce 方法通過對數組中的所有元素調用定義的回調函數來累積單個結果。 回調函數的返回值是累積的結果,并且作為對回調函數的下一個調用中的參數提供。
    reduceRight 方法通過對數組中的所有元素調用定義的回調函數來按降序順序累積單個結果。 回調函數的返回值是累積的結果,并且作為對回調函數的下一個調用中的參數提供。
    reverse 方法將元素順序被反轉的 Array 對象返回。
    shift 方法從數組中移除第一個元素并將返回該元素。
    slice 方法(數組)返回一個數組中的一部分。
    some 方法檢查定義的回調函數是否為數組的任何元素返回 true
    sort 方法返回一個元素已經進行了排序的 Array 對象。
    splice 方法從一個數組中移除元素,如有必要,在所移除元素的位置上插入新元素,并返回所移除的元素。
    toLocaleString 方法返回使用當前區域設置的字符串。
    toString 方法返回數組的字符串表示形式。
    unshift 方法在數組的開頭插入新元素。
    valueOf 方法獲取對數組的引用。
    values 方法返回包含數組的值的迭代器。

    10.4 String對象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

    10.4.1 常用屬性和方法

    var s = 'JavaScript'; // length屬性返回字符串的長度。 var i = s.length; //返回參數在字符串中第一次出現的位置 var i = s.indexOf('b'); //從原字符串取出子字符串并返回,不改變原字符串 var i = s.substr(2,4);//從下標第二個開始截取4個長度的字符串 //toLowerCase方法用于將一個字符串全部轉為小寫 //toUpperCase則是全部轉為大寫 var i = s.toLowerCase(); var i = s.toUpperCase();// 用于替換匹配的子字符串,只替換第一個匹配 var i = s.replace('a','b'); console.log(i);

    10.4.2 方法和屬性對照表

    String 對象的屬性

    屬性描述
    constructor 屬性指定用于創建對象的函數。
    length 屬性(字符串)返回 String 對象的長度。
    prototype 屬性為對象的類返回原型的引用。

    String 對象的方法。

    方法描述
    anchor 方法將具有 NAME 特性的 HTML 定位點放置在文本兩側。
    big 方法將 HTML 標記放置在文本兩側。
    blink 方法將 HTML 標記放置在文本兩側。
    bold 方法將 HTML 標記放置在文本兩側。
    charAt 方法返回指定索引處的字符。
    charCodeAt 方法返回指定字符的 Unicode 編碼。
    codePointAt 方法返回一個 Unicode UTF-16 字符的碼位。
    concat 方法(字符串)返回由提供的兩個字符串串聯而成的字符串。
    EndsWith 方法返回一個布爾值,該值指示字符串或子字符串是否以傳入字符串結尾。
    includes 方法返回一個布爾值,該值指示傳入字符串是否包含在字符串對象中。
    fixed 方法將 HTML 標記放置在文本兩側。
    fontcolor 方法將具有 COLOR 特性的 HTML 標記放置在文本兩側。
    fontsize 方法將具有 SIZE 特性的 HTML 標記放置在文本兩側。
    hasOwnProperty 方法返回一個布爾值,該值指示某個對象是否具有指定名稱的屬性。
    indexOf 方法(字符串)返回字符串內第一次出現子字符串的字符位置。
    isPrototypeOf 方法返回一個布爾值,該值指示某個對象是否存在于另一個對象的原型鏈中。
    italics 方法將 HTML 標記放置在文本兩側。
    lastIndexOf 方法(字符串)返回字符串內子字符串的最后一個匹配項。
    link 方法將具有 HREF 特性的 HTML 定位點放置在文本兩側。
    localeCompare 方法返回一個值,該值指示兩個字符串在當前區域設置中是否相等。
    match 方法通過使用提供的正則表達式對象來搜索字符串并以數組形式返回結果。
    normalize 方法返回指定字符串的 Unicode 范式。
    propertyIsEnumerable 方法返回一個布爾值,該值指示指定屬性是否為對象的一部分且是否可枚舉。
    repeat 方法返回一個新的字符串對象,它的值等于重復了指定次數的原始字符串。
    replace 方法使用正則表達式替換字符串中的文本并返回結果。
    search 方法返回正則表達式搜索中第一個子字符串匹配項的位置。
    slice 方法(字符串)返回字符串的片段。
    small 方法將 HTML 標記放置在文本兩側。
    split 方法返回一個字符串拆分為若干子字符串時所產生的字符串數組。
    StartsWith 方法返回一個布爾值,該值指示字符串或子字符串是否以傳入字符串開頭。
    strike 方法將 HTML 標記放置在文本兩側。
    sub 方法將 HTML 標記放置在文本兩側。
    substr 方法返回一個從指定位置開始且具有指定長度的子字符串。
    substring 方法返回 String 對象中指定位置處的子字符串。
    sup 方法將 HTML 標記放置在文本兩側。
    toLocaleLowerCase 方法返回一個字符串,其中所有字母字符都轉換為小寫形式,并將考慮主機環境的當前區域設置。
    toLocaleString 方法返回使用當前區域設置轉換為字符串的對象。
    toLocaleUpperCase 方法返回一個字符串,其中所有字母字符都轉換為大寫形式,并將考慮主機環境的當前區域設置。
    toLowerCase 方法返回一個字符串,其中所有字母字符都轉換為小寫形式。
    toString 方法返回字符串。
    toUpperCase 方法返回一個字符串,其中所有字母字符都轉換為大寫形式。
    trim 方法返回已移除前導空格、尾隨空格和行終止符的字符串。
    valueOf 方法返回字符串。

    10.5 包裝對象

    對象是 JavaScript 語言最主要的數據類型,三種原始類型的值——數值、字符串、布爾值——在一定條件下,也會自動轉為對象,也就是原始類型的“包裝對象”。

    所謂“包裝對象”,就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象可以把原始類型的值變成(包裝成)對象。

    var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true);typeof v1 // "object" typeof v2 // "object" typeof v3 // "object"v1 === 123 // false v2 === 'abc' // false v3 === true // false

    包裝對象的最大目的,首先是使得 JavaScript 的對象涵蓋所有的值,其次使得原始類型的值可以方便地調用某些方法。

    原始類型的值,可以自動當作對象調用,即調用各種對象的方法和參數。

    這時,JavaScript 引擎會自動將原始類型的值轉為包裝對象實例,在使用后立刻銷毀實例。

    比如,字符串可以調用length屬性,返回字符串的長度。

    'abc'.length // 3

    上面代碼中,abc是一個字符串,本身不是對象,不能調用length屬性。

    JavaScript 引擎自動將其轉為包裝對象,在這個對象上調用length屬性。

    調用結束后,這個臨時對象就會被銷毀。這就叫原始類型與實例對象的自動轉換。

    JS代碼規范&編程風格

    • 縮進:

      空格和tab鍵都可以,盡量保持一致,使用一種;

      兩個空格和四個空格都行,盡量保持一致就行,但是使用4個空格的多一些;

    • 分號:

      盡量不要忘記,每一行的結束都要加分號

      while 與 for 循環后面不要加分號

      if else、switch等分支語句后面不要加分號

      關鍵字聲明函數,后面不要加分號

      表達式聲明函數,函數后面加分號

    • 區塊:

      兩種寫法

    if(){}if() {}

    ? 理論上兩種都可以,但是盡量使用第一種,因為js會在行尾自動添加分號,有時會出現意外情況;

    • 圓括號

      函數的聲明和調用、表達式運算

      1:函數調用時,函數名和括號之間沒有空格

      2:函數聲明時,函數名和括號之間沒有空格

      3:參與表達式運算時,括號的前面和后面,都要加空格

    • 變量的聲明

      console.log(x); var x = 10;//等價于var x; console.log(x); x = 10;

      為了避免此種情況的出現,建議將所有在本作用域下聲明的變量都提到最前面聲明并賦值;

    • 自增自減運算

      因為 ++ 在前和++ 在后的運算結果不同,所以,盡量使用 +=1 -=1 替代,

      提高代碼的可讀性;

      你的團隊中一定有搞不明白++在前和在后的區別的二傻子;生活不易,請善待他們;

    • 賦值 =

      賦值前后加空格;

    變量命名和代碼縮進 規范,是一個程序員必備的基本編程素質;

    讓別人給你調試BUG的第一前提條件就是 縮進要規范

    的當前區域設置。 |
    | toLocaleString 方法 | 返回使用當前區域設置轉換為字符串的對象。 |
    | toLocaleUpperCase 方法 | 返回一個字符串,其中所有字母字符都轉換為大寫形式,并將考慮主機環境的當前區域設置。 |
    | toLowerCase 方法 | 返回一個字符串,其中所有字母字符都轉換為小寫形式。 |
    | toString 方法 | 返回字符串。 |
    | toUpperCase 方法 | 返回一個字符串,其中所有字母字符都轉換為大寫形式。 |
    | trim 方法 | 返回已移除前導空格、尾隨空格和行終止符的字符串。 |
    | valueOf 方法 | 返回字符串。 |

    10.5 包裝對象

    對象是 JavaScript 語言最主要的數據類型,三種原始類型的值——數值、字符串、布爾值——在一定條件下,也會自動轉為對象,也就是原始類型的“包裝對象”。

    所謂“包裝對象”,就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象可以把原始類型的值變成(包裝成)對象。

    var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true);typeof v1 // "object" typeof v2 // "object" typeof v3 // "object"v1 === 123 // false v2 === 'abc' // false v3 === true // false

    包裝對象的最大目的,首先是使得 JavaScript 的對象涵蓋所有的值,其次使得原始類型的值可以方便地調用某些方法。

    原始類型的值,可以自動當作對象調用,即調用各種對象的方法和參數。

    這時,JavaScript 引擎會自動將原始類型的值轉為包裝對象實例,在使用后立刻銷毀實例。

    比如,字符串可以調用length屬性,返回字符串的長度。

    'abc'.length // 3

    上面代碼中,abc是一個字符串,本身不是對象,不能調用length屬性。

    JavaScript 引擎自動將其轉為包裝對象,在這個對象上調用length屬性。

    調用結束后,這個臨時對象就會被銷毀。這就叫原始類型與實例對象的自動轉換。

    JS代碼規范&編程風格

    • 縮進:

      空格和tab鍵都可以,盡量保持一致,使用一種;

      兩個空格和四個空格都行,盡量保持一致就行,但是使用4個空格的多一些;

    • 分號:

      盡量不要忘記,每一行的結束都要加分號

      while 與 for 循環后面不要加分號

      if else、switch等分支語句后面不要加分號

      關鍵字聲明函數,后面不要加分號

      表達式聲明函數,函數后面加分號

    • 區塊:

      兩種寫法

    if(){}if() {}

    ? 理論上兩種都可以,但是盡量使用第一種,因為js會在行尾自動添加分號,有時會出現意外情況;

    • 圓括號

      函數的聲明和調用、表達式運算

      1:函數調用時,函數名和括號之間沒有空格

      2:函數聲明時,函數名和括號之間沒有空格

      3:參與表達式運算時,括號的前面和后面,都要加空格

    • 變量的聲明

      console.log(x); var x = 10;//等價于var x; console.log(x); x = 10;

      為了避免此種情況的出現,建議將所有在本作用域下聲明的變量都提到最前面聲明并賦值;

    • 自增自減運算

      因為 ++ 在前和++ 在后的運算結果不同,所以,盡量使用 +=1 -=1 替代,

      提高代碼的可讀性;

      你的團隊中一定有搞不明白++在前和在后的區別的二傻子;生活不易,請善待他們;

    • 賦值 =

      賦值前后加空格;

    變量命名和代碼縮進 規范,是一個程序員必備的基本編程素質;

    讓別人給你調試BUG的第一前提條件就是 縮進要規范

    總結

    以上是生活随笔為你收集整理的web基础学习的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。