KJ面试

1.css input checkbox和radio样式美化

<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>

css 代码：

.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-position: 0 0;
}

2.css中用过$，%符号吗?

考察sass

3.接口数据几十万，如何一次性加载出来不卡？

• $.get("data.json", function (response) {
• //response里大概有13万条数据
• loadAll( response );
• });
• function loadAll(response) {
• //将13万条数据分组， 每组500条，一共260组
• var groups = group(response);
• for (var i = 0; i < groups.length; i++) {
• //闭包， 保持i值的正确性
• window.setTimeout(function () {
• var group = groups[i];
• var index = i + 1;
• return function () {
• //分批渲染
• loadPart( group, index );
• }
• }(), 1);
• }
• }
• //数据分组函数（每组500条）
• function group(data) {
• var result = [];
• var groupItem;
• for (var i = 0; i < data.length; i++) {
• if (i % 500 == 0) {
• groupItem != null && result.push(groupItem);
• groupItem = [];
• }
• groupItem.push(data[i]);
• }
• result.push(groupItem);
• return result;
• }
• var currIndex = 0;
• //加载某一批数据的函数
• function loadPart( group, index ) {
• var html = "";
• for (var i = 0; i < group.length; i++) {
• var item = group[i];
• html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
• }
• //保证顺序不错乱
• while (index - currIndex == 1) {
• $("#content").append(html);
• currIndex = index;
• }
• }

以上代码大致的执行流程是

1. 用ajax获取到需要处理的数据， 共13万条
2. 将数组分组，每组500条，一共260组
3. 循环这260组数据，分别处理每一组数据， 利用setTimeout函数开启一个新的执行线程（异步），防止主线程因渲染大量数据导致阻塞。

是为了保证不同的线程中最终插入html到文档中时顺序的一致性， 不至于同时执行的代码在插入html时互相篡位。

通过这种方式执行， 页面瞬间就刷出来了，不用丝毫等待时间。 从同步改为异步，虽然代码的整体资源消耗增加了， 但是页面却能瞬间响应， 而且， 前端的运行环境是用户的电脑，因此些许的性能损失带来的用户体验提升相对来说还是值得的。

虽然示例中提到的情况在现实环境中几乎不可能出现， 但是在我们平时的工作中总会有一些似是而非的场景出现， 利用里面的处理思路， 或许对我们解决问题会有一定的帮助。

ps：setTimeout并不算真正的多线程， 但是为了方便表达，便借用了线程一词

4.JavaScript 怎么快速声明一个数组，长度为 100，元素全是 0？

1.   new Array(101).join(0).split(' ');

2.   Array.apply(null, { length: 100 }).fill(0);

3.   Array(100).fill(0);

4.   var arr = new Array(100);arr = arr.map(item=>0);

5.    [...Array(100).fill(0)];

6.   用 lodash.     _.fill(Array(100), 0);

7.    Array.from({length: 100}, _ => 0)

8.   With ES6: Array.prototype.fill()
5.JavaScript 输出五个3，不用循环？

方法一：

var arr = new Array(6);
arr = arr.join('3').split(',');
console.log(arr) //["33333"]

方法二：

i=3;eval((new Array(6)).join('console.log(i);'));

3

3

3

3

3

6.手动实现一个new操作？

要自己实现一个new功能，实现要知道new操作符都干了些什么，其实总的来说就四步：
1.创建一个空对象
2.链接到原型
3.绑定this值
4.返回新对象
知道了这些步骤，我们就可以自己模拟实现new方法了
方法一：

// 新建一个类（构造函数）
function Otaku(name, age) {
    this.name = name;
    this.age = age;
    // 自身的属性
    this.habit = 'pk';
}
// 给类的原型上添加属性和方法
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
    console.log('I am ' + this.name);
}
// 实例化一个person对象
const person = new Otaku('乔峰',5000);
person.sayYourName();
console.log(person);//打印出构造出来的实例

方法二：

function create(){
  //创建一个空对象
  let obj = new Object();
  //获取构造函数
  let Constructor = [].shift.call(arguments);
  //链接到原型
  obj.__proto__ = Constructor.prototype;
  //绑定this值
  let result = Constructor.apply(obj,arguments);//使用apply，将构造函数中的this指向新对象，这样新对象就可以访问构造函数中的属性和方法
  //返回新对象
  return typeof result === "object" ? result : obj;//如果返回值是一个对象就返回该对象，否则返回构造函数的一个实例对象
}

接下来测试下：
function People(name,age){
  this.name = name;
  this.age = age;
}
//通过new创建构造实例
let people1 = new People('Jack',20);
console.log(people1.name) //Jack
console.log(people1.age) //20

//通过create方法创造实例
let people2 = create(People,'Rose',18);//调用自定义create实现new
console.log(people2.name) //Rose
console.log(people2.age) //18

6.平常用到的框架？

jquery,zepto,bootstrap,swiper,vue,element,vue admin,vue mint ui,iview admin 

7.js 不用循环生成长度为M值为N的数组

var arr = Array.from({length:10}, (v,k) => k);

alert(arr.join(","));//v是index下标，k是100，即数组长度，输出结果是0,1,2,3,4,5,6,7,8,9