Array.prototype.slice.call()方法详解

  • slice:用来截取截取字符串方法
  • Array: javascript的一个引用类型,其原型prototype上有一个方法叫slice
  • call和apply : 用来改变对象中函数内部的this引用,使得函数可以随便换‘妈妈’

为什么不直接用 arguments.slice(1)呢 不是一样的么?

答案是不一样。

Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象,让arguments具有slice()方法。要是直接写arguments.slice(1)会报错。

arguments 是object 不是Array ,他的原型上没有slice方法

原理:

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组

var a={length:2,0:'first',1:'second'};//类数组,有length属性,长度为2,第0个是first,第1个是second
console.log(Array.prototype.slice.call(a,0));// ["first", "second"],调用数组的slice(0);

var a={length:2,0:'first',1:'second'};
console.log(Array.prototype.slice.call(a,1));//["second"],调用数组的slice(1);

var a={0:'first',1:'second'};//去掉length属性,返回一个空数组
console.log(Array.prototype.slice.call(a,0));//[]

function test(){
  console.log(Array.prototype.slice.call(arguments,0));//["a", "b", "c"],slice(0)
  console.log(Array.prototype.slice.call(arguments,1));//["b", "c"],slice(1)
}
test("a","b","c");

将函数的实际参数转换成数组的方法:

1、

var args = Array.prototype.slice.call(arguments);

2、

var args = []; 
for (var i = 1; i < arguments.length; i++) { 
    args.push(arguments[i]);
}

 3、

var toArray = function(s){
    try{
        return Array.prototype.slice.call(s);
    } catch(e){
        var arr = [];
        for(var i = 0,len = s.length; i < len; i++){
            //arr.push(s[i]);
               arr[i] = s[i];  //据说这样比push快
        }
         return arr;
    }
}

将函数的实际参数转换成数组的方法的实际应用:

表单申请时,upload组件上传多张图片时候,能够左右切换预览所有上传的图片;

表单申请后,打开upload组件也能够预览多张图片

 

代码如下


import Viewer from "viewerjs";
预览组件的版本号:"viewerjs": "^1.10.5",

 /**关闭图片 */
  handleCancel = () => this.setState({ previewVisible: false });
  /**处理图片 */
  handlePreview = async (file: UploadFile, className: string) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as Blob) as string;
    }
    if ([".pdf", ".docx", ".doc"].some(i => file.response?.data.replace(/\s/g, "")?.includes(i)) || [".pdf", ".docx", ".doc"].some(i => file.url?.replace(/\s/g, "")?.includes(i))) {
      this.setState({
        previewImage: file?.url || file?.preview as string,
        previewVisible: true,
        fileUrl: file.response?.data.replace(/\s/g, ""),
      });
    } else {
      const dom = document.querySelector(`.${className} .ant-upload-list`);
      const url = file.url || file.thumbUrl || file.preview;
      const domSrcList = Array.prototype.slice.call(document.querySelectorAll(`.${className} .ant-upload-list img`)).map(i => i.src);
      if (dom) {
        const gallery = new Viewer(dom as HTMLElement, {
          initialViewIndex: domSrcList.indexOf(url) !== -1 ? domSrcList.indexOf(url) : 0,
          hidden: () => {
            gallery.destroy();
          },
        });
        gallery.show();
      }
    }
  }


 /** 处理上传 */
  handleChange = async (data: UploadChangeParam<UploadFile<any>>) => {
    const fun = () => {
      if (data.file.response) {
        if (data.file.response.data) {
          for (let i of data.fileList) {
            if (i.thumbUrl?.includes("base64")) {
              i.thumbUrl = i.response?.data || i.thumbUrl;
            }
          }
        }
      }
    }
    fun();
  }



