JavaScript从入门到精通

已于 2024-05-09 09:15:16 修改
阅读量887 收藏 1
点赞数
文章标签： javascript 开发语言 前端
于 2023-09-15 13:37:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huaz_md/article/details/132898477
版权

华子目录

JavaScript介绍

  • JavaScript简称js，是一种浏览器解释型语言，即JavaScript 在执行的时候，不会编译成二进制代码，是可以嵌入在html文件中交给浏览器解释执行的。主要用来实现网页的动态效果，用户交互以及前后端的数据传输等。
  • JavaScript是弱数据类型编程语言。
  • JavaScript是面向对象编程语言。

JavaScript能做什么？

  • 1.网页的动态效果（网页特效）
  • 2.前后端的数据交互（主要指Ajax技术）
  • 3.进阶（前端的高级框架：vue.js React.js Node.js）(VR/AR开发：Three.js)
  • 4.数据校验（js就是为这个诞生的）

注：html/css不是编程语言，JavaScript是一门正儿八经的编程语言

JavaScript的组成

  • ECMA Script简称ES，是js的语法规则，目前最新版本ES13
  • ECMA是一个欧洲计算机制造商协会，主要做一些评估，开发和计算机标准
  • BOM（Browser object model）：浏览器对象模型，主要是对浏览器进行操作（交互，弹窗，输入框）
  • DOM（Document object model）：文档对象模型，负责对网页里的内容进行操作（网页里的所有内容(标签)都称为文档）

JavaScript书写位置

行内js

  • 使用HTML标签的onxxxxx这种属性（这种属性一般都是js和html互动的事件属性）
  • 注意：事件中的引号不是字符串，而是JavaScript代码
<button onclick="alert('你点我感冒');alert('点你咋得')">点一下试试</button>

页面内嵌js

  • 内部JavaScript直接写在html里面，用script标签包裹住
<script>代码</script>

<!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>
        alert("hello JavaScript,I am coming!!!");
        alert('点你一下咋得')
        document.write('好好好')
    </script>
</body>
</html>

外联js文件

  • 外部JavaScript代码写在以.js结尾的文件里面，通过script标签引入到html页面中
<script src='js文件路径'></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
	<script src="./demo.js"></script>
</html>
  • src不仅能引入本地的文件，也可以通过cdn加速的方式，获取实时js代码（相当于引入网络文件）
  • 引入js最好放在网页最后body标签的最后

对话框

  • JavaScript为我们主要提供了三种对话框：警告框，确认框，输入框

警告框alert

  • 警告框是JavaScript中使用较多的一种对话框，主要用来向用户展示警告信息。
<script>
        alert("hello JavaScript,I am coming!!!");
        alert('点你一下咋得')
        document.write('好好好')
</script>
  • 警告框，只有一个标题信息和一个确定按钮。

确认框confirm

  • 确认框又叫做疑问框，主要用来确定用户的操作，防止误操作所使用的。
  • 使用confirm("提示信息")，返回bool类型
confirm("您确定要删除您的账号吗？");

<script>
        let isDelete = confirm("你确认要删除您的账号吗？");
        alert(isDelete)
        if (isDelete){
            alert("数据删除了")
        }
</script>

在这里插入图片描述

输入框prompt

  • 输入框主要用来接收用户在页面输入的值（真正开发中几乎不用），主要用来测试代码。
  • 返回用户输入的内容，返回类型为string类型
<script>
    let age = prompt("请输入你的年龄：","20");
    alert("你的年龄为：" +age+ "岁了");
</script>
  • 第二个参数可以不写。不写，则输入框默认没有值，如果写了则默认就是写的值。

在这里插入图片描述

注意

  • 三种对话框函数都是window对象的方法，所以可以通过window.alert()这种方式来调用
  • 当然也可以不写，直接调用，因为js中window就是全局对象，默认访问就是window对象

js注释

作用：主要写一些代码思路逻辑

  • 单行注释：//
  • 多行注释：/*内容*/
  • 快捷方式：ctrl+/

document.write()

  • document.wtite(内容)：在网页里写内容，能够识别标签，字符串(字符串，标签都要用引号包裹)，数字不用。
<script>
   document.write("<hr>麦当<hr>");
</script>

console.log()与console.info()

  • console.log(内容)：控制台输出日志，在控制台输出一个信息（主要是用来调试js数据的）（不需要加标签，因为不是给网页看的）
<script>
    console.log("你好啊");
</script>

<script>
    console.info("你好啊");
</script>

js变量

什么是变量？

  • 一个用来存储东西的容器，取个有意义的名字，方便后续使用

命名规范：

  • 变量名可以由数字,字母,下划线,$组成，禁止以数字开头(中文不推荐)
  • 变量名严格区分大小写
  • 不要用关键字命名
  • 见名知意

变量声明符

  • let：es6新出的语法，作用和var类似，但是在作用域上let更严谨

变量的使用：

  • 声明变量
let 变量名  //声明一个空的变量，没有赋值
let 变量名=值  //声明一个变量并赋值
let name
let age=18
  • 声明多个变量
let 变量名=值,变量名=值
let sex='女',name='小川'
  • 输出变量
document.write(变量名)
console.log(变量名)
alert(变量名)
  • 输出多个变量
document.write(变量名,变量名)
console.log(变量名,变量名)
alert(变量名,变量名)

