js基础知识

JavaScript介绍

JavaScript是一种运行在客户端 的脚本语言 JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。

JavaScript和html、css之间的关系

HTML：提供网页的结构，提供网页中的内容 （结构）

CSS: 用来美化网页 （样式）

JavaScript: 可以用来控制网页内容，给网页增加动态的效果 （行为）

JavaScript组成

image.png

ECMAScript：欧洲计算机制造联合会，是js的核心组成部分

DOM：Document Object Model 文本对象模型，是一套操作页面元素的API

BOM：Bowser Object Model 浏览器对象模型，是一套操作浏览器的API

变量

什么是变量

变量是用来存储数据的

变量的使用

• 变量的声明

  var name
  

• 变量的赋值

  var name = 'zs'
  

• 同时声明多个变量

  var age, name, sex;
  age = 10;
  name = 'zs';
  

• 同时声明多个变量并赋值

  var age = 10, name = 'zs';
  

变量的命名规则

• 1.规则 - 必须遵守的，不遵守会报错

  • 由字母、数字、下划线、$符号组成，不能以数字开头
  • 不能是关键字和保留字，例如：for、while。
  • 区分大小写

• 2.规范 - 建议遵守的，不遵守不会报错

  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

• 3.下面哪些变量名不合法

  a     
  1
  age18
  18age
  name
  $name
  _sex
  &sex
  theworld  theWorld
  

  交换量变量的值

  1. 交换两个变量的值

  var n1 = 5;
  var n2 = 6;
  // 1.1 临时变量
  var tmp;
  tmp = n1;
  n1 = n2;
  n2 = tmp;
  console.log(n1, n2);
  

  2. 不使用临时变量，交换两个数值变量的值

  var n1 = 5;
  var n2 = 6;
  n1 = n1 + n2;   // 5 + 6 = 11
  n2 = n1 - n2;   // 11 - 6 = 5;
  n1 = n1 - n2;   // 11 - 5 = 6;
  console.log(n1, n2);
  

数据类型

数值型 Number

1. 数值字面量：数值的固定值的表示法 110 1024 60.5

2. 进制

   十进制
    var num = 9;
    进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
   十六进制
    var num = 0xA;
    数字序列范围：0~9以及A~F
   八进制
       var num1 = 07;   // 对应十进制的7
       var num2 = 019;  // 对应十进制的19
       var num3 = 08;   // 对应十进制的8
       数字序列范围：0~7
       如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
   

3. 浮点数浮点数的精度问题

 浮点数
   var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
    var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
    console.log(0.07 * 100);
    不要判断两个浮点数是否相等

4. 数值范围

 最小值：Number.MIN_VALUE，这个值为： 5e-324
 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
 无穷大：Infinity
 无穷小：-Infinity

5. 数值判断

• NaN：not a number
  • NaN 与任何值都不相等，包括他本身
• isNaN: is not a number

字符串类型 String

1. 字符串字面量

   用 ''包裹起来的都是字符串

2. 转义符

image.png

3. 字符串长度

   length属性用来获取字符串的长度

   var name = '嗨喽，我是隔壁老樊';
   console.log(name.lenth);
   

4. 字符串拼接

   如果想要拼接两个字符串，可以直接用 + 吧两个字符串拼接在一起

   var a = 'hello';
   var b = 'word';
   console.log(a + b);
   

5. 备注说明

   1. 两边只要有一个是字符串，那么+就是字符串拼接功能
   2. 两边如果都是数字，那么+就是算术功能。

Boolean类型Undefined和Null

1. Boolean字面量： true和false，区分大小写
2. 计算机内部存储：true为1，false为0
3. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
4. null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

• typeof 检测数据类型

  var age = 18;
  console.log(typeof age); // number
  

数据类型的转换

字符串的转换

• toString()

  var num = 5;
  console.log(num.toString()); // '5'
  

• String()

  String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
  

• 拼接字符串方式

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

  var num = 18;
  var isRight = true;
  console.log(typeof(num + ''));
  console.log(typeof(isRight + ''));
  

数值类型转换

• Number()

  Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
  

• parseInt()

  var num1 = parseInt('12.3abc');  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
  var num2 = parseInt('abc123');   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
  var num3 = parseInt('100px');    // 100
  

• parseFloat()

  parseFloat()把字符串转换成浮点数 parseFloat()和parseInt非常相似，不同之处在与parseFloat会解析第一个. 遇到第二个.或者非数字结束。如果解析的内容里只有整数，解析成整数

布尔类型转换

