笔试、面试遇到的

最新推荐文章于 2023-05-30 09:22:31 发布

qq_27821079

最新推荐文章于 2023-05-30 09:22:31 发布

阅读量116

点赞数

文章标签： JS

ES6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

border:none 和 border:0 的区别

性能上：
——将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源
——将border设置成none，浏览器就不会做出渲染动作
兼容性：
——将border设成0，对于所有的浏览器效果都一样
——将border设成none。在IE6、7中无效，在其它浏览器中有效（如果想在使用border:none的同时兼容所有的浏览器，只需要加上background属性即可）

数组去重

（这里注意，ES6中新增SET结构，类似数组，但是内部成员唯一）

 let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
 let set = new Set(array);
 //Set {1, 2, 3, 4, 5}

一步搞定：

let newArray=[...new Set(array)];
//或者 let newArray=Array.from(new Set(array));

快速排序

步骤：

检查数组的元素个数，如果小于等于1，就返回
选择"基准"（pivot），并将其与原数组分离，再定义两个空数组，用来存放一左一右的两个子集
开始遍历数组，小于"基准"的元素放入左边的子集，大于基准的元素放入右边的子集
使用递归不断重复这个过程，就可以得到排序后的数组

    var quickSort = function(arr) {
    　　if (arr.length <= 1) { return arr; }
    　　var pivotIndex = Math.floor(arr.length / 2);
    　　var pivot = arr.splice(pivotIndex, 1)[0];
    　　var left = [];
    　　var right = [];
    　　for (let i = 0; i < arr.length; i++){
    　　　　if (arr[i] < pivot) {
    　　　　　　left.push(arr[i]);
    　　　　} else {
    　　　　　　right.push(arr[i]);
    　　　　}
    　　}
    　　return quickSort(left).concat([pivot], quickSort(right));
    };

数组大小排序

这里还有 sort() 方法
本身sort 方法是对字符编码的顺序，需要自定义排序（如数值大小），则需要排序函数

function sortNumber(a,b){
  return a - b;//小到大 顺序
  // b-a ->大到小 倒序
}
let arr= new Array(3,1,2,5,7);
arr.sort(sortNumber)

倒置数组

array.reverse()//该方法改变原数组

创建对象方法

传送门（包括继承）继承

原始模式（字面量表示法）

　　var Cat = {
　　　　name : '',
　　　　color : ''
　　} 
　　var cat1 = {}; // 创建一个空对象
　　cat1.name = "大毛"; // 按照原型对象的属性赋值
　　cat1.color = "黄色";

最简单的封装了，把两个属性封装在一个对象里面。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系

工厂模式创建对象

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name); 
 };
 return o; 
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了构造函数

构造函数模式

    　　function Cat(name,color){
    　　　　this.name=name;
    　　　　this.color=color;
    　　}
    　　var cat1 = new Cat("大毛","黄色");
    　　alert(cat1.name); // 大毛
    　　alert(cat1.color); // 黄色

“构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上

Prototype模式

    　　function Cat(name,color){
    　　　　this.name = name;
    　　　　this.color = color;
    　　}
    　　Cat.prototype.type = "猫科动物";
    　　Cat.prototype.eat = function(){alert("吃老鼠")};
    　　var cat1 = new Cat("大毛","黄色");
    　　alert(cat1.type); // 猫科动物
    　　cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率

组合使用构造函数模式和原型模式

function Person(name,age,job){
 this.name =name;
 this.age = age;
 this.job = job;
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
 alert(this.name);
 };
}
var person1 = new Person('Nike',20,'teacher');

Ojbect.create（）
动态原型模式：仅在第一次调用构造函数时，将方法赋给原型对象的相应属性，其他示例的处理方式同构造函数模式（这种包括后面的都不常见）
寄生构造函数模式：仅仅封装创建对象的代码，然后再返回新创建的对象，仍使用new操作符调用
稳妥构造函数模式：没有公共属性，只有私有变量和方法，以及一些get/set方法，用以处理私有变量

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址
浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文
一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应
此时，Web服务器提供资源服务，客户端开始下载资源。请求返回后，便进入了我们关注的前端模块简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST
没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