js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...

约定不等于承诺〃 2021-09-16 17:36 271阅读 0赞

1、**给对象添加属性**：使用 **object.prop 或object\['prop'\] ** 给对象添加属性

let obj={};
     obj.name="zhangsan";
     obj["age"]=23;
     obj["class"]="语文";
     console.log(obj);   //输出：{name: "zhangsan", age: 23, class: "语文"}

2、**删除对象属性**：使用 **delete 删除对象属性**

let obj={name:"xiaohua",age:22};
    delete obj.name;
    delete obj["age"];
    console.log(obj);  //输出：{}

注意：：在循环中删除对象属性时候会报错！！！待补充

3、**对象合并**：使用jquery的**  $.extend(obj01,obj02)合并多个对象**

4、**对象合并**：使用 **Object.assign(o1,o2)** 方法

5、**遍历对象键、属性值**：使用 **for(变量 in 对象)** 的形式遍历对象属性名

let obj001={name:'tom',age:26};
    for(let key in obj001){
       console.log(key+":"+obj001[key]); //输出：name:tom和age:26 ,key就是属性名（键）
    }
    console.log(Object.keys(obj001));  //Object.keys(o1)方法数组形式返回o1对象的所有属性名(键)
    //Object.keys(obj001)方法获取的是对象实例属性组成的数组，不包括原型方法和属性！！！！

**注意：for...in...遍历的是数组或对象的索引值index，而for...of...遍历的是数组的元素值；**

6、**遍历数组**：使用 **for(变量 in 数组)** 的形式遍历数组

let arr01=[12,22,32,42];
    let arr02=new Array(12,22,32,42);  //使用Array构造函数创建数组
    let arr03=new Array(5);  //创建一个包含5项的数组
    for(let index in arr01){  //index是数组下标，for..in..遍历所有索引项
       console.log(index+":"+arr01[index]);  //输出：0:12 1:22 2:32 3:42
    }

**注意：for...in...更适合遍历对象，for...of...更适合遍历数组值**

for in 遍历数组会存在一些问题，如下：

Array.prototype.method=function(){  //原型方法
    　　console.log(this.length);
    }
    var myArray=[1,2,4,5,6,7]
    myArray.name="数组"
    for (var index in myArray) {
      console.log(myArray[index]);  
    }
    //使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
    //问题二：遍历顺序有可能不是按照实际数组的内部顺序

for in 遍历对象时候可以通过hasOwnPropery方法可以判断某属性是否是该对象的实例属性，如下：

for (var key in myObject) {
    　　if（myObject.hasOwnProperty(key)){
    　　　　console.log(key);
    　　}
    }

或者ES5的Object.keys(myObject)获取对象的实例属性组成的数组，不包括原型方法和属性。

Object.prototype.method=function(){
    　　console.log(this);
    }
    var myObject={
    　　a:1,
    　　b:2,
    　　c:3
    }
    Object.keys(myObject).forEach(function(key,index){<br>　　console.log(key,myObject[key])<br>})

6、**遍历数组**：使用 **for(元素 of 数组)** 的形式遍历数组

let arr01=[12,22,32,42];
    for(let ele of arr01){   //for遍历所有的ele元素项
       console.log(ele);  //输出：12 22 32 42
    }

7、**forEach遍历数组**：使用 **forEach(元素 of 数组)** 的形式遍历数组，使用如下：

//forEach(fn)方法将对数组中的每一个元素执行一次该fn匿名函数，其中ele是当前元素,index是当前元素的索引值,arr是原数组；
    //匿名函数中的this指向window;
    //forEach()方法无返回，是undefined;
    
    let arr01=['hello','world'];
    arr01.forEach(function(ele,index,arr){  
        console.log(index);  
        console.log(ele);
        console.log(this); 
        console.log(arr);
        //arr[1]="tom";  //可以通过索引对数组元素值进行修改
         
    }); //两次分别输出：0 hello window ['hello','world','tom'];  1 world window ['hello','world','tom'];
    console.log(arr01);  //输出：['hello','world','tom']，所以forEach（）并不会改变原数组

8、** map遍历数组**：使用** map(function(ele,index,arr)\{ return XXX;\})** 的形式遍历数组，使用如下：

