JavaScript（通俗易懂）

白鸽（二般）

已于 2024-06-20 07:50:11 修改

阅读量887

点赞数 19

文章标签： javascript 开发语言 ecmascript

于 2024-03-14 20:51:53 首次发布

本文链接：https://blog.csdn.net/qq_62079814/article/details/136715941

版权

1JavaScript前言

1.1JavaScript是什么

1.JavaScript是一种运行在客户端的编程语言，实现人机交互效果。

2.作用

-网页特效

-表单验证

-数据交互

-服务端编程（node.js）

1.2JavaScript的书写位置

内部JavaScript

行内JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="alert('这个是js内联式')"></button>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
    
  </script>
</body>

</html>

外部JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 外部js引入，引入过后script之间无需写代码，会被忽略 -->
  <script src="../js文件/my.js"></script>
</body>

</html>

JavaScript的结束符（分号;）可写可不写

1.3输入与输出语法

1.3.1输出语法

输出语法1

作用：向body输出内容

注意：如果输出位html标签，也会被解析为页面元素

document.write('要输出的内容')

输出语法2

作用：页面输出警告对话框

alert('输出的内容')

语法3

作用：控制台输出语法，程序员调试用

console.log('控制台打印')

1.3.2输入语法

作用：显示一个对话框，对话框包含一端文字信息，用来提示用户输入文字

语法：

prompt（'请输入您的姓名'）

注意：alert跟prompt他们会跳过页面渲染先被执行

1.4字面量

在计算机科学当中，字面量是在计算机当中描述事/物

2变量

2.1变量是什么：变量是计算机存储数据的盒子

2.2变量的基本使用

2.2.0声明变量：let 变量名

2.2.1变量的赋值：定义了一个变量后，在后面跟上一个 = 就是赋值例如：let age = 18

age叫变量的名称，也叫标识符

2.2.2声明多个变量： let age = 18,uname = 'cui' (不推荐)

2.3变量的命名规范：

不能使用关键字
字母严格区分大小写 age跟Age是不同的变量
只能是数字字母下划线，$组成且数字不能开头

let跟var的区别：

var的缺点：

可以先使用在声明（不合理）
var可以重复声明
var有变量提升，全局变量，没有块级作用域等

2.1变量拓展-数组

数组-将多个数据存储在单个变量名下的一种方式

let arr = 【】

数组取值：数组名【下标】

3.常量的基本使用

使用场景：当变量永远不会改变时，就可以用const来声明，而不是let

注意：常量不可以修改，并且声明是必须赋值，const声明的引用数据类型是可以修改里面属性的值的，因为应用数据类型的地址在栈里面，数据在堆里面。

4.js的数据类型

1.基本数据类型

unmber,string,undefined,null,boolean,bigint，symbol

1.1Nnmber：

特殊值：infinity （表示无穷大）

var num1 = Infinity
var num2 = 1/0

进制表示：

var num3 = 100 //十进制
var num4 = 0x100 //十六进制
var num5 = 0o100 //八进制
var num6 = 0b100 //二进制

Number可以表示的最大范围

var max = Number.MAX_VALUE
var min= Number.MIN_VALUE
console.log( "Number表示的范围",min,max)//Number表示的范围 5e-324 1.7976931348623157e+308

1.2String:

引号的使用：单引号，双引号，反引号（ES6）拼接字符串作用

1.3Boolean类型

true 跟false

1.4Undefined

声明一个变量没有进行初始化时，他默认就是undefined

1.5Null

Null存在的意义就是：对对象的初始化为空使用，转成一个boolean时为false

因为空对象{}转换为布尔时为true

2.引用数据类型（Object）

当对一个对象初始化时不建议初始化为{}


var book = {} //true
if(book){
  console.log("book is not empty");
}

2.引用数据类型

object（包含arry，data，function等）

模本字符串：字符串的拼接

document.write(`'我叫'+${age}`)

3检测数据类型

写法一：typeof 变量名

写法二：typeof（变量名）

let age = 18
let name = 'cui'
console.log(typeof age) // number
console.log(typeof name)//string

4.类型转换

4.1隐式转换

+可以将字符串的数字转换为数字

任何数据和字符串相加都是字符串

