JavaScript基礎-05-陣列、Date物件、Math、包裝類、字串方法

陣列（Array）

1. 陣列

1. 陣列也是一個物件，不同點：普通物件是使用字串作為屬性名的，陣列是使用數字作為索引操作元素，
2. 陣列的存盤性能比普通物件要好，在開發中經常使用陣列來存盤一些資料，
3. 向陣列中添加元素

語法：陣列[索引]=值

向讀取陣列中的元素，若讀取不存在的索引，不會報錯而是回傳undefined

語法：陣列[索引]

var arr=new Array();
console.log(typeof arr);  //結果為Object
// 添加元素
arr[0]=10;
arr[1]=33;
console.log(arr);
// 讀取陣列中的元素
console.log(arr[1]);   //結果為33

獲取陣列的長度，使用length屬性來獲取陣列的長度（元素的個數）

語法：陣列.length

console.log(arr.length); //結果為2

修改length:

若修改的length大于原長度，則多出部分空出來

若修改的length小于原長度，則多出部分被洗掉

arr.length=10;  //將長度修改為10
console.log(arr);

向最大索引加1：arr.length

arr[arr.length]=34;

2. 陣列的字面量

使用字面量創建陣列

語法：[ ]

var arr=[1,3,2,4,54,23];
console.log(arr1);

使用建構式創建陣列，也可以同時添加元素，將添加的元素作為構建陣列的引數傳遞，元素之間逗號隔開

 var arr1=new Array(10,20,30,40);

arr=[10];  //元素10
var arr1=new Array(10);  //10個元素的空陣列；放幾個數就是含該數的陣列

陣列中的元素可以是任意資料型別：數字，字串，null，undefined，物件

arr=[{name:'孫悟空'},{name:'小胡'},{name:'孫'}]  //物件
console.log(arr[1].name);

arr=[function () {alert(1)},function () {alert(1)}];  //函式
arr[1]();

arr=[[1,2,3],[23,43,54]];  //陣列
console.log(arr[1]);

3. 陣列的四個方法

push( ):向陣列的末尾添加一個或更多元素，并回傳新的長度，

arr.push('小李');

pop（）:洗掉并回傳陣列的最后一個元素

arr.pop();

unshift( ):向陣列的開頭添加一個或更多元素，并回傳新的長度，

arr.unshift('小三子','阿六');

shift（）:洗掉并回傳陣列的第一個元素

arr.shift();

Slice（開始位，結束位）:從某個已有的陣列回傳選定的元素，不包含結束索引；該方法不會改變元素；結束位可不寫，可傳遞一個負值，負值從后往前傳遞

result=arr.slice(2,4);

result=arr.slice(1,-2);

Splice（開始位，洗掉的數量，新元素）:洗掉并添加陣列中的指定元素，會影響到原陣列，并將洗掉的元素作為回傳值回傳，

result=arr.splice(0,1,,’阿麗’); //添加新元素在第一個

Concat( )：可以連接兩個或多個陣列，并將新的陣列回傳；不會對原陣列產生影響

var arr=['孫悟空','小胡','小孫'];
var arr2=['小李','三子','阿六'];
arr3=arr.concat(arr2);

join( ):該方法可以將陣列轉換為一個字串，不會對原陣列產生影響；指定一個字串作為引數，字串將成為陣列中元素的連接符，默認使用，作為連接符

result=arr.join(‘-’);

reverse( )：該方法用來反轉陣列，會直接修改原陣列

sort(a,b):對陣列中元素進行排序，會影響原陣列，默認按照unicode編碼進行排序，對數字排序會錯誤，可以添加一個回呼函式，并指定排序規則，需要制定兩個形參：瀏覽器將會分別使用陣列中的元素作為實參去呼叫回呼函式，使用哪個元素呼叫不確定，但確定的是a在b之前，

瀏覽器會根據回呼函式的回傳值來決定元素的順序：

　　若回傳>0，則元素會位置不變

　　若回傳<0，則元素會位置反過來

　　若回傳=0，則元素會位置不變

方法1：

var arr=[1,3,2,5];
arr.sort(function (a,b) {
if(a>b){
   return 1;}
else if(a<b){
   return -1;}
else{
   return 0;}})
         console.log(arr);

方法2:回傳升序排列，回傳a-b;回傳降序排列，回傳b-a