//arr.map()中的匿名函数中的参数ele、index、arr分别表示遍历数组时当前对象元素、当前索引值、原有数组；
    //arr.map()会返回一个新的数组，但不改变原有数组；方法中的this指向window；
    //arr.map() 和arr.forEach()方法都不会对空数组进行执行；
    //map()方法浏览器支持：ie9+  Safari1.5+
    
    let oldArr=[1,2,3];
    let newArr=oldArr.map(function(ele,index,arr){
        console.log("原有数组元素"+index+":"+ele+"/"+arr[index]);
        console.log(this);
        return ele*2;
    });
    console.log(newArr);  //输出：[2, 4, 6]
    
    let arr1=[];
    let newArr1=arr1.map(function(){
        return ele;
    })
    console.log("空数组使用map方法："+newArr1);  //输出为：空数组使用map方法：

注意：forEach() 和 map() 以及 filter() 方法只能遍历数组；

9、** filter遍历数组**：使用** filter(fn) 方法过滤** 数组中的每一项，返回满足条件的项组成新的数组

//filter()不改变原有数组，返回符合过滤条件的项并组成新的数组；方法中的this指向window；
    let arr1=[1,2,3,4,5,6,7,8,9,10];
    let newArr=arr1.filter(function(ele,index,arr){
        //console.log(this);
        return ele%3==0 &&ele>5;
    });
    console.log(arr1);  //输出：[1,2,3,4,5,6,7,8,9,10]
    console.log(newArr);  //输出：[6,9]

10、**js数组 push() 方法**：使用 arr.push(ele) 方法在**数组尾部添加一个或多个元素，并返回新的长度**

let arr1=[1,2,3];
    let b=arr1.push(55,66);
    console.log(arr1); //输出：[1,2,3,55,66] 元素被添加到数组尾部
    console.log(b); //输出：5 ，返回的是新的长度

11、**js数组 pop() 方法**：使用 arr.pop() 方法**删除数组尾部元素，并返回被删除的元素**

let arr1=[0,2,4,6];
    let b=arr1.pop();
    console.log(arr1); //输出：[0,2,4]
    console.log(b); //输出：6

12、**js数组 unshift() 方法**：使用 arr.unshift() 方法在**数组开头添加一个或多个元素，并返回新的长度**

let arr1=[0,2,4,6];
    let b=arr1.unshift(77,88);
    console.log(arr1); //输出：[77,880,0,2,4,6]
    console.log(b); //输出：6

13、**js数组 shift() 方法**：使用 arr.shift() 方法**删除并返回数组的第一个元素**

let arr1=[0,2,4,6];
    let b=arr1.shift();
    console.log(arr1); //输出：[2,4,6]
    console.log(b); //输出：0

14、**js数组 slice() 方法**：使用 arr.slice(index1,index2) 方法**获取数组开始下标到结束下标之间的元素组成一个新的数组**

let arr1=[0,2,4,6,8];
    let b=arr1.slice(2,4);
    let c=arr1.slice(2);
    console.log(arr1); //输出：[0,2,4,6,8]
    console.log(b); //输出：[4,6]  //包括起始下标对应的元素，不包括结束下标对应的元素
    console.log(c); //输出：[4,6,8]  //获取数组指定下表后的数据并返回新的结果数组

15、**js数组 splice() 方法**：使用 **splice(start,deleteCount,val1,val2)方法从start位置开始删除deleteCount项，再插入值val1、val2 ，并返回删除的数组**

let arr1=[66,22,33,4,55,11];
    let b=arr1.splice(1,2,111,222);  //所以这里删除了22和33，接着添加了111和2222
    console.log(arr1); //输出：[66,111,222,4,55,11]
    console.log(b); //输出：[22,33]  //返回了删除的数组

16、**js数组 concat()合并 方法**：使用 arr.concat(arr1,arr2) 方法**合并两个或更多的数组，并返回合并后的结果数组。**

let arr1=[1,22,33,44,55];
    let arr2=[100,200]
    let d=arr1.concat(88,arr2);
    console.log(d); //输出：[1,22,33,44,55,88,100,200]
    console.log(arr1); //输出：[1,22,33,44,55] 不改变原来的数组
    console.log(arr2); //输出：[100,200] 不改变原来的数组

17、**js数组 join()合并 方法**：使用 arr.join(separator) 方法**将数组的所有项通过separator拼接成一个字符串**

let arr1=['hello','every','body'];
    let m=arr1.join('--');
    console.log(m);  //输出：hello--every--body
    console.log(arr1);  //原数组不变