注意

  • 直接写 变量名=值，不写let，写法上是允许的，但是非常不推荐
  • 变量使用let关键字声明，但是未赋值，变量初始值为undefined，不会报错
  • 使用let关键字重复声明一个变量会报错

js常量

  • 在ES6之后，专门提供了const关键字来定义常量。
  • 如果试图修改常量，则会报错
<script>
    const version = "1.0";
    document.write(version);
</script>

数据类型

  • JavaScript提供了两大类数据类型：基本数据类型和引用数据类型（对象、指针）。

1.基本数据类型

查看数据类型

  • js中查看数据类型：typeof 变量名
  • 返回数据类型
<script>
    let num = 546;
    document.write(typeof num);
</script>

数值类型number

  • JavaScript不区分整数 浮点数等，统一都叫number
<script>
    let num = 546;
    let f = 12.33;
    document.write(typeof num);
    document.write("<br>");
    document.write(typeof f);
</script>

字符串string

  • 通过单引号(''),双引号(""),反引号(``)包裹的数据都叫字符串
<script>
    let str1 = "张总";
    let str2 = '刘总';
    let str3 = `华总`;
    document.write(str1,"<br>",str2,"<br>",str3);
</script>
反引号的特殊用法
  • 格式：字符${变量名}字符
<script>
    let str1 = "张总";
    let str2 = '刘总';
    let str3 = `华总`;
    document.write(`你好，我叫${str1}，很高兴见到${str3}`);
</script>
  • ${}符号中的字符串必须使用反引号包裹

布尔类型boolean

  • 布尔类型主要用于逻辑判断 ,只有两个值 true和false
<script>
   let judge = true
   if(judge){
    window.alert("你猜对了");
   }
</script>

未定义undefined

  • undefined即是类型也是值，指的就是未定义的意思，当你声明变量没有赋值时,他的值就为undefined

空null

  • null和Python里的none类似，表示的是值为空，输出类型为对象(空对象)
<script>
	  let n = null;
	  document.write(typeof n);
</script>

不是数字NaN

<script>
    let nn = NaN;
    document.write(typeof nn);
</script>

2.引用数据类型

数组Array

对象Object

js转义字符

  • \n 换行
  • \t 制表符tab键
  • \\正常输出一个斜杠
  • \' 正常输出一个引号

运算符类型

算术运算符:+  -  *  /  **  %
	**取幂:3**4 = 3*3*3*3
	% 取余:11%3 = 2    
	
	
逻辑运算符:
	&&: 逻辑与and 当有多个条件时 都满足才为真
	||: 逻辑与or 当有多个条件时 满足一个就为真
	!: 逻辑与非not 反骨仔 什么都和你反着来
	
	
赋值运算符:
	=  +=  -=  *=  /= 
	a+=b      a=a+b
	
	
关系运算符:
	==  <  >  >=  <=
	
	
自加自减运算符:
	++ -- 自增/减1
	++在前,先自增再赋值;先+1 再运行
	++在后,先赋值再自增;先运行 再+1


三目运算符
	变量 = 表达式?返回值:返回值
	（表达式如果结果为true，则变量的值就是第一个值1，否则就是值2。）


位运算符
	原码、反码、补码

<script>
    // let name=prompt('请输入你的姓名')
    // alert('你好'+name)
    // console.log('你好麦当')
    // console.log(888)
    // document.write(888)
    // let name='麦当',age=20
    // document.write(name,age)
    // let num=10,count=3
    // console.log(num%count)
    // console.log(num+count)
    // console.log(`${num/count}`)
</script>

数据类型转换

  • 在开发学习中 经常会遇到需要把一个数据类型转换成其他类型使用，这个时候就要类型转换

隐式类型转换:

  • 程序运行过程中自动执行，自动发生一种转换机制 主要体现在字符串和数值进行运算时
  • +号会优先识别为拼接，其他的就是为正常数值运算

强制类型转换:

  • 手动把数据转换为指定的数据类型
    • Number(变量名)，返回number类型的变量，本质是复制
    • String(变量名)，返回string类型的变量，本质是复制
    • Boolean(变量名)
<script>
   let str_n = "123456";
   document.write(typeof str_n);
   document.write("<br>");
   str_n1 = Number(str_n);
   document.write(typeof str_n1);
   document.write("<br>");
   str_n2 = String(str_n1);
   document.write( typeof str_n2)
</script>

parseInt(变量名)，parseFloat(变量名)

  • 将string字符串转化为number类型
  • parseInt(2.5)有取整的作用，返回值为2
<script>
  let age = prompt("请输入你的年龄：");
  alert(typeof age);
  alert(age + 1000);
  age = parseInt(age);
  alert(typeof age);
  document.write(age + 1000);
</script>
  • 注意：parseInt和parseFloat这两个全局函数，会尽可能的尝试着将字符串转换为数字，直到不成功为止，所以这两个函数也有去掉单位的作用，如width=“20px”，我们可以使用parseInt(width)，就会到的20的数值。

js流程控制

程序三大结构:

  • 顺序结构:程序是由上往下执行，遇到报错就终止
  • 选择结构:通过不同条件走向不同分支结果
  • 循环结构:通过判断条件是否满足从而把一段代码重复执行

if分支结构

