js几个常被忽略的基础知识点

PascalXie 发布于2019-08-20 14:12 / 2309人阅读

摘要：参数数组片段结束处的后一个元素的数组下标。返回值一个新数组，包含从到不包括该元素指定的元素。描述方法将返回数组的一部分，或者说是一个子数组。输出因为此方法不会在每一个元素的基础上再次执行匹配。

array.slice(start, end)

参数start
数组片段开始处的数组下标。如果是负数，它声明从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。

参数end
数组片段结束处的后一个元素的数组下标。如果没有指定这个参数包含从start开始到数组结束的所有元素。如果这个参数是负数，从数组尾部开始算起的元素。

返回值
一个新数组，包含从start到end(不包括该元素)指定的array元素。

描述
方法slice()将返回数组的一部分，或者说是一个子数组。返回的数组包含从start 开始到end之间的所有元素，但是不包括end所指的元素。如果没有指定end，返回的数组包含从start开始到原数组结尾的所有元素。

var a = [1,2,3,4,5];

a.slice(0,3);    // 返回 [1,2,3]

a.slice(3);      // 返回 [4,5]

a.slice(1,-1);   // 返回 [2,3,4]

注意：该方法并不修改数组。如果想删除数组中的一段元素，应该使用方法Array.splice。

使用 Array#slice 拷贝数组

var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

使用 Array#slice 将类数组对象转换成数组。

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
// "true" array of DIVs
// 得到一个由 div 元素组成的“真正的”数组
 
var argsArr = Array.prototype.slice.call(arguments);
// changes arguments to "true" array
// 把 arguments 转换成一个“真正的”数组

Array.prototype.sort

不仅可以对简单类型的数组项进行排序，可以通过属性来排序对象。如果哪天服务器端发来一段 JSON 数据，而且其中的对象需要排序

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // 实现增序排列：前者的 age 小于后者
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

用 length 属性来截断数组

传对象只是传引用，我们经常会试图把一个数组清空，但实际上却错误地创建了一个新数组。

var myArray = yourArray = [1, 2, 3];

// 囧
myArray = []; // `yourArray` 仍然是 [1, 2, 3]
 
// 正确的方法是保持引用
myArray.length = 0; // `yourArray` 和 `myArray`（以及其它所有对这个数组的引用）都变成 [] 了

使用 push 来合并数组

使用 push 方法来合并数组：

var mergeTo = [4,5,6];
var mergeFrom = [7,8,9];
 
Array.prototype.push.apply(mergeTo, mergeFrom);
 
mergeTo; // is: [4, 5, 6, 7, 8, 9]

高效探测功能特性和对象属性

很多时候我们会像下面这样来探测浏览器的某个特性：

if(navigator.geolocation) {
    // 在这里干点事情
}

当然这可以正常工作，但它并不一定有很好的效率。因为这个对象探测方法会在浏览器中初始化资源。在过去，上面的代码片断可能会在某些浏览器下导致内存泄露。更好、更快的方法是检查对象是否包含某个键名：

if("geolocation" in navigator) {
    // 在这里干点事情
}

键名检查十分简单，而且可以避免内存泄露。

数组的 indexOf

let arr = ["orange", "2016", "2016"];

arr.indexOf("orange"); //0
arr.indexOf("o"); //-1

arr.indexOf("2016"); //1
arr.indexOf(2016); //-1

arr.indexOf(‘orange") 输出 0 因为 ‘orange" 是数组的第 0 个元素，匹配到并返回下标。
arr.indexOf(‘o") 输出 -1 因为此方法不会在每一个元素的基础上再次执行 indexOf 匹配。
arr.indexOf(‘2016") 输出 1 因为此方法从头匹配直到匹配到时返回第一个数组元素的下表，而不是返回全部匹配的下标。
arr.indexOf(2016) 输出 -1 注意：这里不会做隐式类型转换。

MDN上面的说明：

indexOf() compares searchElement to elements of the Array using
strict equality (the same method used by the === or triple-equals operator).

这里用的是严格等于（===）。做类似判断的时候多留意，数字不会转成字符串，同理字符串也不会转换成数字。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81453.html

可变对象与不可变对象

摘要：不可变对象不允许对自身内容进行修改。因为他们说到不可变对象时用的是赋值，而说到可变对象又用了的索引等方法，这根本是两码事。基于这一设定，两者在功能上的最大区别就是不可变对象可以作为字典的键，而可变对象不行。前阵子我们聊了下函数的参数传递以及变量赋值的一些内容：关于函数参数传递，80%人都错了简单回顾下要点： 1. Python 中的变量不是装有对象的容器，而是贴在对象上的标签...

jay_tian 2019-07-30 17:54 评论0 收藏0
代码失控与状态机（上）

摘要：代码只是状态机图的相关元素的一种表现形式，它与节点式或表格式的状态机图并无本质不同。如上，状态机是防止代码失控的一剂良药，制备完善的状态机图就是防止代码失控的一种有效手段。前言前几天和某某同学吃饭席间，他聊到每当要修改老项目中自己写的代码时就痛苦不堪，问我是不是也有同感。我觉得这应该是不少程序猿的心声，之所以会这样，大致有两个主因：项目的整体设计很糟糕，只管往上堆砌各种功能、补...

cucumber 2019-07-30 17:19 评论0 收藏0
前端面试 - 收藏集 - 掘金

摘要：一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学，大三狗一枚面试是个漫长的过程，从海投到收获电话面试，一面二面三面，一个步骤出错那么后面就宣告终结。一道常被人轻视的前端 JS 面试题 - 前端 - 掘金目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言年前刚刚离职了，分享下我曾经出过的一道...

lpjustdoit 2019-08-22 11:03 评论0 收藏0
有关form表单常被问到的知识点

摘要：限制表单的数据集的值必须为字符而支持整个字符集通用字符集。因此对于提交时，传输数据就会受到长度的限制。但实际各个服务器会规定对提交数据大小进行限制，都有各自的配置。这一般用于识别该用户是否拥有合法的操作权限，提高了数据的安全性。这里排版可能不是太好，详情看我的简书 form表单有什么作用？表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。...

kohoh_ 2019-08-01 16:50 评论0 收藏0