手機(jī)站首頁(yè)散文詩(shī)歌雜文隨筆日記小小說

散文網(wǎng) » 筆記 »全部筆記 » 千鋒教育JavaScript全套視頻教程（10天學(xué)會(huì)Js，前端javascrip

千鋒教育JavaScript全套視頻教程（10天學(xué)會(huì)Js，前端javascrip

2023-07-12 11:35 作者:卐小智卍 0人讀過 | 我要投稿

數(shù)組

數(shù)組是用來批量存儲(chǔ)數(shù)據(jù)的一種對(duì)象，類似于數(shù)學(xué)中的集合

一、數(shù)組的定義

構(gòu)造函數(shù)

 var arr = new 構(gòu)造函數(shù)();

引用類型的內(nèi)存存儲(chǔ)機(jī)制與內(nèi)置類型不同:
棧與堆:都是內(nèi)存中的空間
內(nèi)置類型存儲(chǔ)數(shù)據(jù):內(nèi)置類型只有一塊棧空間,該空間存的就是數(shù)值本身

 var a = 123;

引用類型存儲(chǔ)的方式:引用類型有兩塊空間
一塊?？臻g，存的是new出來堆空間的地址
一塊堆空間,堆空間存的是真正的數(shù)據(jù)
new是一個(gè)關(guān)鍵字，作用為在堆內(nèi)存開辟空間
Array是構(gòu)造函數(shù)，可以理解為是一個(gè)類型的模板
new Array(1,2,3,4,5):按照Array類型的模板在堆內(nèi)存開辟了一個(gè)Array的空間，并且存儲(chǔ)的元素分別為1,2,3,4,5
注意事項(xiàng):new和構(gòu)造函數(shù)必須一起使用，含義為創(chuàng)造了一個(gè)該類型的對(duì)象

 var arr = new Array(1,2,3,4,5);
 console.log(arr);

字面量
字面意思將new Array() 簡(jiǎn)化為[ ]

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

二、數(shù)組的使用

數(shù)組元素的訪問：數(shù)組名[下標(biāo)]

數(shù)組名：就是數(shù)組的名字

下標(biāo):數(shù)組元素訪問時(shí)的索引

從0開始
連續(xù)的自然數(shù)
下標(biāo)可以用變量
數(shù)組在訪問時(shí)，千萬(wàn)不要越界，下標(biāo)取值范圍是：0~數(shù)組長(zhǎng)度-1

三、數(shù)組的遍歷

對(duì)所有的元素進(jìn)行相同的操作(依賴于循環(huán))

數(shù)組對(duì)象.length:返回?cái)?shù)組的長(zhǎng)度（元素的個(gè)數(shù)）

var arr = [11,22,33,44,5,5,9,8,4,3];

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

數(shù)組的逆序運(yùn)算寫法：

需要循環(huán)n/2取整次，并用無(wú)賦值容器將元素交換

var arr = [5,6,7,4,8,3,9,2,0,1];
var len = arr.length;
var t;
for(var i=0; i<parseInt(len/2); i++){
    t = arr[i];
    arr[i] = arr[len-i-1];
    arr[len-i-1] = t;
}

console.log(arr);

四、數(shù)組的API：API--->應(yīng)用程序接口--->系統(tǒng)提供的函數(shù)，打點(diǎn)訪問

[內(nèi)容表示可以省略不寫]

如何學(xué)習(xí)API

函數(shù)的功能
函數(shù)的參數(shù)
函數(shù)的返回值
抄案例無(wú)恥求demo

push

功能:尾插

參數(shù):push(參數(shù)1,[參數(shù)2,參數(shù)3...])

返回值:數(shù)值，表示數(shù)組的新長(zhǎng)度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.push("Kiwi","1","hello");
console.log(fruits);
console.log(len);

pop

功能:尾刪

參數(shù):無(wú)

返回值:被刪除的元素

var arr = ["t",7,"r",8,"e"];
var x = arr.pop();
console.log(arr);
console.log(x);       
x = arr.pop();
console.log(arr);
console.log(x);

unshift

功能:頭插

參數(shù):unshift(參數(shù)1,/參數(shù)2,參數(shù)3.../)

返回值:數(shù)值，表示數(shù)組的新長(zhǎng)度

var arr = [1,2,3,4,5];
var len = arr.unshift(666,777);
console.log(arr);
console.log(len);

shift

功能:頭刪

參數(shù):無(wú)

返回值:被刪除的元素

var arr = ["t",7,"r",8,"e"];
var x = arr.shift();
console.log(arr);
console.log(x);

reverse

功能:逆序,并且改變?cè)亟M本身

參數(shù):無(wú)

返回值:返回逆序的數(shù)組

var arr = [5,7,8,4,8];
arr.reverse();
//這樣就直接實(shí)現(xiàn)了算數(shù)運(yùn)算逆序，更簡(jiǎn)便。
console.log(arr);

splice

功能:指定位置刪除或插入

參數(shù):splice(起始位置,偏移量,[被插入的參數(shù)1,參數(shù)2...])

返回值:被刪除的數(shù)組區(qū)間

var arr = [5,6,7,4,8,3,9];
arr.splice(1,3);
var arr1 = arr.splice(1,3);
arr.splice(1,3,99,111);
arr.splice(2,1);
console.log(arr);
console.log(arr1);

slice

功能:截取數(shù)組區(qū)間，不會(huì)改變?cè)獢?shù)組

