Subscribe to Jack

<100 subscribers

Subscribe to Jack

<100 subscribers

贰。番外篇

2.1 重写 Array .prototype. at()

// 兼容老浏览器的 MDN polyfill
// 注释：Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
if (Array.prototype.at) {
    Array.prototype.at = function (idx) {
        return this[this.length + idx]
    }
}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.at(-1) // 'dddd'
arr.at(-3) // 'bbbb'
复制代码

2.2 清空数组

方法一：Array.length

最快

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr // ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

arr.length = 0 // 0

arr // []
// 被引用的数组，也会被清空
arr1 // []
复制代码

方法二：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr.splice(0) // ['aaa', 'bbbb', 'cccc', 'dddd']

arr // []
// 同上，被引用的也会被清空
arr1 // []
复制代码

方法三：直接赋予新数组[]

最慢，且占用内存

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr = [] // []

arr // []
// 被引用的数组，不会被清空
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

2.3 扁平化

const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]
复制代码

方法一：Array.prototype.flat()

const res1 = arr.flat(Infinity);
复制代码

方法二：new RegExp()

// 缺点：都会变成字符串
const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
// 改良版
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
复制代码

方法三：Array.prototype.reduce()

const flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);
复制代码

方法四：函数递归

const res5 = [];
const fn = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      fn(arr[i]);
    } else {
      res5.push(arr[i]);
    }
  }
}
fn(arr);
复制代码

方法五：while() + some()

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
复制代码

2.4 合并

方法一：Array.push()

const arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.push(1, 2, 3,[4, 5, 6]) // 8
arr // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, Array(3)]
复制代码

方法二：Array.concat()

arr.concat([1, 2, 3],[4, 5, 6]) // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, 4, 5, 6]
arr // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法二：扩展运算符

[...[1, 2, 3, 4],...[4, 5]] //[1,2,3,4,5,6]
复制代码

2.5 去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]
复制代码

方法一：new Set()

const arr1 = Array.from(new Set(arr));
// 或
const arr1 = [...new Set(arr)];

// 是 Set 类型，不是 Array 类型
Object.prototype.toString.call(new Set(arr)) // '[object Set]'
复制代码

方法二：filter() + indexOf()

const arr2 = arr => {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}
复制代码

方法三：new Map()

const arr3 = arr => {
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}
复制代码

方法四：includes()

const arr4 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}
复制代码

2.6 交集

方法一：new Set()

const one = [0, 2, 4, 6, 8, 8]
const two = [1, 2, 3, 4, 5, 6]
const duplicated = [...new Set(one)].filter(v => two.includes(v)) // [2, 4, 6]
复制代码

2.7 删除虚值

方法一：Array.prototype.filter()

const arr = [0, 'blue', '', NaN, 9, true, undefined, 'while', false]
const real = arr.filter(Boolean) // ['blue', 9, true, 'while']
复制代码

2.8 重组（变量交换）

方法一：解构赋值

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff']
[arr[1], arr[2]] = [arr[2], arr[1]] // ['cccc', 'bbbb']
arr // ['aaa', 'cccc', 'bbbb', 'dddd']

// 如果想获取单个值
[a, , , e, f] = arr
a // 'aaa'
e // 'dddd'
f // 'eee'
复制代码

方法二：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff', 'ggg', 'hhh', 'iii']
arr.splice(1, 3, ...arr.splice(4, 4, arr[1], arr[2], arr[3])) // ['bbbb', 'cccc', 'dddd']
arr // ['aaa', 'eee', 'fff', 'ggg', 'hhh', 'bbbb', 'cccc', 'dddd', 'iii']
复制代码

方法三：引入中转变量

temp = arr[1]
arr[1] = arr[2]
arr[2] = temp
复制代码

2.9 类数组 --> 数组

// 类数组（包含 length 属性，比如 arguments、DOM 操作方法返回的结果等）
const asArr = { 0: 'aaa', '1': 'bbb', '二': 'ccc', 4: 'eee', length: 6 }
复制代码

方法一：Array.prototype.from()

Array.from(asArr)
// => ['aaa', 'bbb', undefined, undefined, 'eee', undefined]
// undefined 可枚举
复制代码

方法二：Array.prototype.slice.call()

Array.prototype.slice.call(asArr)
// => ['aaa', 'bbb', empty × 2, 'eee', empty]
// empty 不可枚举
复制代码

PS：其他产生 empty 的情况

// 也会产生 empty 空位，不会改变 length 属性
delete arr[2]
// 直接删掉元素，且改变 length 属性
arr.splice(2, 1)
复制代码

方法三：扩展运算符

[...document.querySelectorAll('div')]
复制代码

2.10 数组 --> 对象

方法一：扩展运算符

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
// ['aaa', 'bbbb', 'cccc', 'dddd']
{ ...arr }
// {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}
复制代码

方法二：while()

