（JavaScript） Array的tips

cfanr 发布于2019-08-22 18:41 / 2501人阅读

摘要：用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的位点进行排序。其中为可选参数，当执行回调函数时用作的值参考对象。数组中正在处理的元素。在没有初始值的空数组上调用将报错。

1. Array.prototype.push()

像数组一样使用对象：

var obj = {
    length: 0,

    addElem: function addElem (elem) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let"s add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

尽管 obj 不是数组，但是 push 方法成功地使 obj 的 length 属性增长了，就像我们处理一个实际的数组一样。

2. Array.prototype.sort()

arr.sort(compareFunction)

参数：compareFunction
可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。

如果指明了compareFunction，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

如果compareFunction(a, b)小于 0 ，那么 a 会被排列到 b 之前；

如果compareFunction(a, b)等于 0 ， a 和 b 的相对位置不变；

如果compareFunction(a, b)大于 0 ， b 会被排列到 a 之前。

比较函数格式如下（字符串与数组都可以比较）:

function compare(a, b) {
    if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
        return -1;
    }
    if (a > b ) {
        return 1;
    }
    // a must be equal to b
    return 0;
}

3. Array.prototype.unshift()

var arr = [1, 2];
arr.unshift(-2, -1);    // = 5
// arr is [-2, -1, 1, 2]

4. Array.prototype.concat()

返回新的数组（浅拷贝），不会影响原数组。

如果参数是数组，则把数组的元素放入结果中；

如果参数不是数组，则把参数本身放入结果中。

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9];

var alpha = ["a", "b", "c"];

var alphaNumeric = alpha.concat(1, [2, 3]);

console.log(alphaNumeric); 
// results in ["a", "b", "c", 1, 2, 3]

5. Array.prototype.forEach()

array.forEach(callback(currentValue, index, array){
    //do something
}, thisArg)

array.forEach(callback[, thisArg])

其中：thisArg为可选参数，当执行回调函数时用作this的值（参考对象）。

下列函数也有thisArg这个可选参数，用法与Array.prototype.forEach()一致：

Array.prototype.forEach()

Array.prototype.every()

Array.prototype.some()

Array.prototype.filter()

Array.prototype.map()

Array.prototype.reduce()

Array.prototype.reduceRight()

6. Array.prototype.map()

使用技巧案例

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

function returnInt(element) {
  return parseInt(element, 10);
}

["1", "2", "3"].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数，结果同上
["1", "2", "3"].map( str => parseInt(str) );

// 一个更简单的方式:
["1", "2", "3"].map(Number); // [1, 2, 3]
// 与`parseInt` 不同，下面的结果会返回浮点数或指数:
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

7.Array.prototype.reduce()

arr.reduce(callback[, initialValue])

Array.prototype.reduceRight()是与其用法类似，是从右向左遍历。

参数：

callback: 执行数组中每个值的函数，包含四个参数：

accumulator: 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（如下所示）。

currentValue: 数组中正在处理的元素。

currentIndex: 可选，数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。

array: 可选，调用reduce的数组。

initialValue: 可选，用作第一个调用 callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错。

reduce如何运行

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
}, 10);

// 20

实例：将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

实例：使用扩展运算符和initialValue绑定包含在对象数组中的数组

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: "Anna",
  books: ["Bible", "Harry Potter"],
  age: 21
}, {
  name: "Bob",
  books: ["War and peace", "Romeo and Juliet"],
  age: 26
}, {
  name: "Alice",
  books: ["The Lord of the Rings", "The Shining"],
  age: 18
}];

// allbooks - list which will contain all friends" books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ["Alphabet"]);

// allbooks = [
//   "Alphabet", "Bible", "Harry Potter", "War and peace", 
//   "Romeo and Juliet", "The Lord of the Rings",
//   "The Shining"
// ]

实例：数组去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

参考

Array - MDN

云服务器专线服务 tip tips tips1 js中的tip

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

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

小tips：JS之浅拷贝与深拷贝

摘要：浅拷贝深拷贝浅拷贝的问题如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。浅拷贝： function extendCopy(p) { 　var c = {}; 　for (var i in p) { 　　　c[i] = p[i]; 　} 　return c; } 深拷贝： function deepCopy(p...

Soarkey 2019-08-21 17:37 评论0 收藏0
[译]让web app更快的HTML5最佳实践

摘要：原文链接简介本文重点关注如何充分利用和让运行更加流畅使用代替最大的缺陷是在每一次请求中都会携带所有符合规则的数据这会增加请求响应时间特别是请求在中使用和代替是更好的做法这另种方法可以将数据永久或者以时间存储在用户本地数据不会随着请求传递所以原文链接: http://www.html5rocks.com/en/tutorials/speed/quick/ 简介本文重点关注如何充分...

aikin 2019-08-02 18:13 评论0 收藏0
JavaScript - 变量、值、类型

摘要：一返回值共有种二变量声明方法声明一个变量，可以将其初始化为一个值声明一个块级作用域变量，可以将其初始化一个值声明一个只读的常量使用的注意事项不支持块级作用域存在变量提升举例由于变量声明提升，这段代码相当于使用的注意事项块级作用域一、type of 返回值共有7种：undefined, object, boolean, number, string, symbol, function ...

ziwenxie 2019-08-23 12:16 评论0 收藏0
你不知道的JavaScript中卷第一、二章

摘要：表达式没有返回值，因此返回结果是。并不改变表达式的结果，只要让表达式不返回值按惯例我们用来获得这主要源自语言，当然使用或其他表达式也是可以的。不是数字的数字如果数学运算的操作数不是数字类型，就无法返回一个有效的数字，这种情况下返回值为。这里的内容是读书笔记，仅供自己学习所用，有欠缺的地方欢迎留言提示。第一部分类型和语法第1章类型ECMAScript语言类型包括Undefin...

levy9527 2019-08-26 14:05 评论0 收藏0
前端进击的巨人（四）：略知函数式编程

摘要：自执行函数闭包实现模块化以乐之名程序员产品经理对作用域，以及闭包知识还没掌握的小伙伴，可回阅前端进击的巨人三从作用域走进闭包。参考文档利用闭包实现模块化翻译浅谈中的高阶函数系列更文请关注专栏前端进击的巨人，不断更新中。。。系列更文前三篇文章，围绕了一个重要的知识点：函数。函数调用栈、函数执行上下文、函数作用域到闭包。可见不理解函数式编程，代码都撸不好。 showImg(https:/...

omgdog 2019-08-23 14:52 评论0 收藏0