Javascript总结

JavaScript 学习总结

JavaScript 是一种面向对象的脚本语言，用于在网页中创建交互式效果，包括动态更新内容、控制多媒体播放、进行表单验证等。本文将介绍 JavaScript 的基本概念、语法和常用功能，帮助初学者快速掌握 JavaScript 的基础知识。

JavaScript 基本概念

1. 脚本语言

JavaScript 是一种脚本语言，它不需要编译器进行编译，而是直接由浏览器解释执行。这意味着 JavaScript 代码可以直接嵌入 HTML 页面中，并且可以在浏览器中动态地修改和执行。

2. 对象和方法

JavaScript 是一种面向对象的语言，其中的基本单位是对象。对象是一组属性和方法的集合，属性是对象的特征，方法是对象的行为。JavaScript 提供了许多内置对象和方法，也可以自定义对象和方法。

3. 事件驱动

JavaScript 是一种事件驱动的语言，它通过事件监听和响应机制来实现与用户的交互。当用户执行某个操作时（如点击按钮或输入文本），JavaScript 可以监听该事件，并触发相应的响应操作。

JavaScript 语法

JavaScript 语法包括变量、数据类型、运算符、流程控制语句、函数等。

1. 变量

变量用于存储数据，并可以在程序中被引用。JavaScript 中的变量可以通过关键字 var 或 let 来声明。例如：

var x = 10;
let y = "Hello";

变量的命名规则和其他编程语言类似，不能以数字开头，可以包含字母、数字、下划线和美元符号。

2. 数据类型

JavaScript 中的数据类型包括数字、字符串、布尔值、数组、对象等。

数字

数字可以是整数或浮点数。例如：

var x = 10;
var y = 3.14;

字符串

字符串是一组字符的序列。字符串必须用引号括起来，可以是单引号或双引号。例如：

var x = "Hello";
var y = 'World';

布尔值

布尔值只有两个取值：true 和 false。例如：

var x = true;
var y = false;

数组

数组是一组有序的值的集合。数组用方括号括起来，各个值之间用逗号分隔。例如：

var fruits = ["apple", "banana", "orange"];

对象

JavaScript 中的对象是一组属性和方法的集合。对象用花括号括起来，各个属性和方法之间用逗号分隔。例如：

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

3. 运算符

JavaScript 中的运算符包括算术运算符、比较运算符、逻辑运算符等。例如：

算术运算符

var x = 10;
var y = 3;
var z = x + y; // 加法
var z = x - y; // 减法
var z = x * y; // 乘法
var z = x / y; // 除法
var z = x % y; // 取模
var z = x++;   // 自增
var z = x--;   // 自减

比较运算符

var x = 10;
var y = 3;
var z = x == y;  // 等于
var z = x != y;  // 不等于
var z= x > y;   // 大于
var z = x < y;   // 小于
var z = x >= y;  // 大于等于
var z = x <= y;  // 小于等于

逻辑运算符

var x = true;
var y = false;
var z = x && y;  // 逻辑与
var z = x || y;  // 逻辑或
var z = !x;      // 逻辑非

4. 流程控制语句

JavaScript 中的流程控制语句包括条件语句和循环语句。

条件语句

条件语句用于根据条件执行不同的代码块。常用的条件语句包括 if 语句、switch 语句等。例如：

if (x > y) {
    console.log("x is greater than y");
} else if (x < y) {
    console.log("x is less than y");
} else {
    console.log("x is equal to y");
}

switch (fruit) {
    case "apple":
        console.log("You selected apple");
        break;
    case "banana":
        console.log("You selected banana");
        break;
    default:
        console.log("You selected something else");
}

循环语句

循环语句用于重复执行代码块。常用的循环语句包括 for 循环、while 循环、do-while 循环等。例如：

for (var i = 0; i < 10; i++) {
    console.log(i);
}

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

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

5. 函数

函数是一段可重复使用的代码块，它可以接收参数并返回值。JavaScript 中的函数可以通过 function 关键字来定义。例如：

function add(x, y) {
    return x + y;
}

可以通过以下方式调用函数：

var sum = add(10, 20);

JavaScript 常用功能

1. DOM 操作

DOM（Document Object Model）是一种将 HTML 和 XML 文档表示为对象的方法。JavaScript 可以通过 DOM 操作来修改 HTML 元素的属性和内容。例如：

var element = document.getElementById("myElement");
element.innerHTML = "Hello";
element.style.color = "red";

2. Ajax 请求

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下更新部分页面的技术。JavaScript 可以通过 Ajax 请求来获取数据并更新页面内容。例如：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myElement").innerHTML = this.responseText;
    }
};
xhttp.open("GET", "myData.txt", true);
xhttp.send();

3. jQuery 库

jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理、Ajax 请求等常用功能的编写。例如：