除+号以外的算数运算符，比如-*/都会把数据转换为数字类型

4.2显式转换

转换为数字型

Nmber（数据）

parseInt（数据）只保留整数

parseFloat(数据) 只保留小数

4.1类型转换

大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型。

比如，alert 会自动将任何值都转换为字符串以进行显示。算术运算符会将值转换为数字。

在某些情况下，我们需要将值显式地转换为我们期望的类型。

字符串转换

当我们需要一个字符串形式的值时，就会进行字符串转换。

比如，alert(value) 将 value 转换为字符串类型，然后显示这个值。

我们也可以显式地调用 String(value) 来将 value 转换为字符串类型：

let value = true;
alert(typeof value); // boolean

value = String(value); // 现在，值是一个字符串形式的 "true"
alert(typeof value); // string

字符串转换最明显。false 变成 "false"，null 变成 "null" 等。

数字型转换

在算术函数和表达式中，会自动进行 number 类型转换。

比如，当把除法 / 用于非 number 类型：

alert( "6" / "2" ); // 3, string 类型的值被自动转换成 number 类型后进行计算

我们也可以使用 Number(value) 显式地将这个 value 转换为 number 类型。

let str = "123";
alert(typeof str); // string

let num = Number(str); // 变成 number 类型 123

alert(typeof num); // number

当我们从 string 类型源（如文本表单）中读取一个值，但期望输入一个数字时，通常需要进行显式转换。

如果该字符串不是一个有效的数字，转换的结果会是 NaN。例如：

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN，转换失败

number 类型转换规则：

空字符串转化为Number类型为0

值	变成……
`undefined`	`NaN`
`null`	`0`
`true 和 false`	`1` and `0`
`string`	去掉首尾空白字符（空格、换行符 `\n`、制表符 `\t` 等）后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 `0`。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 `NaN`。

例子：

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN（从字符串“读取”数字，读到 "z" 时出现错误）
alert( Number(true) );        // 1
alert( Number(false) );       // 0

请注意 null 和 undefined 在这有点不同：null 变成数字 0，undefined 变成 NaN。

大多数数学运算符都执行这种转换，我们将在下一节中进行介绍。

布尔型转换

布尔（boolean）类型转换是最简单的一个。

它发生在逻辑运算中（稍后我们将进行条件判断和其他类似的东西），但是也可以通过调用 Boolean(value) 显式地进行转换。

转换规则如下：

直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
其他值变成 true。

比如：

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false

请注意：包含 0 的字符串 "0" 是 true

一些编程语言（比如 PHP）视 "0" 为 false。但在 JavaScript 中，非空的字符串总是 true。

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 空格，也是 true（任何非空字符串都是 true）

5.运算符

5.1赋值运算符

= ，+=，-=，/=，%=

5.2一元运算符

--，++ 不能用在数字上面，必须是变量

自增运算符的用法：

前置自增：++num，已经加一了

后置自增：num++，执行后才加一

5.3比较运算符

<,>,>=,<+,==,===,!==,

==在类型不同的情况下，会将运算元原始类型转化为Number类型的值，在进行比较

null == undefined //true

unll == '' //false

如果等号== 两边有对象 会将对象转化为Toprimitive（）原始类型

const obj = {
  name:"cui",
  age:18,
  [Symbol.toPrimitive](){
    return 123
  }
}
console.log(123 == obj)//true

5.4逻辑运算符

&&, ||, !

5.5运算符的优先级

小括号（）
一元运算符 --，++，！
算数运算符先*/%在+-
关系运算符 > >= < <=
相等运算符 == ！= === ！==
逻辑运算符先&&在 ||
赋值运算符 =
逗号运算符，

6语句

6.1表达式与语句

表达式：是可以被求值的代码，JavaScript引擎会将其计算出一个结果

x = 7
3+4
num++

语句一般是可以被执行的代码比如：prompt（），if，for

6.2分支语句

程序三大流程控制语句

顺序结构，循环结构，分支结构

分支语句

if分支语句，

if (条件) {
满足条件执行的代码
}
双分支语句

if (){
满足条件执行的代码
} else  {

不满足条件执行的代码
}

多分支语句 

if (条件1) {

} else if (条件2){


} else if (条件3) {

} else {
都不满足

}

