数组方法、对象方法、字符串方法

最新推荐文章于 2024-01-15 11:24:36 发布

呜喱的呱呱

最新推荐文章于 2024-01-15 11:24:36 发布

阅读量744

点赞数

文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/n_j_q/article/details/129461828

版权

一、数组添加

1.直接添加

       arr[0] ="张三";
       console.log(arr);

2，在数组的尾部添加内容push

arr.push("值"); 会在改变原本的数组

       var arr= ["张三","李四"];
       arr.push("王五");
       arr.push("王五222");
       console.log(arr);

3.在数组的头部添加内容

数组.unshift("添加的值");

       var arr= [1,2,3,4,5];
       arr.unshift("值");
       arr.unshift("值2");
       console.log(arr);

4.数组的中间添加元素

数组.splice(添加或者删除的索引,删除的个数如果是添加就是0,要添加的值如果是删除可以不写)

       var arr= ["张三","李四","王五","王小二"];
       arr.splice(1,0,"新值");
       console.log(arr);

二、数组的删除方法

1.设置数组的长度；(了解)

       var arr= [1,2,3,4,5];
       arr.length=3;  // 人为设置 数组长度；
       console.log(arr);//[1,2,3]

2.删除数组的头部元素；shift 删除一个元素（比较多）返还值是删除的值；

       var arr= ["张三","李四","王五"];
       var res=  arr.shift();
       console.log(res);// 张三
       console.log(arr);//["李四","王五"]

3.尾部删除元素:pop删除一个元素(多) 返还值是删除的元素；

           var arr= ["张三","李四","王五"];
           var res=  arr.pop();
         //    console.log(res);
          arr.pop();
         console.log(arr);//["张三","李四"]

4.删除指定元素 splice （多）

数组.splice(删除开始的索引,删除的个数)

返还值是删除的元素

       var arr= [1,2,3,4,5,6];
       var res=arr.splice(1,1);
       console.log(res);//[2]
       console.log(arr);//[1,3,4,5,6]

       var arr= ["张三","李四","王五"];
       arr.splice(1,1,"hello");  // 替换操作
       console.log(arr);// ["张三","hello","王五"]

5.截取数组的元素；slice 不会改变原本数组，只能获取返还值；

       var arr= ["a","b","c","d","e"];
      // 第一个参数是从什么索引开始 第二个参数是个数 2,2
       var res=  arr.splice(1,2);
           console.log(res); //['b','c']

三、数组的其他方法

1.把数组通过某个字符把数组连接字符串join("字符")

       var str="a-b-c-d";
       var arr=str.split("-");
       console.log(arr);
       var res=  arr.join("*");
       console.log(res);
       console.log(arr);

       var arr= ["张安","李四","王五"];
       var res=  arr.join("-");
       console.log(res);

2.合并2个或者多个数组

数组1.concat(数组2,数组3...);

       var arr1= [1,2,3];
       var arr2= [4,5];
       var arr3= [6,7];
       // var res  =  arr1.concat(arr2,arr3);
       //  console.log(res);

       for(vari=0;i<arr2.length;i++){
           arr1.push(arr2[i]);
        }
       console.log(arr1);

       for(vari=0;i<arr3.length;i++){
           arr1.push(arr3[i]);
        }
       console.log(arr1);

3.反转数组：把数组倒过来

数组.reverse();

       var arr= [1,2,3,4];
       var res=  arr.reverse();
       console.log(res);

反转字符串；

       var res=  str.split("").reverse().join("");

       function reverseStr(str){
           return str.split("").reverse().join("");}
       var str="12345";
       console.log(reverseStr(str));

4.在数组里查找某个键值的索引值；

indexOf查找某个值的索引值，如果没有找到就返还-1；

       var arr= ["张三","李四","王五"];
       // var res = arr.indexOf("王五111");
       // console.log(res);
       //    判断数组里是否包含某个值；
       var str="fdafd";
       if(arr.indexOf(str) !== -1) { console.log(str+"有值");
        }else{ console.log("数组里没有这个值");}

5.数组的排序 : (很多)

数组.sort()

需要一个回调函数,接收2个形参如果是a-b那么是升序否则是倒序

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

       var res=arr.sort(function(a,b) {
           // return a - b;
           return b-a;
    })
       console.log(res);

       var arr= [{name:"张三",age:22},{name:"李四",age:20},{name:"王五",age:28}];
       var res=arr.sort(function(a,b){
           return b.age-a.age
    })
       console.log(res);

四、字符串方法

1.根据字符串的索引获取字符串的值；

       var str="abcdef";
       var res=str.charAt(2);
       console.log(res);

       console.log(str[2]);
       str[2] ="h";// 不能设置 字符串的值；
       console.log(str);

