每天一篇javascript学习小结(Array数组)


Posted in Javascript onNovember 11, 2015

1、数组常用方法

var colors = ["red", "blue", "green"];  //creates an array with three strings
    alert(colors.toString());  //red,blue,green
    alert(colors.valueOf());   //red,blue,green
    alert(colors);        //red,blue,green

2、数组map()方法
 

var numbers = [1,2,3,4,5,4,3,2,1];
    
    var mapResult = numbers.map(function(item, index, array){
      //item 数组元素 index元素对应索引 array原数组
      console.log(array === numbers);//true
      return item * 2;
    });
    console.log(mapResult);  //[2,4,6,8,10,8,6,4,2]

3、数组reduce()方法

var values = [1,2,3,4,5];
     //接收一个函数,然后从左到右遍历item,直到reduce到一个值。
    var sum = values.reduce(function(prev, cur, index, array){
      console.log(array === values);
      console.log(index);//1,2,3,4 数组的索引从1开始
      return prev + cur;//前后两个值相加
    });
    alert(sum);//15

4、数组concat()方法

//concat() 方法用于连接两个或多个数组。
    //该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
    //语法
    //arrayObject.concat(arrayX,arrayX,......,arrayX)
    var colors = ["red", "green", "blue"];
    var colors2 = colors.concat("yellow", ["black", "brown"]);
    
    alert(colors);   //red,green,blue    
    alert(colors2);  //red,green,blue,yellow,black,brown

5、数组长度length

var colors = new Array(3);   //create an array with three items
    var names = new Array("Greg"); //create an array with one item, the string "Greg"

    alert(colors.length);//3
    alert(names.length);//1
var colors = ["red", "blue", "green"]; //creates an array with three strings
    var names = [];            //creates an empty array
    var values = [1,2,];          //AVOID! Creates an array with 2 or 3 items
    var options = [,,,,,];         //AVOID! creates an array with 5 or 6 items
    
    alert(colors.length);  //3
    alert(names.length);   //0
    alert(values.length);  //2 (FF, Safari, Opera) or 3 (IE)
    alert(options.length);  //5 (FF, Safari, Opera) or 6 (IE)
var colors = ["red", "blue", "green"];  //creates an array with three strings
    colors.length = 2;
    alert(colors[2]);    //undefined
var colors = ["red", "blue", "green"];  //creates an array with three strings
    colors.length = 4;
    alert(colors[3]);    //undefined
var colors = ["red", "blue", "green"];  //creates an array with three strings
    colors[colors.length] = "black";     //add a color
    colors[colors.length] = "brown";     //add another color

    alert(colors.length);  //5
    alert(colors[3]);    //black
    alert(colors[4]);    //brown
var colors = ["red", "blue", "green"];  //creates an array with three strings
    colors[99] = "black";           //add a color (position 99)
    alert(colors.length); //100

6、数组方法every和some

//every()与some()方法都是JS中数组的迭代方法。
    //every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。
    //some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
    var numbers = [1,2,3,4,5,4,3,2,1];
    
    var everyResult = numbers.every(function(item, index, array){
      return (item > 2);
    });
    
    alert(everyResult);    //false
    
    var someResult = numbers.some(function(item, index, array){
      return (item > 2);
    });
    
    alert(someResult);    //true

7、数组filter()方法

//从数组中找到适合条件的元素(比如说大于某一个元素的值)
    var numbers = [1,2,3,4,5,4,3,2,1];
    
    var filterResult = numbers.filter(function(item, index, array){
      return (item > 2);
    });
    
    alert(filterResult);  //[3,4,5,4,3]

8、数组indexOf和lastIndexOf

//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
    //语法
    //stringObject.indexOf(searchvalue,fromindex)
    //searchvalue  必需。规定需检索的字符串值。
    //fromindex  可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
    
   /*
    lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
    语法
    stringObject.lastIndexOf(searchvalue,fromindex)
    searchvalue  必需。规定需检索的字符串值。
    fromindex  可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。
   */
    var numbers = [1,2,3,4,5,4,3,2,1];
    
    alert(numbers.indexOf(4));    //3
    alert(numbers.lastIndexOf(4));  //5
    
    alert(numbers.indexOf(4, 4));   //5
    alert(numbers.lastIndexOf(4, 4)); //3    

    var person = { name: "Nicholas" };
    var people = [{ name: "Nicholas" }];
    var morePeople = [person];
    
    alert(people.indexOf(person));   //-1
    alert(morePeople.indexOf(person)); //0