代码块

代码块是多行执行代码的合集,通过一个花括号放在一起。

//代码块 可以使用if function while 等来执行一个代码块
{
const num1 = 0
const num2 = 1


}

三元运算符

其实就是简单的双分支语句

条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

switch语句（等值判断）

switch语句使用的是全等判断 === 只能做等值判断，default可选

switch （） {
case 值1：
代码1
break

case 值2：
代码2
break

case 值3：
代码3
break
default:


}

6.3循环

while循环的三要素：

1.变量起始值

2.终止条件

3.变量变化量

let i = 1
while (i<=3){
document.write('循环')
i++
}

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

循环退出 ： break（推出循环） continue （推出本次循环）

for循环：

for (let i = 1,i<=3,i++){
循环3次代码

}
for （起始值，终止条件，变量变化量）{
}

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

6.4逻辑运算符

||或运算符

result = a || b

1.从左往右依次计算操作数

2.处理每个操作数时，都将其转换为布尔值

3.如果结果是true，就停止运算，返回这个操作数的初识值

4.如果所有的操作数都被计算过（也就是都是false），则返回最后一个操作数

const obj = {}
const num1 = 123
const str1 = ""


const result = num1 || str1 || obj
console.log(result) // 123
const result1 = str1 || obj
console.log(result1) // {}
const result2 = obj || num1
console.log(result2) // {}

&&与运算符

条件1 && 条件2 && 条件3

1.从左往右依次计算操作数

2.处理每个操作数时，都将其转换为布尔值

3.如果结果是false，就停止运算，返回这个操作数的初识值

4.如果所有的操作数都被计算过（也就是都是true），则返回最后一个操作数

！逻辑非

作用1：转换为Boolean类型

const message= 'hello'
console.log(!!message) //true