i = 0
s = {}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']

while (arr[i]) {
    s[i] = arr[i++]
}

s // {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}
复制代码

方法三：Object.fromEntries()

Object.keys({name:'张三',age:14}) // ['name','age']
Object.values({name:'张三',age:14}) // ['张三',14]
Object.entries({name:'张三',age:14}) // [[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) // ES10的api,Chrome不支持, firebox输出{name:'张三',age:14}
复制代码

2.11 浅拷贝

方法一：Array.slice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr.slice(0)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法二：展开操作符

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [...arr]
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法三：Array.concat()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [].concat(array)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法四：直接赋值

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 2333, 'cccc', 'dddd']
复制代码

2.12 Array.from 达到 .map 的效果

arr = [
    { name: '张三', age: 18 },
    { name: '李四', age: 18 },
    { name: '王麻子', age: 18 },
    { name: '小六', age: 18 },
]
nameMap = arr.map(v => v.name) // ['张三', '李四', '王麻子', '小六']
nameMap = Array.from(arr, ({name}) => name) // ['张三', '李四', '王麻子', '小六']
复制代码

2.13 获取最后 n 个元素

方法一：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']

arr.slice().splice(-1) // ['dddd']
arr.slice().splice(-3) // 'bbbb', 'cccc', 'dddd'
复制代码

2.233 二维数组绘制图形

方法一：Emmm

// Emmmm

贰。番外篇

2.1 重写 Array .prototype. at()

// 兼容老浏览器的 MDN polyfill
// 注释：Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
if (Array.prototype.at) {
    Array.prototype.at = function (idx) {
        return this[this.length + idx]
    }
}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.at(-1) // 'dddd'
arr.at(-3) // 'bbbb'
复制代码

2.2 清空数组

方法一：Array.length

最快

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr // ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

arr.length = 0 // 0

arr // []
// 被引用的数组，也会被清空
arr1 // []
复制代码

方法二：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr.splice(0) // ['aaa', 'bbbb', 'cccc', 'dddd']

arr // []
// 同上，被引用的也会被清空
arr1 // []
复制代码

方法三：直接赋予新数组[]

最慢，且占用内存

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr = [] // []

arr // []
// 被引用的数组，不会被清空
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

2.3 扁平化

const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]
复制代码

方法一：Array.prototype.flat()

const res1 = arr.flat(Infinity);
复制代码

方法二：new RegExp()

// 缺点：都会变成字符串
const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
// 改良版
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
复制代码

方法三：Array.prototype.reduce()

const flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);
复制代码

方法四：函数递归

const res5 = [];
const fn = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      fn(arr[i]);
    } else {
      res5.push(arr[i]);
    }
  }
}
fn(arr);
复制代码

方法五：while() + some()

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
复制代码

2.4 合并

方法一：Array.push()

const arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.push(1, 2, 3,[4, 5, 6]) // 8
arr // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, Array(3)]
复制代码

方法二：Array.concat()

arr.concat([1, 2, 3],[4, 5, 6]) // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, 4, 5, 6]
arr // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法二：扩展运算符

[...[1, 2, 3, 4],...[4, 5]] //[1,2,3,4,5,6]
复制代码

2.5 去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]
复制代码

方法一：new Set()

const arr1 = Array.from(new Set(arr));
// 或
const arr1 = [...new Set(arr)];

// 是 Set 类型，不是 Array 类型
Object.prototype.toString.call(new Set(arr)) // '[object Set]'
复制代码

方法二：filter() + indexOf()

const arr2 = arr => {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}
复制代码

方法三：new Map()

const arr3 = arr => {
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}
复制代码

方法四：includes()

const arr4 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}
复制代码

2.6 交集

方法一：new Set()

const one = [0, 2, 4, 6, 8, 8]
const two = [1, 2, 3, 4, 5, 6]
const duplicated = [...new Set(one)].filter(v => two.includes(v)) // [2, 4, 6]
复制代码

2.7 删除虚值

方法一：Array.prototype.filter()

const arr = [0, 'blue', '', NaN, 9, true, undefined, 'while', false]
const real = arr.filter(Boolean) // ['blue', 9, true, 'while']
复制代码

2.8 重组（变量交换）

方法一：解构赋值

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff']
[arr[1], arr[2]] = [arr[2], arr[1]] // ['cccc', 'bbbb']
arr // ['aaa', 'cccc', 'bbbb', 'dddd']

// 如果想获取单个值
[a, , , e, f] = arr
a // 'aaa'
e // 'dddd'
f // 'eee'
复制代码

方法二：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff', 'ggg', 'hhh', 'iii']
arr.splice(1, 3, ...arr.splice(4, 4, arr[1], arr[2], arr[3])) // ['bbbb', 'cccc', 'dddd']
arr // ['aaa', 'eee', 'fff', 'ggg', 'hhh', 'bbbb', 'cccc', 'dddd', 'iii']
复制代码

