JavaScript基础

一、JS介绍

  (1)JS特点

    1. 脚本语言:嵌入在HTML文件中被浏览器执行

    2. 弱类型语言:使用var 声明变量

    3. 基于对象的语言:一切数据类型皆对象

    4. 解释型语言:不需要编译,由浏览器的JS解析引擎解析执行

    5. 动态化语言:变量的值和类型只有代码执行到赋值处才确定

  (2)JS注释

    // 单行注释    /**/ 多行注释

  (3)JS代码的写入位置:

  JS是脚本语言,必须嵌入到html文件中才能被浏览器的JAVASCTIPT引擎解析,嵌入形式如下:

  1. 嵌入到html元素标签中:

      //一般用来绑定事件

  2. 嵌入html Script标签中:

      一般放到body中最后

      一般放到header中

二、变量

(1) 什么是变量

  变量是计算机内存中存储数据的标识符,根据变量的名称可以获取到内存中存取的数据。

(2)为什么使用变量

  程序数据都是加载到内存中执行的,每一个数据都有一个32位或64位的数字编号(地址),使用这些数字编号找到数据太麻烦,故用变量来标识这些数据的位置。

(3)变量命名

  1. 用有含义的单词给变量命名,增加代码可读性,方便维护

  2. 小驼房法命名

  3. 一般以字母、$、下划线开头,中间、后面可以有字母、数字、下划线。

  4. 不能含有关键词,如js 中var,console,..

(4)变量声明:

  声明作用:告诉计算机以这个标识符开启一块内存空间准备存储数据

  ECMA5语法:

  var 变量名;  var 变量名1,变量名2,...;

  ECMA6语法:

  let 变量名;

(5)变量赋值:

  作用:给分配的内存空间写入数据,数据存储的数据结构取决于变量的数据结构类型

  赋值用代码的表现形式:

    1. 声明时就赋值:var name = "aa";  var name = "aa", age=23, job = "web";

    2. 声明后赋值:var name , age, job;  name = "aa"; age  = "23"; 

(6)变量类型转换:

  1. 其它类型转换为字符串型:

    var.toString();  String(var);

  2. 其它类型转换为数值型:

    number(var);  如果不是数值型数据,则转换时会报NaN

    parseInt(var);  强制转换为整型, 字符串以数字开头,取数字部分;以字母开头报NaN

    parseFloat(var);  强制转换为浮点型

  3. 其它类型数据转换为布尔型:

    boolean(var);  "" | null | undefined | [ ]  转换为false,其余转换为true

  4. 获取变量数据类型:

    typeof(var); typeof var;

(7)变量作用域:(变量的作用范围)

  全局变量:在script标签类任何地方都能使用

    js中不再函数中,使用var声明的变量都是全局变量,一旦var声明变量,只可改变值,不可删除(在脚本结束前,变量一直存在,占用着空间)

  局部变量:只能在局部范围使用

    js中在函数中声明的变量都是局部变量

  块级作用域:{}之间定义的变量。如if,while,for中定义的变量,在结构执行完,变量就没有了。但js中没用块级作用域,if,while,for结束后,其中变量任然存在,全局生效。

    ES6中let声明的变量具有块级作用域,以后声明变量,建议使用let    

  隐式全局变量:不使用var ,直接声明的变量。可以被删除。name = "lisi";  delete 变量名;

  作用域链:在函数中使用变量,先在函数内查找是否存在该变量,存在则使用其值,没赋值则为undefined;若不存在则向上层作用域查找,始终没找到则报错。

(8) 变量交换:交换2个变量的值

  1. 使用中间变量

    var num1 = 10;

    var num2 = 20;

    var tmp = num1;

    var num2 = num1;

    var num1 = tmp;

  2. 利用数学运算

    var num1 = num1 + num2;

    var num2 = num1 - num2;

    var num1 = num1 - num2;

  3. 位运算

    var num1 = num1 ^ num2;

    var num2 = num1 ^ num2;

    var num1 = num1 ^ num2;

(9)变量比较:

   ==  //变量的值进行比较

   ===  //变量的数据类型和值进行比较

  (9)预解析:

    js脚本在浏览器中执行分2个过程:预解析,代码执行

    1. 将当前作用域的变量和函数声明提前(变量先,函数后),其它按照代码先后顺序执行。

    2. 是分段预解析,不同script标签中的函数同名不会冲突。全局作用域变量在全局提前声明,函数中变量在函数作用域内提前声明。       

function f1(){
    console.log(name);
}
f1();
var name = "ss";
//输出结果为undefined,说明name已经声明,但未赋值。
function f1(){
   console.log(name);
  
var name = "ss";
}
f1();
//输出结果为undefined,说明在执行函数前,函数内部变量声明被提前了。

function f1(){
  var name = "wotamade";
}
console.log(name);
//报错,因为name只是在函数中声明,全局不存在name

 

三、js数据类型(数据结构类型)

  数据类型分类:(不同数据类型,在内存中存储方式不一样)

  原始数据类型:string,boolean,number,null,undefined,object

  简单数据类型(值类型):string,boolean,number  //数据存储在栈区

  复杂数据类型(应用类型):object        //数据存储在栈区和堆区,键在栈区,值在堆区

  空类型:null,undefined

  1. string  字符串型,在代码中是用单引号或双引号包起来的字符表示

  2. bollean  布尔型,在代码中用true,false关键字赋值给变量表示

  3. number  数值类型(整数和小数)。在代码中直接用数字赋值给变量表示

  4. null    空类型(是一个指向空对象的指针)。在代码中用null关键字赋值给变量表示

  5. undefined  未定义类型。

  6. object  对象类型。

  注意:   1. 出现undefined的原因:

        a. 变量声明了,未赋值,则为undefined类型

        b. 函数没有返回值,则函数返回值类型为undefined

      2. 不是数字类型的变量进行数学运算,会报Nan错误 

四、运算符

  1. 赋值运算符:=

  2. 算数运算符:+ - * / %

  3. 一元运算符:++ 、-- 、! 只需要一个操作数就可以运算的操作符。num++ 参与运算后加1,++num参与运算前加1

  4. 二元运算符:需要2个操作数的运算符

  5. 三元运算符:"a"?"b":"c"

  6. 复合运算符:+= .= *= /= %=

  7. 比较运算符:> < >= <= == != === !===

  8. 逻辑运算符:&&、||、!

 五、流程控制:(3种形式)

  1. 顺序结构:代码按从上到下的顺序执行

  2. 分支结构:if , switch, 三元运算符

    if(){}  if(){}else{}  if()elseif(){}else{}  //if结构一般用于范围判断

    switch( 值表达式){  //switch结构一般用于值的判断,break表示跳出当前分支

      case 常量表达式1 :

        语句1;break;

      case 常量表达式2 :

        语句2;break;

      ......

      default :  //当所有条件都不符合的时候,执行的语句

        语句1;break;

    }

  3. 循环结构:while(){}  do{}while()  for(){}

    循环3要素:计数器,循环条件,循环体

//while循环:先判断条件,再决定是否执行循环体,循环可能一次都不执行
var
i = 0;  //计数器 i while( i<100){  //循环条件   console.log(1);  //循环体
  i++;  //计数,特容易掉
}  
//do-while循环:先执行一次循环体,再进行条件判断,循环至少会执行一次
var i = 0;    //计数器 i
do{
  console.log(i);  //循环体
  i++;
}while(i<100);  //循环条件
//for循环:和while类似
for( var i=0; i<=100; i++){ //计数器和循环条件在括号中
  console.log(i);  //循环体

 

 

 

 

    

你可能感兴趣的:(JavaScript基础)