數(shù)組的擴(kuò)展

數(shù)組

//判斷是不是數(shù)組

//1、從原型入手，
Array.prototype.isPrototypeOf(obj);
//2、也可以從構(gòu)造函數(shù)入手，
obj instanceof Array
//3、根據(jù)對象的class屬性(類屬性)，跨原型鏈調(diào)用toString()方法。
Object.prototype.toString.call(obj)
//4、Array.isArray()方法
Array.isArray()

循環(huán)：

1.for(var i = 0;i< 10;i++){}

2.while

ES5新增的方法：

  1. arr.forEach()//代替普通for循環(huán)
arr.forEach(function(val, index, arr) {
    console.log(val, index, arr);
})

//箭頭函數(shù)
arr.forEach((val, index, arr) => {
    console.log(val, index, arr);
})
  1. arr.map(function(item,index,arr){},對象)
    注：第一個參數(shù)是函數(shù)，第二個參數(shù)是函數(shù)內(nèi)部this的指向。
var arr = [1,2,3,4,5,6,7];

var obj = {name:'lili'};

arr.map(function(item){
    console.log(this);  //obj
    //this指向obj
},obj)

//非常有用，做數(shù)據(jù)交互，"映射"

正常情況下，需要和return來配合使用，返回一個新數(shù)組

如果沒有返回時，它和forEach的作用一樣

注：平時只要用map，一定要用return

適用：重新整理數(shù)據(jù)的結(jié)構(gòu)

let arr = [{
    title: "aaaaaa",
    price: 100,
    hot: true
}, {
    title: "bbbbbbb",
    price: 200,
    hot: true
}, {
    title: "cccccccc",
    price: 300,
    hot: true
}];

let newArr = arr.map((item, index, arr) => {
    let json = {};

    json.t = `^_^${item.title}`;
    json.p = item.price + 200;
    json.h = item.hot == true && "真棒!!!!!!";

    return json

})
console.log(newArr)
  1. arr.filter() //過濾，過濾不合格的"元素"，如果回調(diào)函數(shù)返回true，就留下來
let arr = [{
    title: "aaaaaa",
    price: 100,
    hot: true
}, {
    title: "bbbbbbb",
    price: 200,
    hot: false
}, {
    title: "cccccccc",
    price: 300,
    hot: false
}];

let newArr = arr.filter((item, index, arr) => item.hot == true)
console.log(newArr)
  1. arr.some() //檢測數(shù)組中的元素是否滿足指定條件，只要有一個符合條件，返回true
var arr = ['apple', 'pear', 'orange'];
var isHas = arr.some((item, index, arr) => item === 'apple');
console.log(isHas);
  1. arr.every()//檢測數(shù)組，數(shù)組里面所有的元素都符合條件，返回true
var arr = [1, 2, 3, 4, 5];

var b = arr.every((item, index, arr) => item > 4);
console.log(b);//false

注：以上方法接受的參數(shù)是一樣

  1. arr.reduce(prev,cur,index,arr) //求數(shù)組的和，階乘 從左往右

接受的參數(shù)：prev ：上一次的結(jié)果 cur：當(dāng)前的元素

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
let sum = arr.reduce((prev, cur, index, arr) => prev + cur);
console.log(sum)
  1. arr.reduceRight(prev,cur,index,arr) //從右往左

ES6新增

1. 擴(kuò)展運(yùn)算符: ...

let arr = [1,2,3];
let arr2 = [...arr];

let arr1 = [1,2,3];

let arr2 = [4,5,6];

let conArr = [...arr1,...arr2];

ES5

let conArr = arr1.concat(arr2);

2.Array.from(類數(shù)組,?ck)

功能：把類數(shù)組轉(zhuǎn)換為真正的數(shù)組

返回值：數(shù)組

ck：回調(diào)函數(shù)

let lis = Array.from(document.querySelectorAll('li'),function(item){
    console.log(item)
    return item.innerHTML
});

console.log(Array.isArray(lis))

console.log(lis);

類數(shù)組：有l(wèi)enght就靠譜。

let arr3 = Array.form(arr);

function show() {
    console.log(Array.from(arguments));
}
show(1, 2, 3, 4);

var str = 'apple';

console.log(Array.from(str));

var json = {
    0: "lixd",
    1: "12222",
    length: 2
}

console.log(Array.from(json)); //['lixd','12222']

var json = {
    name: "lixd",
    phone: "12222",
    length: 2
}
console.log(Array.from(json)); //[undefined,undefined]

ES5類數(shù)組轉(zhuǎn)真正數(shù)組的方法：Array.prototyoe.slice.call(類數(shù)組)

3. Array.of()

功能:將一組值轉(zhuǎn)換為數(shù)組

返回值：數(shù)組

彌補(bǔ)了Array()的不足

Array.of(10)  //[10]

Array(10) [undefined,undeinfed,...undefined]


let arr = Array.of('apple','orange','banner');

console.log(arr); //['apple','orange','banner']

4.Array.prototype.copyWithin(target,startIndex=0,?endIndex=this.length)

功能：替換數(shù)組

返回值：數(shù)組 會改變原數(shù)組

參數(shù)說明：

target：從該位置開始替換 如果為負(fù)數(shù)，表示倒數(shù)

startIndex:從該位置開始讀取數(shù)據(jù) 0 如果為負(fù)數(shù)，表示倒數(shù)

endIndex:從該位置停止讀取數(shù)據(jù) this.length 如果為負(fù)數(shù)，表示倒數(shù)

let arr = ['a','b','c','d'];

arr.copyWithin(1,2)  //['a','c','d','d']

arr.copyWithin(1,2,4)  //['a','c','d','d']

arr.copyWithin(0,-2,-1) //['c','b','c','d']

5.Array.prototype.find(function(item,index,array){},?thisObj)

功能：查找數(shù)組第一個匹配項

返回值：返回數(shù)組第一個匹配項 沒有匹配值返回undefined

參數(shù):

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

let arr = [
    {
        name:'lili',
        age:18
    },
    {
        name:'lixd',
        age:19
    }
];

arr.find(function(item){
    return item.name === 'lili'
})

6.Array.prototype.findIndex(function(item,index,array){},?thisObject)

功能：查找數(shù)組第一個匹配項的下標(biāo)

返回值：返回數(shù)組第一個匹配項的下標(biāo) -1

參數(shù):

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

let arr = [
    {
        name:'lili',
        age:18
    },
    {
        name:'lixd',
        age:19
    }
];

arr.findIndex(function(item){
    return item.name === 'lili'
})

應(yīng)用：登錄的實例

7.Array.prototype.includes(str,?startIndex=0)

功能：查找數(shù)組是否包含指定值

參數(shù)：

str：查找的值

startIndex：開始查找的下標(biāo) 如果為負(fù)數(shù)，倒數(shù)的位置

返回值：Boolean

let arr = ['orange','banner','applp'];

arr.includes('orange'); //true

區(qū)別:indexOf 返回值是-1

對NaN的操作不一致

let arr = [NaN];

arr.includes(NaN); //true

arr.indexOf(NaN);  //-1

8.Array.prototype.fill(要填充的值,?startIndex=0,?endIndex=this.length)

功能：填充數(shù)組

返回值：會修改原數(shù)組

let arr = [1,2,3];

arr.fill(7); //[7,7,7]

console.log(arr)  //[7,7,7]

arr.fill({name:'ben'}) //[{name:'ben'},{name:'ben'},{name:'ben'}]

9.Array.prototype.flat(num)

功能：用于將嵌套的數(shù)組拉平

參數(shù)：num 拉平的層級

let arr = [1,2,[[3,4],5]];

arr.flat(2); //[1,2,3,4,5]

10. for...of 用來遍歷遍歷器對象

arr.keys()    數(shù)組的下標(biāo)   返回值為Iterator對象

arr.entries() 鍵和值的組合   返回值為Iterator對象

arr.values()  數(shù)組的值     返回值為Iterator對象 

以上三個方法都有next方法

let arr = ['apple', 'orange', 'banner'];

for (let val of arr) {
    console.log(val)
}

for (let key of arr.keys()) {
    console.log(key)
}

for (let item of arr.entries()) {
    console.log(item)
}

for (let [key, val] of arr.entries()) {
    console.log(key, val)
}

let arr = [1,2,3,4];

let vals = arr.keys();

vals.next()

vals.next()
...

/**

  • push 在數(shù)組的末尾添加元素
  • unshift 在數(shù)組的開頭添加元素
  • pop 在數(shù)組的結(jié)尾刪除元素
  • shift 在數(shù)組的開頭刪除元素
  • sort 排序
  • reverse 翻轉(zhuǎn)數(shù)組
  • slice 截取元素，不會改變原數(shù)組
  • splice 截取元素，會改變原數(shù)組
  • some 循環(huán)數(shù)組，只有有一個符合條件，返回值為真
  • every 循環(huán)數(shù)組，所有的項都符合條件時，返回值為真
  • forEach 循環(huán)數(shù)組，沒有返回值
  • map 循環(huán)數(shù)組, 有返回值
  • join 把數(shù)組以特定字符連接成字符串
  • concat 拼接數(shù)組
  • indexOf 查找符合條件的下標(biāo)，找不到返回-1
  • Array.isArray() 檢測變量是否為數(shù)組，返回布爾值 typeof
  • reduce()

*/
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容