数组学习笔记

旧梦_
156 阅读8分钟

数组

稀松数组

稀松数组,里面有空值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. 转字符串的方法

    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


10. 归纳函数

 ```js
 reduce 
 ```

 

- 通用方法`toString`

```js
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 转换的结果是一样的

  • joinandsplit

    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 返回值 => 增加数组后的长度
// 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 返回值 => 排序后的原数组
var arr = [1,2,3,4]
console.log(arr,arr.reverse() === arr) // true 
console.log(arr,arr.sort() === arr) // true

  • 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

    // [ ) 左闭右开 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 修改原数组
// 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.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

    // 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

    // 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)

    自定义数组方法

    • push

      Array.prototype.myPush = function () {
    for (var i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i]
    }
    return this.length
}

    • unshift

      Array.prototype.myUnshift = function () {
    for (var i = arguments.length - 1; i >= 0; i--) {
        this.splice(0, 0, arguments[i])
    }

    return this.length
}

    • indexOf

      Array.prototype.myIndexOf = function (searchElement) {
  var arr = this,
      len = arr.length,
      fromIndex = arguments[1] || 0,
      index = -1
  for (; fromIndex < len; fromIndex++) {
      if (arr[fromIndex] === searchElement) {
          return fromIndex
      }
  }
  return index
}

    • unique

      Array.prototype.unique = function () {
    var obj = {},
        arr = []
    for (var i = 0; i < this.length; i++) {
        if (obj.hasOwnProperty(this[i])) {
            obj[this[i]] = this[i]
        } else {
            arr.push(this[i])
            obj[this[i]] = this[i]
        }
    }
    return arr
}
const arr = [1, 1, 1, 0, 0, 0, 0, 2, 3, 24, 324, 2, 3, 4, 5, 6]
console.log(arr.unique())

    • strUnique

      var str = 'adhskajhdshajk'
String.prototype.unique = function () {
    var obj = {},
        arr = []
    for (var i = 0; i < this.length; i++) {
        if(obj[this[i]]){
            obj[this[i]] = this[i]
        }else {
            obj[this[i]] = this[i]
            arr.push(this[i])
        }
    }
    return arr.join('')
}
console.log(str.unique())

    • firstUnique

      String.prototype.firstUnique = function () {
    var obj = {}
    for (var i = 0;i<this.length;i++){
        if(obj[this[i]]){
            obj[this[i]]++
        }else {
            obj[this[i]] = 1
        }
    }
    for (var key in obj){
        if(obj[key] === 1){
            return key
        }
    }
}
const str = 'dshaidkashcccdddhhhbbabcvesdfkg'
console.log(str.firstUnique())

    • forEach

      Array.prototype.myForEach = function (callBack) {
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window;
    for (var i = 0; i < len; i++) {
        callBack.apply(arg2, [arr[i], i, arr])
    }
}

    • filter

      function deepClone(origin, target) {
    target = target || {}
    var toStr = Object.prototype.toString,
        arrStr = '[object Array]';
    if (typeof origin !== 'object') return origin
    for (var key in origin) {
        if (origin.hasOwnProperty(key)) { // 判断这个属性是不是属于这个对象
            if (typeof origin[key] === 'object') {
                if (toStr.call(origin[key]) === arrStr) {
                    target[key] = []
                } else {
                    target[key] = {}
                }
                deepClone(origin[key], target[key])
            } else {
                target[key] = origin[key]
            }
        }
    }
    return target;
}

Array.prototype.myFilter = function (callBack) {
    var arg2 = arguments[1] || window,
        newArr = [],
        arr = this,
        len = arr.length,
        item;
    for (var i = 0; i < len; i++) {
        if (callBack.apply(arg2, [arr[i], i, arr])) {
            // 利用深拷贝互相引用问题
            item = deepClone(arr[i])
            newArr.push(item)
        }
    }
    return newArr
}

    • map

      function deepClone(origin, target) {
    target = target || {}
    var toStr = Object.prototype.toString,
        arrStr = '[object Array]';
    if (typeof origin !== 'object') return origin
    for (var key in origin) {
        if (origin.hasOwnProperty(key)) { // 判断这个属性是不是属于这个对象
            if (typeof origin[key] === 'object') {
                if (toStr.call(origin[key]) === arrStr) {
                    target[key] = []
                } else {
                    target[key] = {}
                }
                deepClone(origin[key], target[key])
            } else {
                target[key] = origin[key]
            }
        }
    }
    return target;
}

Array.prototype.myMap = function (callBack) {
    var arr = this,
        len = arr.length,
        newArr = [],
        arg2 = arguments[1],
        item;
    for (var i = 0; i < len; i++) {
        item = deepClone(arr[i]) // 深拷贝解决引用问题 源 map 函数是同一引用的
        newArr.push(callBack.apply(arg2, [item, i, arr]))
    }
    return newArr;
}
      • every
      Array.prototype.myEvery = function (callBack) {
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        res = true;
    for (var i = 0; i < len; i++) {
        if (!callBack.apply(arg2, [arr[i], i, arr])) { // 如果有一项返回的是false终止循环
            res = false
            break
        }
    }
    return res;
}

    • some

      Array.prototype.mySome = function (callBack) {
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        res = false;
    for (var i = 0; i < len; i++) {
        if (callBack.apply(arg2, [arr[i], i, arr])) { // 如果有一项为true则终止循环
            res = true
            break
        }
    }
    return res;
}
avatar
文章
阅读
粉丝