JavaScript · 有关Array

2019-09-11 admin

原型方法

  • join()

    var arr = [1,2,3];
    var str = arr.join('-');
    console.log(arr); // [1,2,3]
    console.log(str); // '1-2-3'
    
  • push()、pop()

    var arr = [1,2,3];
    var length = arr.push(8,9);
    console.log(length); // 5
    console.log(arr); // [1,2,3,8,9]
    var ele = arr.pop();
    console.log(ele); // 9
    console.log(arr); // [1,2,3,8]
    
  • shift()、unshift()

    var arr = [1,2,3];
    var ele = arr.shift();
    console.log(ele); // 1
    console.log(arr); // [2,3]
    var length = arr.unshift(0,1); // 在[2,3]基础上
    console.log(length); // 4
    console.log(arr); // [0,1,2,3]
    
  • indexOf()、lastIndexOf()

    var arr = [1,3,5,5,7,9];
    console.log(arr.indexOf(5)); // 2
    console.log(arr.lastIndexOf(5)); // 3
    console.log(arr.indexOf(5,2)); // 2
    console.log(arr.indexOf(5,3)); // 3
    console.log(arr.indexOf(5,4)); // -1
    console.log(arr.indexOf('5')); // -1
    
  • find()、findIndex()

    var arr = [1,3,5,7,9];
    arr.find((item,index) => item === 3); // 3
    arr.find((item,index) => index === 3); // 7
    arr.find((item,index) => item === 0); // undefined
    arr.find((item,index) => index === 5); // undefined
    arr.findIndex((item,index) => item === 5); // 2 
    arr.findIndex((item,index) => index === 2); // 2
    arr.findIndex((item,index) => item === 2); // -1
    arr.findIndex((item,index) => index === 5); // -1
    
  • keys()、values()、entries()

    let keys = [1,3,5].keys();
    for(let k of keys) {
        console.log(k);
    }
    // 0
    // 1
    // 2
    let values = [1,3,5].values();
    for(let v of values) {
        console.log(v);
    }
    // 1
    // 3
    // 5
    let entries = [1,3,5].entries();
    for(let e of entries) {
        console.log(e);
    }
    // [0,1]
    // [1,3]
    // [2,5]
    
  • reduce()、reduceRight()

    var arr = [1,2,3,4,5];
    var sum = arr.reduce((prev,cur,index,arr) => prev + cur);
    console.log(arr); // [1,2,3,4,5]
    console.log(sum); // 15
    var sub = arr.reduceRight((prev,cur,index,arr) => prev - cur);
    console.log(arr); // [1,2,3,4,5]
    console.log(sub); // -5
    
  • every()、some()

    var arr = [1,3,5,7];
    arr.every(item => item > 1); // false
    arr.every(item => item >= 1); // true
    arr.some(item => item > 1); // true
    arr.some(item => item > 9); // false
    
  • includes()

    var arr = [1,3,5];
    arr.includes(3); // true
    arr.includes(7); // false
    arr.includes('1'); // false
    
  • reverse()

    var arr = [1,3,5,7,9];
    var rev = arr.reverse();
    console.log(arr); // [9,7,5,3,1]
    console.log(rev); // [9,7,5,3,1]
    
  • sort()

    var arr = [2,11,7,9];
    var newArr = arr.sort((prev,cur) => {
      if(prev-cur > 0) {
          return 1;
      } else if(prev-cur < 0) {
          return -1;
      } else {
          return 0;
      }
    });
    console.log(arr); // [2,7,9,11]
    console.log(newArr); // [2,7,9,11]
    
  • concat()

    var arr1 = [1,2,3];
    var arr2 = [4,5];
    var newArr = arr1.concat(arr2);
    console.log(arr1); // [1,2,3]
    console.log(arr2); // [4,5]
    console.log(newArr); // [1,2,3,4,5]
    var arr3 = ['a','b'];
    var arr4 = [1,[2,3]];
    var newArr = arr3.concat(arr4);
    console.log(newArr); // ['a','b',1,[2,3]]
    var arr5 = ['A','B'];
    var newArr = arr5.concat(1,[2,3]); // ['A','B',1,2,3]
    console.log(newArr.length); // 5
    
  • slice()

    var arr = [1,3,5,7,9];
    var newArr = arr.slice(1,4);
    console.log(arr); // [1,3,5,7,9] 
    console.log(newArr); // [3,5,7]
    
  • splice()

    // 3个参数:起始index,要删除的项数,要插入的项
    var arr = [1,2,3,5,6,7];
    var del = arr.splice(4,1);
    console.log(del); // [6] 
    console.log(arr); // [1,2,3,5,7]
    var add = arr.splice(3,0,4);
    console.log(add); // []
    console.log(arr); // [1,2,3,4,5,7]
    var upd = arr.splice(4,2,5,6,7);
    console.log(upd); // [5,7]
    console.log(arr); // [1,2,3,4,5,6,7]
    // 可见:返回给del,add,upd的都是被删的项的数组
    
  • map()

    var arr = [1,2,3];
    var newArr = arr.map((item,index) => item * item);
    console.log(arr); // [1,2,3]
    console.log(newArr); // [1,4,9]
    
  • fill()

    // 以覆盖的方式填充
    // 3个参数:要填充的项,起始填充index,结束填充index (前闭后开)
    var arr = [1,2,3];
    var newArr = arr.fill(0,1);
    console.log(arr); // [1,0,0]
    console.log(newArr); // [1,0,0]
    var arr2 = [1,2,3,4,5];
    arr2.fill(0,1,1); // [1,2,3,4,5]
    arr2.fill(0,1,3); // [1,0,0,4,5]
    var arr3 = [1,2];
    arr2.fill(0,1,5); // [1,0,0,0,0]
    
  • filter()

    var arr = [1,2,3,4,5,6,7,8,9,10];
    var newArr = arr.filter((item,index) => {
        return item%3 === 0 && index > 2
    })
    console.log(arr); // [1,2,3,4,5,6,7,8,9,10]
    console.log(newArr); // [6,9]
    

    filter()、find()、map()三者作用完全不同,见文末补充

  • forEach()

    var arr = [1,2,3];
    var newArr = arr.forEach(item => item*2);
    console.log(arr); // [1,2,3]
    console.log(newArr); // undefined
    arr.forEach(item => console.log(item*item));
    // 1
    // 4
    // 9
    

