JavaScript一些常用方法一

整理以前的笔记，在学习JavaScript时候,经常会用到一些方法，但是有时忘掉了具体用法，因此记下。方便以后查阅。

这篇博文先说明这些方法的用途：

splice()、push()、pop() 、shift()、unshift()、hasOwnProperty() 、match() 、map() 、reduce()、filter()。

一、 .splice()

通过删除现有元素和/或添加新元素来更改数组的内容

例如:

var myFish = ["angel", "clown", "mandarin", "surgeon"];

//从第 2 位开始删除 0 个元素，插入 "drum"

var removed = myFish.splice(2, 0, "drum");

//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]

//被删除元素数组：[]，没有元素被删除

console.log("1:"+removed+"---"+myFish); //1:---angel,clown,drum,mandarin,surgeon

//从第 3 位开始删除 1 个元素

removed = myFish.splice(3, 1);

//运算后的myFish：["angel", "clown", "drum", "surgeon"]

//被删除元素数组：["mandarin"]

console.log("2:"+removed+"---"+myFish); //2:mandarin---angel,clown,drum,surgeon

//从第 2 位开始删除 1 个元素，然后插入 "trumpet"

removed = myFish.splice(2, 1, "trumpet");

//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]

//被删除元素数组：["drum"]

console.log("3:"+removed+"---"+myFish);//3:drum---angel,clown,trumpet,surgeon

//从第 0 位开始删除 2 个元素，然后插入 "parrot", "anemone" 和 "blue"

removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

//运算后的myFish：["parrot", "anemone", "blue", "trumpet", "surgeon"]

//被删除元素的数组：["angel", "clown"]

console.log("4:"+removed+"---"+myFish);//4:angel,clown---parrot,anemone,blue,trumpet,surgeon

//从第 3 位开始删除 2 个元素

removed = myFish.splice(3, Number.MAX_VALUE);

//运算后的myFish: ["parrot", "anemone", "blue"]

//被删除元素的数组：["trumpet", "surgeon"]

console.log("5:"+removed+"---"+myFish);//5:trumpet,surgeon---parrot,anemone,blue

二、.push()

一个或多个参数添加到数组末尾

例如：

var arr = [1,2,3];

arr.push(4); // 现在arr的值为 [1,2,3,4]

三、.pop()

“抛出”一个数组末尾的值

例如:

var arr=[1, 4, 6]

var oneDown = arr.pop();//现在 oneDown 的值为 6 ，arr变成了 [1, 4]

四、.shift()

“移出”一个数组的第一个并赋值

例如:

var arr=[1, 4, 6]

var oneDown = arr.shift();//现在 oneDown 的值为 1 ，arr变成了 [4, 6]

五、.unshift()

头部添加元素

例如：

var arr = [1,2,3];

arr.unshift(4); // 现在arr的值为 [4,1,2,3]

六、.hasOwnProperty()

检查对象是否有该属性

例如:

var myObj = {

      top: "hat",

      bottom: "pants"

    };

myObj.hasOwnProperty("top");    // true

myObj.hasOwnProperty("middle"); // false

七、 .match()

匹配字符使用

例如:

   var testString = "Hello World! How are you！Haha";  //定义一个字符串

//设置要查找的格式

/*   / 是这个正则表达式的头部

 h 是我们想要匹配的模式

 / 是这个正则表达式的尾部

g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。

i 代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。

*/

var expressionToGetSoftware = /h/gi;

var softwareCount = testString.match(expressionToGetSoftware).length;//softwareCount为4

八、 .map()

迭代数组

例如:

var oldArray = [1,2,3,4,5];

var newArray = oldArray.map(function(val){

  return val+3;

});

 console.log(newArray);  //[4, 5, 6, 7, 8]

九、 .reduce()

迭代一个数组，并且把它累积到一个值中

例如:

var array = [4,5,6,7,8];

var singleVal = 0;

// 累加器 和当前值

singleVal = array.reduce(function(qq,ww){

    console.log("qq:"+qq+",ww:"+ww); //qq:4,ww:5  qq:9,ww:6 qq:15,ww:7 qq:22,ww:8

  return qq+ww;

});

console.log(singleVal); //30

十、 .filter()

迭代一个数组，并且按给出的条件过滤出符合的元素

例如:

var oldArray = [1,2,3,4,5,6,7,8,9,10];

var newArray = oldArray.filter (function(val){

  return val<6;            //保留小于6的数据

});

console.log(newArray);  //[1, 2, 3, 4, 5]

//删除数组中的所有假值。在JavaScript中，假值有false、null、0、""、undefined 和 NaN。

//通过filter方法来过滤掉假值

function bouncer(arr) {

   var newarr=arr.filter(function(val){

    return !!val;

   });

  return newarr;

}

//判断是否是真值,如果不是就过滤掉

function bouncer(arr) {

  return arr.filter(Boolean);

}

console.log(bouncer([7, "ate", "", false, 9])); //[7, "ate", 9]

console.log(bouncer([false, null, 0, NaN, undefined, ""])); //[]

console.log(bouncer([1, null, NaN, 2, undefined]));  // [1, 2]

秒客网