每天一篇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 相关文章推荐
列表内容的选择
Jun 30 Javascript
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
Node.js实现数据推送
Apr 14 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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 求质素(素数) 的实现代码
2011/04/12 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Python制作简易注册登录系统
2016/12/15 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
长江七号观后感
2015/06/11 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
小学校长开学致辞
2015/07/29 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript