JavaScript学习笔记3

1.输入输出语句

方法 说明 归属
alert（msg） 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以进行输入 浏览器

2.声明变量的特殊情况

情况 说明 结果
var age; console.log(age); 只声明，不赋值 undefined
console.log(age) 不声明，不赋值，直接使用 报错
age = 10;console.log(age); 不声明，只赋值 10

3.数据类型

  • js的变量数据类型是程序运行过程中，根据等号右边的值来确定的。
  • js是动态语言，变量的数据类型是可以变化的。
1
2
var age = 10;
age = '十';

  • 简单数据类型（Number,String,Boolean,Undefined,Null）

    1.Js中八进制前面加0，十六进制前面加0x。

    2.isNaN()，用来判断变量是否为非数字类型，如果是数字返回false，如果不是数字返回的是true。

    3.字符串转义符

    转义符 解释说明
    \n 换行符
    \\ 斜杠\
    \‘ ’单引号
    \\“ “双引号
    \t tab缩进
    \b 空格

    4.检测获取字符串的长度，str.length

    5.字符串的拼接

    ​ 字符串+任何类型=拼接之后的新字符串

    1
    2
    console.log(12+12);//14
    console.log('12'+12);//1212

    6.布尔型和数字型相加的时候，true的值为1，false的值为0。

    7.一个声明后没有被赋值的变量会有一个默认值undefind

    ​ 一个声明后被赋值为null的变量,里边的存值为空

    1
    2
    3
    4
    console.log(undefined + 'pink');//undefinedpink
    console.log(undefined + 1);//NaN undefined和数字相加，最后结果是NaN
    console.log(null + 'pink');//nullpink
    console.log(null + 1);//1 null和数字相加，最后结果是数字

    8.prompt取过来的值是字符型的，可以使用typeof检测变量数据类型。

    9.数据类型转换

    • 转换为字符串类型

      方式 说明 案例
      toString() 转成字符串 var num =1;console.log(num.toString());
      String()强制转换 转成字符串 var num =1;console.log(String(num));
      加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1;console.log(num+’我是字符串’);

    • 转换为数字型

      方式 说明 案例
      parseInt(string)函数 将string类型转成整数数值型 parseInt(‘78’)
      parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat(‘1.23’)
      Number()强制转换 将string类型转换为数值型 Number(‘11’)
      js隐式转换（- * /） 利用算数运算隐式转换为数值型 ‘12’-0

    • 转换为布尔型

      方式 说明 案例
      Boolean()函数 其他类型转换成布尔型 Boolean(‘true’);

      代表空、否定的值会被转换为false，如’’、0、NaN、null、undefined;其余值都会被转换为true。

  • 复杂数据类型(Object)

    通过new关键字创建的对象（系统对象，自定义对象），如Object、Array、Date等。

    简单数据类型存放在栈里面，复杂数据类型存放在堆中（先在栈里面存放地址，然后这个地址指向堆里面的数据）

10.算术运算符

​ 前置递增和后置递增区别

​ 后置：先原值计算，后自加

​ 前置：先自加，后运算。

1
2
3
4
var num = 10;
        // console.log(num++);//10
        // console.log(++num);//12
        console.log(num++ + ++num); //1.num++ = 10 num = 11 2. num = 12 ++num = 12

​ 11.比较运算符

符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等（此时有隐式类型转换）
=== 全等 判断两边的值和数据类型是否完全相等

​ 12.逻辑运算符

符号 说明 案例
&& 逻辑与 and true&&false
|| 逻辑或 or true||false
！ 逻辑非 !true
  • 逻辑与短路运算
1
2
3
4
//如果表达式1结果为真，则返回表达式2；如果表达式1为假，则返回表达式1
 console.log(123 && 456);//456
 console.log(0 && 456);//0
 console.log(0 && 1+2 && 456 * 8899);//0
  • 逻辑或短路运算
1
2
3
4
//如果表达式1结果为真，则返回表达式1；如果表达式1为假，则返回表达式2
       console.log(123 && 456);//456
       console.log(0 && 456);//0
       console.log(0 && 1+2 && 456 * 8899);//0

​ 13.运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – ！
3 算术运算符 先*/%后+-
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ，

4.流程控制

​ 流程控制主要有三种结构，分别是顺序结构、分支结构（if-else if语句、switch）和循环结构。

 **1.if语句**
1
2
3
4
5
6
var year = prompt('请输入要检测的年份')
       if (year % 4 == 0 && year % 100 != 0 || year % 400) {
           alert(year + '年是闰年') 
       } else {
           alert(year + '年是平年')
       }

​ 2.三元表达式

​ 语法结构：条件表达式 ? 表达式1 ： 表达式2

​ 如果条件表达式结果为真 则 返回表达式1 的值，如果条件表达式结果为假 则返回表达式2 的值。

1
2
3
4
5
var num = 10;
console.log(num > 5 ? '是的' : '不是的')//是的

 var num = prompt('请输入一个数字')
        alert(num >= 10 ? num : '0'+num)

​ 3.switch语句

​ switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。

