『前端学习笔记』 JavaScript 基础内容

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：JavaScript 教程 W3school

简介

概述

• JavaScript：

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

• ES标准：

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

实现

HTML中的JS脚本必须位于<script>标签内。
建议放在尾部，防止加载脚本影响页面渲染速度。
脚本数量不限。

引入

在HTML中引入JavaScript。

外部引入

• 外部myjs.js源文件：

  document.write("String");

• 注意：js源文件内部不需要使用<script>标签。
  
  

• HTML文件，引入myjs.js：

  <script src="myjs.js"></script>

使用<script>标签，src属性引入。

内部引入

• HTML文件：

  <script>
  	/*content*/
  </script>

使用<script>标签，标签内部直接写内容。

语法

文档输出

    document.write("String"); //输出字符串
    document.write("<h1>String</h1>"); //可以内嵌标签

使用document.write方法。

分割符

    document.write("String"); //使用分隔符
    document.write("String") //不使用也可以

和大多数语言一样，使用;。

注释

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

和大多数语言一样，使用单行注释//和多行注释/**/。

大小写敏感

JavaScript对大小写是敏感的。

标识符

必须以字母(A~Z, a~z)、下划线_或美元符号$开始。
需要避开保留的JavaScript关键字。

参考文档：JavaScript 保留关键字

定义变量/常量

    var i = 10; //变量
    var j = i + 10;
    const t = 0; //常量 ES6
    let k = 0; //局部变量 ES6
    m = 3; //全局变量

• 变量：使用var，变量名即标识符。某种程度上算作全局变量。
• 常量：ES6添加使用const。
• 局部变量：ES6添加let定义局部变量。
• 全局变量：什么都不用。

数据类型

• 基本类型：

  var str = "String"; //字符串
  var i = 1; //number
  var j = 1.5; //number
  var tag = true; //布尔
  var nul = null; //空指针
  var k; //未定义状态undefined

  /*变量相当于一个指针 类型不必固定*/
  var i = 1;
  i = "str";
  document.write(i);

• 数组类型：

  /*静态定义*/
  var arr = [1, 2.5, j,  "3.0"] //数组 静态 给定大小
  document.write(arr[0]); //数组索引

  /*动态定义*/
  var arr1 = new Array("1", "2"); //数组 动态 给定大小
  var arr2 = new Array(); //数组 动态 不限大小
  arr2[0] = 1;
  arr2[1] = 2; //可以动态添加

• 对象类型：

参考文档：JavaScript自定义对象

运算符

• 逻辑运算符：

  • 比较：==、!=、>、<、>=、<=。
  • 严格比较：===、!==。
  • 逻辑：&&、||、!。
  • 条件(三目)：x > 10 ? true : false;
    
    

• 算术运算符：

  • 算术：+、-、*、/、%。
  • 算术自增：++、--。
  • 赋值：=。
  • 算术赋值：+=、-=、*=、/*、%=。

• 例：严格比较

  var i = 10;
  var j = "10";
  document.write(i == j); //true
  document.write(i === j); //false

• 例：字符串拼接

同样使用+算术运算符：

  var str1 = "hello";
  var str2 = "world";
  var str3 = str1 + str2;
  document.write(str3);

• 详解：算术自增

1. 单语句（以下四条等价）：

  i++;

  ++i;

  i = i + 1;

  i += 1;

2. 与赋值结合使用，++在后（以下两条等价）：

  j = i++;

  j = i;
  i++;

3. 与赋值结合使用，++在前（以下两条等价）：

  j = ++i;

  i++;
  j = i;

逻辑

条件

• 单路分支：if-else

基本：

  if (true)
    /*statement*/
  else
    /*statement*/
    
  if (true){
    /*statement*/
  }
  else{
    /*statement*/
  }

嵌套：

  if (true){
    /*statement*/
  }
  else if (true){
    /*statement*/
  }
  else{
    /*statement*/
  }

• 多路分支：switch-case

  var i = 1;
  switch (i) {
    case 1: /*statement*/
      break;
    case 2:{
      /*statement*/
      break;
    }
    default: /*statement*/
      break;
  }

循环

• 倾向于次数：for

一般用于循环次数固定的情况，循环到一定次数终止。

  const N = 100;
  
  for (var i = 0; i < N; i++)
    /*statement*/
  
  for (var j = 0; j < N; j++) {
    /*statement*/
  }

• 倾向于条件：while(do)

一般用于循环次数不固定的情况，循环到某种条件终止。

  var i = 0;
  
  while(i < 10){
    i++;
  }
  
  do{
    i++;
  }
  while(i < 10)

while：先执行while，再执行代码块。

do-while：先执行do，再执行while。

跳转

• 跳出：break

用于条件switch和循环for、while当中。
表示直接跳出当前循环区域。

  const N = 100;
  var i = 0;
  
  switch (i){
    case 0: break;
  }
  
  for(i = 0; i < N; i++){
    if(i == 50)
      break;
  }
  
  while(i < N) {
    if(i == 75)
      break;
  }

• 继续：continue

用与循环for、while当中。
表示跳出此次循环，开始下一次循环。

  const N = 100;
  var i = 0;
  
  for(i = 0; i < N; i++){
    if(i == 50)
      continue;
    /*statement*/
  }

  while(i < N) {
    if(i == 75)
      continue;
    /*statement*/
  }

函数

定义

• 定义函数由以下部分组成：

区域	取值
函数头	function
函数名(name)	自定义
参数列表(parameter list)	自定义
函数体(body)	自定义
[可选]返回值(return value)	自定义

• 形式：

  function name(/*parameter list*/) {
    /*body*/
    /*return value*/
  }

• 示例：

  function add(p1, p2) {
  	p1 += p2;
    return p1; 
  }

参数

参考值，在函数体中使用，不限个数。

  function add(p1, p2) {
  	p1 += p2;
    return p1; 
  }

示例中，p1、p2为参数。

返回值

使用return关键字。

• 有返回值：函数

  function add(p1, p2) {
  	p1 += p2;
    return p1; 
  }
  t = add(1, 2); 

• 无返回值：过程

  function war() {
  	alert("warning");
  }
  war();

调用

• 在JS中调用：

<script>
  function war() {
  	alert("warning");
  }
  war();
</script>

• 在HTML中调用：

需要结合一定的格式。

例：结合按钮使用：

<script>
  function war() {
  	alert("warning");
  }
</script>

<form>
	<input type="button" onclick="war()">
</form>

作用域

  function f(){
    var i = 1; //局部变量 
    m = 4; //全局变量 //函数调用后才能生效
  }
  var j = 2; //全局变量
  k = 3; //全局变量

异常

捕获

语句	含义	是否执行
try	尝试执行代码段	一定执行
catch	如果有异常，进行捕获和处理	捕获到异常才会执行
finally	最终执行代码段	一定执行

  function f(){
    try{
      document.write(str); //使用未定义内容
    }
    catch(err){ //异常对象err
      alert(err);
    }
    finally {
      /*statement*/
    }
  }

  f(); //调用

• 代码结果：
  
  
  

抛出

  throw "xxx";

使用throw抛出。

可以自定义异常，让catch捕获。