js笔记详细（持续更新）

最新推荐文章于 2022-03-22 10:07:57 发布
最新推荐文章于 2022-03-22 10:07:57 发布
阅读量737 收藏 10
点赞数
分类专栏： javaweb 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45648136/article/details/110871824
版权
本文是一份详细的JavaScript学习笔记，涵盖js基础、数据类型、数组操作、字符串方法、函数、面向对象、BOM对象操作、DOM操作、事件处理等多个方面。深入讲解了js的引入方式、变量定义、条件判断、数据类型的特性，如字符串的不可变性、数组的方法如slice()、splice()，以及DOM操作如节点的添加、删除、更新等。此外，还涉及jQuery、事件流、ES6基础语法等内容，是JavaScript学习的全面指南。
摘要由CSDN通过智能技术生成

前期知识

js框架

  1. jQuery:JavaScript库，优点是简化了DOM操作，缺点是 DOM操作太频繁，影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
  2. Angular: Google 收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代，除了名字，基本就是两个东西)
  3. React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门【SX】语言;
  4. Vue: (既有模块化开发又有虚拟DOM)一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟 DOM)的优点;
  5. Axios:前端通信框架;因为 Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX通信功能;

1.js基础

可放head、body任意位置
js严格区分大小写

1.1js引入两种方式

（1）内部引入

< ! DOCTYPE html>
<htm1 1ang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--script标签内，写avascript代码-->
  <script> 
    <!--弹窗，显示hello,world-->
    aLert("hello,wor1d"); 
  </script>
</head>
  <body>< !--这里也可以存放--></ body>
</html>

（2）外部引入

< ! DOCTYPE html>
<htm1 1ang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="地址"></script>
</head>
  <body>< !--这里也可以存放--></ body>
</html>

1.2定义变量

变量类型 变量名=变量值；
例：

< ! DOCTYPE html>
<htm1 1ang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
     var number=1;
  </script>
</head>
  <body>< !--这里也可以存放--></ body>
</html>

1.3条件判断

if、else if、else
可嵌套使用
例：

< ! DOCTYPE html>
<htm1 1ang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
     var num=60;
     if(num>60 && num<70){
   
       alert("60~70")
     }else if(num>70 && num<80){
   
       alert("70~80")
     }else{
   
       alert("大于80")
     }
  </script>
</head>
  <body>< !--这里也可以存放--></ body>
</html>

1.4浏览器必备调试须知

在这里插入图片描述
elements:查看代码
console:调试js代码
source:打断点
network:抓包
application:查看网站cookie

2.数据类型

2.1数值类型

js不区分大小写
object 对象有函数和属性，符合数据类型

2.2字符串

2.2.1正常字符串使用单引号或双引号

‘abc’、“abc”

2.2.2注意转义字符

js定义反斜杠加上字符可以表示字符自身。

\
\'	撇号或单引号
\n	换行符
\r	回车符
\u####      \u4e2d   unicode字符
\x41                       ascII码字符
2.2.3多行字符串编写
//tab上面     esc下面的符号
var  msg=`你好毒你好
毒你好毒`
//若使用""与''，字符串换行写会报错

使用`` 与""、’’ 的区别：
" "与’ '不能让字符串换行写

2.2.4模板字符串
let name="dsfds";
let all=`你好呀，${name}`                //注意是多行字符串的符号：tab上面，esc下面的符号
alert(all);

结果：
在这里插入图片描述

2.2.5字符串长度
<script>
      var name="dsfds";
      alert(name.length);
    </script>

结果：
在这里插入图片描述

2.2.6字符串的可变性：不可变

【注】ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。

var   str="hello"
str="hwllo"
2.2.7大小写的转换
// 注意，大小写转换是方法，不是属性
//大写
 <script>
      var name="dsfds";
      alert(name.toUpperCase());
    </script>
    <style>

结果：
在这里插入图片描述

// 注意，大小写转换是方法，不是属性
//小写
 <script>
      var name="dsfds";
      alert(name.toLowerCase());
    </script>
    <style>
2.2.7字符串方法

（1）indexof()
返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
在这里插入图片描述
（2）lastIndexof()
【格式】字符串.lastIndexof(子串)
【返回值】子串在字符串中最后一次出现的位置，如果没有，返回-1。

var arr="abcabcabc"
alert(arr.lastIndexof("abc"))

（3）substring（）
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
【注】不包含结束位置的
在这里插入图片描述

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3))

</script>

结果：

lo world!

（4）charAt()
访问字符串的字符
【格式】字符串.charAt（下标）
【返回值】对应下标的字符
（5） search()
search(子串/正则) 参数可以是正则表达式
/abc/ig
【注】正则表达式可以添加修饰符，i代表忽略大小写，g代表全局匹配

var  arr="Abcabcabc"
alert(arr.search(/abc/ig))

（6）replace()
【格式】 字符串.replace(匹配的字符串/正则表达式，替换成的新字符串)
【返回值】替换完成以后生成的新字符串。
【注】想替换所有符合条件字符串，就必须使用正则表达式完成。
【字符串】

var str="how are  are  you"
alert(str.replace("are","old are"))

效果：
在这里插入图片描述
【正则表达式】

var str="how are are you"
alert(str.replace(/are/g,"old are"))

效果：
在这里插入图片描述
【正则表达式，不区分大小写】

var str="how Are are you"
alert(str.replace(/are/ig,"old are"))

效果：
在这里插入图片描述
（7）split()
split() 字符串分割
【格式】字符串.split(分割符，生成的数组的长度)
【返回值】通过分隔符，分割成装有子串的字符串
【注】
1.分隔符，整体
2.会分割出空字符串
3.如果分割符是空字符串""，那么字符串会分割成单个字符
4.字符串=>数组 split 数组=>字符串 join

var  str="this is a box"
var arr=str.split(" ",2);
//效果：this,is
//分隔符为两个空格
var  str="this  is a box"
var arr=str.split("  ") 
//效果：this,is a box
var arr=str.split(" ");
//效果：this,is,a,box
//分隔符为空字符串
var arr=str.split("");
//效果：t,h,i,s, ,i,s, ,a, ,b,o,x
alert(arr.join("="))
//效果：t=h=i=s= =i=s= =a= =b=o=x
alert(arr);

2.3布尔值

2.4逻辑运算

&&、||、！

2.5比较运算符

=
== 等于（坚决不用类型不一样，值一样，判断为true）
=== 绝对等于（常用类型一样，值一样，双符合才判断为true）

须知：

  • NaN===NaN,这个与所有的数值都不相等，包括自己
  • 只有通过isNaN(NaN)才能判断

浮点数问题：
尽量避免使用浮点数进行运算，存在精度问题!

2.5.1空指针

null、undefined

2.6数组

可以包含任意的数据类型
< ! DOCTYPE html>
<htm1 1ang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
  /*数组用[]或者（）都可以，但为了保证代码的可读性，建议使用[]*/
     var arr=[2,23,'hello'];
  </script>
</head>
  <body>< !--这里也可以存放--></ body>
</html>
2.6.1.长度

长度可更改

arr.length=10;

若给arr.length赋值，数组大小会发生变化，如果赋值过小，数值会丢失。

2.6.2.indexof

通过元素获得下标索引

arr.indexOf(2)
1

arr.indexOf("hello")
4
2.6.3.slice()、splice()
2.6.3.1 slice()

截取数组的一部分，返回一个新数组，类似string中的substring

arr.slice(3)
(2) [4, "hello"]

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
   
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

2.6.3.2 splice()

splice()可以完成删除、插入、替换操作
参数：
参数1 截取的开始下标
参数2 截取的数组长度
参数3 在截取的开始下标位置，我们要插入的元素， 插入的元素个数随意。
【注】会对原数组进行修改
返回值：截取掉的数组元素，组成的数组

//删除功能
arr.splice(1,1)
//插入功能
arr.splice(1,0,'yellow'，'sdsa')  //插入多个
//替换功能    先删除，再插入
arr.splice(1,1,'yellow')
2.6.4.push()、pop() 尾部
push:压入到尾部

arr
(5) [1, 2, 3, 4, "hello"]
arr.push(8,9)
7
arr
(7) [1, 2, 3, 4, "hello", 8, 9]

pop:弹出尾部

arr
(7) [1, 2, 3, 4, "hello", 8, 9]
arr.pop()
9
arr
(6) [1, 2, 3, 4, "hello", 8]
2.6.5.unshift()、shift() 头部
unshift：添加到头部

arr.unshift(1)
7
arr
(7) [1, 1, 2, 3, 4, "hello", 8]

shift：从头部弹出