2.根据字符串的索引值获取字符串对应的编码；

           var str="abcdefg";
           var res=  str.charCodeAt(0);
           console.log(res);

3.根据某个字符把字符串切割成数组split(字符); （多）;

       va rstr="a*b*c*d";
       var arr=str.split("*");
       console.log(arr);

4.截取字符串1:substr （多）

字符串.substr(开始截取的索引,截取的数量（不给就到结尾）)

       var str="abcdefg";
       //    var res =  str.substr(2,2) ;
         var res=str.substr(2);  //  截取到字符串结尾 ；
       console.log(res);

5.截取字符串2：substring（多）

字符串.substring(开始截取的索引位置,结束截取的索引位置);包前不包后

       var str="abcdefg";
       var res=  str.substring(2,4);
       console.log(res);

6.截取字符串3：slice();

       var str="abcdefg";
       var res=str.slice(2,4);
       console.log(res);

7.把字符串里的英文变大写； (多)

       var str="abcDefG";
       var res=  str.toUpperCase();
       console.log(res);

8.把字符串里的英文转小写

   var str="abcDefG";
   var res=  str.toLowerCase();
   console.log(res);

   functionfn(str){
       if(str.toLowerCase()==="red"){ console.log("红色");
        }elseif(str==="yellow"){ console.log("黄色")
        }else{console.log("其他情况")}}
   fn("reD");

9.替换字符串replace("要替换的值","替换的新值");

   var str="fdafdsaXXXfdafdasXXXddfsa";
   str=  str.replace("XXX","***");
   str=  str.replace("XXX","***");
   console.log(str);

10.查找某个字符的索引；indexOf();

       varstr="abcdefg";
       varres=  str.indexOf("h");
       console.log(res);

五、对象新增方法

1.判断对象是否相同

       Object.is();
       let obj1= { myname:"张三"}
       // let obj2 = {
       //     myname:"张三"
       // }
       let obj2=obj1;
       // console.log(obj1===obj2);
       console.log(Object.is(obj1,obj1));//true

       console.log(NaN===NaN);//false
       console.log(Object.is(NaN,NaN));//true

2.Object.assign();合并2个或者多个对象；（重点）

Object.assign();

相同键名会覆盖

是一个浅拷贝

       let obj1= { name:"张三"}
       let obj2= { age:20,
           // name:"李四"
        }
       let obj3= { height:"178cm"}
       let res=  Object.assign(obj1,obj2,obj3);
   //    console.log(res);
       obj1.name="王五";
       console.log(res);  //{name:"王五",age:20,height:"178cm"}

展开运算符复制的对象或者数组也是浅拷贝

   let arr= [1,2,3,[6,7]];
   let arr2= [...arr];
   // arr[0] = 5;
   arr[3][0] =8;
   console.log(arr2);

3.Object.hasOwn // es6 判断某个属性是否是对象的自身属性（重点）

obj.hasOwnProperty("key")// ES5

   let obj= { myname:"张三",age:20}
   console.log(  Object.hasOwn(obj,"age1"));

4.Object.keys();Object.values(); （重点）

获取对象的所有键名或者是键值放在一个数组里

   let obj= {myname:"张三", age:20}
   let keys=Object.keys(obj);
   console.log(keys);
   let values=Object.values(obj);
   console.log(values);

5.Object.seal();可以把对象变成不可配置对象；

   let obj= { myname:"张三", age:20}
   Object.seal(obj);
   // Object.freeze(obj);
   obj.myname="李四";
   console.log(obj);

   delete obj.myname;
   console.log(obj);

六、对象转字符串的方法

ES5中运用for……in 遍历对象中的属性和属性值

ES6通过Object.keys(obj)获取对象所有的key值（键名）

Object.values(obj)获取所有的键值；

七、数组的循环方法

分为命令式编程和声明式编程

命令式编程：强调“如何做” 注重过程抽象

for循环

       var arr= ["张三","李四","王五"];
       for(var i=0;i<arr.length;i++) {  // 体现了过程
           console.log(arr[i]);} //结果: 循环得到键值 ；

forEach 【多】

获取所有的元素且在元素基础上加10；

       var arr= [1,2,3,4,5,6];
       var res= [];
       arr.forEach(item=>{res.push(item+10);})
       console.log(res);

   var arr= ["张三","李四","王五"];
   arr.forEach((item,key,arr)=>{  // 只能循环；
       console.log(item,key,arr);})
   arr.forEach(item=>{
           console.log(item);  // 获取 键值；循环的结果
        })  //结束循环只能在while和for循环使用break