var arr=[1,3,2,5];
arr.sort(function (a,b) {

return a-b;})

4. 陣列的遍歷

將陣列中的所有元素都取出來

for(var i=0;i<7;i++){
   console.log(arr[i]);}

創建一個函式，將陣列中的Person滿18歲的提取出來，然后封裝到一個新的陣列中并回傳，

function Person(name,age) {
            this.name=name;
            this.age=age;}
         var per=new Person('小胡',12);
         var per1=new Person('小李',22);
         var per2=new Person('小花',21);
         var per3=new Person('小馬',13);
         var perArr=[per,per1,per2,per3];
         function getAdult(arr) {
            var newArr=[];
// 先遍歷arr，獲取arr中Person物件，判斷Person物件是否大于等于18；
            for(var i=0;i<arr.length;i++){
               var p=arr[i];
               if (p.age>=18) {
                  newArr.push(p);}}
               return newArr;}
         var result=getAdult(perArr);
         console.log(result);

5. forEach（）用于遍歷

只支持IE8以上的瀏覽器，需要一個函式作為引數；陣列中有幾個元素就會執行幾次，

var arr=['孫悟空','小胡','小孫','小李','三子','阿六'];
     arr.forEach(function (value,index,obj) {//由我們創建，但不由我們呼叫，稱為回呼函式
     console.log('value='https://www.cnblogs.com/huaweimian/p/+value);});

瀏覽器會在回呼函式中傳遞三個引數，第一個：當前正在遍歷的元素；第二個：索引；第三個：正在遍歷的陣列；

6. call( )和apply( )：函式物件的方法，通過函式物件來呼叫？？？

函式呼叫call( )和apply( )都會呼叫函式執行

呼叫call( )和apply( )可以將一個物件指定為第一個引數，此時這個元素將會成為函式執行時的this

function fun() {
alert(this.name);}
var obj={name:’obj’};
fun.call(obj);

call（）方法可以將實參在物件之后依次傳遞

apply（）方法需要將實參封裝到一個陣列中統一傳遞

fun.call(obj,2,3);
fun.apply(obj,[2,3]);

function fun(a,b) {
   console.log('a='+a);
   console.log('b='+b);}
var obj={name:'obj',
sayName:function () {
alert(this.name);}};
// obj.sayName.apply(obj);
fun.call(obj,2,3);
fun.apply(obj,[4,3]);

7. agruments( )

在呼叫函式時，瀏覽器每次都會傳遞兩個隱含的引數：

1. 函式的背景關系
2. 封裝實參的物件agruments，arguments是一個類陣列物件，通過索引來操作資料，也可以獲取長度；

   在呼叫函式時，傳遞的實參都會在arguments中保存;

agruments.length:用來獲取實參的數目;agruments[0]:表示第一個實參;agruments.callee:對應函式物件，就是當前正在指向的函式物件，

function fun() {
console.log(arguments.length);//結果為4

console.log(arguments[0]);}  //結果為1

console.log(arguments.callee);}  //結果為1
fun(1,2,4,3);

8. Date物件

在JS中使用Date物件來表示一個時間；

創建一個Date物件：

//如果直接使用建構式創建一個Date物件，則會封裝為當前代碼執行的時間
         var d=new Date();
         console.log(d);
//創建一個指定的時間物件，需要在建構式中傳遞一個表示時間的字串作為引數
         //日期格式：月份/日/年份  時：分：秒
         var d2=new Date('12/12/2019 11:10:20');
         console.log(d2);

getDate( ):獲取當前日期物件是幾日

var date=d2.getDate();

getDay( ):獲取當前日期物件是周幾，會回傳0-6的值

var day=d2.getDay();

getMonth( ):獲取當前日期物件的月份，會回傳0-11的值，11代表12

var month=d2.getMonth();

getFullYear( ):獲取當前日期物件的年份

var year=d2.getFullYear();

getTime( ):獲取當前日期物件的時間戳（從格林威治標準時間1970年1月1日 0時0分0秒 到現在時間的毫秒數  1秒=1000毫秒），計算機底層在保存時間時使用時間戳，

var time=d2.getTime();

獲取當前時間戳：利用時間戳來執行當前代碼的執行性能，在代碼前后獲取時間戳

var start=Date.now();

var end=Date.now();

console.log(end-start);

9. Math：與其他物件不同，不是一個建構式，它屬于一個工具類不用創建物件，里面封裝了數學運算相關的屬性和方法，

屬性：

Math.PI   //圓周率

abs( ):用來計算一個數的絕對值

Math.abs(-1)  

ceil( ):對數進行上取整，

Math.ceil(1.6)

floor(x):對數進行下取整，

Math.floor(1.6)

round(x)：把數四舍五入為最接近的整數，

Math.round(1.2)

random()：回傳 0 ~ 1 之間的亂數，

生成0-x之間的亂數：Math.round(Math.random()*x )  //生成0-x之間的亂數

生成x-y之間的亂數：Math.round(Math.random()*(y-x)+x )

Math.random()

Math.round(Math.random()*10 )  //生成0-10之間的亂數

生成0-6之間的亂數

console.log(Math.round(Math.random()*5+1));

max(x,y)：回傳 x 和 y 中的最高值，

var max=Math.max(12,45);

pow(x,y)：回傳 x 的 y 次冪，

console.log(Math.pow(2,3));  //結果為8

sqrt(x):回傳數的平方根，

Math.sqrt(2)

 10. 包裝類

JS為我們提供了三個包裝類，通過這三個包裝類可以將基本資料型別的資料轉換為物件  

String（）  Number（）  Boolean（）

實際應用中不會使用基本資料型別的物件，若使用基本資料型別的物件，會帶來一些不可預期的結果，

var num=new Number(3);
var num2=new Number(3);
var str=new String('3');
var bool=new Boolean(true);

方法和屬性只能添加給物件，不能添加給基本資料型別；當我們對一些基本資料型別的值去呼叫屬性和方法時，瀏覽器會臨時使用包裝類將其轉換為物件，然后再呼叫物件的屬性和方法，呼叫完以后，再將其轉換成基本資料型別，

var s=123;result=String.fromCharCode(72);

s=s.toString();
s.hello='你好';

console.log(s.hello);  //結果為undefined

11. 字串的方法

var str='hello';
//在底層字串是以字串陣列的形式保存的['h','e','l','l']
console.log(str.length);

console.log(str[0]); //索引

chartAt():回傳在字串中指定位置的字符，根據索引獲取指定的字符

var result=str.charAt(0);

charCodeAt()：回傳在指定的位置的字符的 Unicode 編碼，

result=str.charCodeAt(0);  //

fromCharCode()：從字符Unicode編碼創建一個字串，

result=String.fromCharCode(72);  //結果：H, 數字為十進制；

result=String.fromCharCode(0x2472);  //可以直接說明為十六進制0x....

concat():連接字串，作用和+一樣；

result=str.concat("你好","再見");

indexof():該方法可以檢索一個字串是否含有指定內容

若字串中含有該內容，則回傳其第一次出現的索引，未找到就回傳-1

注：可以指定第二個引數，從第幾位開始查找    str.indexOf("a",2);

str='hello athguigu';
result=str.indexOf("a");
console.log(result);  //結果：6    位于第6位：從0開始

lastindexof():方法與indexof()一樣，但是從后往前找；

str='hello athguigu';
result=str.lastIndexOf('a',8);
console.log(result);

slice():可以從字串中截取指定的內容，不會影響字串，而是將截取內容回傳，

若str.slice(1)：則會截取到后面所有的；str.slice(1，-1)：負數則會從后面開始計算

str='hello athguigu';
result=str.slice(2,8);   //（開始索引，結束索引）包括開始不包括結束
console.log(result);  //結果：llo at

substring():可以截取一個字串，與slice()類似，

引數：（開始索引，結束索引）包括開始不包括結束

區別：該方法不能接受負值，若出現負值，默認為0，并自動調整位置

str='hello athguigu';
result=str.substring(2,8);
console.log(result);

substr（）：用來截取字串，（開始索引，截取長度）

str='hello athguigu';
result=str.substr(2,3);
console.log(result);

split():將字串拆分為一個陣列

引數：需要一個字串作為引數，根據字串來拆分；若傳遞一個空號，會將陣列中的每個數都拆分，

str='hello,athg,uigu';
result=str.split(",");
console.log(typeof result);  //結果為陣列

toUpperCase():將字串變成大寫；toLowerCase( ):將字串變成小寫

標籤：JavaScript

上一篇：JS實體—DOM的增刪改

下一篇：JavaScript基礎-06-正則運算式