这个JQuery代码在做什么-！函数（$）和var=var=>；var=>；

以下是相关代码的一部分：

!function($){
    const figure = name => f => $(`<figure data-name="${name}"><img src="${URL.createObjectURL(f)}"><figcaption><input type=checkbox checked><br>${f.name}</figcaption></figure>`).data("f",f);

 $(document).on("change", "[data-preview-to]", function() {
        $($(this).data("preview-to")).append($.map(this.files, figure(this.name)));
        $(this).replaceWith(this.outerHTML);
***OTHER CODE FOR SUBMIT****
 }(jQuery);

HTML
 <input type="file" data-preview-to="#preview" multiple="" name="fileToUpload[]">

！函数（$）{
const figure=name=>f=>$（`
${f.name}`）。数据（“f”，f）；
$（文档）.on（“更改”，“[数据预览到]”，函数（）{
$（$（this.data（“预览到”））.append（$.map（this.files，figure（this.name）））；
$（this.replacetwith）（this.outerHTML）；
***提交的其他代码****
}（jQuery）；
HTML

第一个问题，“！function（$）”，对我来说，这意味着，我不是一个函数，因为“！”不是，但那不可能是它，因为你为什么要声明一个函数，那不是一个函数，然后我想，它可能会说“这样做，即使文档还没有准备好”，因为（我认为）function（$）是文档准备好的速记

但是，函数结尾有一个（jquery），这是必需的，如果我删除它，代码就会失败，所以这一定是在做什么，这不是完全的jquery

第二个问题，是变量“figure”，我读它的方式，毫无意义的是“将figure声明为常量，取name的值，将其推到f中，然后将其全部推到HTML代码中。但是，我不知道如何分配“f”。我知道它来自“$.map”（this.files，figure（this.name）），但看起来唯一发送到figure的是HTML输入标记的名称（fileToUpload[]）

这个代码在说什么和做什么

谢谢

Dave

第一个函数表达式只是一个内联调用的函数表达式。

！

用于将解析器从期望语句转换为期望表达式，以便

函数

启动函数表达式而不是函数声明（这就是为什么我们可以立即调用它）。详细信息。

jQuery

在函数结束后使用

（）

传入，并作为

$

参数接收

图

是一个ES2015+（也称为“ES6”）（具体地说，是一个返回箭头函数的箭头函数，其中包含一个[the thing in backticks with

${…}

）.在这种情况下，由于此特定函数不使用

此

或

参数

或其他一些东西，因此大致相当于此ES5和早期代码：

var figure = function(name) {
    return function(f) {
        return $('<figure data-name="' + name + '"><img src="' + URL.createObjectURL(f)' + "><figcaption><input type=checkbox checked><br>' + f.name + '</figcaption></figure>').data("f",f);
    };
};

var figure=函数（名称）{
返回函数（f）{
返回$（'
'+f.name+''）.data（“f”，f）；
};
};

第一个函数只是一个内联调用的函数表达式。

！

用于将解析器从期望语句转换为期望表达式，以便

函数

启动函数表达式而不是函数声明（这就是为什么我们可以立即调用它）。详细信息。

jQuery

在函数结束后使用

（）

传入，并作为

$

参数接收

图

是一个ES2015+（也称为“ES6”）（具体地说，是一个返回箭头函数的箭头函数，其中包含一个[the thing in backticks with

${…}

）.在这种情况下，由于此特定函数不使用

此

或

参数

或其他一些东西，因此大致相当于此ES5和早期代码：

var figure = function(name) {
    return function(f) {
        return $('<figure data-name="' + name + '"><img src="' + URL.createObjectURL(f)' + "><figcaption><input type=checkbox checked><br>' + f.name + '</figcaption></figure>').data("f",f);
    };
};

var figure=函数（名称）{
返回函数（f）{
返回$（'
'+f.name+''）.data（“f”，f）；
};
};

！function（）{}（）

！function（）{}（参数）；

表示立即调用创建的函数

函数声明

Function（）{}

返回

未定义的

function () {} ()

它将抛出SyntaxError。通过在函数之前使用！运算符，js将其理解为表达式并成功运行函数

!function () {} ()

=>箭头功能

const figure = name => f => $()

// is equal to 
const figure = function(name){
   return function(f){
       return $();
   }
}

Arrow函数允许编写短代码。Arrow函数与普通函数一样由参数头和参数体组成

(arg1, arg2) => {
    return 4;
}

不再需要编写
函数
。
参数是通过标准方式传递的，用括号括起来，如
（arg1，arg2）=>{}
，或者如果只有一个参数，则只能有参数
arg=>{}

正文中的代码可以是通常的“块体”，就像在普通函数中一样。若只有一个返回表达式，则函数可能有“简明正文”

所以，若只有一个参数和一个主体表达式，则箭头函数可能会采用简短但不寻常的形式

var sqr = x => x*x;

// equal to
var sqr = function(x){
    return x*x;
}

！function（）{}（）

！function（）{}（参数）；
表示立即调用创建的函数

函数声明
Function（）{}
返回
未定义的

function () {} ()

它将抛出SyntaxError。通过在函数之前使用！运算符，js将其理解为表达式并成功运行函数

!function () {} ()

=>箭头功能

const figure = name => f => $()

// is equal to 
const figure = function(name){
   return function(f){
       return $();
   }
}

Arrow函数允许编写短代码。Arrow函数与普通函数一样由参数头和参数体组成

(arg1, arg2) => {
    return 4;
}

不再需要编写
函数
。
参数是通过标准方式传递的，用括号括起来，如
（arg1，arg2）=>{}
，或者如果只有一个参数，则只能有参数
arg=>{}

正文中的代码可以是通常的“块体”，就像在普通函数中一样。若只有一个返回表达式，则函数可能有“简明正文”

所以，若只有一个参数和一个主体表达式，则箭头函数可能会采用简短但不寻常的形式

var sqr = x => x*x;

// equal to
var sqr = function(x){
    return x*x;
}

看起来我有一些家庭作业。我在读那些东西，这可能有点高级，但对我来说，这会伤到我的头。看起来我有一些家庭作业。我在读那些东西，这可能有点高级，但对我来说，这会伤到我的头。