參數(shù):slice(起始位置,結(jié)束位置) 左閉右開

返回值:被截取的元素

var arr = [6,5,7,4,8,3];
var arr1 = arr.slice(1,3);
console.log(arr);
console.log(arr1);

concat

功能:數(shù)組的拼接,不會(huì)改變?cè)紨?shù)組

參數(shù):concat(新數(shù)組)

返回值:拼接的數(shù)組

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr3);

join

功能:將數(shù)組轉(zhuǎn)為字符串

參數(shù):join([分隔符]),默認(rèn)不寫時(shí)用逗號(hào)分割

返回值:字符串

var arr = [2,3,4,5,6,7,8,9];
var str = arr.join("laowang");
console.log(str);

length:數(shù)組的長(zhǎng)度

indexOf

功能:查找元素是否在數(shù)組中出現(xiàn)（字符串：查找字符串第一次出現(xiàn)的位置）

參數(shù):indexOf(目標(biāo)元素)

返回值:找到返回下標(biāo)，找不到返回-1

indexOf("abc")        查找字符串第一次出現(xiàn)的位置
var str = "helloworld";
console.log(str.indexOf("llo"));

lastIndexOf

功能:查找元素是否在數(shù)組中出現(xiàn)（字符串：查找字符串最后一次出現(xiàn)的位置）

參數(shù):lastIndexOf(目標(biāo)元素)

返回值:找到返回下標(biāo)，找不到返回-1

lastIndexOf("abc")    查找字符串最后一次出現(xiàn)的位置  如果沒找到  返回-1
var str = "helloworld";
console.log(str.lastIndexOf("o"));

五、多維數(shù)組：擁有多個(gè)下標(biāo)的數(shù)組元素

JS本身是沒有多維數(shù)組的，所有的多維數(shù)組都是通過一維數(shù)組的嵌套實(shí)現(xiàn)的

案例：將多維數(shù)組內(nèi)容打到瀏覽器白板上

var arr = [
    [1,2],//arr[0]
    [3,4,5,6],//arr[1][0]
    [7,8,9]//arr[2]
];

// console.log(arr[1][0]);獲取下標(biāo)1里面數(shù)組的下標(biāo)0的數(shù)值

for(var i=0; i<arr.length; i++){
    // console.log(arr[i]);
    for(var j=0; j<arr[i].length; j++){
        document.write(arr[i][j] + " ");
    }
    document.write("<br>");
}

六、冒泡排序：將數(shù)值類型數(shù)組，按照由小到大，或者由大到小的順序排列

案例：

核心思想：兩兩比較

外層循環(huán)：比較多少趟:N-1趟

內(nèi)層循環(huán)：每趟比較多少次:N-1-i

第0趟為例 交換9次
/*
    5,6,7,4,8,3,9,2,0,1
    5,6,7,4,8,3,9,2,0,1
    5,6,4,7,8,3,9,2,0,1
    5,6,4,7,8,3,9,2,0,1
    5,6,4,7,3,8,9,2,0,1
    5,6,4,7,3,8,9,2,0,1
    5,6,4,7,3,8,2,9,0,1
    5,6,4,7,3,8,2,0,9,1
    5,6,4,7,3,8,2,0,1,                       

    第1趟    交換8次
    5,6,4,7,3,8,2,0,1
*/

var arr = [6,5,7,4,8,3,9,2,0,1];

var t;

for(var i=0; i<arr.length-1; i++){
    for(var j=0; j<arr.length-i-1; j++){
        if(arr[j]<arr[j+1]){
            t = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = t;
        }
    }
}

console.log(arr);

用indexOf去重

var arr = [5,6,5,5,6,6,1,7,7,8,9,4,8,9,3,0];
var arr1 = [];

for(var i=0; i<arr.length; i++){
    if(arr1.indexOf(arr[i]) == -1){
        arr1.push(arr[i]);
    }
}

console.log(arr1);

七、數(shù)組相關(guān)迭代

迭代函數(shù)的功能:實(shí)現(xiàn)了循環(huán)，用戶只需要自己寫功能

forEach

功能:遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

參數(shù):forEach(回調(diào)函數(shù))

回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){}

返回值:無(wú)

let arr = [6,5,4,7,3,8];

function fun(x,index,a){
    console.log(a[index]);
    x = x + 10;
    a[index] = x + 10;
    a[index] *= a[index];
}
arr.forEach(fun);
console.log(arr);

map

功能:拼接，遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

參數(shù):map(回調(diào)函數(shù))

回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){}

返回值:回調(diào)函數(shù)return的值，拼接的數(shù)組

function fun(x){
    if(x%2){
        return "heihei";
    }else{
        return "yingyingying";
    }
}
let arr = [5,4,6,7,3,8];
let arr1 = arr.map(fun);
console.log(arr);
console.log(arr1);

filter

功能:過濾,根據(jù)回調(diào)函數(shù)返回的布爾值篩選元素，遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

參數(shù):filter(回調(diào)函數(shù))

回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){}

返回值:回調(diào)函數(shù)return的布爾值，篩選后拼接的數(shù)組

let arr = [5,4,6,7,3,8];
function fun(x){
    if(x%2){
        return true;
    }else{
        return false;
    }
}
let arr1 = arr.filter(fun);
console.log(arr1);

面試題：map和forEach的異同

forEach沒有返回值

map返回的是回調(diào)函數(shù)return的值，拼接的數(shù)組

標(biāo)簽：