render() {

<div className="clearfix sycnssmj">
            <Form.Item>
              {getFieldDecorator("sycnssmj", {
                valuePropName: "sycnssmj",
                getValueFromEvent: (e: UploadChangeParam) => {
                  return e.fileList;
                },
                rules: [
                  {
                    required: checkType ? true : false,
                    message: "文件必须上传!",
                  },
                  { validator: checkedUploadSuccess },
                ],
                initialValue: defaultValue && [...fileListFun(defaultValue.sycnssmj as File[])],
              })(<Upload
                accept="image/*,.pdf,.docx"
                key={JSON.stringify(defaultValue && [...fileListFun(defaultValue.sycnssmj as File[])])}
                defaultFileList={defaultValue && [...fileListFun(defaultValue.sycnssmj as File[])]}
                name="file"
                multiple
                transformFile={transformFile}
                listType="picture"
                action={`${window.config.backEnd}/api/v1/business/file/upload`}
                method="POST"
                headers={{
                  Authorization: users && `Bearer ${users.access_token}`,
                }}
                disabled={globelDisable}
                onPreview={(file) => this.handlePreview(file, "sycnssmj")}
                onChange={this.handleChange}
              >
                {globelDisable ? null : <FileButton>{uploadButton}</FileButton>}
              </Upload>)}
            </Form.Item>
          </div>

}

预览🚌可以参照:Viewer.js–优秀的Web图片预览+图片裁剪插件 | 艺宵网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/56563.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

消息中间件应用场景介绍

提高系统性能首先考虑的是数据库的优化&#xff0c;但是数据库因为历史原因&#xff0c;横向扩展是一件非常复杂的工程&#xff0c;所有我们一般会尽量把流量都挡在数据库之前。 不管是无限的横向扩展服务器&#xff0c;还是纵向阻隔到达数据库的流量&#xff0c;都是这个思路。…

最新版本mac版Idea 激活Jerbel实现热部署

1.环境准备 1.安装docker desktop 客户端创建本地服务 2.创建guid 3.随便准备一个正确格式的邮箱 2.具体操作 1.通过提供的镜像直接搭建本地服务 docker pull qierkang/golang-reverseproxy docker run -d -p 8888:8888 qierkang/golang-reverseproxy2.guid 通过如下网址直…

使用docker搭建nacos

使用docker搭建nacos docker搭建最新版nacosMySQL下简历nacos配置数据表拉取镜像创建挂载目录启动容器访问nacos docker搭建nacos 2.0版本 docker搭建最新版nacos 最近想在自己服务器上搭建一个nacos服务&#xff0c;以前一直在本地的windows上使用&#xff0c;而且使用着naco…

iOS 搭建组件化私有库

一、创建私有库索引 步骤1是在没有索引库的情况下或者是新增索引的时候才需要用到&#xff08;创建基础组件库&#xff09; 首先在码云上建立一个私有库索引&#xff0c;起名为SYComponentSpec 二、本地添加私有库索引 添加私有库索引 pod repo add SYComponentSpec https:/…

docker容器的基本操作

一、查看Docker的版本信息 [roothuyang1 ~]# docker version 二、查看docker的详细信息 [roothuyang1 ~]# docker info 三、Docker镜像操作 Docker创建容器前需要本地存在对应的镜像&#xff0c;如果本地加载不到相关镜像&#xff0c;Docker默认就会尝试从镜像仓库https://hu…

cc2652主协处理器分时控制同一个外设的问题

问题已提交TI论坛&#xff0c;我是提交到的中文论坛&#xff0c;然后fae给转到英文论坛了。 简单描述就是&#xff0c;怎么让这个单片机一会用主处理器控制SPI设备&#xff0c;一会再用协处理器控制同一个设备。 主处理器的spi配置使用 CCS studio配置的 协处理器使用Sensor Co…

【python】我用python写了一个可以批量查询文章质量分的小项目(纯python、flask+html、打包成exe文件)

web 效果预览&#xff1a; 文章目录 一、API 分析1.1 质量分查询1.2 文章url获取 二、代码实现2.1 Python2.11 分步实现2.12 一步完成2.13 完整代码 2.2 python html2.21 在本地运行2.22 打打包成exe文件2.23 部署到服务器 一、API 分析 1.1 质量分查询 先去质量查询地址&a…

uniapp app端 echarts 设置tooltip的formatter不生效问题以及解决办法

需求一&#xff1a; y轴数据处理不同数据增加不同单位 需求二&#xff1a; 自定义图表悬浮显示的内容 需求一&#xff1a;实现方式 在yAxis里面添加formatter yAxis: [{//y轴显示value的设置axisLabel: {show: true,formatter (value, index) > {var valueif (value > 1…

Jmeter用于接口测试中,关联如何实现

