发布于 2017-02-09 05:08:16 | 20 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了javascript中的Array数组知识点,对数组的基本使用方法,以及各种方法进行整理,感兴趣的小伙伴们可以参考一下

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学习小结(Array数组)
每天一篇javascript学习小结(面向对象编程)
每天一篇javascript学习小结(属性定义方法)
每天一篇javascript学习小结(String对象)
每天一篇javascript学习小结(RegExp对象)
每天一篇javascript学习小结(Function对象)
每天一篇javascript学习小结(Date对象)
每天一篇javascript学习小结(Boolean对象)
每天一篇javascript学习小结(基础知识)
javascript学习笔记(五) Array 数组类型介绍
JavaScript学习笔记之ES6数组方法
JavaScript学习笔记之取数组中最大值和最小值
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务