JS中常用的数组方法和循环

数组

定义：具有相同数据类型的一个或多个值的集合

数组的创建

1.利用 new 创建数组，下标赋值

        let arr = new Array(5);
        arr[0] = "html";
        arr[1] = "css";
        arr[2] = "java";
        arr[3] = "vue";
        arr[4] = "wechat";
        console.log(arr);   //(5) ['html', 'css', 'java', 'vue', 'wechat']

2.利用 new 创建数组，创建时直接赋值

let arr = new Array("html","css","java","vue","wechat");
console.log(arr);   // ['html', 'css', 'java', 'vue', 'wechat']

3. 利用数组字面量创建数组

let arr = ["html","css","java","wechat","vue"]
console.log(arr);   //['html', 'css', 'java', 'wechat', 'vue']

本质上1、2两种方式是同一种

---

常用方法和属性

属性

length：设置或返回数组中元素的数目

方法

join( )：把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

  let arr = ["html", "css","js", "vue"];
  let newarr = arr.join("-"); 
  console.log(arr)      // 原数组不变["html", "css","js", "vue"]
  console.log(newarr);  //  html-css-js-vue

 

sort()：对数组排序

排序   
sort()   默认情况下是按照最前面的数字排序，

arr.sort(function (a,b) {
    return a-b;            //正序
    return b-a;            //倒序
})        加匿名回调函数

 

push()：向数组末尾添加一个或更多元素，并返回新的长度

let arr = ["html","css","js","vue"];
console.log(arr.push("mysql"));   //5
console.log(arr);                 //["html","css","js","vue","mysql"]

 

pop()：删除数组末尾元素,返回值是删除的元素

let arr = ["html","css","js","vue"];
console.log(arr.pop());   //vue
console.log(arr);         //["html","css","js"]

 

unshift() ：向数组头部添加元素， 返回新数组的长度

let arr = ["html","css","js","vue"];
console.log(arr.unshift("mysql"));   //5
console.log(arr);                 //["mysql"，"html","css","js","vue","mysql"]

 

shift() ：删除数组头部元素，删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

let arr = ["html","css","js","vue"];
console.log(arr.shift());   //html
console.log(arr);         //["css","js","vue"]

 

splice() ：数组万能方法， 删除、添加、替换都可以进行

删除：返回删除元素组成的数组 []

let arr = ["html","css","js","vue"];
//splice(起始下标，删除个数)
console.log(arr.splice(1,2));    //['css', 'js']
console.log(arr);                //['html', 'vue']

 

替换：返回被替换元素组成的数组 []

let arr = ["html","css","js","vue"];
//splice(起始下标，替换个数，替换数据)
console.log(arr.splice(0,1,"mysql"));    //['html']
console.log(arr);                        //['mysql', 'css', 'js', 'vue']

 

添加：返回添加元素组成的数组 []

let arr = ["html","css","js","vue"];
//splice(起始下标，替换个数，增加数据)
console.log(arr.splice(4,1,"php"));    //[]        
console.log(arr);                            //["html","css","js","vue","php"]

---

---

 

循环

1.for()   循环

let arr = ["html","css","java","wechat","vue"];
//for (let index = 0; index < array.length; index++) {
//}
        for (let i = 0; i < arr.length; i++) {
            document.write(arr[i]+"<br/>");
        }

        for循环是js中最常用的一个循环工具，经常用来于数组的循环遍历

        一般使用条件【已知条件，已知范围（先判断，后执行）】

 

2.while()    循环

let arr = ["html","css","java","wechat","vue"];
//while (condition){  
//}
            let i=0;
            while (i<arr.length) {
                document.write(arr[i]+"<br/>");
                i++;
            }

        一般使用条件【已知条件，已知范围（先判断，后执行）】

 

3.do while()    循环

let arr = ["html","css","java","wechat","vue"];
 //do {      
 //} while (condition); 
             do {
                 document.write(arr[i]+"<br/>");
                 i++;
             } while(i<arr.length);

        do while 循环是 while 循环的一个变体，它首先执行一次，然后才进行条件判断。

        一般使用条件【未知条件，未知范围（先执行，后判断，至少执行一次）】

 

4.for of()    循环

let arr = ["html","css","java","wechat","vue"];
// for (const iterator of object) {        
// }
            for (const value of arr) {
                document.write(value+"<br/>");
            }

        for of 循环是 ES6 中新增的语句，与其他的循环不同的是forof用值循环输出

        一般【循环遍历数组】

 

5.for in()    循环

let arr = ["html","css","java","wechat","vue"];
// for (const key in object) {
// }
            for (const i in arr) {
                document.write(arr[i]+"<br/>");
            }

        一般【循环遍历对象】

 

6.for Each()    循环    数组方法

let arr = ["html","css","java","wechat","vue"];
// array.forEach(function(){
// });                   
                        //匿名回调函数
            arr.forEach(function(value,key,oldarr){
                document.write(value+"-----"+key+"-----"+oldarr+"<br/>")
            });

        forEach循环，循环数组中每一个元素并采取操作，没有返回值，可以不用知道数组长度,他有三个参数，只有第一个是必需的，代表当前下标下的 value。第二个是当前的下标，第三个是原数组。

        只能用来【遍历数组】

 

7.  map()    数组方法

let arr = ["html","css","java","wechat","vue"];

            console.log(arr);
                                //匿名回调函数        
            let newarr = arr.map(function(value,index,oldarr){
                document.write(value+"---"+index+"---"+oldarr+"<br/>")
                if (index=0) {
                    value = 123;
                }
                return [value];
            });   
            console.log(newarr);

        有返回值，返回了一个新的数组和老数组长度一定一致，可能会升维，数组中的元素为原始数组元素调用函数处理后的值。

        只能用来【遍历数组】

 

8.  flatMap()    数组方法

let arr = ["html","css","java","wechat","vue"];

            console.log(arr);
                                    //匿名回调函数
            let newarr = arr.flatMap(function(value,index,oldarr){
                document.write(value+"---"+index+"---"+oldarr+"<br/>")
                if (index=0) {
                    value = 123;
                }
                return [value,[index]];
            });   
            console.log(newarr);

        有返回值，返回了一个新的数组和老数组长度不一定一致，肯定是一维

        只能用来【遍历数组】