map 【多】map：映射

 var arr= [1,2,3,4,5,6];
   var res=  arr.map(item=>{returnitem+10; })
     console.log(res);
map可以收集结果也可以收集回调函数里的返还值；
var arr= ["张三","李四","王五"];
 let res=  arr.map((item,key,arr)=>{
       console.log(item,key,arr);
       return item+"hello";})
   console.log(res);

every循环

回调返还的都为true的时候循环结果才是true否则就是false；

回调函数的结果是一个 &&的关系；全选非全选；

       let arr= [true,true,false,true,true];
         var res=  arr.every(item=>{
           console.log(item);//true true false
           return item;  }) //false 所有返还都是true 那么 res就是true
       console.log("最后的结果",res);  //false

五、 some 循环

只要有一个true最终结果就是true；只有全部是false最终结果才是false；

类似把回调函数的结果使用||连接起来

       var arr= [false,true,false,false];
       //every或者some如果已经获取到最终结果，那么循环就停止了；
       var res=arr.some((item,key,arr)=>{
           console.log(item,key,arr);
           return item;  
        })
       console.log("最终的结果:",res);

六、reduce循环【多】

累加器，累加结果万物皆可reduce

reduce(function(上一次的累加值,键值,键名,原本的数组){},初始累加的值);

1.数字的累加

          var arr= [1,2,3,4,5];
       var res=  arr.reduce(function(pre,item,key,arr){
           // pre是上次累加的结果
           console.log(pre,item);
           return pre + item;  
        },0);//0 是初始累加的值；
       console.log(res);  // 0 + 1 + 2 .. 5;
       第一次循环：初始值是0   ---》pre就是0 item就是1 返还1返还的1是下一次的pre值；  1
       第二次循环：pre 1   item2 返还pre+item ---》3 --->3又会作为下一次的pre
       第三次循环：pre 3

2.数组的累加

数组的去重；

方法一：

       var arr= [1,1,2,3,2,3,4,4,5,5];
       // var res = [...new Set(arr)];
       // console.log(res);//[1,2,3,4,5]

方法二：

       var res=arr.reduce((pre,item)=>{
           // 判断item 在 pre里有没有 ，如果有 就不添加 ，如果没有就在pre里添加这个值；
           if(pre.indexOf(item) == -1) {
               // 在pre数组里没有找到 item这个值；
               pre.push(item);  // [1]
            }
           return pre;
        }, []);
       console.log(res);//[1,2,3,4,5]

3.对象的累加

       var arr= ["a","a","b","c","c","c"];
       统计数组里值重复的次数放在一个对象里；{ a:2, b:1, c:3};
       var res=arr.reduce((pre,item)=>{
           // 判断pre对象里是否有 循环出来的键名pre:  {}  ---->  pre 能不能找到a下标
           // pre[item] = pre[item]++ || 1
           if(typeof  pre[item] ==="undefined") {
               // 在pre对象里没有找到键名  a
               pre[item] =1;
               // --->  pre =  {a:1}
            }else{
               // 第二次循环
               pre[item]++;  }
           return pre;
        }, {});
       console.log(res);//{a:2,b:1,c:3};

七、filter循环

循环的同时会判断返还值，如果返还值是true，那么就收集结果，否则就不收集结果【只会收集正确的结果】

       var res=arr.filter(item=>{
           // console.log(item);   //1  2  3  4  5  6
           // return false;   【不会搜集】
           return item>3;})
       // 简写：
       var res=arr.filter(item=>item>3)
       console.log(res);

判断某个值是否存在

更安全的判断变量存在的方式；

typeof之后的结果值一定是一个字符串；

所以判断的时候，后面的内容需要加上引号，不然判断就不对；

       var a;
       var a=10;
       if(typeof a!=="undefined"){  // a 的值必须要声明
           console.log("有值")
        }else{console.log("没有值");}

判断数据类型

1.typeof：区分基本数据类型和函数；(多)

2.Object.prototype.toString.call("数据") 精确判断数据类型所有类型；（多）

3.instanceof：判断某个实例在原型链上是否有关系，不推荐使用；

4.constructor判断是否是某个类型与3相比建议使用4

5.Array.isArray(); // 只能判断是否是一个数组； ES6里的方法；（多）

 var arr= [];var obj= {};
       console.log(obj instanceof Object);  //true
       console.log(arr instanceof Object);  //true
       console.log(arr instanceof Array);  //true
       console.log(Array.isArray(obj));//false
       console.log(Array.isArray(arr));//true
       if(arr.constructor===Array){  // 判断 构造函数 不需要加引号
           console.log("是数组");} //是数组
       console.log(obj.constructor===Object);  //true
       console.log(arr.constructor===Object);  //false