JavaScript基礎-2

 

字面量

在源代碼中一個固定值的表示法。【通過看具體的值，就能夠知道數據類型】
​
數值字面量：8, 9, 10
var num = 2;var num2 = 3;
​
字符串字面量：'黑馬程序員', "大前端"
var num = "123";var str = 'wahaha';
​
布爾字面量：true，false
var n = true; var m = fasle;
​
數組字面量:[]
var arr= [1,2,5,'apple','true']

數組

數組的創建方式:
1.構造函數創建數字
var 自定義數組名稱 = new Array();
2.字面量創建數組:
var 自定義數組名稱 = [];
數組的索引:
 var  ary = [];
 ary[0]=1;
 ary[1]=2;
數組：[20,22,36,19,26,18]
索引號：[0, 1, 2, 3, 4, 5]
取值：數組[索引號]
賦值：數組[索引號] = 值；
​
1. 數組中索引值是從 0 開始的
2. 通過索引的方式給數組賦值，要按照順序個數設置
3. 通過  數組名.length 可以獲取到當前數組的長度
​
二維數組:
var arr = [
[1,2,3],
[4,5,6],
[7,8,9]
];
arr 數組中有三個元素,索引號分別是0,1,2
第一個數組元素中有三個元素,分別是0,1,2
第二個數組元素中有三個元素,分別是0,1,2
第三個數組元素中有三個元素,分別是0,1,2
第一行的下標分別是:[0][0],[0][1],[0][2]
​
遍歷數組:
var arr = [20,22,36,19,26,18];
for (var i=0;i<=arr.length-1;i++){
  console.log (arr[i]);
}
遍歷二維數組:
var arr = [
[1,2,3],
[4,5,6],
[7,8,9]
];
for (var i=0;i<=arr.length-1;i++){
  //console.log (arr[i]);
   for(var j =0;j<=i;j++){
      console.log (arr[i][j])
  }
}
冒泡排序:
 var arr = [20, 22, 36, 19, 26, 18];
       for (var i = 0; i <=arr.length - 1; i++) {
           for (var j = 0; j <= arr.length - i; j++) {
               if (arr[j] < arr[j + 1]) {
                   var temp = arr[j];
                   arr[j] = arr[j + 1];
                   arr[j + 1] = temp;
              }
          }
      }
       console.log(arr);
內置對象冒泡排序:
console.log(arr.sort(function (a, b) {
           return a - b
      }));
​

函數

1.函數:用來封裝一段特定功能的代碼,通過函數名調用,實現對該斷代碼重複使用
​
2.作用:實現代碼的重複使用,提高代碼使用效率
​
3.函數的聲明方式:
​
function  自定義函數名() {

具體的功能代碼
​
}
調用:
自定義函數名();
例如:
   // 寫一個函數，判斷一個數是否是素數，並返回結果true 或 false(又叫質數，只能被1和自身整數的數) -->
       function getNum(num) {
           let sum = 0;
           for (let i = 1; i <= num; i++) {
               if (num % i == 0) {
                   sum++;
              }
                a = false;
               if (sum == 2) {
                   a = true;
                   // console.log('是素數');
              }
          }
           return a;
      }
       let num = prompt('請輸入數字:');//把輸入的內容作爲實參傳給函數的形參
       document.write(getNum(num));//調用函數
表達格式定義函數:
var fn = function (){
   
}
fn();
例:
var n= function getNum(num) {
           console.log(num);
         
      }
getNum(3);  
​
4.形參和實參
語法：
function 函數名(形參,形參,形參...) {//形參，就是一個佔位符，命名規則和規範和變量一樣
//函數體
}
函數名(數據,數據,數據...);   //實參，就是實際的數據
​
5.函數的返回值
函數執行完以後,可以吧執行結果通過return語法返回給調用者(把值返回到函數外面)
function add(num1，num2){
//函數體
return num1 + num2; // 注意：return 後的代碼不執行
}
var resNum = add(21,6); // 調用函數，傳入 兩個實參，並通過 resNum 接收函數返回值
alert(resNum);// 27
retutn 值;
​
注意：
   1. 如果函數沒有顯示的使用 return語句 ，那麼函數有默認的返回值：undefined
   2. 如果函數中寫了return語句，後面沒有寫任何其他內容，那麼函數的返回值依然是 undefined
   3. 一個函數只能有一個返回值
   4. return 代碼執行完成後，後面的代碼不再執行
   5. 函數也可以作爲返回值（理解）
   
