JS-基础笔记二次总结(B站跟过黑马的同学看过来)
这里都是基于我在B站跟过的黑马教学视频上的PPT进行二次总结的笔记,结合了自己平时的加注和记录。欢迎跟过黑马视频的小伙伴们一起来复习Pink老师授予我们的快乐知识,在此也非常感谢黑马机构,让我有系统的资料对前端技术有了整体性的学习。这里也非常适合新手对JS有一个非常系统的了解与整体认识。那么,开始吧。
一、初识JavaScript
1、JavaScript的作用
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
2、HTML/CSS/JS 的关系
- HTML 决定网页结构和内容( 决定看到什么 ),相当 于人的身体
- CSS 决定网页呈现给用户的模样( 决定好不好看 ), 相当于给人穿衣服、化妆
实现业务逻辑和页面控制( 决定功能 ),相当 于人的各种动作
3、浏览器执行 JS 简介
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
- JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
4、JS的组成
(1)ECMAScript
ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
(2)DOM ——文档对象模型
(3)BOM ——浏览器对象模型
5、JavaScript输入输出语句
二、变量
1、变量在使用时分为两步: 1. 声明变量 2. 赋值。变量是内存里的一块空间,用来存储数据。
2.声明一个变量并赋值, 我们称之为变量的初始化。声明变量本质是去内存申请空间。
3.同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;
4.声明变量特殊情况
5.变量命名规范
三、数据类型
1、为什么需要数据类型
2、变量的数据类型
var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。 JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型。
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
3、数据类型的分类
1.简单数据类型 :Number,String,Boolean,Undefined,Null
2.复杂数据类型 :object
(2)数字型 Number
1.数字型范围:
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
4、获取检测变量的数据类型
5、数据类型转换
扩展:解释型语言和编译型语言
四、运算符
1、短路运算(逻辑中断)
五、流程控制
1、三元表达式
2、分支流程控制 switch 语句
1.语法结构
switch( 表达式 ){ case value1:// 表达式 等于 value1 时要执行的代码break;case value2:// 表达式 等于 value2 时要执行的代码break;default:// 表达式 不等于任何一个 value 时要执行的代码
}
3、switch 语句和 if else if 语句的区别
六、循环
1.使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
2.先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码
3.break 关键字用于立即跳出整个循环(循环结束)。
for (var i = 1; i <= 5; i++) {if (i == 3) {break; // 直接退出整个for 循环,跳到整个for下面的语句}console.log('我正在吃第' + i + '个包子呢');}
4.断点调试流程:
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。3、摁下F11,程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
七、数组
1、数组的概念
2、创建数组
(1)利用 new 创建数组
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
3、遍历数组
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){console.log(arrStus[i]);
}
(2)数组的长度:使用“数组名.length”可以访问数组元素的数量(数组长度)。
4、数组中新增元素
(1)通过修改 length 长度新增数组元素
(2)通过修改数组索引新增数组元素
5、数组案例
(1)删除指定数组元素
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空数组的默认的长度为 0
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {// 找出大于 0 的数if (arr[i] != 0) {// 给新数组// 每次存入一个值,newArr长度都会 +1 newArr[newArr.length] = arr[i];} }
console.log(newArr);
(2)翻转数组
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {// newArr 是接收方,arr 是输送方newArr[i] = arr[arr.length - i - 1];
}
console.log(newArr);
(3)冒泡排序
var arr = [5, 4, 3, 2, 1];for (var i = 0; i < arr.length - 1; i++) {for (var j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}
console.log(arr);
八、函数
1、概念
2、函数的使用
1. 自定义函数方式(命名函数)
因为有名字,所以也被称为命名函数 。调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
// 声明定义方式
function fn() {...}
// 调用
fn();
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
(2)调用函数
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
/* 计算1-100之间值的函数
*/
// 声明函数
function getSum(){var sumNum = 0;// 准备一个变量,保存数字和for (var i = 1; i <= 100; i++) {sumNum += i;// 把每个数值 都累加 到变量中}alert(sumNum);
}
// 调用函数
getSum();
3、函数的参数
(1)形参和实参
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
(2)函数形参和实参个数不匹配问题
4、函数的返回值
(1)return 语句
// 声明函数
function 函数名(){...return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
//定义一个获取数组中最大数的函数
function getMaxFromArr(numArray){var maxNum = 0;for(var i =0;i < numArray.length;i++){if(numArray[i] > maxNum){maxNum = numArray[i];}}return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum); // 这个实参是个数组
alert('最大值为:'+ maxN);
(3)break ,continue ,return 的区别
5、arguments的使用
function maxValue() {var max = arguments[0];for (var i = 0; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));
6、函数案例
(1)利用函数封装方式,翻转任意一个数组
function reverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
(2)利用函数封装方式,对数组排序 -- 冒泡排序
function sort(arr) {for (var i = 0; i < arr.length - 1; i++) {for (var j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}return arr;
}
(3)函数可以调用另外一个函数
因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。
function fn1() {console.log(111);fn2();console.log('fn1');
}
function fn2() {console.log(222);console.log('fn2');
}
fn1();
九、作用域
1、全局作用域
2、局部作用域 (函数作用域)
作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
3、全局变量和局部变量的区别
4、作用域链
十、预解析
1、概念
2、变量预解析(变量提升)
3、函数预解析(函数提升)
十一、对象
1、什么是对象
2、为什么需要对象
3、创建对象的三种方式
(1)利用字面量创建对象
var star = {name : 'pink',age : 18,sex : '男',sayHi : function(){alert('大家好啊~');}
};
2.对象的调用
(2)利用new Object创建对象
(3)利用构造函数创建对象
(4)构造函数和对象
4、new关键字
5、遍历对象属性
for (变量 in 对象名字) {
// 在此执行代码
}for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
6、小结
十二、内置对象
1、内置对象
2、Math
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
随机数方法 random():可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1
得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
3、Date
var now = new Date();
console.log(now);
2. Date() 构造函数的参数
4、数组对象
(1)检测是否为数组
(3)数组排序
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {return b - a; // 降a序// return a - b; // 升序
});
console.log(arr);
(4)数组索引方法
(5)数组转换为字符串
(6)补充
5、字符串对象
(1)基本包装类型
基本数据类型包装为复杂数据类型,其执行过程如下 :
// 下面代码有什么问题?
var str = 'andy';
console.log(str.length);// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
(2)字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
// 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间
(3)根据字符返回位置
(4)根据位置返回字符(重点)
(5)字符串操作方法(重点)
(6)replace()方法
(8)补充
JS-基础笔记二次总结(B站跟过黑马的同学看过来)相关推荐
- Node.js基础笔记
Node.js基础笔记 1. NodeJS入门基础 1.1 NodeJS 介绍 1.1.1 NodeJS 是什么 1.1.2 NodeJS 的优势 1.1.3 NodeJS 的技术特性 1.1.4 N ...
- (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】
JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...
- auto.js基础笔记
auto.js基础笔记 控件的描述查找与点击 找控件的方法 text("文字") ==> 找"文字" 控件 textContains("文字&q ...
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- Vue.js 学习笔记 二,一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
- MATLAB 基础笔记(二):常用矩阵的生成
笔记二是简单介绍常用矩阵的生成 目录 笔记二是简单介绍常用矩阵的生成 1.零矩阵的生成 2.单位矩阵的生成 3.全1矩阵的生成 4.随机整数向量生成 5.生成指定对角线元素矩阵 6.生成对角矩阵 7. ...
- JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识 一.JavaScript 变量 二.JavaScript 的输出 三.JavaScript 运算符 四.结语 一.JavaScript 变量 变量是指在程序运行过程中, ...
- HTML/css/js 基础笔记
网站的建站流程 页面图例 网页的结构 WEB标准 WEB标准是网页制作的标准,它不是一个标准,它是根据网页的不同组成部分生成的一系列标准.这些标准大部分由W3C起草发布,也有部分标准由ECMA起草发布 ...
- 面向对象编程(OOP)----BLUE大师JS课堂笔记(二)
一,把面向过程的程序改写成面向对象的程序 1.前提 所有的程序都在onload里面 2.改写 不能函数嵌套,可以全局变量 3.onload-------------------->构造函 ...
最新文章
- 时间复杂度的计算方法
- 对于flat_interface与public_interface的理解
- AnyHand——普通摄像头静态手势识别库
- 统一代码风格工具 editorConfig
- java如何记录查看记录_Java如何检查消息是否可记录?
- Loj#6039-「雅礼集训 2017 Day5」珠宝【四边形不等式,dp】
- jQuery表单验证的几种方法
- T-SQL LIKE子句 模糊查询
- 异步、多线程、任务、并行编程之一:选择合适的多线程模型
- mysql设置user权限允许远程_mysql 用户及权限管理 允许远程连接
- uniapp小程序webSocket封装、断线重连、心跳检测
- fdfs手动上传下载
- Linux文件编辑常用命令
- matlab 隐函数求偏导数,隐函数求偏导数的方法.PDF
- 基于51单片机——60秒倒计时时钟
- 你的计算机无法启动怎么回事,电脑无法正常启动如何做系统-“你的电脑未能正确启动”的解决方法...
- 《宏观经济学》 学习笔记
- 半导体封装行业晶圆划片机的切割良率如何把控?
- 同时收到多家公司offer,怎样选择?
- Android 仿微信语音录音小控件
热门文章
- html反编译pug,学html5不得不说的html5shiv.js和pug
- git linux 文件名乱码,git 中文文件名乱码
- GoEXP规则变更通知 l 信创额外奖励活动
- FreeBSD的优缺点分析(转载)
- matlab stract结构_科学网—[MATLAB]方便快捷读取结构体里数个结构体内的数据 - 胡振东的博文...
- oracle11完全卸载
- 2018-4-18《给孩子讲量子力学》
- 数学建模 --- 绘制三维图
- houdini视图切换快捷键
- 福建省计算机会考题目,福建信息技术会考历年试题(——).pdf