ES6 -- fill详解
fill
Array.prototype.fill
fill方法实际上是根据下标范围来给范围内的元素覆盖新的值
左闭右开
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 4);
console.log(newArr);// [1, 2, 'a', 'a', 5]当end 大于数组的长度的时候 覆盖到数组末尾
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 5);
console.log(newArr);//[1, 2, 'a', 'a', 'a']newArr 就是原数组的引用
console.log(arr === newArr);//true
当只填写start 没有end 则覆盖到数组末尾
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2);
console.log(newArr);//[1, 2, 'a', 'a', 'a']
当 start 与 end 都部填写则全部覆盖
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a');
console.log(newArr);// ['a', 'a', 'a', 'a', 'a']
如果 start 和 end 是负数呢
start + len
end + len
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a',-4,-2);
console.log(newArr);//[1, 'a', 'a', 4, 5]
什么都不填呢
全部覆盖为undefined
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill();
console.log(newArr);// [undefined, undefined, undefined, undefined, undefined]
当 start 等于 end
不变
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 1, 1);
console.log(newArr);//[1, 2, 3, 4, 5]
当 start 与 end 是非数字
或者
end 是不是数字 start 是数字
不变
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 'c', 's');
console.log(newArr);//[1, 2, 3, 4, 5]
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 'b');
console.log(newArr);//[1, 2, 3, 4, 5]注意
当 start 为非数字 end 为数字
是[0, end)
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 'c', 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]当 start 与 end 是NaN
或者
start 是数字 end 是NaN
不变
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', NaN, NaN);
console.log(newArr);//[1, 2, 3, 4, 5]
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, NaN);
console.log(newArr);//[1, 2, 3, 4, 5]
注意
当 start 为NaN end 是数字时
[0, end)
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', NaN, 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]
当 start 与 end 都为null
或 end 为null start是数字
不变
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, null);
console.log(newArr);//[1, 2, 3, 4, 5]
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', null, null);
console.log(newArr);//[1, 2, 3, 4, 5]
当 end 是数字 start是null
[0,end)
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', null, 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]
当 start end 都为undefined
全部覆盖
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', undefined, undefined);
console.log(newArr);//['a', 'a', 'a', 'a', 'a']
当 start 数字 end uindefined
start 到最后
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, undefined);
console.log(newArr);//[1, 2, 'a', 'a', 'a']
当start undefined end 数字
[0, end)
const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', undefined, 3);
console.log(newArr);//['a', 'a', 'a', 'a', 5]
value 可选 默认填充undefined
start 可选 默认0
end 可选 默认 this.length
对象
const newObj = Array.prototype.fill.call({ length: 3 }, 4);
console.log(newObj);
创建类数组方法
可以使用fill包装成一个方法
创建一个类数组
function makeArrayLike(arr) {var arrLike = {length: arr.length,push: [].push,splice: [].splice,};arr.forEach(function (item, index) {[].fill.call(arrLike, item, index, index + 1);});return arrLike;
}
const newObj = makeArrayLike(['a', 'b', 'c', 'd', 'e']);
console.log(newObj);
function makeArrayLike(arr) {var arrLike = {length: arr.length,push: [].push,splice: [].splice,};arr.forEach(function (item, index) {[].fill.call(arrLike, item, index, index + 1);});return arrLike;
}
const newObj = makeArrayLike([{id: 1,name: '张三',},{id: 2,name: '李四',},{id: 3,name: '王五',},
]);
console.log(newObj);
实现myFill
Array.prototype.myFill = function () {var value = arguments[0] || undefined,start = arguments[1] >> 0,end = arguments[2];if (this == null) {throw new TypeError('This is null or not defined');}var obj = Object(this),len = obj.length >>> 0;start = start < 0 ? Math.max(len + start, 0) : Math.min(start, len);end = end === undefined ? len : end >> 0;end = end < 0 ? Math.max(len + end, 0) : Math.min(end, len);while (start < end) {obj[start] = value;start++;}return obj;
};
ES6 -- fill详解相关推荐
- ES6 Promise详解
Promise是JS中进行异步编程的新解决方案. 从语法上来说:Promise是一个构造函数 从功能上来说:promise对象用来封装一个异步操作并可以获取其成功/失败的结果值 promise:启动异 ...
- ES6 -- find 详解
find 基本使用 Array.prototype.find 返回第一个满足条件的数组元素 const arr = [1, 2, 3, 4, 5]; const item = arr.find(fun ...
- 最全ES6详解及用法
最全ES6详解及用法 前言 babel babel使用方法 变量的定义 let.const this 和作用域 do 顶层对象 global对象 import class JS中的原型 原型语言 pr ...
- ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
- 【ES6】Module模块详解
[ES6]Module模块详解 一.Module的由来 二.严格模式 三.export命令 四.import命令 查看更多ES6教学文章: 参考文献 引言:由于两个JS文件之间相互使用必须通过一个ht ...
- 【ES6】Promise对象详解
[ES6]Promise对象详解 一.Promise对象的含义 二.Promise对象的用法 三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载 查看更多ES6教学文章: 参 ...
- 【ES6】Generator函数详解
[ES6]Generator函数详解 一.Generator函数简介 基本概念 函数写法 yield关键字介绍 二.next方法的参数 三.for...of循环 四.关于普通throw()与Gener ...
- 【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
- JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
最新文章
- f5 2017.09.03故障
- Linux基础命令---文本格式转换expand、unexpand
- OpenCV cv::Mat::checkVector用法的实例(附完整代码)
- spring-core
- 有var d = new Date(‘20xx-m-09‘)，可以设置为m+1月份的操作是？
- spring boot 三种入参
- oracle客户端和ssh区别,oracle 使用SSH 转发功能
- 计算机专业课教学,计算机专业课教学的原则和方法
- 系统学习NLP（六）--语义分析
- ubuntu18使用wine安装TIM和微信
- 记一次js调试（attachEvent, onchange, onpropertychange）
- 区块链三加一告诉你如何快速了解区块链入门技术？
- 快速生成数据库文档--screw
- 程序员坐行李箱迎寒风编码 2 小时，目击者：激励我写了一篇论文！
- 0基础看-最大似然函数，原理，基本概念，例子
- 微博SDK第三方授权登陆
- linux 不自动进入睡眠,linux 7 为何自动睡眠
- iOS 开发: 仿QQ
- java开发之异常处理_SimpleMappingExceptionResolver
- 软件设计之——“高内聚低耦合”