• Boolean()

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

操作符

算术运算符+ - * / %

var x = 5;
    var y = 10;

    console.log(x + y); // 15
    console.log(x * y); // 50
    console.log(x / y); // 0.5
    console.log(x % y); // 5
    // 0不能除数
    console.log(x / 0); // Infinity 
    console.log(x % 0); // NaN

一元运算符

一元运算符：只有一个操作数的运算符

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

++ 自身加1

-- 自身减1

• 前置++

  var num1 = 5;
  ++num1; // num1 = num1 + 1  先加1在赋值给num1: 6
  
  var num2 = 6;
  console.log(num1 + ++num2);
  
  

• 后置++

  var num1 = 5;
  num1++; //   1.num1 = num1 = 5   2.num1 = num1 + 1
  var num2 = 6 
  console.log(num1 + num2++);
  

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false || 或 两个操作数有一个为true，结果为true，否则为false ! 非 取反

关系运算符(比较运算符)

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

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

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

表达式和语句

1. 表达式

   一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

2. 语句

   语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

• 程序的三种基本结构

  1. 顺序结构

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

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

  2. 分支结构

     根据不同的情况，执行对应代码

  3. 循环结构

     循环结构：重复做一件事情

分支结构

1. if条件判断

      if (/* 条件表达式 */) {
        // 执行语句
      }
   
      if (/* 条件表达式 */){
        // 成立执行语句
      } else {
        // 否则执行语句
      }
   
      if (/* 条件1 */){
        // 成立执行语句
      } else if (/* 条件2 */){
        // 成立执行语句
      } else if (/* 条件3 */){
        // 成立执行语句
      } else {
        // 最后默认执行语句
      }
   
      // 分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
      var score = 59;
      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');
      }
   

三元运算符

1. 表达式1 ? 表达式2 : 表达式3。如果表达式1条件成立执行表达式2否则执行表达式3。是对if……else语句的一种简化写法

      // 判断一个年龄是否成年, 当年龄超过18 返回  成年  否则返回未成年
      var age = 19;
      // console.log( age >= 18 ? '成年' : '未成年' );
   
      var msg = age >= 18 ? '成年' : '未成年';
      console.log(msg);
   

switch

1. 语法格式

    switch (expression) {
      case 常量1:
        语句;
        break;
      case 常量2:
        语句;
        break;
      case 常量3:
        语句;
        break;
      …
      case 常量n:
        语句;
        break;
      default:  // 默认语句 即 上面的条件都不成立的时候执行默认语句
        语句;
        break;
    }
   
   

2. 注意

   1. break可以省略，如果省略，代码会继续执行下一个case
   2. switch 语句在比较值时使用的是全等(===)操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

3. 对比if/elseif条件可以是范围也可以是具体值，但是switch是具体值判断,不能范围判断

while循环

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

2. 基本语法：

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

3. 注意：：避免死循环，要有判断条件跳出循环

        // 计算1-100之间所有数的和
        var i = 1;
        var sum = 0;
        while (i <= 100) {
          sum = sum + i;
          i++;
        }
        console.log(sum);
        // 1 :  i=1;  sum = 0 + 1 = 1;
        // 2 :  i=2;  sum = 1 + 2 = 3;
        // 3 :  i=3;  sum = 3 + 3 = 6;
   

dowhile

1. do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

2. 基础语法与练习

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

for循环

1. 语法格式

   // for循环的表达式之间用的是;号分隔的，千万不要写成,
   for (初始化表达式1; 判断表达式2; 自增表达式3) {
    // 循环体4
   }
   // 方式1 常用
   for (var i = 1; i <= 100; i++) {
    console.log(i);
   }
   // 方式2
   var i = 1;
   for (; i <= 100; ) {
    console.log(i);
    i++;
   }
   
   

2. 执行顺序

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

break和continue 退出循环

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

    // 求整数50～200的第一个能被7整除的数
    for (var i = 50; i <= 200; i++) {
      if (i % 7 === 0) {
        console.log(i);
        break;
      }
    }
    console.log('over');

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

   var sum = 0;
    for (var i = 1; i <= 100; i++) {
      if (i % 10 === 3) {
        // 如果找到个位为3的数字 ，继续执行下一次循环
        continue;
      } 
      sum += i;
    }
    console.log(sum);

• return:语句就是用于指定函数返回的值。return语句只能出现在函数体内,不能出现在循环中

     function fn() {
       console.log(111);
        return ;
        console.log(222);
     }

---

更多文章访问个人博客：http://www.lfanliu.top