學習目標:- 掌握編程的基本思維- 掌握編程的基本語法
typora-copy-images-to: media

JavaScript基礎

HTML和CSS 京東

課前娛樂

眾人皆笑我瘋癲,我笑爾等看不穿

課前說明

目標：掌握編程的基本思想掌握JavaScript的基礎語法,使用常見API(備注)完成相應案例及練習和作業培養獨立解決問題能力遇到問題先獨立調試(牛X從規范和調試開始)能夠獨立寫出所有案例代碼注意：

以大多數同學的接受能力為基準，穩準狠的前行
注重基礎，以最簡單的案例說明問題，并以企業項目案例進行實踐
課上思考，課下提問。不需要深究的地方不要鉆牛角尖。
必須完成作業,基礎堅挺的同學低調,基礎薄弱同學多問一句話送給大家:當你要放棄的時候想想當初為什么堅持到現在！筆記和代碼是”大家的”,自己寫的才是自己的.復制代碼者,沒有”男朋友”不寫代碼者,沒有”女朋友”

階段說明

JavaScript基礎Web APIJavaScript高級

第一天重點內容

變量的聲明及使用數據類型類型轉換運算符

課外提示

1.敲代碼用指法,指法配圖，堅持一周者即可熟練2.碼農不需要練就一陽指或者二指禪3.可以使用金山打字通，此處并非打廣告,個人建議，天天敲代碼，不停的反復的敲練習和作業，速度和基本功的快速提升奉勸各位:保護好自己的手控制自己的右手windows中的常用快捷鍵

瀏覽器說明

瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，并讓用戶與這些文件交互的一種軟件。通俗的講:可以顯示頁面的一個軟件,國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲游瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程序。常用的五大瀏覽器：chrome，firefox，Safari，ie，opera我們用chrome(谷歌瀏覽器)

網頁、網站和應用程序

網頁：單獨的一個頁面網站：一些列相關的頁面組成到一起應用程序：可以和用戶產生交互，并實現某種功能。

演示JavaScript的強大

http://impress.github.io/impress.js/http://naotu.baidu.com/ https://codecombat.com/https://ide.codemao.cn/

需要翻墻https://developers.google.com/blockly/blockly迷宮https://blockly-games.appspot.com

blockly迷宮不需要翻墻https://blockly.uieee.com/

JavaScript介紹

JavaScript是什么

HTML CSS

JavaScript 編程語言流程控制

Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規范也借自Java。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。Java和JavaScript的關系就像張雨和張雨生的關系，只是名字很像。

? Java 服務器端的編程語言

? JavaScript 運行在客戶端(瀏覽器)的編程語言

JavaScript是一種運行在客戶端 的腳本語言 JavaScript的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

JavaScript最初的目的

演示：http://baixiu.uieee.com/admin/login.php最初的目的是為了處理表單的驗證操作。

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

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

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

JavaScript和HTML、CSS的區別

HTML：提供網頁的結構，提供網頁中的內容
CSS: 用來美化網頁
JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果

JavaScript的組成

ECMAScript - JavaScript的核心

ECMA 歐洲計算機制造聯合會

網景：JavaScript

微軟：JScript

定義了JavaScript的語法規范

JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API

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

DOM - 文檔對象模型

一套操作頁面元素的API

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

JavaScript初體驗

CSS：行內樣式、嵌入樣式、外部樣式

JavaScript的書寫位置

寫在行內

<input type="button" value="按鈕" οnclick="alert('Hello World')" />

寫在script標簽中


<head>
 ?<script>
 ? ?alert('Hello World!');
 ?</script>
</head>

寫在外部js文件中，在頁面引入


<script src="main.js"></script>

注意點

引用外部js文件的script標簽中不可以寫JavaScript代碼

計算機組成

軟件

應用軟件：瀏覽器(Chrome/IE/Firefox)、QQ、Sublime、Word
系統軟件：Windows、Linux、mac OSX

硬件

三大件：CPU、內存、硬盤 -- 主板
輸入設備：鼠標、鍵盤、手寫板、攝像頭等
輸出設備：顯示器、打印機、投影儀等

變量

什么是變量

什么是變量

變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據
為什么要使用變量

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

如何使用變量

var聲明變量


var age;

變量的賦值


var age;
age = 18;

同時聲明多個變量


var age, name, sex;
age = 10;
name = 'zs';

同時聲明多個變量并賦值


var age = 10, name = 'zs';

變量在內存中的存儲


var age = 18;

變量的命名規則和規范

規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符號組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while。
- 區分大小寫
規范 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。例如：userName、userPassword

下面哪些變量名不合法


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

案例

交換兩個變量的值
不使用臨時變量，交換兩個數值變量的值

數據類型

簡單數據類型

Number、String、Boolean、Undefined、Null

Number類型

數值字面量：數值的固定值的表示法

110 1024 60.5
進制


十進制
    var num = 9;
    進行算數計算時，八進制和十六進制表示的數值最終都將被轉換成十進制數值。
十六進制
 var num = 0xA;
 數字序列范圍：0~9以及A~F
八進制
 ? var num1 = 07; ? // 對應十進制的7
 ? var num2 = 019; // 對應十進制的19
 ? var num3 = 08; ? // 對應十進制的8
 ? 數字序列范圍：0~7
 ? 如果字面值中的數值超出了范圍，那么前導零將被忽略，后面的數值將被當作十進制數值解析

浮點數
- 浮點數的精度問題


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

數值范圍


最小值：Number.MIN_VALUE，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity

數值判斷
- NaN：not a number
  - NaN 與任何值都不相等，包括他本身
- isNaN: is not a number

String類型

'abc' "abc"

字符串字面量

'程序猿'，'程序媛', "黑馬程序猿"

?

思考：如何打印以下字符串。我是一個"正直"的人我很喜歡"黑馬'程序猿'"
轉義符

字符串長度

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);
```
1. 兩邊只要有一個是字符串，那么+就是字符串拼接功能
2. 兩邊如果都是數字，那么就是算術功能。

Boolean類型

Boolean字面量： true和false，區分大小寫
計算機內部存儲：true為1，false為0

Undefined和Null

undefined表示一個聲明了沒有賦值的變量，變量只聲明的時候值默認是undefined
null表示一個空，變量的值如果想為null，必須手動設置

復雜數據類型

? Object

獲取變量的類型

typeof


var age = 18;
console.log(typeof age); ?// 'number'

字面量

在源代碼中一個固定值的表示法。

數值字面量：8, 9, 10

字符串字面量：'黑馬程序員', "大前端"

布爾字面量：true，false

注釋

單行注釋

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


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

多行注釋

用來注釋多條代碼


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

數據類型轉換

如何使用谷歌瀏覽器，快速的查看數據類型？

字符串的顏色是黑色的，數值類型是藍色的，布爾類型也是藍色的，undefined和null是灰色的

轉換成字符串類型

toString()


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

String()


String()函數存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null

拼接字符串方式

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

轉換成數值類型

Number()


Number()可以把任意值轉換成數值，如果要轉換的字符串中有一個不是數值的字符，返回NaN

parseInt()


var num1 = parseInt("12.3abc"); ?// 返回12，如果第一個字符是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123"); ? // 返回NaN，如果第一個字符不是數字或者符號就返回NaN

parseFloat()


parseFloat()把字符串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與
    parseFloat會解析第一個. 遇到第二個.或者非數字結束
 如果解析的內容里只有整數，解析成整數

+，-0等運算


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

轉換成布爾類型

Boolean()

0 ''(空字符串) null undefined NaN 會轉換成false 其它都會轉換成true

操作符

運算符 operator

5 + 6

表達式組成操作數和操作符，會有一個結果

算術運算符


+ - * / % ?

一元運算符

一元運算符：只有一個操作數的運算符

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

++ 自身加1

-- 自身減1

前置++

var num1 = 5;
++ num1; 
?
var num2 = 6;
console.log(num1 + ++ num2);

后置++


var num1 = 5;
num1 ++; ? ?
var num2 = 6 
console.log(num1 + num2 ++);

猜猜看


var a = 1; var b = ++a + ++a; console.log(b); ? ?
var a = 1; var b = a++ + ++a; console.log(b); ? ?
var a = 1; var b = a++ + a++; console.log(b); ? ?
var a = 1; var b = ++a + a++; console.log(b); ?

總結前置++：先加1，后參與運算后置++：先參與運算，后加1上面兩個理解后，下面兩個自通前置-- ：先減1，后參與運算后置-- ：先參與運算，后減1?

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


&& 與 兩個操作數同時為true，結果為true，否則都是false
|| 或 兩個操作數有一個為true，結果為true，否則為false
!  非  取反

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


<  >  >=  <= == != === !==


==與===的區別：==只進行值得比較，===類型和值同時相等，則相等
?
var result = '55' == 55;  // true
var result = '55' === 55;  // false 值相等，類型不相等
var result = 55 === 55;  // true

賦值運算符

= += -= *= /= %=


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

運算符的優先級

優先級從高到底1. ()  優先級最高2. 一元運算符  ++   --   !3. 算數運算符  先*  /  %   后 +   -4. 關系運算符  >   >=   <   <=5. 相等運算符   ==   !=    ===    !==6. 邏輯運算符 先&&   后||7. 賦值運算符


// 練習1：
4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true
// 練習2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表達式和語句

表達式

一個表達式可以產生一個值，有可能是運算、函數調用、有可能是字面量。表達式可以放在任何需要值的地方。

語句

語句可以理解為一個行為，循環語句和判斷語句就是典型的語句。一個程序有很多個語句組成，一般情況下;分割一個一個的語句

流程控制

程序的三種基本結構

順序結構

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

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

分支結構

根據不同的情況，執行對應代碼

循環結構

循環結構：重復做一件事情

分支結構

if語句

語法結構


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

案例：求兩個數的最大數判斷一個數是偶數還是奇數分數轉換，把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A作業：判斷一個年份是閏年還是平年閏年：能被4整除，但不能被100整除的年份或者能被400整除的年份判斷一個人的年齡是否滿18歲(是否成年)

三元運算符

表達式1 ? 表達式2 : 表達式3
是對if……else語句的一種簡化寫法

案例：是否年滿18歲從兩個數中找最大值

switch語句

語法格式:


switch (expression) {
 ?case 常量1:
 ? ?語句;
 ? ?break;
 ?case 常量2:
 ? ?語句;
 ? ?break;
 ?case 常量3:
 ? ?語句;
 ? ?break;
 ?…
 ?case 常量n:
 ? ?語句;
 ? ?break;
 ?default:
 ? ?語句;
 ? ?break;
}

break可以省略，如果省略，代碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換（例如，字符串'10' 不等于數值 10）

案例：顯示星期幾素質教育（把分數變成ABCDE）千萬不要寫100個case喲

布爾類型的隱式轉換

流程控制語句會把后面的值隱式轉換成布爾類型

轉換為true   非空字符串  非0數字  true 任何對象
轉換成false  空字符串  0  false  null  undefined


// 結果是什么？
var a = !!'123';

案例


var message;
// 會自動把message轉換成false
if (message) { ? ? 
 ?// todo...
}

循環結構

在javascript中，循環語句有三種，while、do..while、for循環。

while語句

基本語法：


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

代碼示例：


// 計算1-100之間所有數的和
// 初始化變量
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
 ?// 循環體
 ?sum += i;
 ?// 自增
 ?i++;
}
console.log(sum);

案例：打印100以內 7的倍數打印100以內所有偶數打印100以內所有偶數的和作業：打印100以內的奇數打印100以內的奇數的和

do...while語句

do..while循環和while循環非常像，二者經常可以相互替代，但是do..while的特點是不管條件成不成立，都會執行一次。

基礎語法：


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

代碼示例：


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

案例：

求100以內所有3的倍數的和
使用do-while循環：輸出詢問“我愛你，嫁給我吧？”，選擇“你喜歡我嗎？(y/n):"，如果輸入為y則打印”我們形影不離“，若輸入為n,則繼續詢問

for語句

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

for循環語法：


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

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

初始化表達式
判斷表達式
自增表達式
循環體

案例：

打印1-100之間所有數
求1-100之間所有數的和
求1-100之間所有數的平均值
求1-100之間所有偶數的和
同時求1-100之間所有偶數和奇數的和
打印正方形
// 使用拼字符串的方法的原因
// console.log 輸出重復內容的問題
// console.log 默認輸出內容介紹后有換行
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);

作業：

求1-100之間所有數的乘積
求1-100之間所有奇數的和
計算1-100之間能3整除的數的和
計算1-100之間不能被7整除的數的和
// 講解思路。如果不會寫程序，可以先把數學公式準備好
本金10000元存入銀行，年利率是千分之三，每過1年，將本金和利息相加作為新的本金。計算5年后，獲得的本金是多少？
有個人想知道，一年之內一對兔子能繁殖多少對？于是就筑了一道圍墻把一對兔子關在里面。已知一對兔子每個月可以生一對小兔子，而一對兔子從出生后第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象，那么，一對兔子一年內（12個月）能繁殖成多少對？（兔子的規律為數列，1，1，2，3，5，8，13，21）

continue和break

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

continue:立即跳出當前循環，繼續下一次循環（跳到i++的地方）

案例：


求整數1～100的累加值，但要求碰到個位為3的數則停止累加
求整數1～100的累加值，但要求跳過所有個位為3的數

作業：

求1-100之間不能被7整除的整數的和（用continue）求200-300之間所有的奇數的和（用continue）求200-300之間第一個能被7整數的數（break）

調試

過去調試JavaScript的方式
- alert()
- console.log()
斷點調試

斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。

調試步驟


瀏覽器中按F12-->sources-->找到需要調試的文件-->在程序的某一行設置斷點

調試中的相關操作


Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。
F10: 程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。
F8：跳到下一個斷點處，如果后面沒有斷點了，則程序執行結束。

tips: 監視變量，不要監視表達式，因為監視了表達式，那么這個表達式也會執行。

代碼調試的能力非常重要，只有學會了代碼調試，才能學會自己解決bug的能力。初學者不要覺得調試代碼麻煩就不去調試，知識點花點功夫肯定學的會，但是代碼調試這個東西，自己不去練，永遠都學不會。
今天學的代碼調試非常的簡單，只要求同學們記住代碼調試的這幾個按鈕的作用即可，后面還會學到很多的代碼調試技巧。

數組

為什么要學習數組

之前學習的數據類型，只能存儲一個值(比如：Number/String。我們想存儲班級中所有學生的姓名，此時該如何存儲？

數組的概念

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

數組的定義

數組是一個有序的列表，可以在數組中存放任意的數據，并且數組的長度可以動態的調整。

通過數組字面量創建數組


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

獲取數組元素

數組的取值


// 格式：數組名[下標]   下標又稱索引
// 功能：獲取數組對應下標的那個值，如果下標不存在，則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 這個數組的最大下標為2,因此返回undefined

遍歷數組

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

數組遍歷的基本語法：


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

數組中新增元素

數組的賦值


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

案例

求一組數中的所有數的和和平均值
求一組數中的最大值和最小值，以及所在位置
將字符串數組用|或其他符號分割
要求將數組中的0項去掉，將不為0的值存入一個新的數組，生成新的數組
翻轉數組
冒泡排序，從小到大

函數

為什么要有函數

如果要在多個地方求1-100之間所有數的和，應該怎么做？

什么是函數

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

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

函數的定義

函數聲明


function 函數名(){
 ?// 函數體
}

函數表達式


var fn = function() {
 ?// 函數體
}

特點：

函數聲明的時候，函數體并不會執行，只要當函數被調用的時候才會執行。函數一般都用來干一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等

函數的調用

調用函數的語法：


函數名();

特點：

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

代碼示例：


// 聲明函數
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();

函數的參數

為什么要有參數


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);

形參和實參
1. 形式參數：在聲明一個函數的時候，為了函數的功能更加靈活，有些值是固定不了的，對于這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值，僅僅起到一個占位置的作用，我們通常稱之為形式參數，也叫形參。
2. 實際參數：如果函數在聲明時，設置了形參，那么在函數調用的時候就需要傳入對應的參數，我們把傳入的參數叫做實際參數，也叫實參。


var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
 ?console.log(a + b);
}
//x,y實參，有具體的值。函數執行的時候會把x,y復制一份給函數內部的a和b，函數內部的值是復制的新值，無法修改外部的x,y

案例

求1-n之間所有數的和
求n-m之間所有數額和
圓的面積
求2個數中的最大值
求3個數中的最大值
判斷一個數是否是素數

函數的返回值

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

返回值語法：


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

函數的調用結果就是返回值，因此我們可以直接對函數調用結果進行操作。

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

推薦的做法是要么讓函數始終都返回一個值，要么永遠都不要返回值。

案例

求階乘
求1!+2!+3!+....+n!
求一組數中的最大值
求一組數中的最小值

arguments的使用

JavaScript中，arguments對象是比較特別的一個對象，實際上是當前函數的一個內置屬性。也就是說所有函數都內置了一個arguments對象，arguments對象中存儲了傳遞的所有的實參。arguments是一個偽數組，因此及可以進行遍歷

案例


求任意個數的最大值
求任意個數的和

案例


求斐波那契數列Fibonacci中的第n個數是多少？ ? ? ?1 1 2 3 5 8 13 21...
翻轉數組，返回一個新數組
對數組排序，從小到大
輸入一個年份，判斷是否是閏年[閏年：能被4整數并且不能被100整數，或者能被400整數]
輸入某年某月某日，判斷這一天是這一年的第幾天？

函數其它

匿名函數

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

匿名函數如何使用：

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

關于自執行函數（匿名函數自調用）的作用：防止全局變量污染。

自調用函數

匿名函數不能通過直接調用來執行，因此可以通過匿名函數的自調用的方式來執行


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

函數是一種數據類型


function fn() {}
console.log(typeof fn);

函數作為參數

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

函數做為返回值

因為函數是一種類型，所以可以把函數可以作為返回值從函數內部返回，這種用法在后面很常見。


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

代碼規范

1.命名規范	
2.變量規范   var name = 'zs';	
3.注釋規范// 這里是注釋
4.空格規范
5.換行規范var arr = [1, 2, 3, 4];if (a > b) {}for(var i = 0; i < 10; i++) {}function fn() {}

作用域

作用域：變量可以起作用的范圍

全局變量和局部變量

全局變量

?在任何地方都可以訪問到的變量就是全局變量，對應全局作用域
局部變量

?只在固定的代碼片段內可訪問到的變量，最常見的例如函數內部。對應局部作用域(函數作用域)

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

塊級作用域

任何一對花括號（｛和｝）中的語句集都屬于一個塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級作用域。在es5之前沒有塊級作用域的的概念,只有函數作用域，現階段可以認為JavaScript沒有塊級作用域

詞法作用域

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

在 js 中詞法作用域規則:

函數允許訪問函數外的數據.
整個代碼結構中只有函數可以限定作用域.
作用域規則首先使用提升規則分析
如果當前作用規則中有名字了, 就不考慮外面的名字


var num = 123;
function foo() {
 ?console.log( num );
}
foo();
?
if ( false ) {
 ? ?var num = 123;
}
console.log( num ); // undefiend

作用域鏈

只有函數可以制造作用域結構， 那么只要是代碼，就至少有一個作用域, 即全局作用域。凡是代碼中有函數，那么這個函數就構成另一個作用域。如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域。將這樣的所有的作用域列出來，可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。


// 案例1：
function f1() {
 ? ?function f2() {
 ? }
}
?
var num = 456;
function f3() {
 ? ?function f4() { ? ?
 ? }
}


// 案例2
function f1() {
 ? ?var num = 123;
 ? ?function f2() {
 ? ? ? ?console.log( num );
 ? }
 ? ?f2();
}
var num = 456;
f1();

預解析

JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript代碼的時候，分為兩個過程：預解析過程和代碼執行過程

預解析過程：

把變量的聲明提升到當前作用域的最前面，只會提升聲明，不會提升賦值。
把函數的聲明提升到當前作用域的最前面，只會提升聲明，不會提升調用。
先提升var，在提升function

JavaScript的執行過程


var a = 25;
function abc (){
 ?alert(a);//undefined
 ?var a = 10;
}
abc();
// 如果變量和函數同名的話，函數優先
console.log(a);
function a() {
 ?console.log('aaaaa');
}
var a = 1;
console.log(a);

全局解析規則

函數內部解析規則

變量提升

變量提升

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

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


// 1、-----------------------------------
var num = 10;
fun();
function fun() {
 ?console.log(num);
 ?var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
 ?var b = 9;
 ?console.log(a);
 ?console.log(b);
 ?var a = '123';
}
// 3、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
 ?var a = b = c = 9;
 ?console.log(a);
 ?console.log(b);
 ?console.log(c);
}

對象

為什么要有對象


function printPerson(name, age, sex....) {
}
// 函數的參數如果特別多的話，可以使用對象簡化
function printPerson(person) {
 ?console.log(person.name);
 ?……
}

什么是對象

現實生活中：萬物皆對象，對象是一個具體的事物，一個具體的事物就會有行為和特征。
舉例： 一部車，一個手機
車是一類事物，門口停的那輛車才是對象特征：紅色、四個輪子行為：駕駛、剎車

JavaScript中的對象

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

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

對象字面量

字面量：11 'abc' true [] {}等


var o = {
 ?name: 'zs,
 ?age: 18,
 ?sex: true,
 ?sayHi: function () {
 ? ?console.log(this.name);
 }
};

思考：


如何把學生對象、老師對象、英雄對象改寫成字面量的方式

對象創建方式

對象字面量


var o = {
 ?name: 'zs',
 ?age: 18,
 ?sex: true,
 ?sayHi: function () {
 ? ?console.log(this.name);
 }
}; ?

new Object()創建對象


var person = new Object();
 ?person.name = 'lisi';
 ?person.age = 35;
 ?person.job = 'actor';
 ?person.sayHi = function(){
 ?console.log('Hello,everyBody');
}

工廠函數創建對象


function createPerson(name, age, job) {
 ?var person = new Object();
 ?person.name = name;
 ?person.age = age;
 ?person.job = job;
 ?person.sayHi = function(){
 ? ?console.log('Hello,everyBody');
 }
 ?return person;
}
var p1 = createPerson('張三', 22, 'actor');

自定義構造函數


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在執行時會做四件事情

new會在內存中創建一個新的空對象
new 會讓this指向這個新的對象
執行構造函數  目的：給這個新對象加屬性和方法
new會返回這個新對象

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨著學習的深入，我們可以逐漸了解
現在我們需要掌握函數內部的this幾個特點1. 函數在定義的時候this是不確定的，只有在調用的時候才可以確定2. 一般函數直接執行，內部this指向全局window3. 函數作為一個對象的方法，被該對象所調用，那么this指向的是該對象4. 構造函數中的this其實是一個隱式對象，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式對象身上，后續通過new關鍵字來調用，從而實現實例化

對象的使用

遍歷對象的屬性

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


var obj = {};
for (var i = 0; i < 10; i++) {
 ?obj[i] = i * 2;
}
for(var key in obj) {
 ?console.log(key + "==" + obj[key]);
}

刪除對象的屬性


function fun() { 
 ?this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

簡單類型和復雜類型的區別

基本類型又叫做值類型，復雜類型又叫做引用類型

值類型：簡單數據類型，基本數據類型，在存儲時，變量中存儲的是值本身，因此叫做值類型。

引用類型：復雜數據類型，在存儲是，變量中存儲的僅僅是地址（引用），因此叫做引用數據類型。

堆和棧

堆棧空間分配區別：1、棧（操作系統）：由操作系統自動分配釋放 ，存放函數的參數值，局部變量的值等。其操作方式類似于數據結構中的棧；2、堆（操作系統）： 存儲復雜類型(對象)，一般由程序員分配釋放， 若程序員不釋放，由垃圾回收機制回收，分配方式倒是類似于鏈表。

注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以后的學習。

基本類型在內存中的存儲

復雜類型在內存中的存儲

基本類型作為函數的參數

復雜類型作為函數的參數


// 下面代碼輸出的結果
function Person(name,age,salary) {
 ?this.name = name;
 ?this.age = age;
 ?this.salary = salary;
}
function f1(person) {
 ?person.name = "ls";
 ?person = new Person("aa",18,10);
}
?
var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);

思考：


//1. 
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);
?
//2. 
var num = 50;
function f1(num) {
 ? ?num = 60;
 ? ?console.log(num);
}
f1(num);
console.log(num);
?
//3. 
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
 ?num = 100;
 ?num1 = 100;
 ?num2 = 100;
 ?console.log(num);
 ?console.log(num1);
 ?console.log(num2);
}
?
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);

內置對象

JavaScript中的對象分為3種：內置對象、瀏覽器對象、自定義對象

JavaScript 提供多個內置對象：Math/Array/Number/String/Boolean...

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

學習一個內置對象的使用，只要學會其常用的成員的使用（通過查文檔學習）

可以通過MDN/W3C來查詢

內置對象的方法很多，我們只需要知道內置對象提供的常用方法，使用的時候查詢文檔。

MDN

Mozilla 開發者網絡（MDN）提供有關開放網絡技術（Open Web）的信息，包括 HTML、CSS 和萬維網及 HTML5 應用的 API。

MDN
通過查詢MDN學習Math對象的random()方法的使用

如何學習一個方法？

方法的功能
參數的意義和類型
返回值意義和類型
demo進行測試

Math對象

Math對象不是構造函數，它具有數學常數和函數的屬性和方法，都是以靜態成員的方式提供

跟數學相關的運算來找Math中的成員（求絕對值，取整）

Math

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()


Math.PI         // 圓周率
Math.random()    // 生成隨機數
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round()    // 取整，四舍五入
Math.abs()     // 絕對值
Math.max()/Math.min()  // 求最大和最小值
?
Math.sin()/Math.cos()  // 正弦/余弦
Math.power()/Math.sqrt() // 求指數次冪/求平方根

案例

求10-20之間的隨機數
隨機生成顏色RGB
模擬實現max()/min()

Date對象

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


// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf()); // 獲取距1970年1月1日（世界標準時間）起的毫秒數
?
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();
// valueOf用于獲取對象的原始值
console.log(date.valueOf()) 
?
// HTML5中提供的方法，有兼容性問題
var now = Date.now(); 
?
// 不支持HTML5的瀏覽器，可以用下面這種方式
var now = + new Date();   // 調用 Date對象的valueOf()

日期格式化方法


toString()      // 轉換成字符串
valueOf()  // 獲取毫秒值
// 下面格式化日期的方法，在不同瀏覽器可能表現不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

獲取日期指定部分


getTime()    ?// 返回毫秒數和valueOf()結果一樣，valueOf()內部調用的getTime()
getMilliseconds() 
getSeconds() ?// 返回0-59
getMinutes() ?// 返回0-59
getHours() ? ?// 返回0-23
getDay() ? ? ?// 返回星期幾 0周日 ? 6周6
getDate() ? ? // 返回當前月的第幾天
getMonth() ? ?// 返回月份，***從0開始***
getFullYear() //返回4位的年份 如 2016

案例

寫一個函數，格式化日期對象，返回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
 }
}

Array對象

創建數組對象的兩種方式
- 字面量方式
- new Array()


// 1. 使用構造函數創建數組對象
// 創建了一個空數組
var arr = new Array();
// 創建了一個數組，里面存放了3個字符串
var arr = new Array('zs', 'ls', 'ww');
// 創建了一個數組，里面存放了4個數字
var arr = new Array(1, 2, 3, 4);
?
?
// 2. 使用字面量創建數組對象
var arr = [1, 2, 3];
?
// 獲取數組中元素的個數
console.log(arr.length);

檢測一個對象是否是數組
- instanceof
- Array.isArray() HTML5中提供的方法，有兼容性問題
函數的參數，如果要求是一個數組的話，可以用這種方式來進行判斷
toString()/valueOf()
- toString() 把數組轉換成字符串，逗號分隔每一項
- valueOf() 返回數組對象本身
數組常用方法

演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()


// 1 棧操作(先進后出)
push()
pop()   //取出數組中的最后一項，修改length屬性
// 2 隊列操作(先進先出)
push()
shift()  //取出數組中的第一個元素，修改length屬性
unshift()  //在數組最前面插入項，返回數組的長度
// 3 排序方法
reverse() //翻轉數組
sort();  //即使是數組sort也是根據字符，從小到大排序
// 帶參數的sort是如何實現的？
// 4 操作方法
concat()  //把參數拼接到當前數組
slice()  //從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
splice() //刪除或替換當前數組的某些項目，參數start, deleteCount, options(要替換的項目)
// 5 位置方法
indexOf()、lastIndexOf() ? //如果沒找到返回-1
// 6 迭代方法 不會修改原數組(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將數組的所有元素連接到一個字符串中。
join()

清空數組


// 方式1 推薦 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

將一個字符串數組輸出為|分割的形式，比如“劉備|張飛|關羽”。使用兩種方式實現


function myJoin(array, seperator) {
 ?seperator = seperator || ',';
 ?array = array || [];
 ?if (array.length == 0){
 ? ?return '';
 }
 ?var str = array[0];
 ?for (var i = 1; i < array.length; i++) {
 ? ?str += seperator + array[i];
 }
 ?return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));
?
console.log(array.join('-'))

將一個字符串數組的元素的順序進行反轉。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實現。提示：第i個和第length-i-1個進行交換


function myReverse(arr) {
 ?if (!arr || arr.length == 0) {
 ? ?return [];
 }
 ?for (var i = 0; i < arr.length / 2; i++) {
 ? ?var tmp = arr[i];
 ? ?arr[i] = arr[this.length - i - 1];
 ? ?arr[arr.length - i - 1] = tmp;
 }
 ?return arr;
}
?
var array = ['a', 'b', 'c'];
console.log(myReverse(array));
?
console.log(array.reverse());

工資的數組[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除


// 方式1
var array = [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
 ?if(array[i] < 2000) {
 ? ?tmpArray.push(array[i]);
 }
}
console.log(tmpArray);
// 方式2
var array = [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
 ?if (item < 2000) {
 ? ?return true;
 }
 ?return false;
});
console.log(array);

["c", "a", "z", "a", "x", "a"]找到數組中每一個a出現的位置


var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
 ?var index = array.indexOf('a',index + 1);
 ?if (index != -1){
 ? ?console.log(index);
 }
} while (index > 0);

編寫一個方法去掉一個數組的重復元素


var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
 ?var o = {};
 ?for (var i = 0; i < array.length; i++) {
 ? ?var item = array[i];
 ? ?if (o[item]) {
 ? ? ?o[item]++;
 ? }else{
 ? ? ?o[item] = 1;
 ? }
 }
 ?var tmpArray = [];
 ?for(var key in o) {
 ? ?if (o[key] == 1) {
 ? ? ?tmpArray.push(key);
 ? }else{
 ? ? ?if(tmpArray.indexOf(key) == -1){
 ? ? ? ?tmpArray.push(key);
 ? ? }
 ? }
 }
 ?returm tmpArray;
}
?
console.log(clear(array));

基本包裝類型

為了方便操作基本數據類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean


// 下面代碼的問題？
// s1是基本類型，基本類型是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
?
// 當調用s1.substring(5)的時候，先把s1包裝成String類型的臨時對象，再調用substring方法，最后銷毀臨時對象, 相當于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;


// 創建基本包裝類型的對象
var num = 18;     //數值，基本類型
var num = Number('18');  //類型轉換
var num = new Number(18);  //基本包裝類型，對象
// Number和Boolean基本包裝類型基本不用，使用的話可能會引起歧義。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;  // 結果是什么

String對象

字符串的不可變


var str = 'abc';
str = 'hello';
// 當重新給str賦值的時候，常量'abc'不會被修改，依然在內存中
// 重新給字符串賦值，會重新在內存中開辟空間，這個特點就是字符串的不可變
// 由于字符串的不可變，在大量拼接字符串的時候會有效率問題

創建字符串對象


var str = new String('Hello World');
?
// 獲取字符串中字符的個數
console.log(str.length);

字符串對象的常用方法

字符串所有的方法，都不會修改字符串本身(字符串是不可變的)，操作完成會返回一個新的字符串


// 1 字符方法
charAt() ?      //獲取指定位置處字符
charCodeAt()  //獲取指定位置處字符的ASCII碼
str[0] ?   //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat() ?   //拼接字符串，等效于+，+更常用
slice() ?   //從start位置開始，截取到end位置，end取不到
substring()  //從start位置開始，截取到end位置，end取不到
substr() ?   //從start位置開始，截取length個字符
// 3 位置方法
indexOf() ?  //返回指定內容在元字符串中的位置
lastIndexOf()  //從后往前找，只找第一個匹配的
// 4 去除空白 ? 
trim()   //只能去除字符串前后的空白
// 5 大小寫轉換方法
to(Locale)UpperCase()  //轉換大寫
to(Locale)LowerCase()  //轉換小寫
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103); //把ASCII碼轉換成字符串

案例

截取字符串"我愛中華人民共和國"，中的"中華"


var s = "我愛中華人民共和國";
s = s.substr(2,2);
console.log(s);

"abcoefoxyozzopp"查找字符串中所有o出現的位置


var s = 'abcoefoxyozzopp';
var array = [];
do {
 ?var index = s.indexOf('o', index + 1);
 ?if (index != -1) {
 ? ?array.push(index);
 }
} while (index > -1);
console.log(array);

把字符串中所有的o替換成!


var s = 'abcoefoxyozzopp';
do {
 ?s = s.replace('o', '');
} while (s.indexOf('o') > -1);
console.log(s);
?
console.log(s.replace(/o/ig, ''));

判斷一個字符串中出現次數最多的字符，統計這個次數


var s = 'abcoefoxyozzopp';
var o = {};
?
for (var i = 0; i < s.length; i++) {
 ?var item = s.charAt(i);
 ?if (o[item]) {
 ? ?o[item] ++;
 }else{
 ? ?o[item] = 1;
 }
}
?
var max = 0;
var char ;
for(var key in o) {
 ?if (max < o[key]) {
 ? ?max = o[key];
 ? ?char = key;
 }
}
?
console.log(max);
console.log(char);

作業

給定一個字符串如：“abaasdffggghhjjkkgfddsssss3444343”問題如下：?
1、?字符串的長度?
2、?取出指定位置的字符，如：0,3,5,9等?
3、?查找指定字符是否在以上字符串中存在，如：i，c?，b等?
4、?替換指定的字符，如：g替換為22,ss替換為b等操作方法?
5、?截取指定開始位置到結束位置的字符串，如：取得1-5的字符串
6、?找出以上字符串中出現次數最多的字符和出現的次數?
7、?遍歷字符串，并將遍歷出的字符兩頭添加符號“@”輸出至當前的文檔頁面。 
2019-08-0318:06:27
作者：何秀好

轉載于:https://www.cnblogs.com/itboxue/p/11295707.html