内置对象-Array

旧梦_
244 阅读11分钟

数组

稀松数组

稀松数组,里面有空值empty我们称为是稀松数组

// 1 当我们 delete 数组的项的时候 数组中会有 empty 
var arr = [1, 2, 3, 4, 5]
delete arr[1]
console.log(arr) => [1, empty, 3, 4, 5]
// 我们看见数组中出现了空值 我们称之为稀松数组
// 2 当我们在数组中多打了逗号 `,` 也会出现 empty
var arr = [1, , 3, 4, 5]
console.log(arr) => [1, empty, 3, 4, 5]
// 我们看见数组中出现了空值
// 当然我们尝试调用的时候 他是会打印 undefined 而不是 empty
console.log(arr[1]) => undefined 
// 因为当我们调用的时候 arr[i] 相当于 调用了他没有赋值,对象的特性如果这个属性没有值 返回的时候 undefined

类数组

类数组和数组

  • 什么是类数组呢
    • 类数组有length属性,并且我们发现类数组的key是有相应的顺序的
    • 类数组是对象,我们常见的类数组arguments``DOMLIST``字符串
    • 数组的长度和字符串的长度的区别:数组的长度是可以变的,字符串的长度是不可以变得,字符串的长度是只读的
    • 类数组是对象他调用不了数组原型上的方法比如forEach

遍历迭代及生成器迭代器

遍历是什么?

  1. 遍历就是将数组中的每一个元素进行查询和处理

迭代是什么

  1. 我们希望遍历的过程是可控的(遍历的过程可停止,可继续),手动的控制遍历
  2. 遍历是迭代一次又一次的实现

生成器

  1. 生成器是一个函数 在js中将函数名字前添加一个*****便是生成器函数
  2. 生成器的迭代是由yield进行控制的

迭代器

  1. 是由生成器执行后返回的带有next方法的对象

数组的方法

数组上有很多的方法 我们打印数组的时候发现他的原型上有很多方法

  1. 转字符串的方法

    toString (join => split)

  2. 堆栈方法

    push pop unshift shift

  3. 排序相关方法

    reverse sort 随机排序

  4. 拼接方法

    concat

  5. 删改方法

    slice splice

  6. 查找方法

    indexOf lastIndexOf includes

  7. 创建数组的方法

    Array() 
fill 填充
Array.of()  单个值填充
Array.form() 类数组转数组

  8. 查找项方法

    find findIndex

  9. 遍历方法

    Array.prototype.keys Array.prototype.values Array.prototype.entires 对应 Object.keys Object.values Object.entries 
forEach
map
filter
some
every
find
findIndex

  10. 归纳函数

    reduce

  • 通用方法toString

    • toString 把数组转换成字符串 然后进行返回, 可以把多维数组直接传换成字符串
    var arr = [1, 2, 3, 4, 5, 6, 7]
var str = arr.toSTring()
var str = Array.prototype.toString.call(arr)
console.log(str) => 1,2,3,4,5,6,7
// 当然他如果是多维数组 也可以进行toSTring 转换的结果是一样的

  • join split

    • join 把数组转换成字符串进行返回,如果参数中没有值则按照 , 进行转换, 如果参数中有值 则按照参数的值进行转换,且不能转换多维数组
    • 与join 对应的方法 split 将字符串转换成数组,如果没有参数则直接进行转换,如果有参数则按照参数进行转换
    var arr = [1, [[2], 3, 4, 5, 6, 7]]
var str = arr.join()
console.log(str) => 1,2,3,4,5,6,7
var str = arr.join('-')
console.log(str) => 1-2,3,4,5,6,7
// 我们发现这个join 只能分割一维数组也就是只能分割一层
// 当然在字符串中也有相应的属性把字符串分割成数组
var str = '123456'
var arr = str.split('')
console.log(arr) => [1,2,3,4,5,6]

  • push pop unshift shift

    • push 从数组尾部推入一项到多项,返回值时推入后的数组长度 改变原数组 如果push的不是数组 而是其他类型 则有length 在length处增加一位,如果没有则按照0来增加
    • pop 从数组尾部删除一项 返回值是删除的那项 改变原数组
    • unshift 从数组起始位置增加一项或多项,返回增加后的数组长度 改变原数组
    • shift 从数组起始位置删除一项 返回值是删除的哪一项 改变原数组
    // push 返回值 => 增加数组后的长度
// pop 返回值 => 删除的项目
// unshift 返回值 => 增加数组后的长度
// shift 返回值 => 删除的项目
var arr = [1,2,3,4]
console.log(arr.push(10)) => 5 => 增加数组后的长度
console.log(arr) => [1,2,3,4,10]
console.log(arr.pop()) => 10 => 删除的项目
console.log(arr) => [1, 2, 3, 4]
console.log(arr.unshift(10)) => 5 => 增加数组后的长度
console.log(arr) => [10, 1, 2, 3, 4]
console.log(arr.shift()) => 10 => 删除的项目
console.log(arr) => [1, 2, 3, 4]

  • reverse sort

    • reverse 数组倒序方法 改变原数组 将数组的顺序进行倒叙 返回原数组并改变
    • sort 改变原数组,根据回调函数,返回排序的顺序 排序好返回原数组 如果不传递回调函数 则按照asii码进行排序,并且是从左到右逐位比较
    • 基于原地算法,每个浏览器的算法不同
    • 如果小于0则排在左边,如果大于0则排在右边,如果是0则不动
    // reverse 返回值 => 倒序后的原数组
