JavaScipt基础（持续更新一）

 JavaScipt基础

---

 JavaScipt基础

三、数据类型转换 

3.1转换成字符串类型

 3.2转换成数值类型

3.3转换成布尔类型

四、操作符

4.1算术运算符 

4.2一元运算符 

 4.3逻辑运算符（布尔运算符）

4.4关系运算符（比较运算符） 

 4.5赋值运算符

 4.6运算符的优先级

五、流程控制

5.1分支结构 

5.2循环结构

5.2.1while语句

 5.2.2do...while语句

 5.2.3 for 语句 

5.2.4continue和break

---

三、数据类型转换 

3.1转换成字符串类型

• toString()

1. num = 5;
   console.log(num.toString());

• String()

1. s = null;
   console.log(s.toString());
   console.log(String(s));
   
   // String()函数存在的意义：有些值没有toString()，
   // 这个时候可以使用String()。比如：undefined和null

• 拼接字符串方式

1. + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

 3.2转换成数值类型

• Number()

1. a = Number('1');
   var b = Number(1);
   var c = Number('c');
   var d = Number(null);
   var e = Number(undefined);
   
   console.log(a,b,c,d,e); // 1 1 NaN 0 NaN
   
   // Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

• parseInt()

1. a = parseInt('1.2df');
   var b = parseInt(1);
   var c = parseInt('c12');
   var d = parseInt(null);
   var e = parseInt(undefined);
   
   console.log(a,b,c,d,e); //1 1 NaN NaN NaN
   
   // 如果第一个字符是数字会解析,直到遇到非数字结束
   // 如果第一个字符不是数字或者符号就返回NaN

• parseFloat()

1. a = parseFloat('1.2df');
   var b = parseFloat('1.3.4');
   var c = parseFloat('c12');
   var d = parseFloat(null);
   var e = parseFloat(undefined);
   
   console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN
   
   // parseFloat() 把字符串转换成浮点数
   // parseFloat()和parseInt非常相似，
   // 不同之处在与parseFloat会解析第一个 . 遇到第二个.或者非数字结束
   // 如果解析的内容里只有整数，解析成整数

• +，-，-0 等运算

var str = '500';
console.log(+str);       // 取正
console.log(-str);       // 取负
console.log(str - 0); 

3.3转换成布尔类型

• Boolean()

var a = Boolean('0');
var b = Boolean(0);
var c = Boolean('1');
var d = Boolean(null);
var e = Boolean(undefined);
var f = Boolean(NaN);

console.log(a,b,c,d,e,f); //true false true false false false

// 0、''(空字符串) 、null、 undefined 、NaN 会转换成false  其它都会转换成true

总结：

字符串、数值及布尔类型的数据类型转换

四、操作符

表达式：值和操作符，运算会有一个结果；

同时，表达式中的每个数值及部分表达式，又称为 子表达式

4.1算术运算符 

+ - * / %  取余（取模）

4.2一元运算符 

一元运算符：只有一个操作数的运算符，一元运算会直接修改原始变量的数据；

5 + 6 两个操作数的运算符 二元运算符

++ 自身加 (自增)

-- 自身减 (自减)

•	前置++
 	var num1 = 5;
++ num1; 
 
var num2 = 6;
console.log(num1 + ++ num2); //13
•	后置++
 	var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++); //12
•	猜猜看
 	var a = 1; 
var b = ++a + ++a; 
console.log(b); //5
 
var a = 1; 
var b = a++ + ++a; 
console.log(b);//4
 
var a = 1; 
var b = a++ + a++; 
// console.log(b);  // 3
 
var a = 1; 
var b = ++a + a++; 
console.log(b);//4

• 前置++：先加1，后参与运算 后置++：先参与运算，后加1
• ++ 运算的两个条件，满其一就会执行

1. ：整个表达式结束；2表达式没结束但是又被使用了；

 上面两个理解后，下面两个自通  前置-- ：先减1，后参与运算  后置-- ：先参与运算，后减1

 4.3逻辑运算符（布尔运算符）

&& 与 左边为真则取右边，左边为假则取左边
|| 或 左边为真则取左边，左边为假则边右边
!  非  取反

var a = 1;
var b = 2;
var c = 0;

console.log(a || b); //1
console.log(b || a); //2
console.log(c && a); //0
console.log(a || c && b); //1

// JS逻辑运算中的逻辑或和逻辑与的运算结果：
// 决定整个表达式的子表达式的值

4.4关系运算符（比较运算符） 

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;     // true
var result = '55' === 55;    // false 值相等，类型不相等
var result = 55 === 55; // true

 4.5赋值运算符

注意与数学符号的差别；

= += -= *= /= %=

例如：
var num = 0;
num += 5;  //相当于  num = num + 5;

 4.6运算符的优先级

优先级从高到底
1. ()  优先级最高
2. 一元运算符  ++   --   !
3. 算数运算符  先*  /  %   后 +   -
4. 关系运算符  >   >=   <   <=
5. 相等运算符   ==   !=    ===    !==
6. 逻辑运算符 先&&   后||
7. 赋值运算符

