(五)js数组方法二

时间:2021-08-04 15:16:18
一:数组方法
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());将字符串中的所有字母转换为小写.