// sort 返回值 => 排序后的原数组
var arr = [1,2,3,4]
console.log(arr,arr.reverse() === arr) // true 
console.log(arr,arr.sort() === arr) // true

  • concat

    • 数组拼接方法 concat 数组拼接方法 如果传入数组 则会进行拼接 维度去一维 ,如果是参数则直接拼接在数组后,返回新数组
    // concat 返回值 => 拼接后的数组
var arr = [1, 2, 3]
console.log(arr,arr.concat(1,2))  => [1,2,3] [1,2,3,1,2]
console.log(arr,arr.concat([1,2])) => [1,2,3] [1,2,3,1,2]
console.log(arr,arr.concat([[1],[2]])) => [1,2,3] [1,2,3,[1],[2]] 
// concat 不能去除数组的多维
// 我们现在常用于 ... 运算符 进行数组的拼接
console.log(arr,[...arr,1,2]) => [1,2,3] [1,2,3,1,2]

  • slice

    • 数组切割方法 slice 返回切割好的数组 不改变原数组, 如果传负数则 length + 参数,进行取, 必须第一个参数小于第二个参数, 第一个参数为 start 第二个参数为end
    // [ ) 左闭右开 start end (无法交换位置)
// slice 返回值 切割后的数组
var arr  = [1, 2, 3, 4, 5]
console.log(arr,arr.slice(2)) // [1, 2, 3, 4, 5] ,[3,4,5]
console.log(arr, arr.slice(3, 4)) // [1, 2, 3, 4, 5]  [4, 5]
console.log(arr, arr.slice(4, 2)) // [1, 2, 3, 4, 5]  []
console.log(arr, arr.slice(-3, -1)) // [1, 2, 3, 4, 5]  [3, 4]
// 可以将类数组转换为数组

var str = 'dshakhjdskah'
console.log(Array.prototype.slice.call(str)); // ["d", "s", "h", "a", "k", "h", "j", "d", "s", "k", "a", "h"]

function fn() {
    console.log(Array.prototype.slice.call(arguments));
}
fn(1, 2, 3, 4, 5, 6, 7)

  • splice

    • 数组增删改方法 splice 无法使用负数作为参数 第一个参数为 start 第二个参数为count 第三个参数为数需要增加数组的参数
    • 如果只传一个参数则为切割数组,从下标为几开始切割 返回值为切割好的数组
    • 如果传入两个参数则为从切割数组 从下标为几开始切割,共切割多少位,第二个参数时切割多少位,返回值时切割好的数组
    • 如果传入三个或者超过三个则是,从下标为几开始切割,共切割多少位,从下标处插入第三个及后面的参数 返回值时切割好的数组
    // splice 修改原数组
// splice 第一个参数可以传入负数
// splice 第二个参数 传入无效值 负数 返回 [] 空数组
// splice 一个参数的返回值 从传入的索引删除原数组 并返回新数组 删除到结尾 [ ) 左闭右开
// splice 两个参数的返回值  从传入的索引删除原数组 并返回新数组 第二个参数是长度
// splice 两个以上参数的返回值  在传入的索引位置 在原数组上插入第二个参数以后的值
var arr = [1, 2, 3, 4, 5, 6, 7]
// console.log(arr, arr.splice(1));
// console.log(arr, arr.splice(1, 2));
// console.log(arr, arr.splice(-3, -1))
console.log(arr, arr.splice(0, 0, 6, 6, 6, 6))

  • indexOf lastIndexOf

    // indexOf 返回值 如果数组中有查找的这个值则是从左面开始查找到第一个的索引 如果没有则是 -1
var arr = [1,2,3,4,5]
console.log(arr.indexOf(1)) // => 0
// lastIndexOf  返回值 如果数组中有查找的这个值则是从右面开始查找到第一个的索引 如果没有则是 -1
var arr = [1,2,3,4,5,1]
console.log(arr.lastIndexOf(1)) // => 5
// includes 返回值 如果数组中有这个值则返回 true 如果没有则为 false
var arr = [1,2,3,4,5,1]
console.log(arr.includes(1)) // => true
//////////////
includes 和 indexOf 的区别 
includes 返回的是布尔值 indexOf 返回的是 索引或者 -1
includes 可以查找NaN indexOf 无法查询NaN

  • find findIndex

    // find 返回值 数组中匹配的的那一项 如果查找不到返回undefined