9、数组toLocaleString和toString

var person1 = {
      toLocaleString : function () {
        return "Nikolaos";
      },
      
      toString : function() {
        return "Nicholas";
      }
    };
    
    var person2 = {
      toLocaleString : function () {
        return "Grigorios";
      },
      
      toString : function() {
        return "Greg";
      }
    };
    
    var people = [person1, person2];
    alert(people);           //Nicholas,Greg
    alert(people.toString());      //Nicholas,Greg
    alert(people.toLocaleString());   //Nikolaos,Grigorios

10、数组push和pop方法

var colors = new Array();           //create an array
    var count = colors.push("red", "green");    //push two items
    alert(count); //2
    
    count = colors.push("black");         //push another item on
    alert(count); //3
    
    var item = colors.pop();            //get the last item
    alert(item);  //"black"
    alert(colors.length); //2

11、数组方法unshift和shift

//unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
    //shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
    var colors = new Array();           //create an array
    var count = colors.unshift("red", "green");  //push two items
    alert(count); //2
    
    count = colors.unshift("black");        //push another item on
    alert(count); //3
    
    var item = colors.pop();           //get the first item
    alert(item);  //"green"
    alert(colors.length); //2

12、数组倒序方法reverse

var values = [1, 2, 3, 4, 5];
    values.reverse();
    alert(values);    //5,4,3,2,1

13、数组排序方法sort

function compare(value1, value2) {
      if (value1 < value2) {
        return -1;
      } else if (value1 > value2) {
        return 1;
      } else {
        return 0;
      }
    }
    
    var values = [0, 1, 16, 10, 15];
    values.sort(compare);
    alert(values);  //0,1,10,15,16
    //sort 改变原数组

14、数组方法slice

/*
      slice() 方法可从已有的数组中返回选定的元素。
      语法
      arrayObject.slice(start,end)
      start  必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
      end    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
      返回值
      返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
    */
    var colors = ["red", "green", "blue", "yellow", "purple"];
    var colors2 = colors.slice(1);
    var colors3 = colors.slice(1,4);
    
    alert(colors2);  //green,blue,yellow,purple
    alert(colors3);  //green,blue,yellow

15、数组方法splice

/*
      plice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
      注释:该方法会改变原始数组。
      语法
      arrayObject.splice(index,howmany,item1,.....,itemX)
      index  必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
      howmany  必需。要删除的项目数量。如果设置为 0,则不会删除项目。
      item1, ..., itemX  可选。向数组添加的新项目。
    */
    var colors = ["red", "green", "blue"];
    var removed = colors.splice(0,1);       //remove the first item
    alert(colors);   //green,blue
    alert(removed);  //red - one item array
    
    removed = colors.splice(1, 0, "yellow", "orange"); //insert two items at position 1
    alert(colors);   //green,yellow,orange,blue
    alert(removed);  //empty array

    removed = colors.splice(1, 1, "red", "purple");  //insert two values, remove one
    alert(colors);   //green,red,purple,orange,blue
    alert(removed);  //yellow - one item array

16、数组isArray()方法

alert(Array.isArray([]));  //true
    alert(Array.isArray({}));  //false

以上就是今天的javascript学习小结,之后每天还会继续更新,希望大家继续关注。

Javascript 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Vue点击切换颜色的方法
Sep 13 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
详解ES7 Decorator 入门解析
Feb 18 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
九种原生js动画效果
Nov 11 #Javascript
js文字横向滚动特效
Nov 11 #Javascript
详解javascript遍历方式
Nov 11 #Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
jquery原理以及学习技巧介绍
Nov 11 #Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
You might like
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python模块future用法原理详解
2020/01/20 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
电视购物广告词
2014/03/19 职场文书
民政工作个人总结
2015/02/28 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers