JS筆記(1) 數組Array方法

1、數組

• 一組數據的集合，數組裏能夠存儲任何類型的數據

• var ary = [2,'hello',true,{name:'珠峯'},['web前端']

• 索引：方便咱們找到數組中的某一項，索引就是從0開始排列 數字屬性名

• length：數組的長度，數組中元素個數,能讀能寫

• length - 1 ：獲取數組中最後一項

• 數組寫法：

  • 1. let arr = new Array;
  • 2. let arr = [];

• 數組中獲取每一個值能夠經過下標操做 [1,2.3][2] //=>3

• 清空數組：arr.length = 0; //=> 不要寫arr = [];

小結：

// 向數組末尾添加arr.push(x)
arr.splice(arr.length, 0, x)
arr[arr.length] = x

// 向數組開頭添加arr.unshift(x)
arr.splice(0, 0, x)

// 刪除數組開頭第一項arr.shift()
arr.splice(0, 1)

// 刪除數組最後一項arr.pop()
arr.length--arr.length-=1arr.splice(-1)
arr.splice(arr.length - 1, 1)

// 清空數組arr.splice(0)
arr.length = 0

// 數組克隆arr.slice()/arr.slice(0)
arr.concat()

// 可以改變原數組的方法
push
shift
unshift
pop
sort
splice
reverse
複製代碼

2、數組的方法

• 數組中提供了不少內置的屬性方法（函數）供咱們使用
• 這些數組方法都保存在對象上 Array.prototype

1）push：向數組的末尾添加一項或者多項

-  返回值：添加後的數組長度
-  原數組 發生了改變（修改原數組）
複製代碼

2）unshift：向數組開頭添加一項或者多項

- 返回值：添加後的數組長度
ary.unshift(20,30);
複製代碼

3）pop：刪除數組中最後一項

- 返回值：刪除的那一項
ary.pop()
複製代碼

4）shift：刪除數組中的第一項

- 返回值：刪除的那一項
 - ary.shift()
複製代碼

5) splice：刪除、添加 直接修改原數組

• 返回值：刪除的內容組成的新數組
• 若是第二位爲0（即未刪除），則返回空數組

// 狀況一：只有一個參數
// splice(x) 一個參數，從索引x處開始，一直刪除到末尾
// 返回值：刪除後的內容 組成的新數組
var arr = [10,20,30,50,60]
var res4 = arr.splice(2); //一個參數，從索引1處開始，一直刪除到末尾

複製代碼

// 狀況二：兩個參數
// splice(x,y) 兩個參數，從索引x處開始，一直刪除y個
// 返回值：刪除的內容 組成的新數組

var arr1 = [10,20,30,50,60,90];
var res5 = arr1.splice(1,3);

var arr2 = [10,20,30,50,60,90];
var res6 = arr2.splice(1,0); // 從索引1開始，刪除0個（即一個都不刪除）

複製代碼

// 狀況三：多個參數
// splice(x,y,a,b,c) 從索引x開始，刪除y個，將第三項及後面幾項添加到刪除的位置
// 返回值：刪除後的內容組成的新數組


var n = [10,20,30,50,60,90];
var res7 = n.splice(1,2,100,200,500); // 從索引1開始，刪除兩個（即20,30），將第三項及後面幾項插入到刪除的位置


var n = [10,20,30,50,60,90];
var res7 = n.splice(1,0,100,200,500); // 從索引1開始，一項都不刪除，將第三項及後面幾項插入到刪除的位置


var a = [10,20,30,50,60,90];
var res8 = a.splice(a.length,0,2,3,4); // 向數組末尾添加


var b = [10,20,30,50,60,90];
var res9 = b.splice(0,0,2,3,4); // 向數組開頭添加

複製代碼

6）indexOf & lastIndexOf 查找數組索引

• 1）indexOf 查找某項 在數組中首次出現的索引位置
  • 返回值：查找到的索引值
  • 若是返回-1，數組中不存在這一項

var n = [10,20,30,50,60,20,30,90];
var nn = n.indexOf(30); //=>2
複製代碼

• 2） lastIndexOf：查找某項，在數組中最後一次出現的索引位置
  • 返回值：查找到的索引值
  • 若是返回-1，數組中不存在這一項

var a = [10,20,30,50,60,20,30,90];
var aa = a.lastIndexOf(30); //=>6
複製代碼

7）slice：截取

• 截取數組中的內容組成新數組，不會修改原數組
• 1）slice() slice(0) slice(null) slice(undefined) 徹底克隆 ，返回值是克隆的新數組，不會影響原數組

var a = [10,20,30];
var aa = a.slice(null); //返回克隆的新數組
複製代碼

• 2）slice(x) 從索引x處截取到數組末尾，將截取到的內容組成新的數組返回

var b = [10,20,30,40,50];
var bb = b.slice(2); //30,40,50
複製代碼

• 3）slice(x,y) :從索引x處開始截取到y處，但不包括y這一項，將截取到的內容組成新的數組返回

var c = [10,20,30,40,50];
var cc = c.slice(2,4); //30,40
複製代碼

• 4）slice(-x,-y) ：索引支持負數，slice(length-x,length-y)

var d = [10,20,30,40,50];
var dd = d.slice(-2); //40,50

var e = [10,20,30,40,50];
var ee = e.slice(-3,-1); //20,30

複製代碼

8）sort：數組的排序

• sort 排序 原數組發生改變，從小到大排序（10之內）
• sort默認排序是按照unicode編碼來排序的
• 也可使用自定義排序，sort中須要傳入一個函數，形參（a,b）
• arr.sort(function(a,b){ return 必定是返回一個數字 })
• 原理：a: 數組中的當前項 b：數組中的下一項
  • return a - b 數組當前項減去下一項，若是返回值>0，則a，b交換位置，不然<=0，什麼都不作，實現升序
  • return b - a 數組下一項減去當前項，若是返回值>0，則a，b交換位置，不然<=0，什麼都不作，實現降序
  • return 1 若是返回值爲一個數字（大於0），則數組當前項和後一項交換位置，即實現數組倒序（倒着排列）

var ary = [{ age: 1 }, { age: 12 }, { age: 13 }, { age: 11 }, { age: 21 }, { age: 18 }];

ary.sort(function(a,b){
    return a.age - b.age
})

console.log(ary); //0: {age: 1} {age: 11} {age: 12} {age: 1}3 {age: 18} {age: 21}
複製代碼

var a = [4,6,2,8,3,1]
var aa = a.sort(); //=>1,2,3,4,6,8
a === aa ; //=>true 返回值和原數組同樣

var b = [4,60,2,86,15,1,101]
var bb = b.sort(); //=>1, 101, 15, 2, 4, 60, 86


let arr = [10, 3, 18, 38, 48, 26];
// 從小到大排序
let ary = arr.sort(function (n,m) {
console.log(n-m) //前一項數字減後一項數字的結果
return n-m;  // -7 15 8 28 20 30 10 8 -22 -12
});
console.log(ary); //排序後的新數組



// 從大到小排序
arr.sort(function(n, m){
    return m - n
})
console.log(arr)

複製代碼

// sort默承認以按照拼音字母順序 排序
var arr = [3, 1, 5, 'c', 'd', 'a', 'b']
arr.sort()
console.log(arr)
['abc', 'ace', 'aae']
['aae', 'abc', 'ace']

// 從小到大排序
arr.sort(function(a, b) {
return a - b
})

// 從大到小
arr.sort(function(a, b) {
return b - a
})

複製代碼

9） resverse ： 倒序

• 將原數組倒着排列 原數組改變 返回的是原數組

var a = [3, 1, 24, 5, 11, 22, 12, 101];
var ss = a.reverse(); //=>101, 12, 22, 11, 5, 24, 1, 3
a === ss //=>true
複製代碼

10）concat：數組的拼接

• concat()
  • 返回值：拼接好的新數組，不會影響原數組

var a = [1,2,3];
var b = [4,5,6];
var ss = a.concat(b); //=>1,2,3,4,5,6
複製代碼

var a = [1,2,3];
var b = [4,5,6];
var ss = b.concat(a); //=>4,5,6,1,2,3
複製代碼

concat默認只能展開一層
  var res = [30].concat([10, 15], 20, 'hello')
  console.log(res) // [30, 10, 15, 20, "hello"]
 
// concat默認只能展開一層數組
var a3 = [1]
var res = a3.concat([[2, 3, 4]], [5, 6])
console.log(res) // [1, [2, 3, 4], 5, 6]
複製代碼

var a4 = [1,2,3];
var ss1 = a4.concat(); //沒有參數，至關於克隆一個新數組返回
a4 === ss1 //=>false
複製代碼

11）join & toString：數組類型轉換：將數組轉換成字符串

• toString()
  • 返回值：轉換後的字符串，不會影響原數組

var a = [1,2,3];
var aa = a.toString();
複製代碼

• join() ：能夠經過指定的鏈接符或分隔符將數組中的每一項鍊接成爲一個字符串

var b = [1,2,3];
var bb = b.join();
var bb1 = b.join('');
var bb2 = b.join('+'); // 能夠變成其餘符號
複製代碼

12）evel：數組求和

• eval():將字符串當作js 表達式來運行
• 至關於小型js解釋器

var a = [1, 2, 3, 4, 5]
// 對數組進行求和
var str = a.join('+') // "1+2+3+4+5"
console.log(eval(str)) // eval("1+2+3+4+5") => 15
// eval("1*2*3*4*5")
console.log(eval(a.join('*'))) // 120
複製代碼

13）forEach & map：數組遍歷

• 1）把數組中的每一項取出來

// for循環
var a = [1, 2, 3, 4, 5]
for (var i = 0;i<a.length;i++){
console.log(i,a[i]);
};
複製代碼

• 2）forEach：數組內置遍歷方法 forEach: 專門用來循環數組的。 兩個參數:

1. 第一個參數: 函數-> function(){} function(數組中的每一個值,索引值,整個數組){ }
2. 第二個參數: 改變this指向,寫啥是啥（若是寫個null,undefined仍是爲window）

let arr = [true, 'haha', 10, {}, [1, 2, 3]];
arr.forEach(function (item, i, all) {
console.log(item);//數組中的每項
// console.log(i); //索引
// console.log(all); // 整個數組
// console.log(this); //第二個參數若是沒有，則this是window
},arr);

複製代碼

• 3）map：循環數組，它的返回值爲新的數組

function(item,i,all){ return 新數組的每項,長度和原始數組同樣 }

var a = [1, 2, 3, 4, 5];
var a2 = a.map(function(item,index,ary){
// item 當前這一項
// index 當前項的索引
// ary原數組 ary === a
return item * 2; //每次指定的返回值被做爲新數組中的內容
});


<ul id="ul"></ul>

const ul = document.getElementById('ul');
let html = '';
let arr = [1, '你好', '哈哈', '呵呵'];
let newArr = arr.map(function (item, i) {
return '<li>' + item + '</li>';
});
ul.innerHTML = newArr.join('');
console.log(newArr.join(''));
console.log(newArr);

複製代碼

14）filter：數組過濾

• 數組的過濾，過濾條件成立的這個值
• 參數： function(item,i,all){ return 成立的布爾值 }
• filter方法返回值 爲過濾後的新數組

//過濾大於10小於30的數字
let arr = [3, 10, 18, 38, 48, 26];
let ary = arr.filter(function (item, i) {
    return item >= 10 && item < 30
})
console.log(ary);

複製代碼

15）some：檢測數組中的元素是否知足指定條件

• 查看數組中某項數據是否知足某個條件，只要有一個知足條件，就返回true；若是全部項條件都不成立，則返回false，返回的是一個布爾值
• some() 不會對空數組進行檢測。
• some() 不會改變原始數組。

let arr = [1, 2, 3, 4, 5];
//查看數組中是否有6，明顯沒有，就返回false
let res = arr.some(function (item) {
    return item === 6
});
console.log(res); // flase(數組中沒有6)

let res1 = arr.indexOf(6);
console.log(res1); //-1(數組中沒有6)

複製代碼

16）every：檢測數組中是否每一項都知足指定條件

• 判斷數組中是否是每一項都符合某個條件，所有都符合返回true，只要有一項不符合就返回false
• 參數：function ( item , i , all ) { return }

let arr = ['62',[],NaN,{},(function(){})(),/^$/,2333];
let arr1 = [1,2,3,4,5,6];
let res = arr.every(function(item,i){
    return item;
});
let res1 = arr1.every(function(item,i){
    return item;
});
console.log(res); //false (不是全部項都爲true)
console.log(res1); //true (全部項都爲true)

複製代碼