var arr = [1,2,3,4,5]
var item = arr.find(function(item){ // 5
    return item > 4
})如果查找不到返回undefined
// find 返回值 数组中匹配的的那一项 如果查找不到返回-1
var item = arr.findIndex(function(item){ // 4
    return item > 5
})

  • Array.of Array.form Array fill

    • Array与new Array 创建数组一致, 如果参数只有一位并且是数字类型,则创建多少位数组,数组的值为empty
    • Array.of 与 Array创建数组不同,Array.of 创建数组则是 根据参数创建数组,只要一个参数并且是数字类型他也只会创建一位
    • Array.from 把一个可迭代对象生成一个数组
    • 数组填充方法 fill
      • 左闭右开 [ ) 参数为 填充的值 value 第二个参数为填充的起始位置,第三个参数为填充的结束位置 改变原数组
    // Array.of 创建新数组 
Array.of(5) => [5]
// Array.from 把伪数组变成真数组
var str = 'dsadada'
var arr = Array.from(str) => ["d", "s", "a", "d", "a", "d", "a"]
// Array 创建新数组
var arr = Array(5) => [empty*5]
// fill 填充数组
var arr = Array(5).fill(0) => [0,0,0,0,0]

  • Object.keys Object.values Object.entries Array.prototype.keys Array.prototype.values Array.prototype.entries

    • arr.keys() 返回值是迭代器对象 value 为key值
    • arr.values() 返回值是迭代器对象 value value值
    • arr.entries() 返回值是迭代器对象 value 为key value 值
    // Object.keys 返回值 为对象中的 key 值组成的数组
var obj = {x: 1,a: 2,b: 3,d: 4}
var keys = Object.keys(obj) // ['x','a','b','d']
// Object.values 返回值 对象中的 value 值组成的数组
var obj = {x: 1,a: 2,b: 3,d: 4}
var keys = Object.values(obj) // [1, 2, 3, 4]
// Object.entries 返回值 对象中的 [key,value] 组成的数组
var obj = {x: 1,a: 2,b: 3,d: 4}
var keys = Object.entries(obj) //) ["x", 1] ["a", 2] ["b", 3] ["d", 4]

  • forEach map filter some every

    • 他们的参数都一样 第一个参数为 回调函数,第二个参数为this指向,回调函数有三个参数 第一个参数为 这一项第二个参数为索引 第三个参数为原数组
    • 不遍历稀松数组
    // forEach map filter some every 这几个函数参数是一样的 第一个参数为 callBack的参数 item(当前项) index(当前索引) array(便利的数组) 第二个参数为this的指向   遇见稀松数组不会遍历稀松数组哪项
// forEach 为纯遍历 没有返回值 即使return 也没有返回值
var arr = [1, 2, 3, 4]
var obj = {}
arr.forEach(function(item,index,array){
    this['value'+index] = item
   	console.log(item,index,array)
},obj)
// map 映射函数 与原数组进行映射 产生新数组 有返回值
var arr = [1, 2, ,,,,3, 4]
var newArr = arr.map(function(item){
    return item * 99
})
console.log(newArr)
// filter 过滤函数 过滤出与自己条件匹配的项组成数组
var arr = [1, 2, 3, 4]
var newArr = arr.filter(item=>{
    return item > 3
})
console.log(newArr)
// some 数组中的某一项与条件匹配则为真
var arr = [1, 2, 3, 4]
var flag = arr.some(item=>{
    return item > 3
})
console.log(flag)
// every 数组中的每一项与条件匹配则为真
var arr = [1, 2, 3, 4]
var flag = arr.every(item=>{
    return item > 3
})
console.log(flag)

  • reduce reduceRight

    • 他们的参数为,第一个参数是回调函数,第二个参数是归纳首次的值,第三个参数为this指向
    • reduceRight 同理,反向reduce,
    var arr = [1, 2, 3, 4, 5, 6]
var res = arr.reduce(function(prev,item,index,array){
    return prev + item
},0)

  • flat flatMap

    • flat 将数组扁平化 如果参数不传则为扁平化一层,如果想深度扁平化传入 Infinity
    • flatMap 则是flat加上一个map 也就是说flat扁平化后根据每个参数进行map映射,但是他的flat深度为1
      • 详细的map使用方法与Array.prototype.map一致
    // 使用方法
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
//使用 Infinity，可展开任意深度的嵌套数组
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// flatMap使用方法
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

  • copyWithin

    • 浅复制数组一部分到数组中的另一个位置,该方法不会改变数组长度
    • 该方法有三个参数
      • 第一个参数为target复制到的目标位置,必填, 如果值为负数则取this.length+target,其他两个参数同理
      • 第二个参数为start复制元素的起始位置,默认值为0
      • 第三个参数为end复制元素的目标位置,默认值为,this.length
    • 参数必须为整数
    // 使用方法
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]

  • Array.isArray

    • 检测传入的参数否是数组
    • 该方法优于 instanceof , 因为它可以检测 iframes
    // 当我们检测的时候发现一个事实,就是Array.prototype 为true
Array.isArray(Array.prototype); // false
// 当我们阅读MDN的时候发现他使用的是 Object.prototy.toString.call 来进行判断的数组

预知下集请看下一章,下一章进行每个方法的实现

avatar
文章
阅读
粉丝