方法三：引入中转变量

temp = arr[1]
arr[1] = arr[2]
arr[2] = temp
复制代码

2.9 类数组 --> 数组

// 类数组（包含 length 属性，比如 arguments、DOM 操作方法返回的结果等）
const asArr = { 0: 'aaa', '1': 'bbb', '二': 'ccc', 4: 'eee', length: 6 }
复制代码

方法一：Array.prototype.from()

Array.from(asArr)
// => ['aaa', 'bbb', undefined, undefined, 'eee', undefined]
// undefined 可枚举
复制代码

方法二：Array.prototype.slice.call()

Array.prototype.slice.call(asArr)
// => ['aaa', 'bbb', empty × 2, 'eee', empty]
// empty 不可枚举
复制代码

PS：其他产生 empty 的情况

// 也会产生 empty 空位，不会改变 length 属性
delete arr[2]
// 直接删掉元素，且改变 length 属性
arr.splice(2, 1)
复制代码

方法三：扩展运算符

[...document.querySelectorAll('div')]
复制代码

2.10 数组 --> 对象

方法一：扩展运算符

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
// ['aaa', 'bbbb', 'cccc', 'dddd']
{ ...arr }
// {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}
复制代码

方法二：while()

i = 0
s = {}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']

while (arr[i]) {
    s[i] = arr[i++]
}

s // {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}
复制代码

方法三：Object.fromEntries()

Object.keys({name:'张三',age:14}) // ['name','age']
Object.values({name:'张三',age:14}) // ['张三',14]
Object.entries({name:'张三',age:14}) // [[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) // ES10的api,Chrome不支持, firebox输出{name:'张三',age:14}
复制代码

2.11 浅拷贝

方法一：Array.slice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr.slice(0)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法二：展开操作符

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [...arr]
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法三：Array.concat()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [].concat(array)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']
复制代码

方法四：直接赋值

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 2333, 'cccc', 'dddd']
复制代码

2.12 Array.from 达到 .map 的效果

arr = [
    { name: '张三', age: 18 },
    { name: '李四', age: 18 },
    { name: '王麻子', age: 18 },
    { name: '小六', age: 18 },
]
nameMap = arr.map(v => v.name) // ['张三', '李四', '王麻子', '小六']
nameMap = Array.from(arr, ({name}) => name) // ['张三', '李四', '王麻子', '小六']
复制代码

2.13 获取最后 n 个元素

方法一：Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']

arr.slice().splice(-1) // ['dddd']
arr.slice().splice(-3) // 'bbbb', 'cccc', 'dddd'
复制代码

2.233 二维数组绘制图形

方法一：Emmm

// Emmmm

No activity yet

Jack

No activity yet

数组方法

数组方法

贰。番外篇

2.1 重写 Array .prototype. at()

2.2 清空数组

方法一：Array.length

方法二：Array.splice()

方法三：直接赋予新数组[]

2.3 扁平化

方法一：Array.prototype.flat()

方法二：new RegExp()

方法三：Array.prototype.reduce()

方法四：函数递归

方法五：while() + some()

2.4 合并

方法一：Array.push()

方法二：Array.concat()

方法二：扩展运算符

2.5 去重

方法一：new Set()

方法二：filter() + indexOf()

方法三：new Map()

方法四：includes()

2.6 交集

方法一：new Set()

2.7 删除虚值

方法一：Array.prototype.filter()

2.8 重组（变量交换）

方法一：解构赋值

方法二：Array.splice()

方法三：引入中转变量

2.9 类数组 --> 数组

方法一：Array.prototype.from()

方法二：Array.prototype.slice.call()

方法三：扩展运算符

2.10 数组 --> 对象

方法一：扩展运算符

方法二：while()

方法三：Object.fromEntries()

2.11 浅拷贝

方法一：Array.slice()

方法二：展开操作符

方法三：Array.concat()

方法四：直接赋值

2.12 Array.from 达到 .map 的效果

2.13 获取最后 n 个元素

方法一：Array.splice()

2.233 二维数组绘制图形

方法一：Emmm

贰。番外篇

2.1 重写 Array .prototype. at()

2.2 清空数组

方法一：Array.length

方法二：Array.splice()

方法三：直接赋予新数组[]

2.3 扁平化

方法一：Array.prototype.flat()

方法二：new RegExp()

方法三：Array.prototype.reduce()

方法四：函数递归

方法五：while() + some()

2.4 合并

方法一：Array.push()

方法二：Array.concat()

方法二：扩展运算符

2.5 去重

方法一：new Set()

方法二：filter() + indexOf()

方法三：new Map()

方法四：includes()

2.6 交集

方法一：new Set()

2.7 删除虚值

方法一：Array.prototype.filter()

2.8 重组（变量交换）

方法一：解构赋值

方法二：Array.splice()