一、基本类型和引用类型的值
回顾:
基本数据类型:undefined;null;number;boolean;string;按照值访问的,可以操作保存在变量中的实际的值;
引用数据类型:例如Array;不能直接访问值,它是保存在内存中的对象;
JavaScript不允许直接访问内存中的位置;即不能直接操作对象的内存空间;
我们在操作对象时,其实是操作对象的引用,而不是对象;
注意:如果我们复制保存着某个对象的变量时,那么两个变量就会指向同一个对象,当我们为对象添加属性时,操作的就是实际的对象;
1.1 动态的属性
var person = new Object() // 创建一个对象
person.name = '张三' // 设置对象属性
console.log(person.name) // 输出对象属性这个属性会一直伴随着对象,除非对象销毁,否则该属性会一直存在;
var name = 'Nick'
name.age = 20
console.log(name.age) // undefined只有引用值可以动态添加后面可以使用的属性;
1.2 复制变量值
var s = 'hello'
var s1 = s
console.log(s1) // 'hello'
console.log(s1 == s) // true解释:
再新创建一个变量s1,它的值和s一样,都是字符型'hello',所以s1 == s;两者完全独立,互不干扰;
var obj1 = new Object()
var obj2 = obj1
obj1.name = 'nick'
console.log(obj2.name)
console.log(obj2 == obj1)图示:
我们的变量名obj1储存的是一个对象的引用,它指向堆里面的一个对象(object),通过复制,我们只是复制了一个变量obj2,它的指向和obj1一样都是指向object,所以设置完obj1.name = 'nick',之后修改的是指向的对象的属性,由于obj2也是指向这个对象,所以obj2.name = 'nick';
1.3 传递参数
函数的传参类似于我们变量的复制,我们来查看一下;
1.3.1 基本类型的传参
function addnum(num){
num += 10
return num
}
var count = 20
res = addnum(count)
console.log(count) // 20
console.log(res) // 30解释:参数作为函数的局部变量,其实并不会对全局变量造成影响,所以count还是20;
1.3.2 引用类型的传参
function test(obj){
obj.age = 20
}
var obj1 = new Object()
test(obj1)
console.log(obj1.age) // 20解释:此处obj和obj1引用的是同一个对象;那么问题来了,针对于引用类型,参数的传递是按照值还是按照引用呢?看下面的例子:
function test(obj){
obj.age = 20
obj = new Object()
obj.age = 21
}
var obj1 = new Object()
test(obj1)
console.log(obj1.age) // 20这里如果是按照引用传递,obj1的指向应该变成函数内部创建的对象,并且其age值为21,但是实际输出为20,说明即使在函数内部修改了参数的值,其原始引用仍未改变;
函数内部创建的obj会随着函数调用结束而被销毁;
二、作用域2.1 执行环境和作用域
执行环境: 定义了变量或函数有权访问的其它数据，决定了它们的行为。
全局执行环境是最外层的执行环境。根据 ECMAScript实现的宿主环境，表示全局执行环境的对象可能不一样。在浏览器中，全局执行环境就是我们常说的 window 对象。
执行环境中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain）。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。
代码正在执行的执行环境的变量对象始终位于作用域链的最前端。如果上下文是函数，则其活动对象（activation object）用作变量对象。活动对象最初只有一个定义变量：arguments 。（全局执行环境中没有这个变量。）
作用域链中的下一个变量对象来自包含执行环境，再下一个对象来自再下一个包含执行环境。以此类推直至全局执行环境；全局执行环境的变量对象始终是作用域链的最后一个变量对象。
代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始，然后逐级往后，直到找到标识符。（如果没有找到标识符，那么通常会报错。）
var color = "blue";
function changeColor() {
let anotherColor = "red";
function swapColors() {
let tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问 color、anotherColor 和 tempColor
}
swapColors();// 这里可以访问 color 和 anotherColor，但访问不到 tempColor
}
changeColor();// 这里只能访问 color以上代码涉及 3 个执行环境：全局执行环境、 changeColor() 的局部执行环境和 swapColors() 的局部执行环境。全局执行环境中有一个变量 color 和一个函数 changeColor() 。changeColor() 的局部执行环境中有一个变量 anotherColor 和一个函数 swapColors() ，但在这里可以访问全局上下文中的变量 color 。其它函数同理；
2.2 延长作用域链
虽然执行环境主要有全局环境和局部环境两种，但有其他方式来延长作用域链。某些语句会导致在作用域链前端临时添加一个变量对象，这个对象在代码执行后会被删除。通常在两种情况下会出现这个现象，即代码执行到下面任意一种情况时：
这两种情况下，都会在作用域链前端添加一个变量对象。对 with 语句来说，会向作用域链前端添加指定的对象；对 catch 语句而言，则会创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明。如下所示：
function buildUrl() {
let qs = "?debug=true";
with(location){
let url = href + qs;
}
return url;
}这里， with 语句接收 location 对象，因此 location 会被添加到作用域链前端。buildUrl() 函数中定义了一个变量 qs 。当 with 语句中的代码引用变量 href 时，实际上引用的是location.href ，也就是自己变量对象的属性。在引用 qs 时，引用的则是定义在buildUrl() 中的那个变量，它位于函数环境的变量对象中;至于with语句内部,则定义了一个url的变量,因而url变成函数执行环境的一部分,可以作为函数的值被返回;
2.3 没有块级作用域
if(true){
var color = 'red'
}
console.log(color) // red这里我们很疑惑,这个color在{}中,不应该是局部变量吗?为什么在全局中也能够输出;
解释:在这里if语句声明的变量将会添加到当前的执行环境(即全局环境),使用for语句也是一样;
for(var i = 0;i < 5;i++){
console.log('i')
}
console.log(i) // 5360°表单设计指南，快速掌握「表单」设计知识点（上）
信息反馈与提示对表单来说是一种很重要的保证用户正确填写数据的方式，对用户的输入及时给予反馈，及时告知用户行为的结果，让用户及时感知不同操作的前因后果，并及时响应相关操作；
d、安全可靠，操作可控
表单需要有一定的容错性，对用户的错误操作具备一定的包容性，有合理的操作后果保证机制，不至于由于意外的错误操作造成不可控的严重后果，针对复杂表单提供分布或即时保存机制，对不同场景任务提供返回、重置、取消、清空、撤销等容错性功能；
PART 2 表单的基础构成一、基础构成
表单在设计上的结构有：
标题；表单标签；占位符；表单域；提示信息；操作按钮；
二、表单的形式
1、标题
表示用户录入和编辑信息的所属层级，主要位于表单的左上方或者居中位置。
关于标题的设计，分为三种样式：
2、标签
标签指每个数据输入域前的解释文本，用于告知用户相对应的数据输入字段的具体含义；
注意点：文字上要求尽量简洁明了，避免出现有歧义、冗长且难以理解的标签，用词方面尽量贴近用户的使用场景或业务场景，在同一个产品系统内或业务系统内尽量保持相同标签的一致性。
在做标签的时候，我们需要给标签的行高和宽度统一。因为开发在写这个页面的时候，是把每一个元素放在一个class统一的div或者span标签内。因此我们在做设计稿的时候，需要把换行元素考虑进去，即使只有一个字，避免以后二次设计和开发。
对标签的对齐方式又包含：顶对齐，左对齐，右对齐，这个部分后面会详细地展开说明。
3、表单域或输入域
可交互输入域，是构成表单的核心内容，是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。
3.1 文本录入
文本录入是表单中最常见的和最基础的信息输入方式，为用户提供提供自定义文本信息的输入接口。
依据文本内容长度可以分为单行文本框和多行文本域，前者适用于输入文本字符总数较少的场景，后者适用于输入文本字符总数较多或者不确定的场景。
3.1.1 文本框
结合不同业务场景及相关经验，文本输入在不同的业务场景下有一些注意点：
a、选择适合的长度
输入框的大小应该向用户暗示所需输入内容的长度，所以长度和内容长度需要相匹配，一定程度上可以减轻用户的操作负担；
b. 复合输入框
输入内容需带单位，或可以选择单位，使用特定前/后缀的复合输入框。
c. 特殊格式自动匹配
对于某些特有格式的输入内容，自动匹配内容的特有格式，例如电话号码、密码和银行卡号等；
根据米勒定律（对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错），通过用户的记忆结构来提升用户的阅读体验。
d.特殊数值自动提示
对于金融类产品，在输入金额数字的时候，当数据较大的时候，建议自动提示数量级及单位，能够方便用户识别数值，降低出错率。
e. 智能补全
对于一些关联性很强的文本输入，可以通过智能补全的方式来减少用户不必要的文字输入，提高填写速度又能减少出错，例如地址输入。
3.1.2 文本域
多行输入框在 Ant design 中被定义为文本域。结合不同业务场景及相关经验，文本域在不同的业务场景下有一些注意点：
a、明确提示限制条件
对于有输入限制的文本输入，给予用户明确的输入提示，增加用户感知，降低用户出错率；
b、文本域自适应
对于多行文本框建议使用可拉伸的自适应高度的文本域，比固定高度的内滚动文本域要好，
从用户体验讲，可变化的文本框适用于各种用户的阅读习惯。同时，因为固定文本框常常会出现滚动条，会使页面出现多个滚动条，给用户的使用操作上带来一定困扰。
在做表单域的行内信息换行时，我们需要给出横向字数宽度，和上下左右的间距。超出部分是自适应高度，还是显示滚动条，需要标注出来，并且要指定最小行数，和最大行数。
3.2 选择录入
选择录入是为用户预先提供了一定的选择范围，指定范围中选择目标选项进行录入，依据选项类型可分为：
单选、多选、选择器（常用的有下拉单选/多选）、级联选择（多层级联动选择）、树选择、穿梭框、开关。
a、单选框、复选框
一般用于选项不多且相对固定的情况，选项控制在6个以内为宜，用户可以一眼看到所有内容。
单选框只能是其中一个选项，一般会默认一个选项选中。多选框则可以选择其中一个或多个选项。
b、开关
使用开关控件的条件是选项的性质互斥（例如：是和否、打开和关闭、开启和禁用等）；
c、选择器
根据选择类型，可以分为单选择器、多选择器、级联选择器以及树选择器4种类型。
优势：占用空间小，在展开所有选项后，可以按重要程度排列。
劣势：当选项过多时需要滚动，会放慢用户输入速度；不点击下拉，用户不知道选项都有什么，不方便比较。
适用场景：适用于选项个数较多（5个以上）的场景和有默认选项的场景；
3.2.1 下拉选择
即下拉列表，其允许用户从预定的列表中选择一个或多个选项，为用户在选项的数量上提供更多的可能性。这里注意一些 特殊类型的选择器。
a、自定义多选选择器
允许用户自定义添加选项，例如在允许用户添加自定义标签类场景中使用。
b、弹框型选择器
列表选项过多，在下拉面板中展示体验感差，那么就可以选择弹框型选择器的弹框来承载更多的数据信息。
c、搜索型选择器
用户的记忆程度不同，一部分用户可以通过主动搜索获取选项，一部分用户可以通过在弹窗中直接选择获取选项。
d、表格选择器
单一维度信息无法让用户做出选择，需要为用户呈现更多的数据信息才能让用户做出合理判断时，使用可以展示更多数据信息的表格选择器。
对于选择录入，结合不同业务场景及相关经验，选择录入在不同的业务场景下有如下设计要点和使用建议：
避免默认：尽量避免列表设置默认值，除非业务场景中绝大部分用户将选择该默认选项，尤其是必填字段，因为有默认值的表单，用户一般会快速扫描浏览，过程中可能会跳过默认项，进而增加犯错几率；
多项搜索：当下拉选项列表中选项较多的时候建议增加关键字联想检索功能，方便查找目标选项；
提示明确：提示信息要明确，避免模糊的提示文本，让用户明确知道自己选择的是什么；
3.2.2 日期/时间/日期时间选择器
日期及时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间区间；
日期时间选择：相当于将日期和时间这两个选择项集为一身，在同一个选择器里选择（年月日时分秒）；相当于两个下拉框切换使用，步骤1先弹出日期选择框选择年月日，选择好日期后点击“确定按钮”旁边的“选择时间”，则切换为步骤2的时间选择框。
时间段选择：为用户提供了一种可视化的方式去浏览和选择一个日期、一个时间、一个日期时间或日期范围。
3.2.3 级联选择、树选择
二者都属层级选择，区别在于级联选好选项后框内显示的是含层级的内容选项，且只能选择需最子集选项（例如：广东省/广州市市/天河区，不能选择广东省，因为前面的选项只为导航至最子集）
而树选择框内展示的是单个选项的内容，不展示层级，但可以选择任何层级（例如：天河区）
如何选择呢？
层级不深，在2-3级之间。一级节点在5个节点左右，二、三级节点个数相对较少，使用具有树形结构的树选择器。层级不深，在2-3级之间。一、二、三级节点个数都相对较多，使用树选择器纵向展示不利于用户查找，建议使用节点分开展示的级联选择器。
3.2.4 滑块选择
滑动型输入器，展示当前值和可选范围，通过拖动滑块在一个固定区间内进行选择。
滑块选择这种交互特点使得在设置音量、亮度等某一个维度的强弱等级的时候是一个比较好的方案，依据数值特点可以分为三种类型，分别为单点连续滑块、区间连续滑块和单点间续滑块。
优势：便于用户快速浏览大量的选项，提供流畅的用户体验。
劣势：数值选择具有较强的不准确性，难以精准操作
使用场景：适用于输入结果相对模糊或不准确的业务场景。
用户可以在一个连续或非连续的区间内，通过滑动锚点来选择一个合适的数值或范围。需求精度要求不高的场景下使用「连续滑块」可得到更灵活便捷的操作；需求精度要求高的场景下可配合「数字输入」使用。
3.3 步进器
也称为计数器，仅允许输入自定义范围内标准的数字值，上下按钮也不是每点击一次数值±1，可以设置每点击一次±N，N可以为任何数字，也可以为小数。
3.4 穿梭框
穿梭框较列表选择的区别在于其将备选和已选分别置于选择面板的左右两栏，能够以很直观的方式在两栏中移动元素完成选择行为。
两种特殊类型的穿梭框：
带排序穿梭框：允许用户将常用或者重要的元素靠前排序，自由调整元素顺序。树/表格穿梭框：元素的展现形式不同，使用不同的穿梭框形态。树形结构使用树穿梭框，表格类数据使用表格穿梭框。
3.5 评分
当需要为内容进行评分时使用。
三、文件上传
文件上传为用户提供将本地文件上传到系统服务器上的入口，依据上传方式可划分为点击上传、缩略图上传、拖拽上传三种形式
1、直接上传
即点击后通过桌面系统弹窗选择文件并上传，多用于EXCEL数据表文件、WORD文件等形式；一般用于不需要预览效果的文件上传，文件上传需要提供明确的文件大小和文件格式。这种情况是上传图片和文件合在一个上传控件里。
分为需要手动点击页面上的上传按钮才能完成上传动作和自动上传两种
2、显示缩略图上传
一般用于需要显示预览效果的文件上传，同时选择文件后直接完成上传动作。文件上传需要提供明确的文件大小和文件格式，多用于图片、PDF等文件，一般还可以直接在缩略图片上赋予其他的交互 (查看、删除等)。
3、拖拽上传
用户拖拽文件到指定区域即可完成上传，也支持点击上传。文件上传需要提供明确的文件大小和文件格式。
四、关于控件选择
1、选择框优于输入框
选择框为用户提供了备选的选项，用户只需要点击即可完成数据录入，而输入框则需要用户手动自定义输入，操作复杂度和成本明显高于选择框，所以优先考虑选择代替键盘输入，一方面简化操作，另一方面也减轻用户认知和记忆负担；
2、量少对比优选单/复选框
单/复选框较适用于选项较少（5个以内），同时选项之间较为类似需要强调对比时，可以优先选择单/复选框，此外当选项能见度和要求快速响应的时，也可以优先考虑单/复选框，能够直白地提供待选选项，直接选中目标选项，提升输入效率；
3、量大优先下拉选择
当选项较多的时候，超过10个，甚至更多的时候，无法直接下拉展示的时候建议提供模糊匹配和排序规则，方便用户提前预知选项位置或通过关键字模糊检索目标选项；
五、提示
提示信息是指在用户输入信息的过程中提示用户输入状态的辅助信息，提示信息的设计原则：先预防、后纠错
根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，依据用户信息输入阶段，可以将提示信息分为三类：输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示。
1、输入前-引导信息
一般是在用户输入数据之前就给予用户的信息，目的是帮助和引导用户完成数据输入，防止用户在输入时出错。
1.1 帮助性提示
在用户填写表单前对表单填写内容进行解释说明的提示信息，并将其置于表单或者某一个输入域的前面，一般分为全局提示与单项提示。
需要注意的是，表单中应尽量减少帮助文字内容，不要依赖帮助文字来弥补表单难以理解的缺点，也避免稀释表单重要信息。帮助文字最适合解释用户不熟悉或者需要特定的操作和内容。放置的位置通常在毗邻输入框的位置。
① 全局提示
全局提示一般位于整个表单的最开始，是对整个表单的解释说明，包括信息的用途、安全性、保密性等，以此消除用户不信任。
② 单项提示
单项提示对应单个输入域，只对此项输入域进行解释说明，根据格式塔原理，定位精准便于用户理解。
单项提示也可以选用不同的布局，分别有提示图标在鼠标haver时气泡提示、输入框下方文字提示、输入框后方文字提示、单机输入框气泡提示4种提示布局。
1.2 输入性提示
输入性提示信息即占位符，直接展示在输入项中，是对某一个输入域的内容进行提示，当用户输入时文本框在获取焦点后提示文本隐藏，如果是大篇幅的解释性内容应放在帮助性文字中。
有示例型占位符和通用型占位符两种。属于是一种轻量化的提示信息，与其他提示信息相比，视觉负担较小，占用空间更小，与输入内容的关联性更强。
占位符设计时，需要注意的：
注意1：有效提示
提示文字最好能简洁明了给出有效的提示信息。让用户能在上下文中获取信息，帮助他完成输入。
用户填写表单时最容易出现的问题就是不知道填写什么格式，例如民族填写“汉族”还是“汉”；生日填写“1997-06-11”还是“199年6月11日”这里可以提示具体的填写示例帮助用户理解。
注意：必不可少
长期的占位符已经给用户培养了使用习惯，没有占位符，用户在输入的时候会抱着试一试的心态去点击，会疑惑是不是应该在这里输入，不够直接清晰，对用户来说是很不友好的。