一.陣列基礎

1.創建陣列

1.使用Array建構式創建

2.使用字面量方法創建

3.應用：創建一個包含1-100的陣列

2.陣列遍歷

遍歷的兩種方式f（for、for-in回圈）

二.陣列實作深拷貝、淺拷貝

1.深拷貝與淺拷貝

2.陣列的深拷貝與淺拷貝

三.可迭代物件或類陣列轉化為真陣列

1.可迭代物件與類陣列的區別

可迭代物件（Iterable）

類陣列（Array-like）

2.可迭代物件或類陣列轉化為真陣列

Array.from()方法進行轉換(ES6）

使用遍歷方式(for-in)把成員放到一個新陣列中

四.陣列檢測

instanceof運算子

Array.isArray（）方法

五.陣列的序列化與反序列化

六.陣列的原型方法

1.建構式的方法

2.原型的方法

堆疊與佇列的方法（改變原陣列）

排序方法

操作方法

位置方法

迭代方法

一.陣列基礎

ECMAScript陣列是有序串列，是存放多個值的集合，

有以下特性：

每一項都可以保存任何型別的資料，（字串、數值、陣列）陣列一般都放置同一型別的資料

陣列的大小是可以動態調整，

陣列length屬性：可讀可寫，可以通過設定length的值從陣列的末尾移除項或向陣列中添加新項

js中的陣列是可以存放任意資料型別值的集合，陣列的元素可以是任意資料型別，陣列的長度可以動態調整，

1.創建陣列

1.使用Array建構式創建

//陣列創建
//使用Array建構式創建
var arr1 = new Array(5);//()內數字表示在創建時初始化陣列長度
arr1[0] = 'zhangshan';
arr1[1] = 'lisi';
arr1[2] = 'wangwu';
console.log(arr1);//[ 'zhangshan', 'lisi', 'wangwu', <2 empty items>(兩項為空值) ]
console.log(arr1.length);//5

2.使用字面量方法創建

//字面量創建  陣列是[]  物件是{}
var arr2=['zhangshan','lisi','wangwu'];
console.log(arr2);//[ 'zhangshan', 'lisi', 'wangwu' ]

3.應用：創建一個包含1-100的陣列

push()方法是陣列的堆疊底添加意思是往陣列的底部添加
unshift()方法是陣列的堆疊頂添加意思是往陣列的頭部添加

//創建一個陣列包含1-100
//方法一：var nums = [1,2,...]
var nums = [];
for(var i=0;i<100;i++){
    nums[i] = i+1;
}
console.log(nums);//1-100

//從小到大輸出1-100所有的偶數
var nums = [];
for(var i=0;i<100;i++){
    if(i%2==0){nums.push(i)}
}
console.log(nums);
//從大到小輸出1-100所有偶數
var nums = [];
for(var i=0;i<100;i++){
    if(i%2==0){nums.unshift(i)}
}
console.log(nums);
//從小到大輸出1-100所有奇數
var nums = [];
for(var i=0;i<100;i++){
    if(i%2!=0){nums.push(i)}
}
console.log(nums);

2.陣列遍歷

遍歷的兩種方式f（for、for-in回圈）

//陣列遍歷（將每一個成員提取一次） 回圈提取陣列成員
//for 回圈
var nums = [1,2,3];
for(var i=0;i<nums.length;i++){
    console.log(nums[i]);//1,2,3
//可以做一些操作 nums[i]='數字:'+nums[i];
}
console.log(nums);//[1,2,3]

//for...in回圈
for(var k in nums){
    console.log(nums[k]);
}

二.陣列實作深拷貝、淺拷貝

1.深拷貝與淺拷貝

主要針對于參考資料型別引數說的，淺拷貝表示僅拷貝參考地址，深拷貝表示對于物件的克隆

如何實作深拷貝：

1、JSON序列化 ：JSON.parse(JSON.stringify(obj))

2、Object.assign()拷貝 ：Object.assign({}, obj1);//深拷貝

2.陣列的深拷貝與淺拷貝

淺拷貝(陣列): (會改變原陣列)

就是陣列A重新賦值給陣列B,陣列B里的屬性值被改變,則陣列A里的值也會跟著發生改變，

深拷貝(陣列): (不會改變原陣列)

（1）使用slice() 和 concat()方法來實作深拷貝

（2）利用回圈實作

//陣列也為參考資料型別{}
var arr3 = [1,2,3];
var arr4 = arr3;
arr4[3] = 4;
console.log(arr3);//[ 1, 2, 3, 4 ] 發生淺拷貝

//陣列實作深拷貝
var arr5 = [];//創建新陣列，把陣列3的成員遍歷，一個一個加入陣列5
for(var k in arr3){
    arr5.push(arr3[k]);
}
var arr6 = arr3.concat(5,6);//陣列拼接函式，回傳新陣列[1,2,3,5,6]
arr6.push(4) //[1,2,3,4,5,6]不影響被拷貝的陣列

三.可迭代物件或類陣列轉化為真陣列

1.可迭代物件與類陣列的區別

可迭代物件（Iterable）

Iterable 物件是陣列的泛化，即任何物件都可以被定制為可在 for..of 回圈中使用的物件，陣列、字串都是可迭代的，從技術上講，物件不是陣列，而是表示某物的集合（串列，集合），for..of 是一個能夠遍歷它的很好的語法

Iterable 如上所述，是實作了 Symbol.iterator 方法（用于使物件可迭代的內置 symbol）的物件，

類陣列（Array-like）

Array-like 是有索引和 length 屬性的物件，所以它們看起來很像陣列

var obj = {
    0:'zhangsan',
    1:'lisi',
    2:'wangwu',
    length:3
}

可迭代物件和類陣列物件通常都 不是陣列，它們沒有 push 和 pop 等方法

2.可迭代物件或類陣列轉化為真陣列

Array.from()方法進行轉換(ES6）

Array.from 方法接受物件，檢查它是一個可迭代物件或類陣列物件，然后創建一個新陣列，并將該物件的所有元素復制到這個新陣列，j然后我們就可以對這個陣列進行真陣列的操作了

//將可迭代物件或者類陣列物件轉換為真陣列
var obj = {
    '0':'zhangshan',
    '1':'lisi',
    '2':'wangwu',
    'length':3
}
console.log(obj);//{ '0': 'zhangshan', '1': 'lisi', '2': 'wangwu', length: 3 }
var arr_obj = Array.from(obj);
arr_obj.push('zhaoliu');
console.log(arr_obj);//[ 'zhangshan', 'lisi', 'wangwu', 'zhaoliu' ]

使用遍歷方式(for-in)把成員放到一個新陣列中

四.陣列檢測

如何檢測一個資料是陣列型別

instanceof運算子

Array.isArray（）方法

//如何檢測一個資料是陣列型別
//instanceof 運算子
var arr = [1,2,3];
var obj_arr = {'0':1,'length':1}//類陣列
var str = 'hello'//既是類陣列也是可迭代物件
console.log(arr instanceof Array); //true
console.log(obj_arr instanceof Array); //false

if(!(obj_arr instanceof Array)){
    obj_arr = Array.from(obj_arr);
}//檢測類陣列是否為真陣列，不是的話就轉為真陣列
console.log(obj_arr);//【1】


//Array.isArray()  判斷一個資料是否是陣列
console.log(Array.isArray(arr));//true

console.log(typeof arr);//object 參考資料型別typeof都為object

五.陣列的序列化與反序列化

陣列序列化 JSON.stringify()

陣列反序列化 JSON.parse()

//陣列的序列化和反序列化
var arr = [{id:0,
            name:'zhangshan',
            age:10,
            class:'4-1',
            sex:'nan'},{
                id:1,
                name:'lisi',
                age:10,
                class:'4-1',
                sex:'nan' 
            }];
var arr_str = JSON.stringify(arr);//將陣列轉為json字串
console.log(arr_str);//[{"id":0,...,"sex":"nan"},{"id":1,...,"sex":"nan"}]

var new_arr = JSON.parse(arr_str);//將json字串轉回陣列
console.log(new_str);//[{ id:0, ...,sex:'nan'},{id: 1, ..., sex: 'nan' }]

將資料封裝為表格

toString() 在默認情況下都會以逗號分隔字串的形式回傳陣列項

join() 使用指定的字串用來分隔陣列字串

split()反序列化,回傳一個新陣列

//把資料封裝成一個表格資料(3*tr>5*td>內容)
var num_arr = [1,2,3];
//通過toSting（）將陣列轉換成字串，默認以，分割的字串
var str = num_arr.toString();
console.log(str);//1,2,3
//通過join（）將陣列通過某個字符拼接轉化為字串
var str2 = num_arr.join('|');//1|2|3
console.log(str2);
//可以通過split()反序列化,回傳一個新陣列
var new_arr = str.split(',');//字串方法
console.log(new_arr);//[ '1', '2', '3' ]

六.陣列的原型方法

1.建構式的方法

Array.isArray() 用來判斷某個變數是否是一個陣列物件

Array.from() 從類陣列物件或者可迭代物件中創建一個新的陣列實體，

Array.from('foo');   // [ "f", "o", "o" ]
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);    // [ "foo", "bar", "baz" ]

Array.of()/New Array（） 根據一組引數來創建新的陣列實體，支持任意的引數數量和型別，

Array.of(7);       // [7]
New Array(7);      //7項空值的陣列 length=7
Array.of(1, 2, 3); // [1, 2, 3]

2.原型的方法

堆疊與佇列的方法（改變原陣列）

堆疊 LIFO (Last-In-First-Out) 先進的后出

pop() 移除陣列中的最后一個項并且回傳該項，同時將陣列的長度減一，

push() 可接受任意型別的引數，將它們逐個添加到陣列的末尾，并回傳陣列的長度

佇列 FIFO (First-In-First-Out) 先進的先出

shift() 移除陣列中的第一個項并且回傳該項，同時將陣列的長度減一

unshift() 在陣列的前端添加任意個項，并回傳陣列的長度

//堆疊和佇列方法，會改變原陣列
var arr = [1,2,3];
//arr.push在末尾追加元素
arr.push(4);//[1,2,3,4]
//arr.pop洗掉最末尾的那個元素
arr.pop();[1,2,3]
//arr.unshift在第一項前面放置元素
arr.unshift(0);[0,1,2,3]
//arr.shift洗掉第一項元素
arr.shift();[1,2,3]
console.log(arr);

排序方法

排序

reverse() 反轉陣列項的順序，改變原陣列

arr.reverse();//3,2,1
console.log(arr);

sort()

默認排序：該方法會呼叫每個陣列項的toString() 方法，然后按照字符序列排序

自定義排序：

a.該方法可以接受一個比較函式作為引數，比較函式有兩個引數

b.如果第一個引數位于第二個引數之前，回傳負數

c.如果第一個引數位于第二個引數之后，回傳正數

//sort排序，從左起第一位數開始排列,然后向右逐位排序
var num_arr = [1,33,113,223,23,111];//[ 1, 111, 113, 223, 23, 33 ]
console.log(num_arr.sort());
//sort可以完成正常的排序功能，需要傳入一個排序的函式
console.log(num_arr.sort(function(v1,v2){
            if(v1>v2)
                return 1;//不換位置
            else if(v1<v2)
                return -1;//換位置
            else
                return 0;
}));//[ 1, 23, 33, 111, 113, 223 ]

排序的演算法：冒泡排序、快速排序、插入排序、選擇排序

//自己寫一個排序函式：冒泡排序
function mysort(arr){
    for(var i=0;i<arr.length-i-1;i++){//排幾次
        for(var j=0;j<arr.length-i-1;j++){
            if(arr[j]<arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    console.log(arr);
}
mysort([2,3,7,1,4]);

ps：這里有常用的十大排序方法，配有動圖生動形象

操作方法

陣列的截取與拼接

截取方法

concat()

陣列拼接，先創建當前陣列的一個副本，然后將接收到的引數添加到這個副本的末尾，回傳副本，不改變原陣列

//陣列的截取與拼接
//concat回傳拼接后的新陣列
var arr1=[1,2,3];
var arr2=arr1.concat(4,5,6);
console.log(arr2);//[ 1, 2, 3, 4, 5, 6 ]

slice()

陣列切割，可接受一個或者兩個引數（回傳項的起始位置，結束位置），當接受一個引數，從該引數指定的位置開始，到當前陣列末尾的所有項，當接受兩個引數，起始到結束之間的項，但是不包含結束位置的項，即結束索引前，不改變原陣列

var arr2 = [ 1, 2, 3, 4, 5, 6 ];
//slice陣列切割;回傳截取后的新陣列
var arr3 = arr2.slice(0,3);//回傳結束索引前的部分
console.log(arr3);//[ 1, 2, 3 ]

splice()

向陣列的中部插入資料將始侄訓傳一個陣列，該陣列中包含從原始陣列中洗掉的項，

洗掉：指定兩個引數(起始位置，要洗掉的項數)

插入：指定三個引數(起始位置，0，要插入的任意數量的項)

替換：指定三個引數(起始位置，要洗掉的項數，要插入的任意數量的項)

var arr2 = [ 1, 2, 3, 4, 5, 6 ];

//splice():接收3個引數(start_index,length,替換或追加的元素)，
//會直接改變原陣列,回傳選中的元素,可以替換、增加、洗掉
arr2.splice(2,3,8,8,8);//從下標為2的數值開始替換3個元素，替換為8,8,8
console.log(arr2);// [1, 2, 8, 8, 8, 6 ]

var res=arr2.splice(0,2,66,66);//新建一個陣列res存放arr2中被替換掉的元素
console.log(arr2);//[ 66, 66, 8, 8, 8, 6 ]
console.log(res);//[ 1, 2 ]

arr2.splice(2,3,8);//從下標為2的元素開始提取3個元素，但只加了一個8，相當于洗掉
console.log(arr2);//[ 66, 66, 8, 6 ]

arr2.splice(0,0,8);//未提取，加了一個，相對于追加
console.log(arr2);//[ 8, 66, 66, 8, 6 ]

位置方法

索引方法

indexOf()

從陣列開頭向后查找，使用全等運算子，找不到該元素回傳-1，第一個引數為要查找的項，第二個引數（可選）為索引開始位置

lastIndexOf()

從陣列末尾向前查找，使用全等運算子，找不到該元素回傳-1，第一個引數為要查找的項，第二個引數（可選）為索引開始位置

//位置方法 
//indexOf比較適合判斷一個陣列中是否有某個成員
var arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(1));//0 從頭開始查找指定元素，找到就退出
console.log(arr.lastIndexOf(1));//8 從末尾開始查找
console.log(arr.indexOf(6));//找不到 -1

//如何將一個陣列去重
function qc(arr){//把函式封裝
var new_arr=[];
for(var k in arr){
    if(new_arr.indexOf(arr[k])==-1)//如果沒有就放入新陣列
    new_arr.push(arr[k]);
}
// return new_arr
console.log(new_arr);
}

迭代方法

every：對陣列中的每一項運行給定函式，如果該函式對每一項都回傳true，則回傳true

//陣列的迭代方法
//every 全部成員都滿足，才會回傳true （判斷一組學生是否滿足18歲）
var ages = [19,20,21,18,17,19,20];
var res=ages.every(function(v,index,arr){
    return v>=18;//回傳布爾型別的值
})
console.log(res);//false

some：對陣列中的每一項運行給定函式，如果該函式對任一項回傳true，則回傳true

//some 只有一個成員滿足，就會回傳ture （判斷一組學生是否含有滿足18歲）
var ages1=[19,3,5,7];
var res=ages1.some(function(v,index,arr){
    return v>=18;//回傳布爾型別的值
})
console.log(res);//ture

filter：對陣列中的每一項運行給定函式，回傳該函式會回傳true的項組成的陣列

//filter 過濾器 獲取一些符合條件的成員（在一群學生中獲取滿足18歲的）
var ages1=[19,3,5,19,334,3,7];
var res=ages1.filter(function(v,index,arr){
    return v>=18;//回傳布爾型別的值
})
console.log(res);//19,19,334

map：對陣列中的每一項運行給定函式，回傳每次函式呼叫的結果組成的陣列

//map方法，遍歷方法，有回傳值 (過了一年，將所有學生的年齡加一)
var res=ages1.map(function(v,index,arr){
    return v+1;//操作完畢的結果
})
console.log(res);//[20, 4, 6, 20, 335, 4, 8]

forEach：對陣列中的每一項運行給定函式，該方法沒有回傳值

//foreach方法，無回傳值 遍歷一次陣列成員，做一些操作，沒有回傳值
var new_arr=[];
ages1.forEach(function(v,index,arr){
    new_arr.push(v+1);
})
console.log(new_arr);//[20, 4, 6, 20, 335, 4, 8]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301781.html

標籤：其他

上一篇：JavaScript學習筆記（四）

下一篇：MD5演算法實戰JS解密

零基礎快速掌握JavaScript（5）陣列、深拷貝與淺拷貝

一.陣列基礎

1.創建陣列

1.使用Array建構式創建

2.使用字面量方法創建

3.應用：創建一個包含1-100的陣列

2.陣列遍歷

遍歷的兩種方式f（for、for-in回圈）

二.陣列實作深拷貝、淺拷貝

1.深拷貝與淺拷貝

2.陣列的深拷貝與淺拷貝

三.可迭代物件或類陣列轉化為真陣列

1.可迭代物件與類陣列的區別

可迭代物件（Iterable）

類陣列（Array-like）

2.可迭代物件或類陣列轉化為真陣列

Array.from()方法進行轉換(ES6）

使用遍歷方式(for-in)把成員放到一個新陣列中

四.陣列檢測

instanceof運算子

Array.isArray（）方法

五.陣列的序列化與反序列化

六.陣列的原型方法

1.建構式的方法

2.原型的方法

堆疊與佇列的方法（改變原陣列）

排序方法

操作方法

位置方法

迭代方法