if(判断条件)
{
	执行语句
}else if(判断条件)
{
	执行语句
}
else
{
	执行语句
}

<script>
    let name = prompt('请输入你的名字')
    if (name == '麦当') {
        document.write(`${name}`)
    }
    else if(name=='迪亚')
    {
        document.write('你是迪亚')
    }
    else
    {
        document.write('你不是麦当')
    }
</script>

注：有值为真，没值为假0/0.0/undefined/''/null

switch分支

switch(数据)
{
	case 值1:
		执行语句
	break
	case 值2:
		执行语句
	break
	case 值3:
		执行语句
	break
	case 值4:
		执行语句
	break
	default:
		执行语句
	break
}

<script>
    let num = Number(prompt('请输入你的成绩'))
    switch(parseInt(num/10))  //取整
    {
        case 10:
        case 9:
            document.write('优秀')
            break
        case 8:
            document.write('良好')
            break
        case 7:
            document.write('合格')
            break
        case 6:
            document.write('及格')
            break
        default:
            document.write('不及格')
            break
    }
</script>

while循环

while(循环判断)
{
    执行语句
}

<script>
    let num = 0
    while(num<10)
    {
        document.write(`${num+1}、麦当<br>`)
        num++
    }
</script>

do while循环

do
{
	执行代码
}while(循环判断)

<script>
     let num = 0
    do
    {
     document.write(`${num+1}、麦当<br>`)
     num++
    }while(num<10)
</script>

for循环

for(初始化变量;循环条件;更新操作){
	执行语句
}

<script>
  for(let i=0;i<10;i++)
  {
    document.write(`${i+1}、麦当<br>`)
  }
</script>

for in 循环

  • 在JavaScript中，还提供了一种 for in 的循环，用来迭代数组或者对象，需要注意的是，迭代的变量如果是数组，则返回的是数组下标，而如果是对象的，返回的是对象的属性名称。
<script>
  let arr = [1,3,4,5,6,7];
  for (let i in arr)
  {
    document.write(arr[i],"&nbsp;");
  }
</script>

<script>
  let obj = new Object();
  obj.name = "华子";
  obj.age = 16;
  obj.gender = "男";
  for (let i in obj)
  {
    document.write(obj[i],"&nbsp");
  }
</script>

for of循环

  • 在ES6时，JavaScript提供了一种 for of 的循环，这种事 for in 循环的升级体，主要用来迭代可迭代对象 – iterable
<script>
  let arr = [1,2,3,4,5,6,7,8,9];
  for (let i of arr)
  {
    document.write(arr[i]);
  }
</script>

break与continue

  • break 强制结束循环
  • continue 结束当次循环 开始下一次循环

js函数基础

  • JavaScript使用function声明函数

函数的基本使用(function声明函数)

定义函数

function 函数名(){
	函数内容
}

<script>
   function fun(){    //定义一个名为fun的函数
     document.write("你好啊");
   }
   fun()  //调用函数
</script>

调用函数

函数名()

<script>
  function fun(){
    document.write("你好啊");
  }
  fun()   //调用函数
</script>

函数的返回值(return)

function 函数名(){
       函数内容
       return 返回值
   }

返回值可以用来输出和赋值
	let 变量名 = 函数名()
  • 没有设置返回值的情况下 返回值默认为undefined
<script>
    function fun(){
        document.write('麦当')
        return true
    }
    let result = fun()
    console.log(result)
</script>

函数的参数

  • 形参:没有具体数据 -- 定义函数
  • 实参:有具体数据 -- 调用函数
function 函数名(参数1,参数2){
	函数内容
}
函数名(数据1,数据2)

function water(name){
	console.log(`${name}同学咱们多喝岩浆 有益身体健康`)
}
water('段君虎')
water('吴昊')

function water(name,money) {
    console.log(`${name}同学咱们多喝岩浆 一杯岩浆${money}元`)
   }
water('段君虎')
water('吴昊')
// 注意:如果只传一个参数 不会报错只是会出现未定义

默认值参数

  • 在声明参数的时候就赋值
function 函数名(参数1,参数2=值){
	函数内容
}
函数名(参数)

function fun3(name,talk='多喝岩浆'){
	console.log(`我叫${name} 老师让我${talk}`)
}
fun3('大百草')	
fun3('大百草','哈哈哈')

<script>
    function fun(name,age,sex='男'){
        document.write(`${name}今年${age}岁了，性别${sex}<br>`)
        return true
    }
    fun('麦当',20)
    fun('迪亚',18,'女')
</script>

值传递和引用传递

  • 值传递就是传递值，而引用传递本质传递是地址。

匿名函数（自动执行函数）

  • 特点：只执行一次
匿名函数一般是写在最前面，或者需要前面的代码都执行完了才会运行

如果要在下方运行则有一种解决方式：
		1.在匿名函数前加!
		2.在自己最后的代码加上;

!(function(形参){
	函数内容
})(实参);

!(function(name){
	alert(`${name},今晚一起嗨皮吧`)
})('婷婷');
  • 匿名函数在最后面，需要加!和;
<script>
    function fun(name,age,sex='男'){
        document.write(`${name}今年${age}岁了，性别${sex}<br>`)
        return true
    }
    fun('麦当',20)
    fun('迪亚',18,'女')

    !(function(name){
        alert(`${name},今晚一起嗨皮吧`)
    })('麦当');
