每天一篇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 中对象的继承〔转贴〕
Jan 22 Javascript
javascript parseInt 大改造
Sep 27 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
详解Vue打包优化之code spliting
Apr 09 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
javaScript Array api梳理
Mar 31 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
基于php实现的验证码小程序
2016/12/13 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
文明风采获奖感言
2014/02/18 职场文书
婚庆公司计划书
2014/09/15 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL