（五）js数组方法二

一:数组方法

var arr = [];

1.arr.push()//给数组末尾<添加>元素

2.arr.unshift()//给数组头部<添加>元素

3.arr.shift()//删除数组<头部>元素//返回值为被删除的元素

4.arr.pop()//删除数组<末尾>的元素//返回值为被删除的元素

看图示意:    

   头部             尾部

    ↑                ↑

unshift-----添加-----push

    ↑                ↑

shift-------删除-----pop

 

5.arr.splice(从那个下标开始操作,删除的数量,添加的元素1,添加的元素2,添加的元素3...)//万能法返回值为被删除元素的数组[被删除元素];

注:以上五种方法会改变原数组

6.arr.join()默认用英文下的都好拼接,可改变拼接的字符串arr.join('-')

eg:

1)    var arr = ['2018','1','23'];

    var newArr = arr.join('/');

    console.log(newArr);结果为 2018/1/23;

2)页面跳转后,顶部地址栏中的信息变化的拼接.

    var param = {

        q:'棉衣';

        commend:'all';

        search_type:'item';

    }

    var Aparam = []; //定义数组存放param对象中的属性和属性值.

    for(var attr in param){  //遍历对象中的每一个属性. attr为属性的下标

        Aparam.push(attr + "=" + Aparam[attr]);//输出结果为 q=棉衣commend=allsearch_type=item

    }

    console.log(Aparam.join('&'));输出结果为q=棉衣&commend=all&search_type=item

7.arr.slice(从哪个下标开始分割,到那个下标的后一个下标点结束分割.);//支持-1,但从又开始分割.下标依然从做开始0123...

8.arr.concat(arr2);//合并数组arr和数组arr2;

9.arr.reverse()//改变原数组的元素顺序

10.arr.sort()//数组的排序但一般情况下会在sort中自定义一个比较大小的函数

eg:     

   var arr = [103,500,204,300];

    arr.sort(

        function (a,b) {

            if(a>b){

                return 1;//返回值1则a,b互换位置

            } else{

                return -1;//返回值为-1则a,b不换位置

            }

        }

    )

    console.log(arr);//输出结果为103,204,300,500;

 

 

二:新增方法

a)新增函数方法

1.bind()// 返回值为一个新的函数.bind改变的是该函数内部的this指向.this默认指向为window;

eg:    

var obj = {

        name: '马冬梅'

    };

    var name = '宋东浦';

    function hello(x, y) {

    var name = '胡锋';

        console.log(arguments);

        console.log(this.name);//this指向window.全局变量为window自身的属性.

        console.log(x + y);

    }

    var newHello = hello.bind(obj, 6); this =obj  将obj的对象地址赋值给this.此时this指向为obj这个对象

    newHello(7, 9);//最终结果为马冬梅13.9也是所传入的一个实参但是没有一个形参去接收他.

 

 

b)新增数组方法

1.arr.forEach(function(v,k,arr){},context)  //循环数组

v代表数组中的元素,k代表v这个元素的下标,arr代表整个数组.context代表回调函数中this所指向的地址

eg:   

var arr = [1,3,5,4,9,7];

    arr.forEach(function(v,k,arr){

        console.log(this)  // this指向context

        console.log(v,k,arr)

    },'this所指向的地址');

 

 

注:使用forEach()这个方法可以遍历数组.使用多用在this指向.

2. arr.map(function(v,k,arr){},context)//语法与forEach相同,也是遍历数组,但需要一个变量 来接收返回的值.

var newArr = arr.map(function(v){

    return  v *= 2;

})

console.log(newArr);

注:返回值为数组的每个元素的2倍.

3.arr.filter(function(v,k,arr){},context)//语法与前两个相同,遍历数组的作用,

eg:    

var arr = [3,6,2,7,9,1]

    var newArr = arr.filter(function(v){

    if(v >5){

        return true;  结果为true会将v这个元素返回出去.

    } else {

        return false;

    }

})

 

 

console.log(newArr); //输出结果为6,7,9

注:过滤数组中大于5的元素并输出

4.arr.some(function(v,k,arr){},context)//返回值为boolean类型  true或false

eg:    

var newArr = arr.some(function(v){

    if(v > 5){

        return true;

    } else {

        return false;

    }

})

 

 

注:some是只要数组中有一个满足条件返回值都为true.否则为false

5.arr.every(function(v,k,arr){},context)//返回值为boolean类型  true或false

eg:    

var newArr = arr.every(function(v){

    if(v > 5){

        return true;

    } else {

        return false;

    }

})

 

 

注:every是当数组中的所有元素满足条件时,返回为true.否则返回false

6.arr.indexOf(a,b)//在数组中查找元素.返回结果为所找到的元素的下标,则返回-1 a为所需查找的元素,b为从哪里开始的下标.b可以为负值

注:从左往右开始查找区别于7.

7.arr.lastIndexOf(a,b)//作用与indexOf相同,但是lastIndexOf是从右往左开始查找.

8.归并或递归减少

    arr.reduce(function(previous,current,index,arr){},initialValue)

    previous 为上一次计算的结果,若没有进行计算或者初始化值,则默认数组的第一个元素为revious.

    current 为当前数组的元素,若没有进行计算或者初始化赋值则默认为第二个元素,

    index 为current的元素的下标.

    arr 为整个的数组

    initialValue 为初始化的值相当于给previous赋初始化的值.

eg: 

var arr = [1,4,7,9];

    var result = arr.reduce(function(previous,current,index,arr){

        console.log(previous,current,index,arr);

        return previous + current;

    },10);

    console.log(result);

 

 

解析:    previous的初始值为initialValue所赋的值 = 10;

    此时current当前值为1,;

    return 10 + 1;

    previous 为上一次计算得结果,所以为11;

    当前值变为4;

    return 11 + 4 +7 +9;

    最终结果为31;

9.  arr.reduceRight(function(previous,current,index,arr){},initialValue);

注:用法与arr.reduce相同,但是计算是是从右往左开始查找元素.

10.Array.isArray()：判断一个变量是否为数组               返回结果为true  或者false

三:字符串新增

1.str.trim() 去掉输出结果左右两侧的空格.

eg:    

console.log(str.trim());

 

2.var obj = {name:'苏三',age:'80'}

    console.log(JSON.stringify(obj));

注:将对象格式化为一个字符串

3.var str = '{ "name":"苏三","age":"80" }'; 其中的双引号不能少,必须写上.

console.JSON.parse(str);

注:将一个JSON格式的字符串变为一个对象.   JSON格式其实指的就是对象的格式,全称为  javascript object notation;

四:字符串

1.属性:

console.log(str.length);

console.log(str.constructor);

五:字符串的方法

    var str= 'hello world';

1.console.log(str.charAt(4));输出结果为o.4为下标.输出字符串中的某个元素,

2.console.log(str.charCodeAt(4));输出结果为111.这里的4指的是下标为4的字符所代表的ASCll码值.o的ASCLL值为111;

3.console.log(String.fromCharCode(111));输出结果为o  根据ASCLL码值进行转换.

是静态转换.可理解为一条单独的输出语句.输出的结果与定义的字符串无任何关系.详情参照ASCLL码表

4.console.log(str.indexOf('e'));与数组的新增方法arr.indexOf()相同,都是查找元素,找到后返回该元素的下标,找不到返回-1;

5.console.log(str.lastIndexOf(e));与数组的新增方法arr.lastIndexOf()相同.

6.console.log(str.match('ll'));匹配字符串中的字符,匹配的到,输出结果为数组,匹配不到输出结果为null.(结合正则来用.)

7.console.log(str.search('ll'));如果匹配到的元素则返回元素的下标.如果找不到则返回-1;输出结果与indexOf相同

配合正则使用

8.console.log(str.replace('ll','**'))替换字符串中的某元素,将子字符串中的ll转换为**

9.console.log(str.slice(a,b));用法与数组的分割相同.

难点:分割点到所需要分割的重点的后一个下标为止.

10.console.log(str.substring(a,b))用法与slice相同但是区别:这里的a,b不能赋负值.

11.console.log(str.substr(a,b));a为这里分割的起止点,b为分割的长度.

注:尽量不要使用,ECMA为对其进行规定.各大浏览器可能不支持,不建议使用.

12.console.log(str.split('ll'))切割字符串中的ll.扔掉ll并返回一个数组.

eg:    

var str = 'a=b&c=d&e=f';

    console.log(str.split(&));输出结果为a=b,c=d,e=f;

 

13.console.log(str.toUpperCase());将字符串的所有字母转换为大写.

14.console.log(str.toLowerCase());将字符串中的所有字母转换为小写.