狂神说Js视频学习笔记

最新推荐文章于 2024-01-08 19:10:10 发布
最新推荐文章于 2024-01-08 19:10:10 发布
阅读量134 收藏 1
点赞数
分类专栏： JavaScript笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41219363/article/details/118054096
版权

1. 什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

1.2 历史

JavaScript的起源故事

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本~

但大部分浏览器还只停留在支持es5代码上！

开发环境——线上环境，版本不一致

关键字、变脸、流程控制、对象、数组、结构

2. 快速入门

2.1 引入JavaScript

1> 内部标签

<script>
	//...
</script>

2> 外部引入

abs.js

//....

test.html

<script src="abs.js"></script>

测试代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- script标签内， 写JavaScript代码 -->
    <!-- <script>
        alert('hello,world');
    </script> -->
    
    
    <!-- 外部引入 -->
    <!-- 注意：script，必须成对出现 -->
    <script src="js/qs.js"></script>

    
    <!-- 不用显示定义type，也默认就是javascript -->
    <script type="text/javascript">
    
    </script>

</head>

<body>


<!-- 这里也可以存放 -->
</body>
</html>

2.2 基本语法入门

<!-- JavaScript严格区分大小写！ -->
<script>
	// 1. 定义变量	变量类型		变量名 = 变量值;
	var num = 1;
	var score = "qinjiang";
	// 2. 条件控制
	if(score>60 && score<70){
		alert('60~70');
	}else if(score>70 && score<80){
		alert('70~80');
	}else{
		alert('other');

	// console.log(score) 在浏览器的控制台打印变量！	System.out.println(score)
	
	/*
		alt + shift + a 多行注释
	*/

浏览器必备调试须知：
在这里插入图片描述

2.3 数据类型

数值，文本，图形，音频，视频…

2.3.1 变量

var 王者荣耀 = ‘倔强青铜’;

2.3.1 number

js不区分小数和整数，Number

123		//  整数123
123.1		// 浮点数123.1
1.123e3  		// 科学计数法
-99		// 复数
NaN		// not a number
Infinity	// 表示无限大

2.3.2 字符串（String）

‘abc’ “abc”

  • 正常字符串使用单引号或者双引号包裹
  • 注意转义字符 \
\'			// \'
\n			// n
\t
\u4e2d	\u#### 	Unicode字符
\x41		Asc11字符
  • 多行字符串编写
//反引号
var msg = 
	`hello
	world
	你好ya
	'你好'`
  • 模板字符串
// 反引号
let name = 'qinjiang';
let age = 3;
let msg = `你好呀，${name}`;  // 你好呀，qinjiang
  • 字符串长度
str.length
  • 字符串的可变性：不可变
    在这里插入图片描述
  • 大小写转换
// 注意： 这里是方法，不是属性
student.toUpperCase();
student.toLowerCase();
  • 查询字符首次出现的位置student.indexOf('t')
  • substring
// [a,b)
student.substring(1); // 从第一个字符串截取到最后一个字符串
student.substring(1,3)  // 从1到3  [1,3)

### 2.3.3 布尔值（Boolean）
true  ，  false
### 2.3.4 逻辑运算
```js
&&	两个都为真，结果为真
||	一个为真，结果为真
!	真即假，假即真

2.3.5 比较运算符

= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个Js缺陷，坚持不要使用 == 比较
须知：

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

浮点数问题：

console.log((1/3) === (1-2/3));		// false

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

console.log(Math.abs(1/3-(1-2/3))<0.000000001);		// true

2.3.6 null、undefined

  • null 空
  • undefined 未定义

2.3.7 数组（array）

Java的数值必须是相同类型的对象~，Js中不需要这样！

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,'hello',null,true];
new Array(1,2,3,4,'hello');
取数组下标：如果越界了，就会```undefined```

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0]
arr[0] = 1
  • 长度
arr.length

注意：假如给arr.length 赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失

  • indexOf，通过元素获取下标索引
arr.indexOf(2)  // 1

字符串的‘1’和数字1是不同的

  • slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
  • push，pop
push：压入到数组尾部
pop： 弹出尾部的一个元素
  • unshift() ，shift() 头部
unshift：压入到头部
shift：弹出头部的一个元素
  • 排序sort()
['b','c','a']
arr.sort()
['a','b','c']
  • 元素反转 reverse()
['a','b','c']
arr.reverse();
['c','b','a']
  • concat() 拼接数组
['c','b','a']
arr.concat([1,2,3]);
['c','b','a',1,2,3];
arr
['c','b','a']

注意：concat() 并没有修改数组，只是会返回一个新的数组

  • 连接符 jion()
    打印拼接数组，使用特定的字符串连接
['c','b','a']
arr.jion('-');
'c-b-a'
  • 多维数组
var arr = [[1,2],[3,4],['5','6']]'
console.log(arr[1][1]); // 4

数组：存储数据 （如何存，如何取，方法都可以自己实现！）

2.3.8 对象（Object）

若干个键值对

var 对象名{
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值
}

// 定义了一个person对象，它有四个属性！
var person = {
	name: 'kuangshen',
	age: 3,
	email: '24736743@qq.com',
	score: 0
}

Js中的对象，（……）表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。
对象是大括号，数组是中括号

// 每个属性之间使用逗号隔开 最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {
	name:'qinjiang',
	age:3,
	tags:['js','java','web','...']
}

取对象的值：

person.name
> 'qinjiang'
person.age
> 3

JavaScript中的所有的键都是字符串，值是任意对象！

  • 对象赋值
person.name = 'qinjiang'  // qinjiang
person.name;  // qinjiang
- **使用一个不存在的对象属性，不会报错！**
```js
person.haha;   // undefined
  • 动态的删减属性，通过delete删除对象的属性
delete person.name
true
person
- **动态的添加，直接给新的属性添加值即可**
```js
person.haha = 'haha'
'haha'
person
  • 判断属性值是否在这个对象中！ xxx in xxx！
'age' in person
true

'toString' in person
true
  • 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
## 2.4 严格检查模式
```js
<!-- 前提：IEDA 需要设置支持ES6语法
'use strict';  严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量都建议使用 let 去定义~
-->
<script>
	'use strict';
	// 全局变量
	i = 1; // undefined;
	// ES6 let
	let i = 1;
	console.log(i);  // 1

2.3.9 流程控制

  • 1> if判断
var age = 3;
if( age>3 ){ 		// 第一个判断
	alert('haha');
}else if(age <5){		// 第二个判断
	alert('kuwa~');
}else{		// 否则，，
	alert('kuwa');
}
  • 2> 循环
    while 循环，避免程序死循环
   while(age<100){
   	age = age + 1;
   	console.log(age);
   }

   do{
   	age = age +1;
   	console.log(age)
   }while(age<10)

for 循环

	for ( let i = 0; i<100; i++){
		console.log(i);
	}

forEach 循环

es 5.1 引入

	var age = [2,413,12,45,67,8,90];
	age.forEach(function (value){
		console.log(value);
	)}

forIn 循环

//for(var index in object){}
for(var key in age){
	if(age.hasOwnProperty(key)){
		console.log('存在');
		console.log(age[key]);
	}
}

2.3.10 Map 和 Set

ES6 新特性

  • Map:
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); // 通过key获得value
map.set('admin',123456); // 新增或修改
map.delete('tom'); // 删除
console.log(name);
console.log(map);
  • Set: 无序不重复的集合
