前端知识点

配色方案

本页目录

Array 数组 ​

构造函数 ​

JS
Array(n)
Array(n)

实例属性 ​

JS
Array.length
Array.name
Array.length
Array.name

静态方法 ​

JS
Array.isArray()     // 是否为数组
Array.from()        // 将类数组转为数组
Array.of()          // 统一 Array(n) 存在的问题
Array.isArray()     // 是否为数组
Array.from()        // 将类数组转为数组
Array.of()          // 统一 Array(n) 存在的问题

实例方法 ​

增删 ​

方法参数说明返回值
pushitem1, item2, item3可传入多个值新数组长度
pop-被删除的元素
unshfititem1, item2, item3新数组长度
shift-被删除的元素
concat新数组
slice新数组
splice新数组
fill

排序 ​

方法参数说明返回值
sort
reverse

查找 ​

方法版本参数说明返回值
indexOfES5不能判断 NaN索引值，不存在返回 -1
lastIndexOfES5索引值，不存在返回 -1
findIndexES6返回索引值，不存在返回 -1
findLastIndexES6返回索引值，不存在返回 -1
findES6返回元素，不存在返回 undefined
findLastES6返回元素，不存在返回 undefined

包含 ​

方法版本参数说明返回值
includesES6能判断 NaNboolean
someES6boolean
everyES6boolean

分组 ​

方法版本参数说明返回值
groupES6
groupToMapES6

遍历 ​

方法版本参数说明返回值
forES6
for...inES6
for...ofES6
do {...} whileES6
whileES6
forEachES6
mapES6新数组
filterES6新数组
reduceES6
reduceRightES6
keysES6
valuesES6
entriesES6
fromEntriesES6

其它 ​

方法参数说明返回值
flat新数组
flatMap新数组
join
toString

总结 ​

  • 改变原数组的方法 push pop unshift shift concat reverse sort splice slice

题目 ​

1. 判断是否为数组 ​

JS
Array.isArray(arr)

arr instanceof Array

Object.prototype.toString.call(arr) === '[object Array]'

arr.constructor === Array

arr.__proto__.constructor === Array

Array.prototype.isPrototypeOf(arr)

Object.getPrototypeOf(arr) === Array.prototype // true
Array.isArray(arr)

arr instanceof Array

Object.prototype.toString.call(arr) === '[object Array]'

arr.constructor === Array

arr.__proto__.constructor === Array

Array.prototype.isPrototypeOf(arr)

Object.getPrototypeOf(arr) === Array.prototype // true

2. 数组去重 ​

2.1 ES6 实现（一维数组） ​

JS
Array.from(new Set(array))

[...new Set(array)]
Array.from(new Set(array))

[...new Set(array)]

2.2 filter 实现 ​

JS
function unique(arr) {
    arr.filter((item, index, arr) => {
        return arr.indexOf(item) === index; // 如果该元素是第一个，则留下
    })
}
function unique(arr) {
    arr.filter((item, index, arr) => {
        return arr.indexOf(item) === index; // 如果该元素是第一个，则留下
    })
}

3. 数组扁平化 ​

3.1 flat 实现 ​

JS
array.flat(n);  // 扁平化最深层级，Infinit 为所有层
array.flat(n);  // 扁平化最深层级，Infinit 为所有层

3.2 reduce + 递归 ​

JS
let arr = [1, 2, [3, 4], [5, 6, 7]]

function flat(arr) {
    return arr.reduce((prev, cur) => {
        if(Array.isArray(cur)) {
            return prev.concat(flat(cur))
        } else {
            return prev.concat(cur)
        }
    }, [])
}

flat(arr)
let arr = [1, 2, [3, 4], [5, 6, 7]]

function flat(arr) {
    return arr.reduce((prev, cur) => {
        if(Array.isArray(cur)) {
            return prev.concat(flat(cur))
        } else {
            return prev.concat(cur)
        }
    }, [])
}

flat(arr)

3.3 递归 ​

JS
function flat(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        if(array.isArray(arr[i])) {
            result = result.concat(flat(arr[i]))
        } else {
            result.push(arr[i])
        }
    }
    return result;
}
function flat(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        if(array.isArray(arr[i])) {
            result = result.concat(flat(arr[i]))
        } else {
            result.push(arr[i])
        }
    }
    return result;
}

4. 数组转为对象 ​

4.1 展开运算符 ​

JS
let arr = ['a', 'b', 'c'];
let obj = {...arr}; // { 0: 'a', 1: 'b', 2: 'c' }
let arr = ['a', 'b', 'c'];
let obj = {...arr}; // { 0: 'a', 1: 'b', 2: 'c' }

4.2 Object.assign(target, ...sources) ​

JS
let arr = ['a', 'b', 'c'];
let obj = Object.assign({}, arr}; // { 0: 'a', 1: 'b', 2: 'c' }
let arr = ['a', 'b', 'c'];
let obj = Object.assign({}, arr}; // { 0: 'a', 1: 'b', 2: 'c' }

5. 数组合并 ​

JS
let arr = [1,2]
let arr2 = [3,4]

arr.concat(arr2)

arr.push(...arr2)

arr.push.apply(arr, arr2)

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

arr.concat(arr2)

arr.push(...arr2)

arr.push.apply(arr, arr2)

[...arr, ...arr2]

6. 数组的交集 ​

JS
function (arr1, arr2) {
    return arr1.filter(item => {
        return arr2.includes(item)
    })
}
function (arr1, arr2) {
    return arr1.filter(item => {
        return arr2.includes(item)
    })
}

7. 求数组元素最大值 ​

JS
let arr = [2,3,1,7,5];

let max = Math.max(...arr)

let max = Math.max.apply(Math, arr)
let arr = [2,3,1,7,5];

let max = Math.max(...arr)

let max = Math.max.apply(Math, arr)

8. 类数组 ​

类数组主要有 函数的 arguments 参数，dom 节点对象 NodeList；

类数组转为数组方法：

  • [...arguments]
  • Array.from(arguments)
  • Array.prototype.slice.call(arguments)
  • [].slice.call(arguments)

9. for...in 与 for...of ​

for...in缺点 ​

  1. 下标索引 index 为字符串类型数字
  2. 顺序可能不是按照数组实际顺序
  3. 会遍历所有可枚举的属性（如数组的 method 与 name）

for...in 与 for...of 差异 ​

  • for...in

    • 可遍历类型包括：数组、字符串、对象
    • 遍历的是数组的索引 key，for...of 遍历的是数组元素值；

  • for...of

    • 只遍历数组内的元素，不会遍历数组的 method 与 name 等
    • 可迭代的数据：Array、String、Set、Map

  • 是否可枚举：Object.getOwnPropertyDescriptors(obj) => enumerable: true

  • 是否可迭代：arr[Symbol.Iterator]() => next()