每天一篇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 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
九种原生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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
初探nodeJS
2017/01/24 NodeJs
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python中IPYTHON入门实例
2015/05/11 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python之字典添加元素的几种方法
2020/09/30 Python
两则小学生的自我评价分享
2013/11/14 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js