1
2
3
4
5
6
7
8
9
10
11
switch(表达式){
       case value1:
       		执行语句1；
       break;
        case value2:
       		执行语句2；
       break;
       ....
       default:
       		执行最后的语句；
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var fruit  = prompt('请输入要查询的水果')
       switch (fruit) {
           case '榴莲':
               alert('35元/斤')
               break;
               case '苹果':
               alert('5元/斤')
               break;
               case '香蕉':
               alert('3元/斤')
               break;
           default:
               alert('没有这个水果')
       }

​ 4.switch语句和if else if语句的区别

  • ​ switch…case语句通常处理case为比较确定值的情况，而if…else..语句更加灵活，常用于范围判断。
  • switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。
  • 当分支较少时，if…else语句的执行效率比switch语句高。
  • 当分支较多时，switch语句的执行效率比较高，而且结构清晰。

5.循环结构

1
2
3
4
5
6
7
8
9
//求平均成绩
        var num = prompt('请输入全班人数')
        var sum = 0;
        for (let i = 1; i <= num; i++) {
           var  score = prompt('请输入第'+i+'个学生成绩')
            sum += parseFloat(score)
        }
        var average = sum / num;
        alert('平均成绩为：'+average)
1
2
3
4
5
6
7
8
9
10
//双重for循环，打印5行5列的星星
      var str = '';
      for(var i = 1;i <= 5; i++){//外层循环负责打印5行
          for(var j = 1;j <= 5; j++){//里层循环负责一行打印5个
              str +='⭐'
          }
         // 如果一行打印完5个就换行
         str = str + '\n'
      }
      console.log(str);
1
2
3
4
5
6
7
8
9
10
//打印倒三角形
       var str = ''
       var row = prompt('请输入打印机几行的倒三角形')
       for(var i = 1 ; i <= row ; i++){
           for(var j = i ; j <= row ; j++){
               str += '⭐'
           }
           str += '\n'
       }
       console.log(str)
1
2
3
4
5
6
7
8
9
//九九乘法表
    var str = ''
    for(var i = 1 ; i <= 9 ; i++){
        for(var j = 1 ; j <= i; j++){
            str += j + '×' + i + '=' + i *j + '\t'
        }
        str += '\n'
    }
    console.log(str)
1
2
3
4
5
6
7
8
//while循环
       var age = 1;
       var sum = 0 ;
       while (age <= 100) {
           sum += age;
           age++;
       }
       console.log('1到100所有整数的和为：'+sum)
1
2
3
4
5
6
7
8
//do while 循环
       var sum = 0;
       var i = 1;
      do {
          sum += i;
          i++; 
      } while (i <= 100);
      alert(sum)
  • while和do…while可以做更复杂的判断条件，比for循环灵活一些
  • while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，在判断执行。
  • while和do…while执行次数不一样，while可能一次也不执行，do…while至少执行一次。

continue和break

​ continue关键字用于立即跳出本次循环，继续下一次循环。

1
2
3
4
5
6
7
8
9
10
//求1-100之间，除了能被7整除之外的整数的和
       var sum = 0;
       for (let i = 1; i <= 100; i++) {
           if(i % 7 == 0){
               continue;
           }
           sum += i;
       }
       alert('1-100之间，除了能被7整除之外的整数的和:'+sum)//4315

​ break关键字用于立即跳出整个循环体

1
2
3
4
5
6
for(var i =1 ; i <= 5; i++){
             if(i == 3){
                 break;
             }
             console.log(i)//1 2
         }

6.数组（Array）

  1. 数组的两种创建方式

    • 利用new创建数组

      1
      var arr = new Array(); //创建一个空的数组

    • 利用数组字面量创建数组

      1
      var arr = [1,2,3,4]

  2. 访问数组元素

    数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名【索引】”的形式来获取数组中的元素。

  3. 遍历数组

    1
    2
    3
    4
    5
    //遍历数组
               var arr = [1,22,3,4,5,6,77]
               for (var i = 0; i < arr.length; i++ ) {
                   console.log(arr[i])
               }

  4. 求最大值

    1
    2
    3
    4
    5
    6
    7
    8
    var array = [12,13,445,67,888,98];
                var max = array[0];
                for (let i = 0; i < array.length; i++) {
                  if(array[i] > max){
                      max = array[i];
                  }
                }
             alert('数组'+array+'的最大值为：'+max)
  1. 数组转换为分割字符串
1
2
3
4
5
6
7
var array = ['red','blue','green'];
       var str = '';
       var sep = '|'
       for (let index = 0; index < array.length; index++) {
          str += array[index] + sep; 
       }
       console.log(str)

6.数组中新增元素

  • 通过修改length长度新增数组元素

    1
    2
    3
    4
    5
    6
    7
    8
    var array = [1,2,33,4,] 
        array.length = 6;
        console.log(array);// [1, 2, 33, 4, empty × 2]
        console.log(array[4]);// undefined
        console.log(array[5]);// undefined
        array[4] = 7; 
        array[5] = 6; 
        console.log(array);// (6) [1, 2, 33, 4, 7, 6]

  • 通过修改数组索引新增数组元素

1
2
3
4
5
 
var array = [1,2,33,4,] 
array[4] = 7; 
     array[5] = 6; 
     console.log(array);// (6) [1, 2, 33, 4, 7, 6]
  • 数组练习
1
2
3
4
5
6
//新建一个数组，里边存放1到10
        var array = [];
        for (let index = 0; index < 10; index++) {
            array[index] = index + 1;
        }
        console.log(array)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//筛选数组
       var array = [2,0,6,1,77,0,53,0,25,7];
       var newarray = [];
       var j = 0;
       for (let index = 0; index < array.length; index++) {
          if (array[index] > 10) {
              //newarray.push(array[index])
              //newarray[newarray.length] = array [index]
              newarray[j] = array [index]
              j++
          }
           
       }
       console.log(newarray)
1
2
3
4
5
6
7
8
9
//删除指定数组元素,把0去掉
       var array = [2,0,6,1,77,0,52,0,25,7];
       var newArray = [];
       for (let index = 0; index < array.length; index++) {
           if(array[index] != 0){
               newArray[newArray.length] = array[index]
           }
       }    
       console.log(newArray)
1
2
3
4
5
6
7
//反转数组
   var array = [1,2,3,4,5,6,7,8,9]
       var newarray = []
       for (let index = array.length -1; index >= 0 ; index--) {
           newarray[newarray.length] = array[index]    
       }
       console.log(newarray)
1
2
3
4
5
6
7
8
9
10
11
12
//冒泡排序
        var array = [12,333,56,7,11,66]
        for (let index = 0; index < array.length - 1; index++) {//外层循环控制趟数
            for(let i = 0; i <array.length - index -1; i++){//里层循环控制每趟交换次数
                if(array[i] > array[i + 1]){
                    var temp = array[i]
                    array[i] = array[i + 1];
                    array[i + 1] = temp;
                        }
            }
        }
        console.log(array)

7.函数

​ 函数：就是封装了一段可被重复调用执行的代码块。

1
2
3
4
5
6
7
//声明函数
function 函数名(形参1，形参2...){
	//函数体
          return 需要返回的结果
}
//调用函数
函数名(实参1,实参2...)；

函数形参和实参匹配问题

1
2
3
4
5
6
7
8
9
10
function getsum(num1,num2){
          console.log(num1+num2)
      }
      getsum(1,2);
      //如果实参的个数和形参的个数一致，则正常输出结果。
      getsum(1,2,3);
      //如果实参的个数大于形参的个数，则会取到形参的个数。
      getsum(1);//NaN
      //如果实参的个数小于形参的个数，则多余的形参定义为undefined。

​ 函数练习

1
2
3
4
5
6
7
8
9
10
11
//利用函数求任意一个数组中的最大值
        function getMax(array){
            var Max = array[0]
            for (let index = 0; index < array.length; index++) {
                if(array[index] > Max){
                     Max = array[index];
                } 
            }
            return Max;
        }
       console.log(getMax([22,33,4,55]))

函数返回值注意事项

  • 如果函数没有return，则返回undefined。
  • break,continue,return的区别

continue关键字用于立即跳出本次循环，继续下一次循环。（for、while）

break关键字用于立即跳出整个循环体（for、while）

return关键字不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。

arguments的使用

​ 当我们不确定有多少个参数传递的时候，可以用arguments来获取。在Javascript中，arguments实际上它是当前函数的一个内置对象。所有的函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

​ arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  • 具有length属性

  • 按索引方式存储数据

  • 不具有数组的push、pop等方法

  • 可以按照数组的方式遍历arguments

    1
    2
    3
    4
    function fn(){
    console.log(arguments)//里面存储了所有传递过来的实参
    }
    fn(1,2,3)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      
    //arguments的使用 利用函数求任意个数的最大值
        function setMax(){
            var Max = arguments[0];
            for (let index = 0; index < arguments.length; index++) {
                if(arguments[index] > Max){
                    Max = arguments[index]
                }
            }
            return Max
        }
      var getMax =   setMax(129,222,444,5,5,66666,7777,99999)
        console.log(getMax )

    函数的两种声明方式

1.利用函数关键字自定义函数（命名函数）

1
2
3
4
function fn(){

}
fn();

2.函数表达式(匿名函数)

1
var 变量名 = function(){};

8.作用域（es6）之前

  • 全局作用域（整个script标签或者是一个单独的js文件）
  • 局部作用域(在函数内部就是局部作用域，只在函数内部起作用和效果)
  • 全局变量（在全局作用域下的变量，如果在函数内部没有声明，直接赋值的变量也属于全局变量）
  • 局部变量（在局部作用域下的变量，只能在函数内部使用；函数的形参也可以看作局部变量）
  • 全局变量只有在浏览器关闭的时候才会销毁，比较占内存
  • 局部变量当我们的程序执行完毕就会销毁，比较节约资源

作用域链

​ 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值，这种结构我们成为作用域链。

学习笔记 JavaScript
JavaScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！