</script>
  • 匿名函数在前面什么都不需要加
<script>
    (function(name){
        alert(`${name},今晚一起嗨皮吧`)
    })('麦当')
    function fun(name,age,sex='男'){
        document.write(`${name}今年${age}岁了，性别${sex}<br>`)
        return true
    }
    fun('麦当',20)
    fun('迪亚',18,'女')
</script>

js函数属性

在JavaScript中，函数是对象，因此它们有属性和方法。虽然函数的主体（即函数内部定义的代码）通常用于执行某些操作，但函数的属性提供了有关函数本身的元信息。以下是一些JavaScript函数常见的属性：

  1. name：返回函数的名称。在ES5及以前，匿名函数的name属性通常是一个空字符串。但在ES6及以后的版本中，即使是匿名函数，其name属性也会尝试提供一个有意义的名称。

    function myFunction() {}
console.log(myFunction.name); // 输出 "myFunction"

var anonymousFunction = function() {};
console.log(anonymousFunction.name); // 在ES6+中可能会输出 "anonymous" 或类似名称

  2. length：返回函数期望的参数数量，即函数定义中参数的个数，不包括剩余参数（rest parameters）。

    function example(a, b, c) {
    // ...
}
console.log(example.length); // 输出 3

  3. prototype：对于构造函数（即通常与new关键字一起使用的函数），prototype属性是一个对象，用于实现基于原型的继承。它允许你为对象类型定义属性和方法。

    function MyConstructor() {}
MyConstructor.prototype.myMethod = function() {
    // ...
};

var obj = new MyConstructor();
obj.myMethod(); // 调用 MyConstructor.prototype.myMethod

  4. constructor：每个具有prototype属性的函数都有一个constructor属性，该属性引用该函数本身。但在原型链中，对象的constructor属性通常指向创建该对象实例的构造函数。

    function MyConstructor() {}
var obj = new MyConstructor();
console.log(obj.constructor === MyConstructor); // 输出 true

  5. [[Call]] 和 [[Construct]]：这两个属性实际上是JavaScript内部使用的，它们在规范中定义，但在JavaScript代码中不能直接访问。[[Call]]属性允许函数被调用（即使用()），而[[Construct]]属性允许函数被用作构造函数（即使用new）。

  6. toString() 和 toLocaleString()：这两个方法是所有JavaScript对象都继承自Object.prototype的方法。对于函数，toString()方法返回函数的源代码（如果可用），而toLocaleString()通常返回与toString()相同的结果。

    function greet(name) {
    console.log('Hello, ' + name);
}
console.log(greet.toString()); // 输出函数源代码

  7. apply(), call(), 和 bind()：虽然这些方法不是函数的属性，但它们是Function.prototype上的方法，因此每个函数都继承了它们。这些方法允许你以特定的this值和参数列表来调用函数。

    function greet(greeting, name) {
    console.log(greeting + ', ' + name);
}
greet.call(null, 'Hello', 'World'); // 使用 call 调用函数

  8. 其他属性：在某些环境中（如浏览器），函数对象可能还有其他属性，如caller和arguments（注意：这些属性在严格模式下是不可用的，并且在现代JavaScript中通常被认为是不安全的或不必要的）。然而，这些属性在现代JavaScript开发中很少使用，并且应该避免使用它们。

js箭头函数

递归

  • 递归是指函数自身调用自身的现象，在函数中调用函数，会形成不断压栈的过程，这样就形成了死循环，所以递归一定要有结束条件。
<script>
	function sum(n){
		if(n<=1){
			return 1
		}
		return n+sum(n-1)
	}
	alert(sum(100))
</script>

全局函数

  • 在JavaScript中，全局函数是那些可以在任何作用域中直接调用的函数，而无需特定的对象或模块引用。这些函数通常是由JavaScript引擎提供的，并且可以在全局作用域中直接访问。
    在这里插入图片描述

闭包

js作用域（js中var与let的区别）

  • let声明的变量是块级作用域（花括号里面），var是函数作用域和全局作用域

  • 注：let是可以定义全局变量，局部变量，块级作用域的变量

  • 通过var关键字声明的变量没有块级作用域，在快{}内通过var声明的变量可以在快{}之外进行访问

  • 通过let关键字声明的变量拥有块级作用域，在快{}内声明的变量无法在快{}外访问

<script>
   let age = 20
   function fun(){
    let age = 19
    document.write(age)//就近原则
   }
   document.write(age)
   fun()
</script>

 <script>
	 {
	     var x=10
	 }
	 document.write(x)
 </script>

js复习笔记

http://c.biancheng.net/view/9356.html

arguments 对象 vs 剩余参数

在JavaScript中，arguments 对象是一个类数组对象，它表示传递给函数的参数。这个对象在函数体内是可用的，并且它包含了函数被调用时传递给它的所有参数。然而，请注意，现代的JavaScript（特别是ES6及以后）通常推荐使用剩余参数（rest parameters）来替代 arguments 对象，因为剩余参数提供了更强大和灵活的语法。

下面是 arguments 对象的一些基本用法：

function exampleFunction() {
  for (var i = 0; i < arguments.length; i++) {
    document.write(arguments[i],"<br/>");
  }
}

exampleFunction('Hello', 'World', 42);
// 输出:
// Hello
// World
// 42