$("#myElement").html("Hello");
$("#myButton").click(function() {
    $.ajax({
        url: "myData.txt",
        success: function(result) {
            $("#myElement").html(result);
        }
    });
});

基本语法

JavaScript的基本语法类似于C语言，并且还使用了一些Java语言的概念和语法:

声明变量	在JavaScript中，可以使用var、let或const关键字来声明变量
数据类型	JavaScript有几种基本数据类型，包括数字、字符串、布尔、数组、对象等
函数	JavaScript支持函数式编程，使用function关键字来定义函数
条件语句	JavaScript使用if、else语句来实现条件分支
循环语句	JavaScript支持for、while、do-while等循环语句

操作符

算术操作符：

符号	含义
+	加法
-	减法
*	乘法
/	除法
%	取模
++	自增
- -	自减

赋值操作符：

符号	含义
=	简单赋值
+=	加和赋值
-=	减和赋值
*=	乘和赋值
/=	除和赋值
%=	取模和赋值

比较操作符：

符号	含义
==	相等
===	全等
!=	不相等
!==	不全等
>	大于
<	小于
>=	大于等于
<=	小于等于

逻辑操作符：

符号	含义
&&	逻辑与
ll	逻辑或
!	逻辑非

位操作符：

符号	含义
&	与
l	或
^	异或
~	反码
<<	左移
>>	右移
>>>	无符号右移

其他操作符：

符号	含义
? :	条件操作符（三元操作符）
,	多重操作符
instanceof	检查对象类型
delete	删除对象属性
typeof	返回变量类型
void	无返回值

语句

语句	作用
变量声明语句	变量声明语句用于声明一个新的变量，并且可以选用初始值
分支语句	分支语句用于根据条件执行不同的代码。JavaScript中常见的分支语句有if、else和switch
函数定义语句和调用语句	JavaScript中使用函数来将代码组织成可重用块。函数定义语句用于定义一个新函数，调用语句用于调用一个已定义的函数
异常处理语句	异常处理语句用于捕获并处理JavaScript程序中的异常。JavaScript中使用try-
catch-finally语句来实现异常处理

对象

在JavaScript中，对象是一种复合数据类型，可以存储由键值对组成的属性和方法:

目的	方法
对象的定义	使用对象字面量定义一个对象
对象的属性	使用点表示法或方括号表示法来访问和修改对象的属性
对象的方法	在对象中定义函数，称之为对象的方法
象的迭代	使用 for…in 循环对对象进行迭代

数组

数组是一种存储数据的有序列表，可以存储各种类型的数据，包括字符串、数字、对象等.

1.数组的定义：
使用方括号 [ ] 定义数组，数组元素用逗号 , 分隔。

const myArray = [element1, element2, ..., elementN];

2.访问数组元素：
使用方括号或者点运算符 . 来访问和修改数组元素。

myArray[0]; // 访问第一个元素
myArray.length; // 访问数组元素个数
myArray.push(element); // 在数组尾部添加新元素并返回新的长度
myArray.pop(); // 删除数组尾部的元素并返回它的值
myArray.shift(); // 删除数组头部的元素并返回它的值
myArray.unshift(element); // 在数组头部添加新元素并返回新的长度

3.数组的迭代：
使用 for 循环、 forEach()、 map()、filter() 等函数对数组进行迭代。

for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

myArray.forEach(function(element) {
  console.log(element);
});

const resultArray = myArray.map(function(element) {
  return ...
});

const filteredArray = myArray.filter(function(element) {
  return ...
});

链式语法

JavaScript链式语法是一种常见的编程模式，在这种模式下，多个函数调用可以链接起来，这些函数负责对数据进行转换和操作，最终生成一个期望的输出.

1.基本链式语法：
链式语法允许多个函数在同一行上调用（或多行，但每行必须以点符号结尾），并把每个函数的输出传递给下一个函数

object.function1().function2().function3()...;

2.原始值上的链式语法：
JavaScript 中的原始值通常不具有方法。但是，通过使用对象包装器，可以使用对象方法来处理原始值：

const num = Number("123").toFixed(2).toString();

console.log(num); // "123.00"

闭包

在 JavaScript 中，闭包是指函数和对其周围状态（lexical environment）的引用捆绑在一起形成的实体。闭包可以在其创建时访问其词法作用域内的变量，并将其保留在内存中，以便在稍后的时间访问.

function outer() {
  const name = 'John';

  function inner() {
    console.log(name);
  }

  return inner;
}

const foo = outer();
foo(); // "John"

总结

本次对JS的学习，学习的内容很多，要记的东西不少但是都很有趣，能够强化我自身的动手能力和学习领悟，深化了自身对于JS一些基本概念的学习和掌握程度，收获了很多新的东西。