note
  • Introduction
  • algorithm
    • Array
    • BinarySearch
    • Bits
    • Design
    • DFS
    • DP
    • DP_bag
    • DP_stock.md
    • Hash
    • Heap
    • NodeList
    • Number
    • SlideWindow
    • Sort
    • Stack
    • String
    • Tree
  • Backend
    • express
    • koa2
    • node
    • npm
    • npx
  • db
    • mongoDB
  • Frontend
    • CSS
      • BFC
      • flex
      • layout
      • less
      • middle
      • position
      • sass
      • selector
      • 动画相关属性
      • 响应式页面
      • 层叠上下文
      • 隐藏元素
    • JS
      • Array
      • async
      • DOM
      • ES6
      • JS-军规
      • macrotask-microtask
      • practice
      • RegExp
      • this-prototype-inherit
      • type-convert
      • 前端请求
      • 浏览器加载
      • 浏览器窗口间通信
    • TS
      • note
    • Vue
      • practice
      • Component-Communicate
      • Component
      • lifecycle
      • note
      • Pinia
      • practice
      • Vue-cli
      • Vue-Router
      • Vue-Source
      • Vue2
      • Vue3
      • Vuex
    • cross-domain
    • webpack
    • 从前端角度理解缓存
    • 前端概念
    • 页面性能分析与优化
    • 页面渲染机制
  • Linux
    • basic-command
    • docker
    • java-env
    • learn
    • manage-command
    • nginx
    • Shell
    • ssh
    • tmux
    • vi
  • chrome-devtools
  • git
  • Jenkins
Powered by GitBook
On this page
  1. Frontend
  2. JS

Array

数组创建

let arr1 = []
let arr2 = Array(3) // [empty × 3]
let arr3 = Array('3') // ["3"]
let arr4 = Array.of(3) // [3]
let arr5 = Array.of('3') // ['3']
let arr6 = Array.from({ length: 3 }) // [undefined, undefined, undefined]

稀疏数组

空位的检测 in

//空位是没有任何值,可以用 in 运算符检测
let a = [, , ,] // [empty × 3]
0 in a // false

造成稀疏数组的操作

  • delete 操作符

let b = [1, 2, 3]
delete b[0] // [empty, 2, 3]
  • 构造函数

let a = Array(3) // [empty × 3]
  • 在数组字面量中省略值

;[, , ,] // [empty × 3]
  • 指定数组索引大于数组长度

let c = []
c[10] = 0
console.log(c) // [empty × 10, 0]
  • 指定数组长度大于当前数组长度

let a = []
a.length = 10 // [empty × 10]

尽量避免创建和使用稀疏数组,因为在 ES6 之前的方法,对稀疏数组的处理存在很多不统一的地方

操作的不统一

  • ES5 对空位的处理很不一致了,大多数情况下会忽略空位

    • forEach(), filter(), reduce(), every() 和 some() 跳过空位

    • map() 会跳过空位,但会保留这个值

    • join() 和 toString() 会将空位视为 undefined,而 undefined 和 null 会被处理成空字符串

  • ES6 则是明确将空位转为 undefined

    • Array.from 方法会将数组的空位,转为 undefined

    • 扩展运算符(...)也会将空位转为 undefined

    • copyWithin() 会连空位一起拷贝

    • fill() 会将空位视为正常的数组位置

    • for...of 循环也会遍历空位

    • entries()、keys()、values()、find()和 findIndex() 会将空位处理成 undefined

undefined 数组的正确创建方式

Array.apply(null, {length: 4}) // [undefined, undefined, undefined, undefined]
Array.from({length: 4}) // [undefined, undefined, undefined, undefined]
[...Array(4)] // [undefined, undefined, undefined, undefined]

数组去重

  1. 入门

const unique = (origin) => {
	let result = []
	for (var i = 0; i < origin.length; i++) {
		for (var j = 0; j < result.length; j++) {
			if (origin[i] === result[j]) break
		}
		result.push(origin[i])
	}
	return result
}
  1. indexOf(IE8 及更早版本不支持)

const unique = (origin) => {
	let result = []
	for (var i = 0; i < origin.length; i++) {
		let item = origin[i]
		if (result.indexOf(item) === -1) result.push(item)
	}
	return result
}
  1. filter(IE9+)

const unique = (origin) => {
	let result = origin.filter((item, index, array) => {
		// 只返回那些索引等于当前元素索引的值
		return array.indexOf(item) === index
	})
	return result
}
  1. Object 的 key value

const unique = (origin) => {
	let result = []
	let hashTable = {}
	for (var i = 0; i < origin.length; i++) {
		let current = origin[i]
		//数字1和字符串'1',在键中是相等的,区分这种情况
		let key = typeof current + current
		if (!hashTable[key]) {
			hashTable[key] = true
			result.push(current)
		}
	}
	return result
}
  1. sort

const unique = (origin) => {
	return origin.concat.sort().filter(function (item, index, array) {
		// !index 表示第 0 个元素应该被返回
		return !index || item !== origin[index - 1]
	})
}

const unique1 = (array) => {
	array.sort() // 排序字符串
	array.sort(function (a, b) {
		return a - b // 排序数字
	})
	for (let i = 0; i < array.length; i++) {
		if (array[i] === array[i + 1]) {
			array.splice(i, 1)
			i--
		}
	}
	return array
}
  1. ES6 Set

Array.from(new Set(origin)
  1. ES6 Map

const unique = (origin) => {
	let map = new Map()
	return origin.filter((item) => !map.has(item) && map.set(item, true))
}
PreviousJSNextasync

Last updated 2 years ago