尽管 arguments 对象在某些情况下很有用，但它也有一些限制和缺点：

  1. 它不是一个真正的数组，因此它没有数组的方法（如 push, pop, slice 等）。但是，你可以使用 Array.prototype.slice.call(arguments) 或 Array.from(arguments) 来将其转换为真正的数组。
  2. 它不支持现代JavaScript的特性，如默认参数、解构赋值等。
  3. 在严格模式（use strict）下，arguments 对象的行为会有所不同。例如，在严格模式下，你不能设置 arguments[index] 的值来影响对应的命名参数。

由于上述原因，现代JavaScript代码中更常使用剩余参数（rest parameters）：

function exampleFunction(...args) {
  for (let arg of args) {
    document.write(arg,"<br/>");
  }
}

exampleFunction('Hello', 'World', 42);
// 输出:
// Hello
// World
// 42

在这个例子中，...args 是一个剩余参数，它将所有传递给 exampleFunction 的参数收集得到一个真正的数组中，并可以通过数组的方法来操作它。

js自定义对象

在JavaScript中，你可以通过多种方式创建自定义对象。以下是几种常见的方法：

1. 使用对象字面量

你可以直接使用对象字面量来创建一个对象。这种方法简单直接，不需要定义构造函数。

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

console.log(person.fullName()); // 输出 "John Doe"

2. 使用构造函数

构造函数是一种特殊的函数，它用于初始化新创建的对象。在JavaScript中，你可以使用new关键字和构造函数来创建对象。

function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.fullName = function() {
        return this.firstName + " " + this.lastName;
    };
}

var person1 = new Person("John", "Doe", 50, "blue");
console.log(person1.fullName()); // 输出 "John Doe"

3. 使用Object.create()方法

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__（在ES6中通过[[Prototype]]内部链接）。

var personProto = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

var person1 = Object.create(personProto);
person1.firstName = "John";
person1.lastName = "Doe";

console.log(person1.fullName()); // 输出 "John Doe"

4. 使用class关键字（ES6）

在ES6中，你可以使用class关键字来定义类，类实际上是构造函数的语法糖。

class Person {
    constructor(firstName, lastName, age, eyeColor) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.eyeColor = eyeColor;
    }

    fullName() {
        return this.firstName + " " + this.lastName;
    }
}

var person2 = new Person("Jane", "Doe", 30, "green");
console.log(person2.fullName()); // 输出 "Jane Doe"

以上都是创建自定义对象的常见方法。你可以根据自己的需求和项目环境选择最适合的方法。通常，对于简单的对象结构，使用对象字面量或构造函数就足够了。对于更复杂的情况，可能需要使用原型继承或类来组织和管理代码。

常见js内置对象

  • js的对象也是由属性和方法组成，调用方式也是通过对象.xx的方式进行访问的
  • js的内置对象类似于python的内置模块

数组array

  • 数组是一组数据的集合，在内存中是一段连续的内存空间。但是注意：JavaScript中的数组底层实现并不是连续内存空间，JavaScript这种弱数据类型语言的数组底层通过哈希映射或者字典的方式来实现，所以不是连续的。

  • 一般当数据量较大的时候，我们使用变量的话，就显得不太方便，这时候就需要一种能够存储多个数据的容器 -- 数组。当然容器不仅仅有数组，但是最常见的容器肯定就是数组了。

  • 数组的表现形式：

    • 用一对中括号[]包裹起来的数据，里面的数据用逗号隔开，数据类型不限
let 数组名 = [数据1,数据2,数据3]

let tt = ['婷婷',18,'不男不女',false]

  • 数组里的数据都是基于下标来保存的，默认从0开始

  • 可以通过数组名[下标]方式访问到对应的数据

  • 可以通过数组名.length属性，获取数组的长度

  • 通过数组名[下标]=值修改内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let tt = ['麦当',18,'不男不女',false]
        document.write(tt[0])
        tt[0]='婷婷'
        document.write(tt)
    </script>
</body>
</html>

创建数组

方法1

  • 直接使用[]
<script type="text/javascript">
	let arr = [1,2,3,"麦当"];
	for(let i in arr){
		document.write(arr[i]);
	}
</script>

方法2

  • 使用系统提供的Array类来创建
<script type="text/javascript">
	let arr = new Array();
	arr[0] = 1;
	arr[1] = "麦当";
	for(let i in arr){
		document.write(arr[i]);
	}
</script>

方法3

  • 在new创建的同时指定内容
<script type="text/javascript">
	let arr = new Array(1,3,"麦当");
	for(let i in arr){
		document.write(arr[i]);
	}
</script>

数组方法

push:在数组最后追加数据 可以追加多个数据 返回值为追加后的数据长度
	数组名.push(数据)
	数组名.push(数据1,数据2)
	
pop:删除数组最后的一个数据 返回值为删除数据
	数组名.pop()
	
unshift:在数组最前面添加数据 可以添加多个数据 返回值为追加后的数据长度
	数组名.unshift(数据)
	数组名.unshift(数据1,数据2)
	
shift:删除数组的第一个元素 返回值为被删除的元素
	数组名.shift()
	
splice:增删数据 取出数组的一部分数据
	数组名.splice(起点下标,取数据数量)
	
toSting:把数组转换为字符串 返回值为转换结果
	数组名.toString()
	