6.arguments的使用
arguments是函數的一個內置對象
如果函數參數不確定，可以定義函數的時候不寫參數，通過arguments獲取

//求任意個數中的和

function num() {
           var sum = 0;
           for (let i = 0; i < arguments.length; i++) {
               sum += arguments[i];
          }
           return sum;
      }
       var n = num(1, 5, 6, 3, 8, 4, 7, 9, 2);
       console.log(n);
​
arguments裏面存儲了所有傳遞過來的實參,它的形式是一個維數組,可以遍歷.
僞數組的特點:
1.具有數組的length特性
2.按照索引的方式存儲數據
3.不具有數組pop,push等方法
​
7.匿名函數和自調用函數
匿名函數:
var n = function (){
   
}
n();
1.匿名韓式不能單獨使用
2.將匿名函數賦值給一個變量
3.可以讓匿名函數自己調用自己
自調用函數:
(function num () {})();

函數的作用域以及變量

作用域:變量或者函數可以起作用的區域
全局作用域:全局變量
1.在<script></script>標籤中或者早JS文件中定義的變量,在任何地方都可以訪問
2,在函數內部聲明的變量不使用var關鍵字 (建議不使用)
局部作用域:局部變量
1,在函數內部定義的變量
2,局部變量只能在定義變量的函數中使用
塊級作用域:
{
   塊級作用域
}
1. 本質上塊級作用域中的變量在外部不能訪問
2. 但是在js中可以訪問塊級作用域的變量（證明js沒有塊級作用域）
​
注意：因爲全局變量再任何地方都可以使用，所以我們一定要特別注意局部變量
一旦在函數內部什麼一個變量，千萬不要直接在外面使用
1、return返回這個變量，2、直接定義爲全局變量
   

作用域鏈和預解析

作用域鏈:
內部函數調用外部變量,採用練市查找決定取哪個值,這種結構被稱爲作用鏈
在查找變量的時候，一定是從當前作用域向上級作用域查找
   var 申明;
例:
function  f1 () {
      num = 123;//查找有沒有定義num,有的話直接把123重新賦值給num
   function f2 () {
      num = 789;//查找有沒有定義num,有的話直接把789重新賦值給num
      console.log( num );//打印
  }
   f2 ();//調用函數f2
}
var  num = 456;
f1();//調用函數
​
預解析:
1. js 代碼執行先執行預解析
2.  先進行變量提升： 把變量聲明提升到當前作用域的最上面，不包括變量的賦值
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 f1 () {
   var a;
   a=b=c=9;
   console.log(a);
   console.log(b);
   console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

代碼規範

 

1, 命名規範
 變量，函數的命名必須有含義
    ◆ 變量 的名稱一般用名詞userName
    ◆ 函數 的名稱一般用動詞getMax
​
 2，變量規範
 ◆ 操作符 前後 加 空格
    var age = 18;
 var n = 3 + 2;

 3， 空格規範
語句：
   if () {
       
  }
       
   for () {}
​
數組：['a', 'b', 'c', 'd', 'e', 'f'];
函數：function fn () {}

對象

1. 程序中的對象：
✔ 對象必須有對應的屬性【描述對象的特點，在程序中一般使用名詞描述】
✔ 對象必須有行爲動作方法 【方法用來描述具體對象的行爲動作，一般方法使用動詞】
屬性：訪問，【對象.屬性名】【對象['屬性名']】
方法：執行，【對象.方法名()】
2.創建對象:
字面量創建對象:
var  變量名  = {  key: value, key: value,  key: functon () {} };
​
例:
var obj ={
   name:'張三',
   age:18,
   fn:function (){
       console.log('飛')
  }
};
通過Object創建對象
1. Object 是一個構造函數
2. 通過new調用構造函數
添加屬性：
 對象變量.屬性名 = 值;
添加方法：
對象變量.方法名 =  function () {}
​
var  變量  =  new Object();
例子：
var obj = new Object();
obj.name='張三';//給空對象追加屬性
obj.fn = function(){//給空對象追加方法
   console.log('飛');
}
構造函數:
使用帕斯卡命名法 （每個單詞首字母大寫）
function Hero(uname, type, blood) {
           this.name = uname;
           this.type = type;
           this.blood = blood;
​
           this.arrack = function getArrack(arr) {
               console.log(arr);
          }
      }
       var lp = new Hero('廉頗', '力量型', 500);
         //new 關鍵字的執行過程:
           /*1. 在內存中創建一個空對象
          2. this指向創建的對象
          3. 執行函數
          4. 返回當前對象*/
       console.log(lp.name);
       console.log(lp.type);
       console.log(lp.blood);
       lp.arrack('近戰');
3.instanceOf關鍵字使用:
對象名 instanceof  構造函數名 判斷對象是哪個構造函數創建的
4.遍歷對象:
or   in  遍歷 對象的成員for(key in 對象){對象[key]}
function Hero(uname, type, blood) {
           this.name = uname;
           this.type = type;
           this.blood = blood;
​
           this.arrack = function getArrack(arr) {
               console.log(arr);
          }
      }
       var lp = new Hero('廉頗', '力量型', 500);
       for (var k in lp) {
           console.log(k);
           console.log(lp[k]);}
       lp.arrack('近戰');

數據類型

簡單數據類型和複雜數據類型

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

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

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

堆和棧

堆棧空間分配區別：　　1、棧（操作系統）：由操作系統自動分配釋放 ，存放函數的參數值，局部變量的值等。 　　2、堆（操作系統）： 存儲複雜類型(對象)，一般由程序員分配釋放， 若程序員不釋放，由垃圾回收機制回收。


簡單數據類型:
var n = 3;
這個3會在棧中開闢空間放置
var m = n;
此時m會在棧中複製一份n 此時棧中會有兩個3的空間分別指向n和m
​
複雜數據類型
var n = {
age = 18,
name = '張三'}
此時這個n創建的對象信息會在堆中存放,同樣會在棧中生成對應的地址,這個地址對象指向堆中的對象信息
var m = n;
此時m會在棧中複製一份n 此時棧中會有兩個一樣的地址碼都指向堆中的對象信息(m||n無論誰操作改變對象信息,那麼總信息修改)
    function Person(name) {
           this.name = name;
      }
​
       function f1(x) {
           // x = p
           console.log(x.name); // 2. 這個輸出什麼 ?(劉德華)
           x.name = '張學友';
           console.log(x.name); // 3. 這個輸出什麼 ?(張學友)
      }
       var p = new Person('劉德華');
       console.log(p.name); // 1. 這個輸出什麼 ?(劉德華)
       f1(p);
       console.log(p.name); // 4. 這個輸出什麼 ?(張學友)

內置對象

Math對象

Math.PI// 圓周率
Math.random()// 生成隨機數,小括號內不跟參數,返回浮點數[0,1)
//返回兩個數之間的
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round()// 取整，四捨五入
Math.abs()// 絕對值
Math.max()/Math.min() // 求最大和最小值
​
Math.sin()/Math.cos() // 正弦/餘弦
Math.power()/Math.sqrt() // 求指數次冪/求平方根

Date 對象

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

// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());// 獲取距1970年1月1日（世界標準時間）起的毫秒數
​
Date構造函數的參數
1. 毫秒數 1498099000356new 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()結果一樣
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 迭代方法 不會修改原數組(可選) html5
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);
    }
  }
}
 return 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()

案例

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

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';
var index = -1;
do {
 index = s.indexOf('o', index + 1);
 if (index !== -1) {
   // 替換
   s = s.replace('o', '!');
}
} while(index !== -1);
console.log(s);

• 把字符串中的所有空白去掉' abc xyz a 123 '

var s = '   abc       xyz a   123   ';  
var arr = s.split(' ');
console.log(arr.join(''));

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

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

• 獲取url中?後面的內容，並轉化成對象的形式。例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2

var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
// 獲取url後面的參數
function getParams(url) {
 // 獲取? 後面第一個字符的索引
 var index = url.indexOf('?') + 1;
 // url中?後面的字符串 name=zs&age=18&a=1&b=2
 var params = url.substr(index);
 // 使用& 切割字符串 ，返回一個數組
 var arr = params.split('&');
 var o = {};
 // 數組中每一項的樣子 key = value
 for (var i = 0; i < arr.length; i++) {
   var tmpArr = arr[i].split('=');
   var key = tmpArr[0];
   var value = tmpArr[1];
​
   o[key] = value;
}
 return o;
}
​
var obj = getParams(url);
console.log(obj);
​
console.log(obj.name);
console.log(obj.age);