64ES6_流程控制

2023-05-10,,

 

 

目录

语法:... 1

流程控制... 2

for循环:... 3

while循环、do...while循环:... 4

for ... in循环:... 5

for ... of循环:... 6

三种for迭代的差别:... 7

breakcontinue... 8

 

 

 

 

语法:

 

语句块:

js使用大括号构成语句块;

ES6之前语句块是没有作用域的,ES6开始支持作用域,let只能在块作用域中可见

 

函数内的letvar、隐式声明都对外不可见;

块作用仅对let有效(即用let定义的对外不可见,var和隐式声明的对外可见);

 

例:

function hello() {   //函数内的letvar、隐式声明都对外不可见

    let a = 1;

    var b = 2;

    c = 3;

}

 

// let d = 100;

 

if (1) {   //块作用域仅对let有效(即用let定义的对外不可见,var和隐式声明的对外可见)

    let d = 4;

    var e = 5;

    f = 6;

    if (true) {

        console.log(d,e,f);

        g = 7;

        var h = 8;

    }

}

 

// console.log(a);   //error

// console.log(b);   //error

// console.log(c);   //error

// console.log(d);   //error,块作用域中的不可见;最外层的可见

console.log(e);

console.log(f);

console.log(g);

console.log(h);

输出:

4 5 6

100

5

6

7

8

 

 

 

 

流程控制:

 

条件分支:

if (cond) {

}

else if (cond2) {

}

else if (cond3) {

}

else {

}

 

条件的false等效:undefinednull0NaN''(空字串);其它值都被视为true

 

 

switch...case分支语句:

所有的switch...case都能转为if...else

switch...case支持模式;

穿透问题,要恰当的使用break,如果没有break,会一直走下去,直至碰到break

default段不是必须;

switch (expression) {

         case label_1:

                   statement1

                   [break;]

         case label_2:

                   statement2

                   [break;]

         ...

         default:   //不是必须

                   statement_def

                   [break;]

}

 

例:

let a = 1;

switch (a) {

    case 1:

        console.log('1');

        // break;

    case 2:

        console.log('2');

        break;

    default:

        console.log('null');

        break;

}

输出:

1

2

 

 

 

for循环:

C风格;

大括号中只1条语句时,大括号可省,如if (1) return;等价于if (1) {return ;}

for ([initialExpression]);[condition];[incrementExpression]) { 

         statement

}

 

for (let i=0;i<arr.length;) {}   //死循环

for (;;) {}   //死循环

 

例:

let arr = [10,20,30,40,50];

for (let i=0;i<arr.length;i++) {

    console.log(i,arr[i])

}

输出:

0 10

1 20

2 30

3 40

4 50

 

 

 

while循环、do...while循环:

一般用while (true) {},有条件退出用for

 

while (condition) {   //条件满足,进入循环,条件为真,继续循环;大括号内语句只有一句,大括号可省

         statement

}

 

do {   //先进入循环,然后判断,为真就继续循环

         statement

} while (condition);

 

例:

let i = 10;

while (i--) {

    console.log(i);

}

 

do {

    console.log(i)

} while (i++ < 10)

 

例,99乘法表:

for (let x=1;x<10;x++) {

    line = '';

    for (let y=1;y<=x;y++) {

        line += `${y}*${x}=${x*y} `;   //插值

        if (x == y)

            console.log(line);

    }

}

 

 

for ... in循环:

对象操作语句,用来遍历对象的属性,另数组中索引也是属性;

数组用for ... in返回的是索引;

对象用for ... in返回的是key

根据个人喜好,或用C风格的for循环,或用for ... in都可;

 

注:

js的对象,与py的字典类似;

 

例:

let arr = [10,20,30,40,50];

// let arr = {   //数组可理解为像对象这种定义方式,但不能用arr.0这样访问,不能这样操作

//     0:10,

//     1:20,

//     2:30

// }

 

for (i in arr) {

    console.log(i, arr[i]);

}

输出:

0 10

1 20

2 30

3 40

4 50

 

 

例:

function add(x,y) {

    return x + y

}

 

var obj = {   //py字典访问一样

    p1 : 100,

    p2 : 'abc',

    p3 : [1,2,3],

    p4 : add

}

 

console.log(obj['p4'](4,5));   //属性要用字符串,obj['p4']obj[p4]不可以,p4 is not defined

 

for (let key in obj) {

    console.log(`${key} : ${obj[key]}`);   //插值

}

输出:

9

p1 : 100

p2 : abc

p3 : 1,2,3

p4 : function add(x,y) {

    return x + y

}

 

 

 

for ... of循环:

ES6新语法,for ... of不能迭代对象,of后面必须是一个迭代器,可类比pyfor in,如for i in []

遍历数组中的values,即数组中的元素,适合取数组的所有元素,若有条件在for ... in中作判断;

 

例:

let arr = [10,20,30,40,50];

let obj = {

    p1 : 100,

    p2 : 'abc',

    p3 : [1,2,3]

}

 

for (let i of arr) {

    console.log(i);   //返回数组元素,而不是索引

}

 

// for (let i of obj) {   //errorReferenceError: obj is not defined,不能迭代对象,of后必须是迭代器

//     console.log(i);

// }

console.log(typeof(obj));   //object

输出:

10

20

30

40

50

object

 

 

 

三种for迭代的差别:

 

function sum(arr) {

    for (let x in arr) {   //遍历index或对象属性

        console.log(x, typeof(x), arr[x]);

    }

    for (let x of arr) {   //遍历元素

        console.log(x, typeof(x));

    }

    for (let x=0;x<arr.length;x++) {   //自定义索引数值遍历

        console.log(x, typeof(x), arr[x]);

    }

}

 

sum([3,6,9]);

输出:

0 string 3

1 string 6

2 string 9

3 'number'

6 'number'

9 'number'

0 'number' 3

1 'number' 6

2 'number' 9

 

 

 

breakcontinue

break,结束当前循环;

continue,中断当前循环,直接进入下一次循环;

 

 

 

 

《64ES6_流程控制.doc》

下载本文的Word格式文档,以方便收藏与打印。