前端面试题（二）

最新推荐文章于 2022-06-03 11:12:53 发布

赵圆圆

最新推荐文章于 2022-06-03 11:12:53 发布

阅读量570

点赞数

分类专栏：前端常见试题文章标签：面试题 javascript

本文链接：https://blog.csdn.net/ZYY88886666/article/details/72871503

版权

前端常见试题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？
简述一下你对HTML语义化的理解？
JSON 的了解？
HTTP状态码知道哪些？
你有哪些性能优化的方法？
哪些常见操作会造成内存泄漏？
介绍一下css的盒模型
谈谈你对闭包的理解
你对前端界面工程师这个职位是怎么样理解的?
请说出三种减少页面加载时间的方法。
如何解决跨域问题?
javascript里面的继承怎么实现？
js判断文字长度（区分中文及英文）？
比较map（）、forEach（）与for（）的区别？

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

（1）
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;

（2）
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，代码如下：

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

浏览器支持新标签后，还需要添加标签默认的样式：

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

简述一下你对HTML语义化的理解？

HTML标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有

, 等。HTML语义化我的理解就是在页面中尽量多滴结合场景多使用含有语义的标签，少使用div,span等无语义的标签。
　　1，现在的开发基本上都是一个团队合作进行开发。这种情况下，我们写的代码不仅要让我们自己能看懂，而且也应该让别人也容易理解和阅读，要保证代码的可维护性，这一点很重要。
　　2，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
　　3，考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等。

JSON 的了解？

1。JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
2。JSON 是轻量级的文本数据交换格式，并不是编程语言。一般而言，轻量级（lightweight）等价于耦合度低、侵入性小。不过在这里既可以指JSON与编程语言的耦合度小，又可以说明JSON文档储存相同信息所占的资源少的。再者，JSON和XML一样，既可以作为配置文件、也可以作为数据传输协议存在，当然，在JS中使用JSON比XML更优。
3。JSON 独立于语言存在
4。JSON 具有自我描述性，更易理解
5。JSON 结构有两种结构
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [“java”,”javascript”,”vb”,…]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js

在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

详细请见： http://blog.csdn.net/qq_32528231/article/details/52783210

HTTP状态码知道哪些？

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——永久重定向
302——临时重定向
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误，无法完成请求
HTTP 502 - 网关错误
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

http://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81?fr=aladdin

你有哪些性能优化的方法？

压缩源码和图片(js采用混淆压缩，css进行普通压缩，jpg图片根据具体质量压缩为50%到70%，png用来源软件压缩24色变成8色，去掉一些png格式信息等)
选择合适的图片格式(颜色数多用jpg，颜色少用png，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式)
合并静态资源(减少HTTP请求)
把多个css合并为一个css，把图片组合成雪碧图
开启服务端的Gzip压缩(对文本资源非常有效，对图片也没那么大压缩率)
合并静态资源(减少HTTP请求)
使用CDN(对公开库，能和其他网站共享缓存)
延长静态资源缓存时间
把css放页面头部，js放底部(这样不会阻塞页面渲染，让页面出现长时间的空白)
对于较大的文本资源，必须开启gzip压缩

这里写图片描述

哪些常见操作会造成内存泄漏？

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
JavaScript 是一种垃圾收集式语言，这就是说，内存是根据对象的创建分配给该对象的，并会在没有对该对象的引用时由浏览器收回。JavaScript 的垃圾收集机制本身并没有问题，但浏览器在为 DOM 对象分配和恢复内存的方式上却有些出入。

下面是常见的4种内存泄露方式：
(1)意外的全局变量

js中如果不用 var 声明变量,该变量将被视为 window 对象(全局对象)的属性,也就是全局变量.

function foo(arg) {
    bar = "this is a hidden global variable";
}

// 上面的函数等价于
function foo(arg) {
    window.bar = "this is an explicit global variable";
}

所以,你调用完了函数以后,变量仍然存在,导致泄漏.

如果不注意 this 的话,还可能会这么漏:

function foo() {
    this.variable = "potential accidental global";
}

// 没有对象调用foo, 也没有给它绑定this, 所以this是window
foo();

你可以通过加上 ‘use strict’ 启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.

（2）被遗忘的定时器或者回调

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放.

（3）没有清理的DOM元素引用

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};

function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}

function removeButton() {
    document.body.removeChild(document.getElementById('button'));

    // 虽然我们用removeChild移除了button, 但是还在elements对象里保存着#button的引用
    // 换言之, DOM元素还在内存里面.
}

（4）闭包

先看这样一段代码:

var theThing = null;
var replaceThing = function () {
  var someMessage = '123'
  theThing = {
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

调用 replaceThing 之后, 调用 theThing.someMethod , 会输出 123 , 基本的闭包, 我想到这里应该不难理解.

解释一下的话, theThing 包含一个 someMethod 方法, 该方法引用了函数中的 someMessage 变量, 所以函数中的 someMessage 变量不会被回收, 调用 someMethod 可以拿到它正确的 console.log 出来.

详情：http://www.tuicool.com/articles/7J3amu

介绍一下css的盒模型

盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

　　当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

　　<!DOCTYPE HTML>

　　以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式
　　box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

　　在标准模式下的盒模型如下图所示，盒子总宽度/高=width/height+padding+border+margin

这里写图片描述

　　在怪异模式（ie）下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;　也就是盒子宽高 = 内容区域的宽高+padding+border;

这里写图片描述

flex布局，多列布局等
更详细的见：http://www.cnblogs.com/jr1993/p/4788718.html

谈谈你对闭包的理解

js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解.

　　闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:1.作用域,2.垃圾(内存)回收机制,3.函数嵌套,等等.
　　
1.特殊的作用域
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
另一方面，在函数外部自然无法读取函数内的局部变量。
但是很多时候我们需要获取到函数内部的局部变量，正常情况下，这是办不到的，只有通过变通方法才能实现。我们在函数里面在嵌套一个函数。

　　
　　了解了作用域链,我们再来看看js的内存回收机制,一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了.对应的内存空间也就被回收了.下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用.但是如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量的话.这种内存回收机制就会出现问题.如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了.所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收.
闭包就是：可以访问其他函数内部变量的函数

function foo() {
        var num = 123;

        function fn() {
            return num;//
        }
        return fn;
    }
    var m=foo();
    var f=m();
    console.log(f);//输出的值为123，这样就可以访问到函数内部变量num。

  //    原理就是利用闭包：在函数foo中嵌套了一个函数fn,利用函数fn可以访问到其外部的变量，而获取函数foo中的变量num,当外部调用函数foo()时候，
   //   函数foo中 return返回fn函数的实体，然后我再对函数fn进行调用就在外部访问到函数内部变量num了。就是利用内部函数的闭包特性把函数foo中的变量取到外边，
     // 说白了内部函数就相当于一个媒介，就是一个桥梁连接函数内部和外部。这就是闭包作用。

//让内部函数在循环创建的时候立即执行,并且捕捉当前的索引值,然后记录在自己的一个本地变量里.然后利用返回函数的方法,重写内部函数,让下一次调用的时候,返回本地变量的值,代码:
var result=[];
function foo(){
    var i= 0;
    for (;i<3;i=i+1){
        result[i]=(function(j){
            return function(){
                alert(j);
            };
        })(i);
    }
};
foo();
result[0](); // 0
result[1](); // 1
result[2](); // 2

//详细见  http://www.cnblogs.com/waisonlong/category/714235.html

闭包的特点很鲜明，闭包内，变量无法释放，无法被直接访问；闭包可以被延迟执行。所以可以用它来做一些事情：
• 管理私有变量和私有方法，将对变量（状态）的变化封装在安全的环境中
• 将代码封装成一个闭包形式，等待时机成熟的时候再使用，比如实现柯里化和反柯里化
• 需要注意的，由于闭包内的部分资源无法自动释放，容易造成内存泄露（使用完值后删除）

你对前端界面工程师这个职位是怎么样理解的?

前端界面工程师是跟用户接触最近的一个职位，一个产品好坏并不是由企业说了算，用户喜欢的才是好的产品，而用户所能评价就是他看到的和触摸到的，前端界面工程师要做的就是呈现给用户这些信息，一个好的前端界面工程师应该是一个能真正了解客户的人。
前景：
随着互联网行业的蓬勃发展和终端设备的更新换代，前端技术也要时刻更新，要用更多的轻量型代码完成更复杂的工作。
UI、产品经理、前端工程师要紧密配合，力求引领时代而不是跟随时代

详细见 http://blog.csdn.net/yisuowushinian/article/details/51412705

请说出三种减少页面加载时间的方法。

答：1、合并Js文件和CSS 2、Sprites图片技术3、压缩文本和图片 4、延迟显示可见区域外的内容5、确保功能图片优先加载6、重新布置Call-to-Action按钮7、图片格式优化8、使用 Progressive JPEGs 9、精简代码10、延迟加载和执行非必要脚本11、使用AJAX采用缓存调用 12、自动化的页面性能优化
13. 尽量减少页面中重复的HTTP请求数量 14. 服务器开启gzip压缩 15. 使用多域名负载网页内的多个文件、图片
详细见http://www.chinaz.com/web/2014/0527/353092.shtml和
http://blog.csdn.net/wxzking/article/details/4089384

如何解决跨域问题?

8种解决跨域方案

详见转载：http://blog.csdn.net/joyhen/article/details/21631833
原文 http://www.cnblogs.com/JChen666/p/3399951.html

javascript里面的继承怎么实现？

1)原型继承

function Person (name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

这种继承方式很直接，为了获取Person的所有属性方法(实例上的和原型上的)，直接将父类的实例new Person(‘pursue’)赋给了子类的原型，其实子类的实例man1,man2本身是一个完全空的对象，所有的属性和方法都得去原型链上去找，因而找到的属性方法都是同一个。
所以直接利用原型链继承是不现实的。

2）构造函数实现继承

<script type="text/javascript">  
    function  Parent(name){  
        this.name=name;  
        this.sayParent=function(){  
            alert("Parent:"+this.name);  
        }  
    }  

    function  Child(name,age){  
        this.tempMethod=Parent;  
        this.tempMethod(name);  
        this.age=age;  
        this.sayChild=function(){  
            alert("Child:"+this.name+"age:"+this.age);  
        }  
    }  

    var parent=new Parent("江剑臣");  
    parent.sayParent(); //输出：“Parent:江剑臣”  
    var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”  
    child.sayChild();  
</script>

3）call、apply是实现集成

function Person (name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
    Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

这里子类的在构造函数里利用了apply去调用父类的构造函数，从而达到继承父类属性的效果，比直接利用原型链要好的多，至少每个实例都有自己那一份资源，但是这种办法只能继承父类的实例属性，因而找不到say方法，为了继承父类所有的属性和方法，则就要修改原型链，从而引入了组合继承方式。

4）组合继承

function Person (name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
    Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

需要注意的是man1和man2的实例属性其实是覆盖了原型属性，但是并没要覆盖掉原型上的say方法（因为它们没有），所以这里man1.say === man2.say依然返回true，因而需要十分小心没有覆盖掉的原型属性，因为它是所有实例共有的。

5）寄生组合继承

function Person (name, age) {
            this.name = name;
            this.age = age;
        }
Person.prototype.say = function(){
    console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
    Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上（a.和b.），这里用到了Object.creat(obj)方法，该方法会对传入的obj对象进行浅拷贝，类似于：

function create(obj){
    function T(){};
    T.prototype = obj;
    return new T();
}

因此，a.会将子类的原型对象与父类的原型对象进行很好的连接，而并不像一般的组合继承那样直接对子类的原型进行复制（如Man.prototype = new Person();）,这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承，在实现上更加合理。

注意:代码b.并不会改变instanceof的结果，但是对于需要用到construcor的场景，这么做更加严谨。

http://blog.csdn.net/kkkkkxiaofei/article/details/46474069

http://www.jb51.net/article/81766.htm

http://www.cnblogs.com/humin/p/4556820.html

js判断文字长度（区分中文及英文）？

方法一：

var len = 0;  
        var v = $.trim($(this).val());  
        for(i=0;i<v.length;i++)  {  
            if(v.charCodeAt(i)>256)  {  
                len += 3;  
            } else {  
                len++;  
            }  
        }

利用charCodeAt 获取该字符的unicode编码来判断，（unicode编码：例如，字符A的编码是65，字符B的编码是66，以此类推）当大于256时，说明是中文；之后通过判断服务器对1个中文的长度来控制前台length 长度。

[javascript] view plain copy
alert("都是a".length);

结果为3 可以看出js .length 方法不区分中英文。

方法二：

function isChinese(str){  //判断是不是中文  
    var reCh=/[u00-uff]/;  
    return !reCh.test(str);  
}  
function lenStat(target){  
    var strlen=0; //初始定义长度为0  
    var txtval = $.trim(target.val());  
    for(var i=0;i<txtval.length;i++){  
     if(isChinese(txtval.charAt(i))==true){  
      strlen=strlen+2;//中文为2个字符  
     }else{  
      strlen=strlen+1;//英文一个字符  
     }  
    }  
    strlen=Math.ceil(strlen/2);//中英文相加除2取整数  
    return strlen;  
}

利用charAt 返回该位置的字符，利用正则表达式判断。

比较map（）、forEach（）与for（）的区别？

总结：大体是

1、map速度比foreach快

2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，

3、map因为返回数组所以可以链式操作，foreach不能

那么接下来，我继续做分析，为什么更推荐用.map()，而不是.forEach()？

首先，.map()要比.forEach()执行速度更快。虽然我也说过执行速度不是我们需要考虑的主要因素，但是他们都比for()要更好用，那肯定要选更优化的一个。

第二，.forEach()的返回值并不是array。如果你想用函数式编程写个链式表达式来装个逼，.map()将会是你不二的选择。

来看下面这个例子：

var arr = [1, 2, 3];

console.log(
    arr.map(function(i){
        return i+i;
    })
    //链式风格
    .sort()
);// [2,4,6]

console.log(
    arr.forEach(function(i){
        return i+i;
    })
    //接不起来，断了
    .sort()
);//TypeError: Cannot read property 'sort' of undefined