数组的扩展

数组

//判断是不是数组

//1、从原型入手，
Array.prototype.isPrototypeOf(obj);
//2、也可以从构造函数入手，
obj instanceof Array
//3、根据对象的class属性(类属性)，跨原型链调用toString()方法。
Object.prototype.toString.call(obj)
//4、Array.isArray()方法
Array.isArray()

循环：

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

2.while

ES5新增的方法：

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

//箭头函数
arr.forEach((val, index, arr) => {
    console.log(val, index, arr);
})
  1. arr.map(function(item,index,arr){},对象)
    注：第一个参数是函数，第二个参数是函数内部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)

//非常有用，做数据交互，"映射"

正常情况下，需要和return来配合使用，返回一个新数组

如果没有返回时，它和forEach的作用一样

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

适用：重新整理数据的结构

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() //过滤，过滤不合格的"元素"，如果回调函数返回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() //检测数组中的元素是否满足指定条件，只要有一个符合条件，返回true
var arr = ['apple', 'pear', 'orange'];
var isHas = arr.some((item, index, arr) => item === 'apple');
console.log(isHas);
  1. arr.every()//检测数组，数组里面所有的元素都符合条件，返回true
var arr = [1, 2, 3, 4, 5];

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

注：以上方法接受的参数是一样

  1. arr.reduce(prev,cur,index,arr) //求数组的和，阶乘 从左往右

接受的参数：prev ：上一次的结果 cur：当前的元素

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. 扩展运算符: ...

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(类数组,?ck)

功能：把类数组转换为真正的数组

返回值：数组

ck：回调函数

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

console.log(Array.isArray(lis))

console.log(lis);

类数组：有lenght就靠谱。

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类数组转真正数组的方法：Array.prototyoe.slice.call(类数组)

3. Array.of()

功能:将一组值转换为数组

返回值：数组

弥补了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)

功能：替换数组

返回值：数组 会改变原数组

参数说明：

target：从该位置开始替换 如果为负数，表示倒数

startIndex:从该位置开始读取数据 0 如果为负数，表示倒数

endIndex:从该位置停止读取数据 this.length 如果为负数，表示倒数

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)

功能：查找数组第一个匹配项

返回值：返回数组第一个匹配项 没有匹配值返回undefined

参数:

ck:回调函数

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)

功能：查找数组第一个匹配项的下标

返回值：返回数组第一个匹配项的下标 -1

参数:

ck:回调函数

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

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

应用：登录的实例

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

功能：查找数组是否包含指定值

参数：

str：查找的值

startIndex：开始查找的下标 如果为负数，倒数的位置

返回值：Boolean

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

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

区别:indexOf 返回值是-1

对NaN的操作不一致

let arr = [NaN];

arr.includes(NaN); //true

arr.indexOf(NaN);  //-1

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

功能：填充数组

返回值：会修改原数组

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)

功能：用于将嵌套的数组拉平

参数：num 拉平的层级

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

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

10. for...of 用来遍历遍历器对象

arr.keys()    数组的下标   返回值为Iterator对象

arr.entries() 键和值的组合   返回值为Iterator对象

arr.values()  数组的值     返回值为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 在数组的末尾添加元素
  • unshift 在数组的开头添加元素
  • pop 在数组的结尾删除元素
  • shift 在数组的开头删除元素
  • sort 排序
  • reverse 翻转数组
  • slice 截取元素，不会改变原数组
  • splice 截取元素，会改变原数组
  • some 循环数组，只有有一个符合条件，返回值为真
  • every 循环数组，所有的项都符合条件时，返回值为真
  • forEach 循环数组，没有返回值
  • map 循环数组, 有返回值
  • join 把数组以特定字符连接成字符串
  • concat 拼接数组
  • indexOf 查找符合条件的下标，找不到返回-1
  • Array.isArray() 检测变量是否为数组，返回布尔值 typeof
  • reduce()

*/
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容