Tips 1

  • 改变了原数组的方法(操作数组本身):
*   push():向末尾添加元素 / 返回添加后长度
*   pop():删除末尾的元素 / 返回删除的元素
*   shift():删除开头的元素 / 返回删除的元素
*   unshift():向开头添加元素 / 返回添加后长度
*   reverse():颠倒数组顺序 / 返回颠倒后数组
*   sort():按规则给数组排序 / 返回排序后数组
*   splice():删除、插入或替换数组元素 / 返回删除的元素的数组
*   fill():以覆盖方式填充数组 / 返回填充后数组
  • 不改变原数组的方法(构建新数组或判断数组元素):
*   join():
*   find()、findIndex():
*   indexOf()、lastIndexOf():
*   keys()、values()、entries():
*   every()、some()、includes():
*   reduce()、reduceRight():
*   concat()、slice()、map()、filter():
*   forEach():

Tips 2

  • filter()、find()、map()各自的作用
*   **filter()**:以当前数组为基,筛选出符合条件的元素,并构建一个新数组
    实例: `[1,2,3] -> [1,2]`
*   **find()**:找到数组中符合查询条件的第一个元素
    实例:`[1,2,3] -> 2`
*   **map()**:以当前数组为基,遍历数组,并对各元素执行map表达式,构建出一个新数组
    实例: `[1,2,3] -> [1,4,9]`

Tips 3

  • sort()的默认排序
*   `['Google','Apple','Microsoft'].sort(); // ['Apple','Google','Microsoft']`

解释:字符串按首字母的ASCII码进行排序

  • ['Google','apple','Microsoft'].sort(); // ['Google','Microsoft','apple']

解释:字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后

  • [10,20,1,2].sort(); // [1,10,2,20]

解释:sort()默认排序会先把所有元素转换成String再排序

对象属性

  • Array.from()

    // 根据伪数组对象或可迭代对象,返回包含这些元素的数组
    Array.from([1,3,5].values()); // [1,3,5]
    Array.from([1,3,5].keys()); // [0,1,2]
    Array.from([1,3,5].entries()); // [[0,1],[1,3],[2,5]]
    Array.from('123'); // ['1','2','3']
    Array.from([1,2,3]); // [1,2,3]
    Array.from(new Set([1,2,3])) // [1,2,3]
    Array.from(new Map([[1,2],[3,4],[5,6]])) // [[1,2],[3,4],[5,6]]
    Array.from('123',n => n*2) // [2,4,6]
    
    function func(){
      return Array.from(arguments)
    }
    func(1,2,3,4) // [1,2,3,4]
    
  • Array.of()

    // 根据给的元素,返回包含这些元素的数组
    Array.of(1);
    // [1]
    Array.of(1,2,3,4,5);
    // [1,2,3,4,5]
    

[转载]原文链接:https://segmentfault.com/a/1190000020356517

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74860.html

文章标题:JavaScript · 有关Array

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部