reverse:把数组的数据反转过来
	数组名.reverse()

在这里插入图片描述

<script>
    let name = ['南风过熙', '孟宇', '德红', '注定']
    // push:在数组最后追加数据 可以追加多个数据 返回值为追加后的数据长度
    name.push('山超')
    console.log(name, name.push('顾冉', '白露'))

    // pop:删除数组最后的一个数据 返回值为删除数据
    //js会把里面所有的代码执行完了在渲染
    console.log(name.pop())


    // unshift:在数组最前面添加数据 可以添加多个数据 返回值为追加后的数据长度
    console.log(name.unshift('小杨','婷婷'))

    // shift:删除数组的第一个元素 返回值为被删除的元素
    console.log(name.shift(),name)

    // splice:增删数据 取出数组的一部分数据
    let arr = [1,8,9,7,1,8,9]
    let num = arr.splice(2,3)
    console.log(arr,num)

    // toSting:把数组转换为字符串 返回值为转换结果
    let str=arr.toString()
    console.log(str,typeof str)

    // reverse:把数组的数据反转过来
    console.log(name.reverse())
</script>

二维数组

  • 二维数组的本质：数组中的元素又是数组。
<script type="text/javascript">
	let arr = [
		[1,2,3],
		[4,5,6],
		[7,8,9]
	]
	for(let i = 0;i<3;i++){
		for(let j=0;j<3;j++){
			document.write(arr[i][j]);
		}
	}
</script>

字符串(String)

声明方式：
	let str1 = 'hello'
	let str2 = new String('hello')
	这两个都是新建string对象，都是一样的
属性：
	length 获取字符串里数据个数
	字符串.length
方法：
	toUpperCase:把字符串里字母都转为大写
	toLowerCase:把字符串里字母都转为小写
	字符串.toUpperCase()
	字符串.toLowerCase()
	
	subsstring:截取字符串(切片 取头不取尾)
		字符串.subsstring(起点,终点)
	split:分割字符串 通过指定字符 把字符串分割为数组
		字符串.split('分割字符')	
	indexOf:获取指定元素的下标 有两个参数:1.要找的数据 2.起点
		字符串.indexOf('数据','起点下标')
	charCodeAt:获取字符串对应的编码
		字符串.charCodeAt(下标)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let str1 = new String('tingting')
        console.log(str1.length)

        let str2 = 'Hello Word'
        console.log(str2.toLocaleLowerCase()) //小写
        console.log(str2.toLocaleUpperCase()) //大写
        console.log(str2.charCodeAt(1))

        let str3 = '多喝热水水热喝多'
        console.log(str3.substring(1,4))//字符串切片 括号内起点 终点
        console.log(str3.split('水')) //切割 基于括号内的数据进行分割
        console.log(str3.indexOf('喝')) //找到指定数据所在的下标 只写一个值 默认从0开始
        console.log(str3.indexOf('喝',3))//找到指定数据所在的下标 起点下标3开始搜索
    </script>
</body>
</html>

Math

  • Math类中的属性和方法都是static，也就是静态的，所以不用创建对象，直接通过类名.属性名或者Math.方法() 调用即可。
属性:
	PI -->圆周率
	Math.PI

方法:
	random:生成0-1之间随机数
	ceil:数据向上取整 不管小数 整数+1
	floor:数据向下取整 不要小数 保留整数
	round:四舍五入求整
	max:获取最大值
	min:获取最小值

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        document.write(Math.PI + '<br>') //获取圆周率

        // random: 生成0 - 1之间随机数
        let num = Math.random() * 10
        // let num = parseInt(Math.random()*10)
        document.write(num)
        document.write('<br>')

        // ceil:数据向上取整 不管小数 整数 + 1
        document.write(Math.ceil(num))
        document.write('<br>')

        // floor:数据向下取整 不要小数 保留整数
        document.write(Math.floor(num))
        document.write('<br>')

        // round: 四舍五入求整
        document.write(Math.round(num))
        document.write('<br>')

        // max: 获取最大值
        console.log(Math.max(10,70))
        document.write('<br>')
        // min: 获取最小值
        console.log(Math.min(10,70))
        document.write('<br>')
    </script>
</body>

</html>

Date（日期）

  • 在开发过程中，时间和日期也是经常使用的对象，JavaScript提供Date日期对象。
日期对象顾名思义就是用来显示 时间/日期

Date() --> Date对象
let 变量名 = Date() 声明Date日期对象

getTime() -->获取格林威治时间戳 1970 1 1距离现在多少秒
getFullYear() --> 获取当前年份
getMonth() --> 获取当前月份 他计算月份0开始计算 所以要获取本月月份需要+1
getDate() -->获取日
getHours() -->获取小时
getMinutes() -->获取分钟
getSeconds() -->获取秒钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
      let d = Date() //声明Date日期对象
      document.write(d)
      let e = new Date()//创建Date日期对象
      document.write(e)
      let this_time = new Date('1970-7-7 07:07:07') //自定义时间
      document.write(this_time)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
      let d = new Date() //创建Date日期对象,获取当前时间
      document.write(d.getTime())//获取时间戳   1970 1 1距离现在多少秒
      document.write('<br>')
      document.write(d.getFullYear())//获取当前年份
      document.write('<br>')
      document.write(d.getMonth()+1)//获取当前月份 他计算月份0开始计算 所以要获取本月月份需要+1
      document.write('<br>')
      document.write(d.getDate())//获取日
      document.write('<br>')
      document.write(d.getHours())//获取小时
      document.write('<br>')
      document.write(d.getMinutes())//获取分钟
      document.write('<br>')
      document.write(d.getSeconds())//获取秒
    </script>
