64ES6_流程控制

 

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的长安网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

 

目录

语法：...1

流程控制：...2

for循环：...3

while循环、do...while循环：...4

for ... in循环：...5

for ... of循环：...6

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

break、continue：...8

 

 

 

 

语法：

 

语句块：

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

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

 

函数内的let、var、隐式声明都对外不可见；

块作用仅对let有效（即用let定义的对外不可见，var和隐式声明的对外可见）；

 

例：

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

   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等效：undefined、null、0、NaN、''（空字串）；其它值都被视为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

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

 

例：

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

for (let i=0;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后面必须是一个迭代器，可类比py的for 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) {   //error，ReferenceError: 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

       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

 

 

 

break、continue：

break，结束当前循环；

continue，中断当前循环，直接进入下一次循环；

 

 

 

 

本文标题：64ES6_流程控制
文章源于：http://mswzjz.cn/article/igeopj.html