JavaScript基础速成

由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补

看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件

下面选取看菜鸟教程补充的JS知识

JS的作用

JS是在html搭建好骨架，css设计好样式的基础上添加交互性和其他动态功能。

下面是基本案例，可以看到JS定义函数绑定了html写的一个按钮，让这个按钮可以动态显示日期

第一个javascript示例入门

点我显示日期和时间

具体而言，JS可以实现以下功能：

• JavaScript可以更改HTML属性

• JavaScript可以隐藏和显示HTML元素

• JavaScript可以添加和删除HTML元素

• JavaScript可以更改元素的样式（CSS）和位置

• JavaScript可以修改文本内容

• JavaScript可以监视鼠标单击，悬停等事件并对其做出反应

• JavaScript可以创建警告弹出窗口，以向用户显示信息或警告消息

• JavaScript可以在将用户输入提交到服务器之前对其进行验证

JS用法

• （传统）可以在

  • 写入HTML元素使用 innerHTML

  • 写入文档流使用 document.write()

  • 弹出警告框，使用 window.alert()

  基本语法

  变量

  可以使用let（对于块级变量），var（对于函数级变量）或const（只读）声明变量。

  仅使用var而没赋值时变量具有值​​​​​​​undefined,表示尚未为变量分配值，或者根本没有声明变量。

  var x;
  x = 1;
  var y = 1;

  标识符

  变量，函数或属性的名称在JavaScript中称为标识符，JavaScript 标识符必须以字母、下划线(_)或美元符（$）开始，后续的字符可以是字母、数字、下划线或美元符。

  所有JavaScript标识符均区分大小写，标识符的约定是使用camelCase(驼峰命名)编写的。

  注释

  和Java的一样，单行注释以双斜杠（//）开头，行注释以斜杠和星号（/*）开头，以星号和斜杠（*/）结束。

  数据类型

  好消息，JS变量定义时不用声明类型，因为会动态分配

   var length = 4;// Number 数字
   var firstName = "Vishal";  // String 字符串
   var user = {firstName:"Vishal", age:22};  // Object 对象
   var fruits = ["Apple", "Mango", "Banana"];// Array 数组

  Number

  JS中数字具有64位，不分整数和浮点数，但底层也和其他语言一样

  toExponential()，toFixed()，toPrecision()得到对应位数的数

  valueOf()得到原始数值（像Java Integer拆包）

  Number()转换数字,parseInt(),parseFloat()解析数字

  String

  JS中单双引号都可以包字符串

  + 运算符用于拼接字符串，还可以用于长代码换行

  直接定义的字符串变量是string，而使用new创建的是字符串对象，属于object。

  var city = new String("New Delhi");

  ​​​​​​​length,concat(),toUpperCase(),split(),trim(),replace(),substring(),charAt()和Java一样

  此外还有indexOf(),lastIndexOf(),search()用于匹配。

  运算符

  基本都跟其他语言一样，只有几个特殊的

  **=：求幂之后再赋值

  ===：相等且同类型

  !==： 不相等且不同类型

  三元运算符：

  var status = (age >= 18) ? "adult" : "minor";

  delete运算符可删除对象，对象的属性或数组中指定索引处的元素

  var user = {firstName:"Vishal", age:"22", color:"blue"};
  delete user.firstName;  // returns true
  var fruits = ["Apple", "Mango", "Banana"];
  delete fruits[0];   // delete "Apple"

  in：看在不在集合里

  instanceof：看指定的对象是否属于指定的对象类型

  控制流

  if语句，if...else语句，else...if语句，switch语句，while循环，do while循环，for循环都跟Java完全一样。也用continue和break跳出循环。

  for...in循环迭代的对象的属性，以任意的顺序

  var myObj = {
  name: "VISHAL",
  age: 22,
  height: 175,
  city: "New Delhi",
  getNothing: function () {return "";}
  };
  
  for (let x in myObj) {
  document.write(x);
  }

  for...of循环迭代数据，该迭代的对象定义要遍历

  let iterable = [10, 20, 30, 40, 50];
  
  for (let x of iterable) {
  document.write(x);
  }

  函数

  function nameOfFunction(parameter1, parameter2, ..., parameterN) {
       // 要执行的代码
       return 返回值;
   }
  //调用函数，返回值将存储在x中
  var x = nameOfFunction(parameter1, parameter2, ..., parameterN);

  还有个类似匿名函数，用变量名调用

  var square = function(number) { return number * number; };
  
  var x = square(5);

  对象

  像经常看到的JSON，里面还可以定义函数

   var user = {
    firstName: "Vishal",
    lastName : "Choudhary",
    age  : 22,
    location : "New Delhi",
    getName  : function() {
     return this.firstName + " " + this.lastName;
    }
    };

  可以用.和数组索引来访问对象属性

  user.firstName;
  user["firstName"];

  访问对象方法也和Java一样

  user.getName();

  当使用关键字声明JavaScript变量时new，该变量将作为对象创建：

  var a = new Number();  // 将a声明为Number对象
  var b = new String();  // 将b声明为String对象
  var c = new Boolean();   // 将c声明为Boolean对象

  数组

  也和Java一致，再添加元素事如果能刚好接上下一个可以为下一个索引分配值，不确定就用push

  let fruits = ["Apple", "Mango", "Banana", "Orange"];
  fruits[4] = "Guava";

  其他的pop(),shift(),concat(),slice(),fill(),sort(),reverse()也可以望文生义

  forEach()方法对数组的每个元素执行一次提供的函数，也和Java很像

  var fruits = ["Apple", "Mango", "Banana", "Orange"];
  var result = document.getElementById("result");
  
  fruits.forEach(function(element, index, array) {
      result.innerHTML += index + ": " + element + "
  ";
  });

  map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素

  var nums1 = [1, 5, 20, 14, 55, 16];
  var nums2 = nums1.map(twice);
  
  function twice(element, index, array) {
     return (element * 2);
  }

  filter(),find(),every()同理

  事件

  事件是在浏览器中发生的操作，可由用户或浏览器本身启动

  • 页面加载完成

  • 用户单击一个按钮

  • 用户滚动文档

  • 用户调整浏览器大小

  • 用户移动鼠标

  • 用户提交表单

  • 用户按下键盘上的一个键

  • HTML输入字段已更改

  使用方法为：

  • 内联事件处理程序（html上）

  • 单击此处更改此文本

  • 事件处理程序属性

  • let para = document.querySelector("#para");
    
    para.onclick = function() {
       this.innerHTML = "Hello world";
    }

  • 事件监听器

  let para = document.querySelector("#para");
  para.addEventListener("click", changeText);
  
  function changeText() {
     para.innerHTML = "Hello world";
  }