// 练习1：
var s = 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
console.log(s); //true

// 练习2：
var num = 10;
var f = 5 == num / 2 && (2 + 2 * num)
console.log(f.toString() === 22) //false

总结：

操作符的使用，基本数学运算，一元运算符自增自减及前置后置的区别，逻辑运算符及取值，关系比较运算符，赋值运算符，运算符优先级；

五、流程控制

程序的三种基本结构

顺序结构： 从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的；

分支结构：根据不同的情况及判断，执行对应代码；

循环结构：重复执行一段代码；

5.1分支结构 

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

案例

//获取两个数字中的最大值
var num1=100;
var num2=20;
if(num1>num2){
    console.log(num1);
}else{
    console.log(num2);
}
 
// 判断一个数是偶数还是奇数
var n = 10;
if(n%2==0){
    console.log('偶数');
}else{
    console.log('奇数');
}
 
    /*
    * 例子:
    * 获取考试的分数,如果成绩是在90(含)分以上的,则显示级别:A
    * 如果成绩是大于等于80的则:B
    * 如果成绩是大于等于70的则:C
    * 如果成绩是大于等于60的则:D
    * 如果成绩是小于60的则:E
    *
    * */
 
 
    var score = 91;
    if (score >= 90) {
        console.log("A");
    } else if (score >= 80) {
        console.log("B");
    } else if (score >= 70) {
        console.log("C");
    } else if (score >= 60) {
        console.log("D");
    } else {
        console.log("E");
    }

 判断一个年份是闰年还是平年

var n = 2016;
if(n%4==0){
    if(n%100 !=0){
        console.log('闰年');
    }else if(n%400 ==0){
        console.log('闰年');
    }else{
        console.log('平年');
    }
}else{
    console.log('平年');
}

三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

案例：

// 是否年满18岁
var age = 18;
var s = age>=18?'Yes':'no';
console.log(s);
 
// 从两个数中找最大值
var a1 = 110;
var a2 = 19;
var s = a1>a2?a1:a2;
console.log(s);

switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
} 

/* *
* 判断这个人的成绩的级别:
* 如果是A,则提示,分数在90分以上
* 如果是B,则提示,分数在80分以上
* 如果是C,则提示,分数在70分以上
* 如果是D,则提示,分数在60分以上
* 否则提示,不及格
* */

var jiBie="B";
switch (jiBie){
    case "A" :
        console.log("分数在90分以上的");
        break;
    case "B" :
        console.log("分数在80分以上的");
        break;
    case "C" :
        console.log("分数在70分以上的");
        break;
    case "D" :
        console.log("分数在60分以上的");
        break;
    default :
        console.log("不及格");
}

5.2循环结构

在JS语言中，循环语句有三种，while、do..while、for循环。

5.2.1while语句

基本语法：

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

案例1：计算1-100之间所有数的和

// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例2：打印100以内 7的倍数

var i = 1;
while(i<100){
    if(i%7==0){
        console.log(i);
    }
    i++;
}

案例3：打印100以内所有偶数

var i = 1;
while(i<=100){
    if(i%2==0){
        console.log(i);
    }
    i++;
}

案例4：打印100以内所有偶数的和

var i = 1;
var s = 0;
while(i<=100){
    if(i%2==0){
        s = s+i;
    }
    i++;
}
console.log(s);

 5.2.2do...while语句

do..while循环和while循环非常像，二者经常可以相互替代，

但是do..while的特点是不管条件成不成立，都会执行一次。

do {
  // 循环体;
} while (循环条件);

案例：计算1+2+3+4+……+99+100 的结果

// 初始化变量
var i = 0;
var sum = 1;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

 5.2.3 for 语句 

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

//打印1-100之间所有数
for(var i=1;i<=100;i++){
    console.log(i);
}

//求1-100之间所有数的和
var s = 0;
for(var i=0;i<=100;i++){
    s+=i;
}
console.log(s);

//求1-100之间所有偶数的和
var s = 0;
for(var i=1;i<=100;i++){
    if(i%2==0){
        s+=i;
    }
}
console.log(s);

//打印正方形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

//打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

//打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

5.2.4continue和break 

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

案例1：求1-100之间不能被7整除的整数的和（用continue）

var s = 0;
for(var i=0;i<100;i++){
    if(i%7==0){
        continue;
    }
    s+=i;
}
console.log(s);

案例2：求200-300之间所有的奇数的和（用continue）

var s = 0;
for(var i=200;i<=300;i++){
    if(i%2==0){
        continue;
    }else{
        s+=i;
    }
}
console.log(s);

案例3：求200-300之间第一个能被7整数的数（break）

for(var i=200;i<=300;i++){
    if(i%7==0){
        console.log(i);
        break;
    }
}

总结：

        代码的执行流程分为顺序、分支和循环三种结构，顺序结构是默认的，判断结构主要有if-else和switch-case两种，循环结构有while、do-while、for三种，其中continue和break是跳出循环；