Jmeter用于接口测试时&#xff0c;后一个接口经常需要用到前一次接口返回的结果&#xff0c;应该如何获取前一次请求的结果值&#xff0c;应用于后一个接口呢&#xff0c;拿一个登录的例子来说明如何获取。 1、打开jmeter, 使用的3.3的版本&#xff0c;新建一个测试计划&#x…

抄写Linux源码(Day6:读闪客文章第一回 “最开始的两行代码”)

按照 Day1 完成了 Linux0.11 的运行之后&#xff0c;可以在 ~/oslab/linux-0.11 找到 linux0.11 的源码 根据闪客的文章第一回&#xff1a;https://mp.weixin.qq.com/s/LIsqRX51W7d_yw-HN-s2DA Linux0.11 的启动代码程序入点在 bootsect.s 里&#xff0c;总共 512 个字节 这…

烘焙小程序蛋糕店烘焙店源码点心店小程序源码

本系统开发使用JAVA技术栈开发 使用uniapp技术栈 支持微信小程序 &#xff0c;对接打印机&#xff0c;对接第三方同城跑腿平台 用户端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后台服务使用&#xff1a;springbootjpa

Web课堂笔记

Web课堂笔记 文章目录 Web课堂笔记第一周html部分CSS部分php部分 第二周B/S工作原理http协议**块标记** 第三周标准盒状模型标签优先级**伪类选择器**伪元素派生选择器 第四周Flex布局多媒体查询下拉菜单作业 第五周创建一个NodeLocalStorage 和 SessionStorge 异同JQuery作业 …

filebeat kibana elasticsearch 日志监控

解压三个压缩包 一、filebeat的安装部署 1、打开filebeat的配置文件 2、Filebeat inputs 处打开日志输入开关&#xff0c;设置要监控的路径 3、Outputs 输出中设置Elasticsearch output的输出地址 4、配置kibana 的地址 5、执行 ./filebeat setup -e 二、Elasticsearch 安装…

github Recv failure: Connection reset by peer

Recv failure: Connection reset by peer 背景处理ping一下github网页访问一下github项目git配置git ssh配置再次尝试拉取 疑惑点待研究参考 背景 晚上敲着代码准备提交&#xff0c;执行git pull&#xff0c;报错Recv failure: Connection reset by peer。看着这报错我陷入了沉…

SpringBoot百货超市商城系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot框架开发的百货超市系统。首先&#xff0c;这是一个很适合SpringBoot初学者学习的项目&#xff0c;代…

微服务架构的模式介绍

1.微服务架构模式方案 用Scale Cube方法设计应用架构&#xff0c;将应用服务按功能拆分成一组相互协作的服务。每个服务负责一组特定、相关的功能。每个服务可以有自己独立的数据库&#xff0c;从而保证与其他服务解耦。 1.1 聚合器微服务设计模式 聚合器调用多个服务实现应用程…

k8s安装Jenkins

目录 ​编辑 一、环境准备 1.1 环境说明 二、安装nfs 2.1 安装NFS 2.2 创建NFS共享文件夹 2.3 配置共享文件夹 2.4 使配置生效 2.5 查看所有共享目录 2.6 启动nfs 2.7 其他节点安装nfs-utils 三、创建PVC卷 3.1 创建namespace 3.2 创建nfs 客户端sa授权 3.3 创建…

SQL Server数据库 -- 索引与视图

文章目录 一、索引 聚集索引非聚集索引二、视图三、自定义函数 标量函数表值函数四、游标五、总结 前言 在学习完创建库表、查询等知识点后&#xff0c;为了更加方便优化数据库的存储和内容&#xff0c;我们需要学习一系列的方法例如索引与视图等等&#xff0c;从而使我们更加…

SpringBoot项目中使用Lombok插件中Slf4j日志框架

前言&#xff1a;idea需要安装lombok插件&#xff0c;因为该插件中添加了Slf4j注解&#xff0c;可以将Slf4j翻译成 private static final org.slf4j.Logger logger LoggerFactory.getLogger(this.XXX.class); springboot本身就内置了slf4j日志框架&#xff0c;所以不需要单独…

Unity-缓存池

一、.基础缓存池实现 继承的Singleton脚本为 public class Singleton<T> where T : new() {private static T _instance;public static T GetIstance(){if (_instance null)_instance new T();return _instance;} } 1.PoolManager using System.Collections; using S…