JavaScript数组及循环

JavaScript数组&循环

---

创建数组

var 数组名称 = new Array(size);

new: 表示数组的关键字

size: 表示数组中可存放的元素总数

小提示：JavaScript 中的数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从0开始

数组赋值

1、声明时赋值

var week= new Array (“星期日”,“星期一”……); ——括号内直接赋值

2、分别赋值

var week= new Array ( 3);
week[0] = “星期日”;
week[1] = "星期一 ";
week[2] = “星期二”;
week[3] = “星期三”; ——在下面分别赋值

访问数组元素

通过数组的名称和下标直接访问数组的元素

例：数组名[下标]; ——#下标从0开始

数组常用方法和属性

1、方法

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

sort(): 对数组排序

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

unshift()：向数组头部添加元素

pop()： 删除数组末尾元素

shift()： 删除数组头部元素

splice(): 删除数组中的元素（第一个参数为起始索引，第二个为删除数目）

1.1新增方法

1、模板字符串 ``
代码案例

 let str3 = `学习字符串---模板字符串【反引号】`;
        let str4 = `
            <ul>
                <li>111</li>
                <li>2222</li>
            </ul>`;
        console.log(str3);
        document.write(str4);

控制台打印结果：

浏览器输出结果：

2、sort 数组排序
代码案例

// 将数组内对象按照年龄从小到大排序
        let arr = [
            {name:"张三",age:45,sex:"男"},
            {name:"李四",age:20,sex:"女"},
            {name:"王五",age:30,sex:"男"},
            {name:"赵六",age:50,sex:"女"},
        ]
        console.log(arr);
        // 原理是根据 return 的正负排序 a 和 b
        arr.sort(function(a,b){
            return a.age - b.age;
        });
        console.log(arr);

控制台打印结果：

3、concat 合并数组 （常用最简方法）
代码案例

 let a = ["1111","2222","3333","4444"];
 let b = ["a","b","c","d"];
 let d = a.concat(b);
    console.log(d);

控制台打印结果：

4、展开运算符 … 【可合并复杂数据类型(引用类型) Array object function】

方法一、

// 创建原 obj
let obj = {
	uname:"aaaa",
	age:20,
	sex:"男"
}
// 将 obj 属性展开后拷贝到 obj1 	(展开后可单独改变独自数据类型)
let obj1 = {...obj};
// 改变 obj1 的 uname 属性
obj1.uname = "bbbb";
console.log(obj,obj1);

控制台打印结果：

方法二、
代码案例

  let c = [...a,...b];
    console.log(c);

控制台打印结果：

5、filter 返回数组中满足条件的元素【过滤器】
代码案例

 let arr = [1,3,5,7,9,12,234,43,-10];

 let bol = arr.filter(function(value){
    	if(value>10){
      		return value;
   		}
  })
   console.log(arr);
   console.log(bol);

控制台打印结果：

6、find 返回数组中满足条件的第一个元素
代码案例

let arr = [1,3,5,7,9,12,234,43,-10];

    let bol = arr.find(function(value){
        if(value>10){
            return value;
        }
    })
    console.log(arr);
    console.log(bol);

控制台打印结果：

7、findIndex 返回数组中满足条件的第一个元素的下标
代码案例

let arr = [1,3,5,7,9,12,234,43,-10];

    let bol = arr.findIndex(function(value){
        if(value>10){
            return value;
        }
    })
    console.log(arr);
    console.log(bol);

控制台打印结果：

8、includes 判断数组中满足条件的元素，有返回 true, 没有返回 false
代码案例

 let arr = [1,3,5,7,9,12,234,43,-10];

    let bol = arr.includes(2)
    console.log(arr);
    console.log(bol);

控制台打印结果：

9、every 判断数组中所有元素是否满足条件，都成立返回 true, 否则返回 false【&&】
代码案例

  let arr = [1,3,5,7,9,12,234,43,-10];

    let bol = arr.every(function(value){
        if(value>-9){
            return value;
        }
    })
    console.log(arr);
    console.log(bol);

控制台打印结果：

10、some 判断数组中所有元素是否满足条件，有一个成立返回 true, 否则返回 false【||】
代码案例

 let arr = [1,3,5,7,9,12,234,43,-10];

    let bol = arr.some(function(value){
        if(value>200){
            return value;
        }
    })
    console.log(arr);
    console.log(bol);

控制台打印结果：

2、属性

1、length(): 设置或返回数组中元素的数目

2.1新增属性

2、解构属性

代码案例

// 创建 obj 数据类型  
let obj = {
        name:"张三",
        age:20,
        sex:"男",
        email:"123456@163.com"
    }
	// 对 obj 进行解构
    let {name,age,sex,email} = obj;
	//控制台打印
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(email);

控制台打印结果：

循环

小思考！什么是循环 ？

循环就是在满足条件的情况下，去不断重复的执行某一个操作

循环的优势

解决重复操作
减少代码编写量，使代码结构清晰
增强代码的可读性

循环的结构

循环条件
循环操作

循环的分类

for循环结构

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

for (初始部分; 循环条件; 条件迭代) {
      //循环执行的语句
}

while循环结构

【未知条件，未知范围】（先判断，后执行）

//初始部分
while( 循环条件 ) {
     //循环操作
     //迭代部分
}

do while循环

【至少执行一次】（先执行，后判断）

let i=0;
    do{
       document.write(arr[i]+"<br/>");
       i++; 
    }
    while(i<arr.length);

for of 循环

【循环遍历数组】 ES5 值 / value / 元素

for(let value of arr){
        document.write(value+"<br/>");
    }

for in 循环

【循环遍历对象】 ES6 下标 / kay / 键

for(let i in arr){
        document.write(arr[i]+"<br/>");
    }

forEach数组方法

【循环遍历数组】 匿名回调函数

 arr.forEach(function(value,i,oldarr){
        document.write(i+"--"+value+"--"+oldarr+"<br/>");
    })

map循环

(具有返回值 返回一个新的和老数组长度一定一致的数组，新数组有可能是二维数组)

let newarr = arr.mpa(function(index,value,oldarr){
     document.write(index+"---"+value+"---"+oldarr+"<br/>");
     if(index==0){
     value="123456";
 }
     return[value];
 });

flat map循环

(具有返回值 返回了一个有可能不一致的新数组，新数组一定是一维数组)

let newarr =arr.flatMap(function(index,value,oldarr){
       document.write(index+"---"+value+"---"+oldarr+"<br/>");
       if(index==0)
       value="123456";
}
       return[value+index];
});

循环语句

break语句

break语句用于终止某个循环，使程序跳到循环块外的下一条语句，在循环中位于break后的语句将不再执行并且break 语句不仅可以用在for循环中，也可以用在while循环中

continue语句

continue可用于for循环和while循环，退出本次循环，继续后面的循环，但是只能用在循环结构中

break语句

break语句用于终止某个循环，使程序跳到循环块外的下一条语句，在循环中位于break后的语句将不再执行并且break 语句不仅可以用在for循环中，也可以用在while循环中

continue语句

continue可用于for循环和while循环，退出本次循环，继续后面的循环，但是只能用在循环结构中