标签搜索
搜索到
107
篇与
的结果
-
JavaScript的算法和流程控制性能优化 如同其他编程语言，代码的写法和算法会影响JavaScript的运行时间，与其他语言的不同的是，JavaScript的可用资源有限，因此优化技术更为重要，这个学习笔记主要是从JavaScript的循环、条件语句、递归这三个方面的一些奇淫技巧来优化JavaScript的性能。循环for、while和do-while循环性能特性相似，for-in相比前三者慢由于每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多的开销，因此比其他循环类型要慢，对比相同迭代次数的循环，for-in循环最终只有其他类型速度的1/7，因此，除非你明确需要迭代一个属性数量未知的对象,否则应该避免使用for-in循环。还有不要使用for-in来循环数组成员。 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数。forEach(),此方法是ECMA-262引入的一新的原生数组方法，此方法遍历一个数组的多有成员，并且在每个成员上面执行一个函数。//基于函数的迭代方法 item.forEach(function(value,index,array){ process(value); }) //方便！！但是慢，这个要考虑。条件语句通常来说，switch总是比if-else快，并不总是最佳解决方案使用if-else还是switch，基于测试条件的数量来判断：条件数量越大，越倾向于使用switch（考虑到代码的易读性），反之if-else更易读。事实证明，大多数情况下switch比if-else运行得要快，但只有当条件数量很大时候才快得明显。优化if-else，确保最可能出现的放在首位优化的目标是使最小化到达正确分支所需判断的条件数量，最简单的就是确保最可能出现的放首位。还有一种减少判断次数的方法是把if-else组成一系列的嵌套的if-else语句。当你使用查找表时候，必须完全抛弃条件判断语句，这个过程变成数组项查询或者对象成员查询。优点：不用写任何条件判断语句，既是候选值增加时，也几乎不会产生额外的性能开销。在判断调节较多的时候，使用查找表比if-else和swich更快//将返回值存入数组 var results=[result0,result1,result2,result3,result4,result5, result6,result7,result8,result09] //返回当前结果 return results[value];递归浏览器的调用栈大小限制了递归算法在JavaScript中的应用，栈溢出错误会导致其他代码中断运行。如果你遇到栈溢出错误，可以将方法改为迭代算法，或使用Memoization来避免重复计算。合并字符串拼接字符串是编程中最常见的操作了，我们先来总结一下 JavaScript 中连接字符串的方法：++=Array.prototype.join()String.prototype.concat()ES6 新增的模板字符串当拼接少量较短字符串，以上这些方法速度都差不多。但随着需要连接的字符串的长度和数量的增加，一些方法开始展现出优势。待连接字符串是变量如果要拼接的字符串中有以变量形式存在的字符串，优先使用 ES6 中的模板字符串。将变量名包裹在 ${} 中，然后使用反引号（` ）包裹变量和普通字符串：`${username}学会了开车.`+ 和 +=我们首先必需弄明白一点，在 JavaScript 中字符串一经初始化值便是不可改变的。下面是一个拼接字符串的常见操作：str += 'now' + 'old';上面代码在运行时，会历经以下四个步骤：在内存中创建一个临时字符串拼接后的字符串 nowold被赋值给该临时字符串临时字符串与 str 当前的值进行连接将上一步的拼接结构赋值给 str为了避免产生临时字符串造成额外的性能开销，我们可以这样做：str += 'now'; str += 'old'; 如果使用下面这种方式，我们能获得更显著的性能提升：str = str + 'now' + 'old'; // 等价于 str = ((str + 'now') + 'old');注意，上面代码中如果赋值号右侧表达式中的 str 不是处在最左侧，那么将得不到优化效果，这与浏览器合并字符串时分配内存的方法有关。大多数浏览器都会尝试为表达式左侧的字符串分配更多的内存，然后简单地将第二个字符串拷贝至它的末尾。如果在一个循环中，基础字符串位于最左侧的位置，就可以避免重复拷贝一个逐渐变大的基础字符串。合并数组项Array.prototype.join() 方法将数组中地所有元素合并成一个字符串，它接收一个参数作为每项之间的分隔符。如果传入参数为空字符，那么我们就可以使该方法将所有数组项连接为一个字符串。然而，现实情况是，在大多数浏览器中，数组项合并比其他字符串连接方法更慢。String.prototype.concat()包装类型 String 的原生方法 String.prototype.concat() 能够接受任意数量的参数，并将每一个参数附加到所调用的字符串上，这是最灵活的字符串合并方法。遗憾的是，在多数情况下，使用 cancat() 方法比使用简单的 + 和 += 稍慢。总结：如果要合并的字符串中存在变量，那么使用模板字符串；否则，仅使用简单的 + 操作符合并字符串，并将基础字符串置于表达式最左侧。 -
Ajax优化 Ajax是高性能JavaScript的基础，它可以通过延迟下载体积较大的资源文件来使页面加载更快，它通过异步的方式在客户端和服务器之间传递数据，从而避免页面资源一窝蜂的下载。它甚至可以只用一个HTTP请求就获得整个页面的资源。选择合适的传输方式和最有效的数据格式，可以显著改善用户和网站的交互体验。我们这里主要讨论从服务器接收发数据速度最快的技术，以及最为有效的数据编码格式。常用的向服务器请求数据的技术XMLHttpRequest(XML)使用规范var url = '/data.php'; var params = [ 'id=9798', 'limit=20' ]; var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState === 4) { //获取响应的头信息 var responseHeaders = req.getAllResponseHeaders(); //获取数据 var data = req.responseText; //数据处理 } } req.open('GET', url + '?' + params.join('&'), true); //设置请求头信息 req.setRequestHeader('X-Request-With', 'XMLHttpRequest')； req.send(null); //发送一个请求当使用XHR请求数据时候，对于那些不会改变服务器状态，只会获取数据的请求，应该使用GET。经GET请求的数据会被缓存起来，如果需要多次请求统一数据，它会有助于提高性能。 只有当请求URL加上参数长度接近或者超过2048个字符时候，才应该使用POST获取数据，这是因为IE限制了URL长度，过长请求会被截断。动态脚本注入这种方法克服了XHR的最大限制：它能跨域请求。你不需要实例化一个专用对象，而可以使用JavaScript创建一个新的脚本标签，并设置它的属性为不同域的URL,但是和XHR相比，动态脚本注入提供的控制是有限的，你不能设置请求头信息，传递参数也只能使用GET，不能设置请求的超时处理和重试，也就是说失败了你也不一定知道。你必须等到所有数据都返回你才可以访问它们。你不能请求头信息，也不能把整个响应信息作为字符串来处理。还有必须是可执行的JavaScript源码，而且必须封装在一个回调函数中。var scriptElement=document.createElement('script'); scriptElement.src='http://any-domain.com/javascript/data.js'; document.getElementByTagName('head')[0].appendChild(scriptElement); function jsonCallback(jsonString){ var data=eval('('+jsonString+')'); //处理数据... } //在上面那个例子里，data.js必须把数据封装在jsonCallback函数里面： jsonCallback({"status":1,"color":["#fff","#000","f00"]}); //尽管有很多限制，但是这项技术的速度非常快。Multipart XHRMXHR允许客户端只使用一个HTTP请求就可以从服务端向客户端传送多个资源，它通过在服务端将资源（CSS文件，HTML片段，JavaScript代码，或base64编码的图片）打包成一个双方约定的字符串并发送到客户端，然后用JavaScript代码处理这个长字符串，并根据它的mime-type类型和传入其他头信息解析出每个资源。 但是以这种技术获得的资源不能够被浏览器缓存 ，但是某些情况下MXHR依然能显著提高页面的整体性能。发送数据给服务器XMLHttpRequest数据可以使用GET或POST的方式传回来，包括任意数量的HTTP头信息，当使用XHR发送数据给服务器时候，使用GET会更快，只需要发送一个数据包，POST至少两个数据包，一个装载头信息，一个装载POST正文。POST更适合发送大量数据到服务器。var url = '/data.php'; var params = [ 'id=9798', 'limit=20' ]; var req = new XMLHttpRequest(); req.onerror=function(){ //出错 }; req.onreadystatechange = function() { if (req.readyState === 4) { //成功 } } req.open('POST',url, true); req.setRequstHeader('Content-Type','application/x-www-form-urlencoded'); req.setRequstHeader('Content-Length',params.length); req.send(params.join('&')); Beacons（图片信标）这项技术非常类似动态脚本注入。使用JavaScript创建一个新的Image对象，并把src属性设置为服务器上传脚本的URL。该URL包含我们通过GET传回的键值对数据。请注意并没有创建img元素或把它插入DOM。var url='/status_tracker.php'; var params=[ 'step=2', 'time=123241223' ]; (new Image()).src=url+'?'+params.join('&');服务器会接收数据并保存下来，它无需向客户端发送任何回馈信息，因为没有图片会实际显示出来，这是往服务器回传信息最有效的方式。它的性能消耗很小，而且服务器的错误完全不会影响客户端。如果你需要返回大量数据给客户端，那么请使用XHR，如果你只关心发送数据给服务器（可能需要极少的返回信息），那么请使用图片信标。数据格式的选择通常来说数据格式越轻量越好，JSON和字符串分割的自定义格式是最好的。如果数据集很大并且对解析时间有要求，那么请从如下两种格式中做出选择。JSON-P格式：使用动态脚本注入获取他把数据当作可以执行的JavaScript而不是字符串，解析速度极快。它能够跨域使用，但涉及敏感数据的时候不应该使用它。字符分割的自定义格式：使用XHR或动态脚本注入获取，用split()解析。这种技术解析大数据集比JSON-P略快，而且通常文件尺寸更小。Ajax性能总结一旦选择了最合适和数据传输技术和数据格式，那么你就得开始考虑其他优化技术了：减少请求数，可以通过合并JavaScript和CSS文件，或者使用MXHR。缩小页面的加载时间，页面主要内容加载完成后，用Ajax获取那些次要的文件。确保你的代码错误不会输出给用户，并在服务端处理错误。知道何时使用成熟的Ajax类库，以及编写自己的底层Ajax代码。
-
CSS优化 1.内联首屏关键CSS大家应该都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。既然内联CSS能够使页面渲染的开始时间提前，那么是否可以内联所有的CSS呢？答案显然是否定的，这种方式并不适用于内联较大的CSS文件。因为初始拥塞窗口存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。不过内联CSS有一个缺点，内联之后的CSS不会进行缓存，每次都会重新下载。不过如上所说，如果我们将内联后的文件大小控制在了14.6kb以内，这似乎并不是什么大问题。2.异步加载CSSCSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。有时，这种阻塞是必须的，因为我们并不希望在所需的CSS加载之前，浏览器就开始渲染页面。那么将首屏关键CSS内联后，剩余的CSS内容的阻塞渲染就不是必需的了，可以使用外部CSS，并且异步加载。3.有选择地使用选择器大多数朋友应该都知道CSS选择器的匹配是从右向左进行的，这一策略导致了不同种类的选择器之间的性能也存在差异。相比于#box-content-h3，显然使用#box .content h3时，浏览器生成渲染树（render-tree）所要花费的时间更多。因为后者需要先找到DOM中的所有h3元素，再过滤掉祖先元素不是.content的，最后过滤掉.content的祖先不是#box的。试想，如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高。优化方案保持简单，不要使用嵌套过多过于复杂的选择器。通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。4.减少使用昂贵的属性在浏览器绘制屏幕时，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，我们应该尽量减少使用昂贵属性，如box-shadow/border-radius/filter/透明度/:nth-child等。
-
HTML优化 JavaScript中使用document.write生成页面内容会效率较低，可以找一个容器元素，比如指定一个div，并使用innerHTML来将HTML代码插入到页面中。当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。为文件头指定Expires。使内容具有缓存性，避免了接下来的页面访问中不必要的HTTP请求。重构HTML，把重要内容的优先级提高。Post-load（次要加载）不是必须的资源。利用预加载优化资源。合理架构，使DOM结构尽量简单。利用LocalStorage合理缓存资源。尽量避免CSS表达式和滤镜。尝试使用defer方式加载Js脚本。新特性：will-change，把即将发生的改变预先告诉浏览器。新特性Beacon，不堵塞队列的异步数据发送。不同之处：网络缓慢，缓存更小，不令人满意的浏览器处理机制。尽量多地缓存文件。使用HTML5 Web Workers来允许多线程工作。为不同的Viewports设置不同大小的Content。正确设置可Tap的目标的大小。使用响应式图片。支持新接口协议（如HTTP2）。未来的缓存离线机制：Service Workers。未来的资源优化Resource Hints(preconnect, preload, 和prerender)。使用Server-sent Events。设置一个Meta Viewport。
-
JavaScript的DOM编程性能优化 DOM是Document Object Model的缩写，中文叫做文档对象模型，是一个与语言无关的，用户操作XML和HTML文档的应用程序接口。在浏览器中，主要与HTML文档打交道，在Web应用中也经常需要检索XML文档，DOM API用于访问文档中的数据。我们把DOM和JavaScript各自想象成一个岛屿，它们直接用收费桥梁连接，ECMAScript每次访问DOM，都要经过这个桥，并交纳“过桥费”，过的桥越多交的费用也越多，因此要想减少费用就得少过桥，我们这里就来如何来优化这个问题最小化DOM访问次数，尽可能在JavaScript端处理访问DOM元素是有代价的–前面提到的过桥费。修改元素则更加昂贵，因为它会导致浏览器重新计算页面的集合变化。也就是说访问DOM次数越多，代码的运行速度就越慢，因此一般的经验法则是：减少DOM的访问次数，把运算尽量留在ECMAScript这一段处理。 //最坏的情况是在循环中访问和修改元素 //尤其是对HTML元素集合循环操作。 //方法一 function innerHTMLLoop() { for (var count = 0; count < 15000; count++) { document.getElementById('here').innerHTML += 'a'; } } //方法二 function innerHTMLLoop() { var content = ''; for (var count = 0; count < 15000; count++) { content += 'a'; } document.getElementById('here').innerHTML += content; } //显然方法二的实现要好很多多次访问DOM节点，使用局部变量存储它的引用这些方法返回值是一个集合document.getElementByName()document.getElementByClassName()document.getElementByTagName()下面属性也同样返回HTML集合document.imagesdocument.linksdocument.formsdocument.forms[0].elements这些集合是一些昂贵的东西，一般来说，对于任何类型的DOM访问，当同一个DOM属性或方法需要多次访问时候，最好把一个局部变量缓存此成员。当遍历一个集合时，首先优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使局部变量访问这些需要多次访问的元素。使用速度最快的API浏览器提供了一个名为querySelectorAll()的原生DOM方法，这种方法自然比使用JavaScript和DOM来遍历查找元素要快很多。//查找id="menu"的元素中的所有a元素 //我们习惯做法 var elements=document.getElementById('menu').getElementsByTagName('a'); //建议做法 var elements=document.querySelectAll('#menu a')；还有一个遍历方法–querySelector()来获取第一个匹配的节点。留意重绘和重排DOM树：表示页面结构渲染树：表示DOM节点如何显示一旦DOM和渲染树构建完成，浏览器就开始显示（绘制）页面元素了，当DOM的变化影响的元素的几何属性（宽或高），比如修改边框宽度或给段落增加元素，导致行数增加–浏览器需要重新计算元素的集合属性，同样其他元素的几何属性和位置也会因此受到影响，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程就称为“重排(reflow)”。完成重排后，浏览器重新绘制受影响的部分到屏幕中，这个过程就叫做重绘(repaint)重排和重绘操作都是代缴昂贵的操作，应当减少发生，为了减少发生次数，应当合并DOM和样式的修改，然后一次性处理掉。还可以通过缓存布局信息的方法：尽量减少布局信息的获取次数，获取后把它赋值给局部变量，然后再操作局部变量。减少在循环内进行DOM操作，在循环外部进行DOM缓存//优化前代码 var _li = $("<li>"), _dom = $("<div>"), timer = null; for (var i = 0; i < 50; i++) { //随机生成50个li，插入到ul列表中 $(".list-ul").append(_li.clone()); }//优化后代码 var _li = $("<li>"), _dom = $("<div>"), _lis = document.getElementsByTagName("li"), timer = null, _arr = []; for (var i = 0; i < 50; i++) { //随机生成50个li，存入到数组中 _arr.push(_li.clone()); } //将生成好的全部li一次性append到ul中 $(".list-ul").append(_arr);优化前的代码中，对于 $(".list-ul") 元素进行了50次的append，即进行了50次的DOM操作。而对于优化后的代码，在append操作前，先将所有 存入数组中，最后只进行了一次append，因此性能会有所提高。操作DOM前，先把DOM节点删除或隐藏list.style.display = "none"; for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item); } list.style.display = "";display属性值为none的元素不在渲染树中，因此对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行多次DOM操作，可以先将其隐藏，操作完成后再显示。这样只在隐藏和显示时触发2次重排，而不会是在每次进行操作时都出发一次重排。
-
动态创建script标签 使用动态创建的标签元素来下载并执行代码var script = document.createElement('script'); script.type = "text/javascript"; script.src = "file.js"; document.querySelector("head").appendChild(script);这种方式加载脚本好处。无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。缺点：你无法处理脚本加载失败。使用XHR对象下载JS代码注入页面var xhr = new XMLHttpRequest(); xhr.open("get", "script1.js", true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement ("script"); script.type = "text/javascript"; script.text = xhr.responseText; document.body.appendChild(script); } } }; xhr.send(null); 此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查readyState 是不是 4，然后检查 HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收到了一个有效的响应，那么就创建一个新的<script>元素，将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档，代码将被执行，并准备使用。 这种方法的主要优点是，您可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。 此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内。
-
TS的命名空间和装饰器 命名空间以namespace关键值定义命名空间.namespace Obj{ export interface Person{ name:string; age:number; getMsg(name:string):string{} } } new Obj.Serson()装饰器装饰器是一种特殊类型的声明，它可以用在类声明、方法、属性或者参数上。顾名思义，它是用来给附着的主体进行装饰，添加额外的行为。装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。类装饰器类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数function run(target: any) { return class extends target { type: string = 'Web开发工程师' getType() { console.log(this.type) } } } @run class Person { type: string | undefined; constructor(type: string = "工程师") { this.type = type; } getType() { console.log(this.type) } } new Person().getType()属性装饰器属性装饰器接收两个参数(原型对象,参数)属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。2、成员的名字。function test(params: any) { return function (target: any, attr: any) { debugger target[attr] = params; } } class Person { @test('工人') type: string | undefined; constructor(type: string = "工程师") { } getType() { console.log(this.type) } } new Person().getType()方法装饰器它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。方法装饰会在运行时传入下列3个参数:1、对于静态成员来说是类的构造函数，对于实例成员类的原型对象。2、成员的名字。3、成员的属性描述符。function test(parems?: any): Function { return function (target: any, name: string, desc: any) { let fn: Function = desc.value; desc.value = (...arr: Array<any>): void => { arr = arr.map(v => String(v)); fn(arr); }; }; } class Person { type: string | undefined; constructor(type: string = "工程师") { } @test() getType( ...arr: Array<any>) { console.log(arr) } } new Person().getType(1,"2",3)方法参数装饰器参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据， 传入下列3个参数: 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。2、方法的名字。3、参数在函数参数列表中的索引。
-
table表头固定 HTML部分<div style="width: 800px;"> <div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> </colgroup> <thead> <tr><th>序号</th><th>内容</th></tr> </thead> </table> </div> <div class="table-body"> <table> <colgroup><col style="width: 80px;" /><col /></colgroup> <tbody> <tr><td>1</td><td>我只是用来测试的</td></tr> <tr><td>2</td><td>我只是用来测试的</td></tr> <tr><td>3</td><td>我只是用来测试的</td></tr> <tr><td>4</td><td>我只是用来测试的</td></tr> <tr><td>5</td><td>我只是用来测试的</td></tr> <tr><td>6</td><td>我只是用来测试的</td></tr> <tr><td>7</td><td>我只是用来测试的</td></tr> <tr><td>8</td><td>我只是用来测试的</td></tr> <tr><td>9</td><td>我只是用来测试的</td></tr> <tr><td>10</td><td>我只是用来测试的</td></tr> <tr><td>11</td><td>我只是用来测试的</td></tr> <tr><td>12</td><td>我只是用来测试的</td></tr> <tr><td>13</td><td>我只是用来测试的</td></tr> <tr><td>14</td><td>我只是用来测试的</td></tr> <tr><td>15</td><td>我只是用来测试的</td></tr> </tbody> </table> </div> </div>Css部分.table-head{padding-right:17px;background-color:#999;color:#000;} .table-body{width:100%; height:300px;overflow-y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
-
TypeScript多态和抽象类 多态父类定义的一个方法不去实现, 让继承的子类去实现.(多态属于继承)class Person{ name:string; run():void{} } Class Mi extends Person{ super('小米'); run():string{ return this.name+'手机' } } new Mi().run()抽象类typescript中的抽象类: 它是提供给其它类继承的基类, 不直接实例化.用abstract关键字定义抽象类和抽象方法. 抽象类中的抽象方法不包含具体实现并必须在派生类中实现.abstract抽象方法只能放在抽象类中.abstract class Person{ name:string; abstract run():void; } Class Mi extends Person{ super('小米'); run():string{ return this.name+'手机' } } new Mi().run()
-
typescript学习笔记二 函数返回值的类型定义fu(): void{}函数的参数必须定义类型fu(name: string, age: number){}函数的默认值fu(name: string = "小米", age: number = 9) {}接口接口的作用: 在面向对象的编程中, 接口是一种规范的定义, 它定义了行为和动作的规范, 在程序设计里面,接口起定义标准的作用.接口的可选属性, 在属性的名的后面添加一个问号(?).只读属性, 在属性名前添加一个readonly.只读数组类型, readonly Array<数组元素类型>. 注意把一个普通数组赋值给readonlyArray后普通数组也只可读.interface Job { type: string; jobTime?: string; description(): string; } class Mi implements Job { readonly type: string; jobTime: string; constructor(type: string, jobTime: string = "8") { this.type = type; this.jobTime = jobTime; } description() { return this.type + '工作' + this.jobTime + "小时;" } } console.log(new Mi("小米").description());函数类型接口, 用来定义函数的参数列表,和返回值的类型的定义.参数列表使用小括号():返回值的类型. 如:(height:string,width:string):boolean;interface Job { (jobTime: string, type?: string): string; } class Mi { readonly type: string; jobTime: string; constructor(type: string, jobTime: string = "8") { this.type = type; this.jobTime = jobTime; } description: Job = (jobTime: string, type: string) => { this.jobTime = jobTime; return this.type + '工作' + this.jobTime + "小时;"; } } console.log(new Mi("小米").description("9"));可索引的类型, 它具有一个索引签名, 签名的类型只有两种(number,string). 还有相应的索引返回值类型.如:readonly [index:number]:string. (只读索引)interface Job { [index: string]: string; } class Mi { readonly type: string; jobTime: string; constructor(type: string, jobTime: string = "8") { this.type = type; this.jobTime = jobTime; } description(jobTime: string, type?: string): object { this.jobTime = jobTime; let obj: Job = { type: this.type, jobTime: this.jobTime } return obj } } console.log(new Mi("小米").description("9"));