var set = new Set([3,1,1,1,1]); // set可以去重
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素！

2.3.11 iterator

ES6 新特性
使用 iterator 来遍历迭代 Map，Set！

  • 遍历数组
// 通过 for of /
	var arr = [3,4,5];
	for (var x of arr){
		console.log(x)
	}
  • 遍历map
	var map = new Map([['tom',100],['jack',90],['haha',80]]);
	for(var i of map){
		console.log(i)
	}
  • 遍历set
var set = new Set([5,6,7]);
for( let x of set ) {
	console.log(x);
}

3. 函数

3.1 定义函数

定义方式一
绝对值函数

	public 返回值类型  方法名(){
		return 返回值;
	}

	function abs(x){
		if(x>=0){
			return x;
		}else{
			return -x;
		}
	}

一旦执行到 return 代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x){
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}

function(x){……} 这是一个匿名函数，但是可以把结果赋值给 abs，通过abs就可以调用函数！

调用函数

abs(10) //10
abs(-10) //10

参数问题： JavaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？假设不存在参数，如何规避

var abs = function(x){
if(type x !== 'number'){
	throw 'Not a Number';
}
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}

arguments

arguments 是一个JS免费赠送的关键字
代表，传递进来的所有参数，是一个数组

    var abs = function (x) {
        console.log('x=>' + x);
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

在这里插入图片描述
问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

if (arguments.length>2){
	for (var i = 2; i<arguments.length;i++){
		// ....
	}
}

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数

    function aaa(a,b,...rest){
        console.log('a=>'+a);
        console.log('b=>'+b);
        console.log(rest);
    }

rest 参数只能写在后面，必须使用…标识
在这里插入图片描述

3.2 变量的作用域

在JavaScript中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~ （闭包）

function aj(){
        var x = 1;
        x +=1;
    }
    x + = 2;

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

    function aj1(){
        var x = 1;
        x +=1;
    }
    function aj2(){
        var x = 1;
        x +=1;
    }

内部函数可以访问外部函数的成员，反之则不行

    function aj1() {
        var x = 1;

        function aj2() {
            var y = x + 1;
        }
        var z = y + 1; // y is not defined
    }

假设，内部函数和外部函数的变量，重名！

    function aj1() {
        var x = 1;

        function aj2() {
            var y = 'A';
            console.log('inner'+x); //innerA
        }
        console.log('outer'+y); // outer1
        aj2();
    }
    aj1();

假设在JavaScript 中 函数查找变量从自身函数开始~，由‘内’向‘外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function aj(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

结果： xundefined
说明：js执行引擎，自动提升了y的声明,但是不会提升变量y的赋值；

function aj(){
    var y;
    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

    function aj() {
        var x = 1;
        y = x + 1;
        z, i, a; // undefined

        // 之后随意用
    }
    aj();

全局函数

    // 全局变量
    var x = 1;
    function f() {
        console.log(x);
    }
    f();
    console.log(x);

全局对象window

    var x = 'xxx';
    alert(x);
    alert(window.x); //默认所有的全局变量，都会自动绑定在 window对象下

alert() 这个函数本身也是一个window的变量

    var x = 'xxx';
    window.alert(x);
    var old_alert = window.alert;
    // old_alert(x);
    window.alert = function(){
        
    };
    // 发现alert()失效了
    window.alert(123);

    // 恢复
    window.alert = old_alert;
    window.alert(456);

JavaScript 实际上只有一个全局作用域， 任何变量 （函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceEror

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如何能够减少冲突？

    // 唯一全局变量
    var KuangApp = {};

    // 定义全局变量
    KuangApp.name = 'kuangshen';
    kuangApp.add = function (a, b) {
        return a + b;
    }

把自己的代码全部放入自己定义的唯一的空间名字中，降低全局命名冲突的问题~

局部作用域 let

	function aaa() {
        for (var i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i + 1); // i 出了这个作用域还可以使用
    }
    aaa();

ES6 let 关键字 ，解决局部作用域冲突问题

    function aaa() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i + 1); // Uncaught ReferenceError:i is not defined
    }
    aaa();

建议使用let去定义局部作用域的变量；

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

	var PI = '3.14';
	console.log(PI);
	PI = '213'; // 可以改变这个值
	console.log(PI);

在ES6引入了常量关键字const

	const PI = '3.14'; // 只读变量
	console.log(PI);
	PI = '123';
	console.log(PI); //TypeError: Assignment to constant variable.

下期视频

没有脑洞的网虫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
狂神说js学习笔记
saber_liluo的博客
03-16 562
0、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 0.1前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScript（行为）：是一种
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
狂神说老师JavaScript的学习笔记
dorabimon的博客
07-27 3491
文章目录1、数据类型1.1运算符1.2、数组1.3、数组方法1.4、对象1.5、流程控制1.6、Map和Set (ES6的新特性)1.7、遍历与迭代器遍历2、函数2.1定义函数3、变量的作用域3、方法4、内部对象4.1、Date4.2、json对象5、面向对象编程5.1、面向对象原型继承5.2、面向对象class继承6、操作BOM对象（重点）7、操作DOM对象(重点)7.1、获得dom节点7.2、更新节点7.3、删除节点7.4、插入节点7.5、在js中创建一个新的节点追加7.6、在前面插入节点：insert
狂神说JavaScript——学习笔记
qq_40755283的博客
04-12 307
1、什么是JavaScript 1.1、概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 10天~ 一个合格的后端人员，必须要精通JavaScript 1.2、历史 ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上！ 开发环境—线上环境，版本不一致 2、快速入门 2.1、引入JavaScript 1、内部标签 <script> //...... </scri
Elasticsearch学习笔记-狂神说
qq_42760375的博客
09-08 412
Elaticsearch，简称为es，es是一个开源的高扩展的分布式全文检索引擎，它可以近乎实时的存储、检索数据;本身扩展性很好，可以扩展到上百台服务器，处理PB级别(大数据时代）的数据。es也使用java开发并使用Lucene作为其核心来实现所有索引和搜索的功能，但是它的目的是通过简单的RESTful API来隐藏Lucene的复杂性，从而让全文搜索变得简单。
【笔记】【JavaScript】狂神说JavaScript-学习笔记
Code for fun !!! 【博客主要为本人服务】
03-22 2588
前言 感谢狂神！！！ 此笔记用于记录本人在学习中还有不懂以及值得注意的地方。以方便日后的工作与学习。 笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。 部分内容不完整，请读者结合视频观看效果更佳。 注意 此笔记并非完整笔记 需要完整笔记的同学可以移步到【狂神说Java】JavaScript学习笔记 再次感谢狂神！！！ 跟对人，做对事。——狂神说
狂神Javascript学习笔记
qq_44758926的博客
04-10 1339
JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须要精通JavaScript 入门 引入JavaScript 内部标签 <script> alert("Hello World！"); </script> 外部引入 <script src="js/keleJs.js"></script> 基本语法入门 定义： var score= 1; 条件控制： if(){ }el
狂神说Elastic search学习笔记
weixin_48412846的博客
09-08 1086
狂神Elastic search笔记简介安装es安装安装可视化界面下载kibanaes核心概念理解分片（倒排索引）ik分词器插件安装 视频链接： 简介 lucene是一套信息检索工具包！jar包，不包含搜索引擎系统 包含：索引结构，读写索引的工具！排序，搜索规则工具类 lucene和es的关系： es是基于lucene做的一些封装和增强 es是一个开源的高扩展的分布式的全文检索引擎，它可以近乎实时的存储，检索数据，本身扩展性好，可以扩展到上百台服务器，处理pb（大数据时代）级别的数据，它通过简单的REST
狂神说Nginx学习笔记
qq_40492693的博客
04-27 1101
Nginx的快速入门
遇见狂神说 Spring MVC 学习笔记（完整笔记+代码）
记录一名在读研究生的学习笔记、感悟、开发产物
01-08 944
狂神课程 Spring MVC 完整学习笔记（附详细代码和操作）
狂神说各种学习视频配套笔记
05-30
【狂神说各种学习视频配套笔记】是一套全面覆盖了多个IT技术领域的学习资源，旨在帮助初学者和进阶者提升编程技能。这套笔记包含了Java基础、前端开发、数据库管理、Web框架、分布式系统以及开发工具等多个方面，...
狂神说Docker容器学习笔记全部.pdf
12-22
狂神说Docker容器学习笔记全
狂神说笔记内容.zip
08-15
【狂神说Java入门笔记】是一份针对初学者的详细教程资源，主要涵盖了Java语言的基础知识，旨在帮助学习者从零开始掌握Java编程。压缩包内的"JavaSE：Java入门.pdf"是主体教程文档，而"说明.txt"则包含了一些关于文件...
遇见狂神说GIt 学习笔记
09-26
打开md文件，优先推荐使用typora
基于Springboot和Vue的数码论坛系统设计与实现-源码 数码论坛系统设计与实现代码（高分毕设）
最新发布
07-24
数码论坛系统设计与实现-源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
java程序设计—JAVA局域网飞鸽传书软件设计与实现(源代码+论文)43.rar
07-24
java程序设计，可供正在学习的同学研究参考。
年终总结汇报PPT模板(20)三套材料.pptx
07-24
年终总结汇报PPT模板(20)三套材料.pptx
ListView侧边A-Z快速定位导航.zip
07-24
ListView侧边A-Z快速定位导航
狂神说javascript笔记
09-01
狂神说是一位知名的程序员教育者，他在CSDN上分享了大量关于JavaScript的笔记和教程。他的JavaScript笔记涵盖了从基础语法到...如果你想学习JavaScript，我推荐你去CSDN搜索狂神说的JavaScript笔记，相信你会收获很多。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值