Math.random() 生成一个[0,1）的随机数

Math.floor() 向下取整

7数组

数组是一个可以按顺序保存数据的数据类型

数组的基本使用

1.声明语法

let arr = [数据1，数据2]

let arr = new Array(数据1，数据2)

let arr = new Array(5) // 传入一个数字表示创建一个数组长度为5的数组【empty*5】

在数组的编号当中数据从0开始，所以数据1的编号或者叫下标为0

数组可以存储任何类型的数据

2.取值语法

数组名【下标】

let names = ['小崔'，'小陈'，'小志']

names[0] =>小崔

names[1] =>小陈

names[2] =>小志

3.遍历数组

for (let i = 0;i <数组名.length;i++){

数组名[]
}

4.操作数组（增删改查）

新增

数组名.push()方法向数组末尾添加一个或多个数据，并返回数组的新长度

开头追加数组名.unshift ()同样有数组的新长度返回值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let arr =['a','red','green']
    // 在数组后面新增元素 数组名.push推 并且有返回值，返回新数组长度
    arr.push('b','pink')
    console.log( arr.push()); //5
    console.log(arr);// ['a', 'red', 'green', 'b', 'pink']

    // 开头追加 数组名.unshift 同样有返回值
    arr.unshift('cui','chen','zhi')//['cui', 'chen', 'zhi', 'a', 'red', 'green', 'b', 'pink']
    
    console.log(arr.unshift()); //8
    console.log(arr);//['cui', 'chen', 'zhi', 'a', 'red', 'green', 'b', 'pink']
  </script>
</body>
</html>

删除

数组名.splice() ,删除指定元素语法： arr.splice(起始位置，删除几个元素)

数组名.shift() ,删除第一个元素

数组名.pop() ,删除最后一个元素

数组名.splice(删除位置，删除元素，添加的元素) // 当删除元素为0 时表示添加元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let arr = [4,0,5,6,8798,46,4]
    // 删除数组最后一个元素  数组名.pop()的返回值是删除的那个元素
    // arr.pop() 
    // console.log(arr.pop());
    // console.log(arr);
   
    // 删除第一个元素 数组名.shift()
    // arr.shift()
    // console.log(arr.shift());
    // console.log(arr);

    // splice(起始位置，个数)
    arr.splice(1,1)//从索引号1开始删1个
    arr.splice(1)//从索引号1开始删到最后
    console.log(arr);


  </script>
</body>
</html>

数组排序

数组.sort()可以排序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let arr = [1,2,34,,65,46,54]
    //1.升序排列
    arr.sort(function(a,b){
      return a-b
    })
    console.log(arr);//[1, 2, 34, 46, 54, 65]

    //2.降序排列
    arr.sort(function(a,b){
      return b-a
    })
    console.log(arr);//[65, 54, 46, 34, 2, 1]
  </script>
</body>
</html>

8.javascript函数

了解程序当作的foo，bar，baz常用的伪变量

8.1什么是函数

alert函数：浏览器弹出一个弹窗

prompt函数：在浏览器介绍用户的输入

函数：实现某种特定功能的封装

函数名的声明规则跟变量一样（数字字母下划线$且数字不能开头）

函数的使用包含2个步骤

1.声明函数

 function 函数名(){
     函数代码块
 }

2.调用函数

函数名（）

函数的作用：使用函数可以提高编写的效率以及代码的复用

8.2 函数的返回值

1.使用return关键字来返回结果；

2.一旦函数执行return操作，那么当前函数就会终止；

3.如果函数没有return语句，那么函数默认返回undefined；

// 函数的返回值
function sayHello(){
    console.log("Hello")
}
var foo = sayHello()
console.log("foo:", foo) //foo: undefined

4.如果使用return语句，但是return后面没有任何值，那么函数也是返回：undefined；

8.3arguments参数

接收函数（箭头函数没有）传递过来的参数无论多少

function foo (name,age){
    
    console.log(name,age)
    //在函数当中都存在一个arguments变量
    console.log(arguments)
    console.log(typeof arguments)
    console.log(arguments[0])//cui
    console.log(arguments[1])//18
    console.log(arguments[2])//19
    console.log(arguments[3])//广州
}
foo("cui",18,19,"广州")

8.4函数的递归

函数当中调用函数（默认情况下会产生无限调用）

没有return的话报错: Maximum call stack size exceeded

function foo (){
    console.log("foo函数执行")
    console.log('---------')
    foo()
}

补充：Math.pow（x，n） x的n次幂

function pow1(x,n){
console.log(x**n)
}
pow1(2,3)
console.log(Math.pow(2,3))

8.5函数表达式的声明函数的区别

声明函数的函数不能复制而函数表达式可以

      function sayHi() {
        alert("Hello");
      }

      alert(sayHi); // 显示函数代码/* function sayHi() {alert( "Hello" );} */

      const sayHi2 = sayHi;

      /* 
等价于
const sayHi2 = function sayHi() {
         alert( "Hello" );
          }
*/
      console.log(sayHi2);
      sayHi2(); // 没有反应

而函数表达式可以

      const fuzhi = function (res){
      alert(res)
      }

      const bar = fuzhi
      bar(123132)

8.6回调函数

理解：就是讲一个函数作为参数传给一个函数

大白话：就是提出一个问题（question），根据用户的yes or no来调用yes（） or no（）

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

这里直接在 ask(...) 调用内进行函数声明。这两个函数没有名字，所以叫 匿名函数。这样的函数在 ask 外无法访问（因为没有对它们分配变量），不过这正是我们想要的。

8.7函数编程中的概念

头等函数：函数作为一等公民

函数可以赋值给变量

函数可以传递给另外一个函数

函数可以作为另外一个函数的返回值

函数可以存储在别的数据结构当中

高阶函数：

一个函数可以接另一个函数作为参数，那么他就是高阶函数

一个函数可以返回一函数，那么他就是高阶函数

函数式编程：

函数可以作为头等公民的编程语言

JavaScript就是一种函数式编程的语言

函数的回调：

将一个函数作为一个参数传递给另一个函数时，在另一个函数，对传入的函数进行调用时，就叫做函数的调用。

匿名函数

作为一个函数时没有给函数名，也没有定义对应变量的函数，就叫做匿名函数

9.常见的内置类

JavaScript的原始类型不是对象类型，所以原理上来说他们没有办法获取属性跟方法的，

例如下面代码，在执行message.length的时候会将message（封装成一个包装类型）转化为一个new String（message）对象，使用完length后会将这个对象清除掉

包装类型有 number boolean symbol bigint类型

   const message = "cui"
        console.log(message.length)

    const message = "cui"
        console.log(message.length)
        const str = new String()
        console.log(typeof(str))//object

    console.log(num.toString())//转化为字符串 "1222"
        console.log(num.toString(2))//转化为二进制 10011000110

toFixed()

 const num = 3.14159264665465555555555555555555555555555555555555654687987
        console.log(num.toFixed(3))//保留2位，范围为0-20，四舍五入 ，Number类型只能安全地表示约15到17位有效数字。当你尝试表示或操作超过这个精度的数字时，可能会遇到精度丢失的问题。

parseInt ,parseFloat

    const num = "123.321"
    //parseInt转化为整数
    console.log(Number.parseInt(num))
    //zparseFloat转化为浮点数
    console.log(Number.parseFloat(num))

    //window当中也有parseInt和parseFloat方法，
    console.log(parseInt(num)) //
    console.log(parseFloat(num))

包装类型string类型的使用

      const message = "Document";
      // 1.访问字符串中某个位置的字符
      console.log(message[0]); //D
      console.log(message.charAt(0)); //D

      console.log(message[20]); //undefined
      console.log(message.charAt[20]); //之前访问不到字符串时是返回一个空字符串，而现状undefined

      // 2.for普通遍历
      for (let i = 0; i < message.length; i++) {
        console.log(message[i]); // D o c u m e n t
      } 
      // 3.for...of遍历 支持可迭代对象 //目前字符串跟数组
      for (let i of message){
        console.log(i)// D o c u m e n t
      }

字符串定义后时不可以修改的

      let message = "Hello World";
      //1.严格的修改字符串时不能修改成功的
      message[0] = "c";
      console.log(message); //hello world
      //2.转化为大写 toUpperCase不能修改字符串，只能成功一个新的字符串并返回
      const newMessage = message.toUpperCase();
      console.log(newMessage); //HELLO WORLD
      //3.转化为小写 toLowerCase不能修改字符串，只能成功一个新的字符串并返回
      const newMessage2 = message.toLowerCase();
      console.log(newMessage2); //hello world

查找字符串

      let message = "my name cui";
      let name = "cui";
      //判断一个字符串有没有另一个字符串
      // 1.indexOf（searchString，fromIndex）  searchString：搜索的字符串  fromIndex：从什么位置开始搜索
      /*
      indexOf() 方法返回在字符串中第一次出现指定字符的索引，如果没有找到则返回 -1。
      */
      const index = message.indexOf(name);
      console.log(index); // 8

      //ES6新增一个方法includes()，可以判断一个字符串是否包含另一个字符串
      console.log(message.includes(name)); // true

      //3.startsWith() 是否为什么开头
      console.log(message.startsWith("my")); // true

      //4.endsWith() 是否以什么结尾
      console.log(message.endsWith("cui")); // true

      //5.repeat() 重复多少次
      console.log(message.repeat(3)); //my name cuimy name cuimy name cui

      //6.replace(源字符串，目标字符串或函数) 替换字符串
      console.log(message.replace("my", "your")); //your name cui
      console.log(
        message.replace("my", function () {
          return "yourfunction";
        })
      ); //yourfunction name cui

截取字符串

      const str = "Hello World";
      console.log(str.slice(3, 7)); //lo W, 不包含最后一个
      console.log(str.slice(3, -1)); //lo Worl, -1表示最后一个
    
      //substr 
      console.log(str.substr(0,2)) //从0开始截取2个字符

拼接字符串

      const firstname = "cui";
      const lastname = "chen";
      //1.字符串的拼接  使用+
      const newstring = firstname + " " + lastname;
      console.log(newstring); //cui chen
      // 2.concat () 可以接收多个参数
      const newstring2 = firstname.concat(" ", lastname);
      const newstring21 = firstname.concat(lastname);

      console.log(newstring2); //cui chen
      console.log(newstring21); //cuichen
      // 3.模板字符串
      const newstring3 = `${firstname} ${lastname}`;
      console.log(newstring3); //cui chen

      // 删除收尾空格 trim
      console.log("  hello world  ".trim());

      //字符串的切割 split  接收一个参数，用作分隔符
      const message = "abc - he-llo";
      const item = message.split("-");
      console.log(item);