</body>
</html>

作业

  • 冒泡排序
<script>
        function bubbleSort(arr) {
            const len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                for (let j = 0; j < len - 1 - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        const t = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = t;
                    }
                }
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", bubbleSort(arr));
 
    </script>

在这里插入图片描述

  • 选择排序
<script>
        function selectSort(arr) {
            const len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                let min = i;
                for (let j = i + 1; j < len; j++) {
                    if (arr[j] < arr[min]) {
                        min = j;
                    }
                }
                if (min !== i) {
                    const t = arr[i];
                    arr[i] = arr[min];
                    arr[min] = t;
                }
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", selectSort(arr));
        
    </script>

在这里插入图片描述

  • 插入排序
<script>
        function insertSort(arr) {
            const len = arr.length;
            for (let i = 1; i < len; i++) {
                let current = arr[i];
                let j = i - 1;
                while (j >= 0 && arr[j] > current) {
                    arr[j + 1] = arr[j];
                    j--;
                }
                arr[j + 1] = current;
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", insertSort(arr));
 
    </script>

在这里插入图片描述

  • 驼峰转换
<script>
        function toCamelCase(str) {
            let words = ['get', 'element', 'by', 'id'];
            return words.map((word, index) => {
                if (index === 0) {
                    return word.toLowerCase();
                } else {
                    return word[0].toUpperCase() + word.slice(1);
                }
            }).join('');
        }
        
        const originalStr = "getelementbyid";
        const camelCaseStr = toCamelCase(originalStr);
        console.log(camelCaseStr);
 
    </script>

在这里插入图片描述

  • 抽奖
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 800px;
            height: 800px;
            border: 1px dashed red;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            text-align: center;
            line-height: 100px;
        }
        .container .box, .box2 {
            width: 300px;
            height: 300px;
            background: red;
            border-radius: 50%;
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }
        .box2 {
            background: deepskyblue;
        }
        #show {
            font-size: 30px;
            color: white;
            font-weight: bold;
        }
        #start {
            width: 300px;
            height: 50px;
            background: palevioletred;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" id="box">
<span id="show">
奖品
</span>
    </div>
    <button id="start" onclick="start()">开始抽奖</button>
</div>
<script type="text/javascript">
    var flag = false;
    var goods = ["香蕉", "橘子", "八宝粥", "宝马五元代金券", "电脑", "iPhoneX", "1QB", "黄钻"];
    var show = document.getElementById("show");
    var _start = document.getElementById("start");
    var _box = document.getElementById("box")
    var timer;
    function start() {
        if (!flag) {
            flag = true;
            _start.innerHTML = "停止抽奖"
            timer = setInterval(function() {
                var index = Math.floor(Math.random()*goods.length);
                var good = goods[index]
                show.innerText = good;
                _box.className = "box2";
            }, 10)
        } else {
            flag = false;
            _start.innerHTML = "开始抽奖";
            clearInterval(timer);
            _box.setAttribute("class", "box");
        }
    }
</script>
</body>
</html>

在这里插入图片描述

  • 星星点灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = test;
        function test() {
            document.onclick = start;
        }
        function start(e) {
            var x = e.pageX;
            var y = e.pageY;
            var image = document.createElement("img");
            image.src = "./img/star.jpg";
            image.style.position = "absolute";
            var w = getRandom(20,200);
            var h = getRandom(20,200);
            image.style.width = w +"px";
            image.style.top = (y - (h/2))+"px";
            image.style.left = (x - (w/2) ) +"px";
            document.body.appendChild(image);
        }
 
        function getRandom(min,max) {
            return parseInt(Math.random()*(max - min + 1)) + min;
        }
    </script>
</head>
<body style="background: #000;">
</body>
</html>

在这里插入图片描述

  • 全选反向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Select/Deselect Example</title>
    <style type="text/css">
        li {
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        function change(node) {
            var all_check = document.getElementsByClassName("all_check");
            for (var i = 0; i < all_check.length; i++) {
                if (node.checked == true) {
                    all_check[i].checked = true;
                } else {
                    all_check[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
 
<!-- 全选复选框 -->
<label>
    <input type="checkbox" onclick="change(this)"> 全选
</label>
 
<!-- 一组可以被全选/反选的复选框 -->
<label>
    <input type="checkbox" class="all_check"> 选项1
</label>
<label>
    <input type="checkbox" class="all_check"> 选项2
</label>
<label>
    <input type="checkbox" class="all_check"> 选项3
</label>
<!-- ... 其他复选框 ... -->
 
</body>
</html>

在这里插入图片描述

^～^前行者～～～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript从入门到精通（全）
码农研究僧的博客
07-22 2万+
目录前言1. 入门案例2. 语法2.1 变量2.2 函数 前言 运行在浏览器的脚本语言（目标程序以文本格式打开） 用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断 Java运行在JVM当中，JavaScript运行在浏览器的内存当中 完整的javascript由语言基础,BOM,DOM组成 1. 入门案例 script标签javascript代码必须放在script标签中 用户点击以下按钮，弹出消息框 html中嵌入javascript有三种方式 第一种方式： 事件句柄=“js代码
JavaScript从入门到精通 所有例题程序
01-09
"JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包，旨在帮助初学者通过实践掌握JavaScript的核心概念和技术。 这个资源包中的"sl"实例源程序包含了大量例题，涵盖了JavaScript的基础到进阶...
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7451
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
html5 css3 javascript从入门到精通,HTML5+CSS3+JavaScript从入门到精通（微课精编版）
weixin_42309785的博客
06-20 1616
HTML5+CSS3+JavaScript从入门到精通(微课精编版)语音编辑锁定讨论上传视频《HTML5+CSS3+JavaScript从入门到精通(微课精编版)》是2018年8月清华大学出版社出版的图书，作者是前端科技。书名HTML5+CSS3+JavaScript从入门到精通(微课精编版)作者前端科技ISBN9787302502203定价79.80元出版社清华大学出版社...
JavaScript从入门到精通(第二版) 基础知识总结
weixin_53370274的博客
11-16 1590
JavaScript从入门到精通第二版 .pdf一、基础二、数据类型三、流程控制四、函数五、js对象与数组六、函数四、函数 一、基础 language 设置所使用的脚本语言及版本 src 设置一个外部脚本文件的路径公交车 type 设置所使用的脚本语言，此属性已代替language属性 defer 此属性表示当html文档加载完毕后再执行脚本语言 设置后，浏览器不必等待脚本语言装载，这样页面加载会更快。 但当有一些脚本需要在页面加载过程中或加载完成后立即执行时， 就不需要使用defer属性。 通过
JavaScript从入门到精通(第二版) 核心知识总结
weixin_53370274的博客
11-18 733
JavaScript从入门到精通第二版 .pdf九、事件处理二、数据类型三、流程控制四、函数五、js对象与数组六、字符串与数值对象处理七、正则表达式八、程序调试与错误处理 核心知识总结。 基础知识总结可以看下这里 https://blog.csdn.net/weixin_53370274/article/details/121260382 九、事件处理 js是基于对象（object-based）语言，它的一个最基本的特征就是采用事件驱动（event-driven）。它可以使在图形界面环境下的一切操作变得简单
HTML5+CSS3+JavaScript从入门到精通（标准版）
自然语言处理
10-03 1174
作者:未来科技 出版社:中国水利水电出版社 品牌:智博尚书 出版时间:2017-05-01 HTML5+CSS3+JavaScript从入门到精通（标准版）
视频教程-JavaScript从入门到精通2016版教学视频-JavaScript
weixin_29325903的博客
05-28 337
JavaScript从入门到精通2016版教学视频 19年软件开发经验，设计...
JavaScript之路：从入门到精通【文末送书】
一键难忘的博客
03-14 4898
JavaScript之路：从入门到精通【文末送书-39】JavaScript，作为一种前端开发语言，已经成为Web开发中不可或缺的一部分。无论是网页动态交互、数据处理、还是移动应用开发，JavaScript都扮演着重要的角色。本文将带您从入门到精通，系统地学习JavaScript的各个方面。
你评论，我赠书~【TFS-CLUB社区 第9期赠书活动】〖HTML5+CSS3+JavaScript从入门到精通（微课精编版）（第2版）〗等你来拿
易编橙 · 终身成长社群，相遇已是上上签！
12-14 3195
你评论，我赠书~【TFS-CLUB社区 第9期赠书活动】〖HTML5+CSS3+JavaScript从入门到精通（微课精编版）〗等你来拿
JavaScript从入门到精通（第2版）PPT.7z
07-14
在“JavaScript从入门到精通（第2版）PPT”这套教学资料中，我们将深入探讨JavaScript的核心概念、语法特性以及实际应用。 1. **基础概念** - **变量与数据类型**：JavaScript支持基本数据类型（如字符串、数字、...
JavaScript从入门到精通（第4版）（示例源码+习题答案）.7z
07-14
"JavaScript从入门到精通（第4版）"是一本旨在帮助初学者掌握这门语言的教材，通过详细的示例源码和习题答案，让学习者能够逐步深入理解JavaScript的核心概念和实际应用。 1. **基础语法**：JavaScript的基础包括...
JAVASCRIPT从入门到精通
06-12
《JavaScript从入门到精通(视频实战版)》一共分为四篇，涵盖了JavaScript语言应用的绝大多数方面，从基本概念到具体实践、从抽象的算法到具体的页面特效、从最简单的输入/输出到最新的XML技术都进行了详细的阐述，并...
JavaScript从入门到精通 PDF电子书下载 带书签目录 完整版.part2.rar
12-12
JavaScript从入门到精通 PDF电子书下载 带书签目录 完整版.2(共5)
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 1148
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 570
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
界面控件KendoReact中文教程 - 如何创建动态进度条？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1329
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 515
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
javascript从入门到精通pdf
09-10
《JavaScript从入门到精通PDF》是一本介绍JavaScript编程语言的书籍。它从基础概念开始，逐步深入介绍了JavaScript的各种特性和用法，帮助读者从入门到精通。 这本书首先会介绍JavaScript的发展历史和它在互联网中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

^～^前行者～～～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值