arr
(6) [1, 2, 3, 4, "hello", 8]
arr.shift()
1
arr
(5) [2, 3, 4, "hello", 8]
2.6.6.排序sort()

按照升序排序
【注】是按照字符串ascii码的大小排序

var arr=["b","c","a"]
arr.sort()
(3) ["a", "b", "c"]
2.6.7.元素反转reverse()
arr
(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]
2.6.8.拼接 concat()
arr
(3) ["c", "b", "a"]
arr.concat(1,2,3)
(6) ["c", "b", "a", 1, 2, 3]
arr
(3) ["c", "b", "a"]

注：并没有把原来的数组覆盖掉，原有的数组依旧保存，只是会返回新的数组。

2.6.9.连接符 join()

打印拼接数组，使用特定的字符串连接

arr.join(2)
"c2b2a"
arr.join("-")
"c-b-a"
2.6.10.多维数组
var arr=[[1,2],[3,4],["a","b"]]
undefined
arr[0][1]
2

二维数组：
建立5*5数组，再将数组左下三角部分的值输出

  <script>
        var count=0;
        var arr=[];
        for(i=0;i<5;i++){
   
            var newarr=[];
            for(j=0;j<5;j++){
   
               newarr.push(++count);
            }
        arr.push(newarr);
        }
        
        for(var i=0;i<arr.length;i++){
   
            for(var j=0;j<=i;j++)
最低0.47元/天 解锁文章
鸵鸟吃补丁
关注
专栏目录
JS笔记
clisks的博客
08-18 314
JavaScript 一.简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码，JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 二.用法 1.代码规范 1.所有JavaScri...
js笔记
weixin_40712618的博客
10-08 453
undefined 一个变量声明了但没有初始化，那么这个变量是undefined。它与没有声明的变量是不同的。 注意：typeof对声明了但没有初始化的变量和没有声明的变量的结果都是undefined。 NULL Null表示的是一个空对象指针，用typeof来检测null的值会返回object String toString()和String() toString()可以把一个值转换为字符串，但...
js 学习笔记-持续更新
weixin_42258032的博客
01-06 180
=== 为绝对相等，即数据类型与值都必须相等。 如果把数字与字符串相加，结果将成为字符串！ “5”+5=55 var car=null+3+4; // 结果为7 var car=null+"a"; // 结果为 nulla 数字和布尔值相加，布尔值 false 转成 0，true 转成 1 var one=13; var two=true; var three=one+two; // 结果 three:14 求模 % 运算，运算结果只取决于第一个数字的正负。 -12 % -.
java前后端笔记整合（持续更新中）
02-20
有使用jpa一些问题，layui使用问题，mysql一些查询问题，js使用问题，java基础重要知识，idea关键配置
vue3学习笔记，亲测有效，持续更新
06-14
Vue3 是一款现代化的前端框架，相较于 Vue2，它带来了许多优化和新特性。这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的...记得持续更新你的笔记，不断巩固和提升你的 Vue3 开发技能。
blog:个人前端学习笔记，持续更新中~~
04-08
个人前端学习笔记，持续更新中~~ 目录： 内容介绍 一、HTML、JavaScript、TypeScript 1、 2、 3、 二、框架 1、 2、 三、 四、组件、插件、工具类 1、 2、 3、momentJS 五、浏览器 1、浏览器 六、其他 1、页面间通信...
JS入门必看全套笔记
04-11
目前在学js,这个笔记看了点，还不错的样子-JS入门必看全套笔记
JS基础笔记
12-12
前端JavaScript脚本基础，详细介绍了JavaScrip各个知识点
前端三件套笔记整理，持续更新~
最新发布
08-24
html + css + js笔记，持续更新
Js笔记大合集 最详细最全的
m0_49569569的博客
03-22 2314
Js大合集详细笔记
js 笔记
weixin_43979902的博客
09-08 174
js代码需要写到 script标签一旦引入外部标签那么内部标签就无法使用了 数据类型 1 原始数据类型（基本数据类型） number：整数，小数、nan String 字符串 bollean 布尔类型 null 一个对象为空的占位符 undefined：未定义如果一个变量没又给出始话值则会 数据的转换 可以通过 toString（）转换为字符串 可以通过类型名字加括号来改变类型例如 String（a），Number（a） 来强制转换为数字 parsInt（）将字符串转换为数字逐一字符判断字符是否是数字不能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值