18、**js数组 sort()排序方法**：使用 arr.sort() 方法会**将数组的所有项toString()转型成字符串，所以sort方法比较的是字符串，**所以会出现3>13的错误如下，所以这里**使用函数作为参数来调用解决问题**

let arr1=[1,22,13,52,3];
    let m=arr1.sort();
    console.log(m);  //输出：[1, 13, 22, 3, 52],比较的是字符串大小
    
    let n=arr1.sort(function(a,b){return a-b;});  
    console.log(n); //升序输出：[1, 3, 13, 22, 52],所以这里使用函数作为参数来调用
    
    let arr2=[1,22,13,52,3];
    let k=arr2.sort(function(a,b){return b-a;});
    console.log(k); //降序输出：[52, 22, 13, 3, 1]

let arr1=["hello","world","tom"];
    let m=arr1.sort();
    console.log(m);  //输出：["hello", "tom", "world"],可以字符串排序
    console.log(arr1);  //输出：["hello", "tom", "world"],原数组改变

19、**js数组 reverse()反转方法**：使用 arr.reverse() 方法**反转数组所有元素项的顺序**

let arr1=["hello","world","tom"];
    let m=arr1.reverse();
    console.log(m);  //输出：["tom", "world", "hello"]
    console.log(arr1);  //输出：["tom", "world", "hello"], 原数组改变

20、**js数组 indexOf() 搜索位置方法：**使用 arr.indexOf() 方法**返回数组中指定元素所在位置，从数组开头往结尾查找**

let arr1=["hello","world","tom","world"];
    let m=arr1.indexOf("world");
    let n=arr1.indexOf("world",1); //第二个参数是可选参数，表示开始查找第一个参数的起点位置,返回从1的位置后第一次出现‘world’所在的位置
    let k=arr1.lastIndexOf("hello",1); //从前往后查找，表示从数组的第二个元素开始查找‘hello’的位置
    let j=arr1.lastIndexOf("Jane"); //没有找到将返回-1
    console.log(m);  //输出：1
    console.log(n);  //输出：1
    console.log(k);  //输出：0
    console.log(j);  //输出：-1
    console.log(arr1);  //输出：["hello","world","tom","world"],原数组没有改变

21、**js数组 lastIndexOf() 搜索位置方法：**使用 arr.lastIndexOf() 方法**返回数组中指定元素最后出现的位置，**也就是最后一个该元素的位置

let arr1=["hello","world","tom","world"];
    let m=arr1.lastIndexOf("tom");
    let n=arr1.lastIndexOf("world");
    let k=arr1.lastIndexOf("Jane");
    console.log(m);  //输出：2
    console.log(n);  //输出：3
    console.log(k);  //输出：-1  ，没找到返回-1
    console.log(arr1);  //输出：["hello","world","tom","world"],原数组没有改变

22、**js数组 every() 方法：**使用 arr.every() 方法**检测数组元素的每个元素是否都符合条件。**所有元素都符合条件则返回true

let arr1=[1,3,5,6,8];
    let m=arr1.every(function(ele){
        return ele<10;
    });
    console.log(m);  //输出：true
    console.log(arr1);  //原数组没有改变

23、**js数组 some() 方法：**使用 arr.some() 方法**检测数组元素中是否有任意元素符合指定条件。**任意元素符合条件则返回true

let arr1=[1,3,25,6,8];
    let m=arr1.some(function(ele){
        return ele>10;
    });
    console.log(m);  //输出：true
    console.log(arr1);  //原数组没有改变

24、**js检查对象是不是数组：**使用 **Array.isArray(arr1)** 方法 **。**arr1 instanceof Array==true 和 arr1..constructor === Array来判定，在多个frame中来回穿梭时存在漏洞，因为每个iframe都有一套自己的执行环境，跨frame实例化的对象彼此是不共享原型链的

25、**js数组 fill() 方法：**使用 arr.fill() 方法**是使用固定值来填充数组指定位置元素。**类似于全体替换，浏览器ie12+支持

let arr1=['hello','every','body','Tom','Jane'];
    arr1.fill('fun',1,3); //arry.fill(value,start,end)的三个参数分别表示填充的值、填充起始的位置、填充结束的位置
    console.log(arr1); //输出：["hello", "fun", "fun", "Tom", "Jane"]

25、**js数组 includes() 方法**判断一个数组是否包含指定的元素；**js数组 find(function()\{\}) 方法**返回符合传入测试（函数）条件的数组元素中的第一个元素。但是浏览器支持都要求较高，这里不细说