前端练习41 数组的空位填充

知识点

数组空位的辨别
直接声明一个有长度的数组，数组的成员都是空位
各种方法对空位的不同处理

题目

JavaScript数组有空位的概念，也就数组的一个位置上没有任何的值。例如：

[ , , 'Hello'] // => 0, 1 都是空位, 3 不是空位

空位并不等于undefined或者null。一个位置上如果是undefined那么它依然有值，例如[, , undefined]，0和1都是空位，而2不是空位。

请你完成一个函数fillEmpty，它接受一个数组作为参数，可以把数组里面的所有空位都设置为'Hello'，例如：

const a = [, , null, undefined, 'OK', ,]
fillEmpty(a)
// a 变成 ['Hello', 'Hello', null, undefined, 'OK', 'Hello']

注意，你要原地修改原先的数组，而不是返回一个新的数组。

实现

关键点就是在对空位和undefined的判断上

数组的空位会反映在length属性上，占据了数组的一个位置，但是内容未定义，如果使用下标读取，结果就是undefined

用in运算符、hasOwnProperty都会对数组空位的下标返回false

此外，map会跳过空位，但是在结果里面保留这个值，而every、filter、forEach、some都会直接跳过空位

ES6中的Array.from、解构、for...of都会将空位作为undefined处理，而Object.keys不会取到空位的下标

关键一点就是，空位实际上是没有下标的~

所以题目可以这样实现：

const fillEmpty = (arr) => {for (let i = 0; i < arr.length; i++) {if(!arr.hasOwnProperty(i)) {arr[i] = 'Hello'}}return arr;
}

总结

直接声明一个有长度的数组，数组的成员都是空位：

let a = new Array(2);
// [empty × 2]let b = [];
b.length = 2;
// [empty × 2]

对待空位：

判断空位，对下标使用in或者hasOwnProperty判断
对下标处理，使用Array.from、数组解构或者for...of，将空位当当做undefined处理
其他大部分方法forEach/some/filter/every/Object.keys都会略过空位不进行处理
不同方法对空位处理差异很大，所以要避免尽量出现空位

参考

#73 数组的空位填充@ScriptOJ
数组的空位与undefined的注意点@CSDN
一道面试题引发的JavaScript数组的思考@掘金

前端练习41 数组的空位填充相关推荐

数组方法 + ES6中数组方法 + 数组的空位
目录 1.静态方法 1.Array.isArray() Array.isArray方法返回一个布尔值,表示参数是否为数组.它可以弥补typeof运算符的不足. 2.Array.from() 用于将两类 ...
ES6规格之数组的空位
数组的空位下面再看另一个例子. const a1 = [undefined, undefined, undefined]; const a2 = [, , ,]; a1.length // 3 a2 ...
es6笔记·····数组的空位
数组的空位数组的空位指,数组的某一个位置没有任何值.比如,Array构造函数返回的数组都是空位. Array(3) // [, , ,] 上面代码中,Array(3)返回一个具有3个空位的数组. 注 ...
【Java基础】前端传一个数组或者集合后台怎么接受（案例详解）
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
前端小贴士 -- 数组空位与初始化
一.数组的创建在讨论数组初始化之前,首先要知道数组的两种创建方式: 构造函数的创建方式 const a = new Array(2) 数组字面量语法 const b = [1, 1] 以上两 ...
03前端入门课--数组的属性操作方法
### 03:数组的属性 && 操作方法 [TOC] #### 一.Array property 数组的属性 ##### 1.constructor 返回 ...
php 接受数组_PHP接收前端发送的数组
//前端发送数据 var unPaid=JSON.stringify([{ "AMN_D" : "300. 0", "AMN_T1" : & ...
java上三角数组_二维数组的三角填充两种java实现的方法
类似这种: 1 2 3 4 5 12 13 14 6 11 15 7 10 8 9 认为第二种方法简单还是第一种方法简单直接决定了你的水平. package test; /** * 二维数组三角填充 ...
Web前端工作笔记001---封装前端数据字典_js 数组filter 总结_详解
JAVA技术交流QQ群:170933152 我这里是我封装,前端数据字典的时候,用到的//数据字典 var dic = function () {var dics;$.ajax({async: fal ...

前端练习41 数组的空位填充

知识点

题目

实现

总结

参考

前端练习41 数组的空位填充相关推荐

最新文章

热门文章