JavaScript基础部分知识点总结(Part1)

编程语言

1. 编程
  • 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
  • 计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
  • ⚠️:上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等等。
2. 计算机语言
  • 计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介
  • 计算机语言的种类非常的多,总的来说可以分成机器语言汇编语言高级语言三大类。
  • 实际上计算机最终所执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础
    在这里插入图片描述
3. 编程语言
  • 可以通过类似于人类语言的”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language)。
  • 编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
  • 如今通用的编程语言有两种形式:汇编语言高级语言
    - 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英 文缩写的标识符,容易识别和记忆。
    - 高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。
    在这里插入图片描述
4. 翻译器
  • 高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器。
  • 翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。
    记住1和0。
5. 编程语言和标记语言区别
  • 编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令,这是主动的。
  • 标记语言(html)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。
6. 总结
  • 计算机可以帮助人类解决某些问题
  • 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
  • 编程语言有机器语言、汇编语言、高级语言
  • 高级语言需要一个翻译器转换为计算机识别的机器语言
  • 编程语言是主动的有很强的逻辑性

计算机基础

1. 计算机组成
2. 数据存储
  • 计算机内部使用二进制0 和1来表示数据。
  • 所有数据,包括文件、图片等最终都是以二进制数据(0 和1)的形式存放在硬盘中的。
  • 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。
  • 硬盘、内存都是保存的二进制数据。
3. 数据存储单位

bit < byte < kb < GB < TB<…

  • 位(bit):1bit 可以保存一个0 或者1(最小的存储单位)
  • 字节(Byte):1B = 8b
  • 千字节(KB):1KB = 1024B
  • 兆字节(MB):1MB = 1024KB
  • 吉字节(GB):1GB = 1024MB
  • 太字节(TB):1TB = 1024GB
4. 程序运行
  • 打开某个程序时,先从硬盘中把程序的代码加载到内存中
  • CPU执行内存中的代码
  • ⚠️:之所以要内存的一个重要原因,是因为cpu 运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)

数组的概念

1. 数组的概念
  • 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];

创建数组

1. 数组的创建方式
  • JS 中创建数组有两种方式:
    -利用 new 创建数组
    -利用数组字面量创建数组
2. 利用new创建数组
var 数组名 = new Array();
var arr = new Array();  // 创建一个新的空数组
  • 注意Array (),A 要大写
3. 利用数组字面量创建数组
// 1. 使用数组字面量方式创建空的数组
var 数组名 = [];
// 2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白', '小黑', '大黄', '瑞奇'];
  • 数组的字面量是方括号[ ]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式
4. 数组元素的类型
  • 数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
var arrStus = ['小白', 12, true, 28.9];

获取数组中的元素

1. 数组的索引
  • 索引(下标):用来访问数组元素的序号(数组下标从0 开始)。

在这里插入图片描述

  • 数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。
  • 这里的访问就是获取得到的意思
// 定义数组
var arrStus = [1, 2, 3];
// 获取数组中的第2个元素
alert(arrStus[1]);

遍历数组

1. 遍历数组
  • 遍历:就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
var arr = ['red', 'green', 'blue'];
for (var i = 0; i M arr.length; i++) {
	console.log(arrStus[i]);
}
2. 数组的长度
  • 使用“数组名.length”可以访问数组元素的数量(数组长度)。
var arrStus = [1, 2, 3];
alert(arrStus.length);   // 3
  • ⚠️:
    -此处数组的长度是数组元素的个数,不要和数组的索引号混淆。
    -当我们数组里面的元素个数发生了变化,这个length 属性跟着一起变化。
3. 代码实现
  • 请将 [“关羽”,“张飞”,“马超”,“赵云”,“黄忠”,“刘备”,“姜维”]; 数组里的元素依次打印到控制台。
var arr = [“关羽”,“张飞”,“马超”,“赵云”,“黄忠”,“刘备”,“姜维”];
// 遍历 从第一个到最后一个
for (var i = 0; i < arr.length; i++) {
	console.log( arr[i] );
}
  • 求数组[2,6,1,7, 4] 里面所有元素的和以及平均值。
int arr = [2, 6, 1, 7, 4];
// 累计所有元素的和到sum中
int sum = 0
for (int i = 0; i < arr.lenth; i++) {
	sum = sum + arr[i];  // sum += arr[i];
}
// 平均值存储到avg中
avg = sum / arr.length;
console.log('这组数的和是:' + sum);
console.log('这组数的平均值是:' + avg);
  • 求数组[2,6,1,77,52,25,7]中的最大值。
int arr = [2, 6, 1, 77, 52, 25, 7];
// 假设最大值max是数组中的第一个元素arr[0]
max = arr[0];
for (int i = 1; i < arr.length; i++) {
	// 如果数组里当前循环的元素大于 max,则保存这个元素和下标
	if (arr[i] > max) {
	max = arr[i]; // 保存数值到变量max
	}
}
  • 将数组[‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素转换为字符串’redgreenbluepink’输出
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
	str += arr[i];
}
console.log(str);
  • 将数组[‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串,并且用|或其他符号分割并输出’
    red|green|blue|pink’
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var separator = '|';
for (var i = 0; i < arr.length; i++) {
	str += arr[i] + separator;
}
console.log(str);

数组中新增元素

1. 通过修改length长度新增数组元素
  • 可以通过修改length 长度来实现数组扩容的目的
  • length 属性是可读写的
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
  • 其中索引号是4,5,6 的空间没有给值,就是声明变量未给值,默认值就是
    undefined。
    在这里插入图片描述
2. 通过修改数组索引新增数组元素
  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值,否则会覆盖掉以前的数据
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);
3. 代码实现
  • 新建一个数组,里面存放10个整数(1~10),要求使用循环追加的方式输出:
    [1,2,3,4,5,6,7,8,9,10]
var arr = [];
for (var i = 0; i < 10; i++) {
	arr[i] = i + 1;
}
console.log(arr);
  • 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于10的元素选出来,放入新数组。
var arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr2 = [];
// 定义一个变量用来计算新数组的索引号
var j = 0;
for (var i = 0; i < arr1.length; i++) {
	if (arr1[i] >= 10) {
	arr2[j] = arr1[i];
	j++;
	}
}
console.log(arr2);

数组案例

1. 代码实现
  • 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的0 去掉后,形成一个不包含0 的新数组。
var arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arrNew = [];
for (var i = 0; i < arr1.length; i++) {
	if (arr1[i] != 0) {
	arrNew[arrNew.length] = arr1[i];
	}
}
console.log(arrNew);
  • 将数组[‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放并输出[‘purple’, ‘pink’, ‘blue’, ‘green’, ‘red’]。
var arr1 = ['red', 'green', 'blue', 'pink', 'purple'];
var arrNew = [];
for (var i = 0; i < arr1.length; i++) {
	arrNew[i] = arr1[arr1.length - 1 - i];
}
console.log(arrNew);
  • 冒泡排序:将数组[5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序,输出:1,2,3,4,5
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. 内置对象
  • JavaScript 中的对象分为3种:自定义对象、内置对象、浏览器对象
  • 前面两种对象是JS 基础内容,属于ECMAScript;第三个浏览器对象属于我们JS 独有的,我们JS API 讲解
  • 内置对象就是指JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
  • 内置对象最大的优点就是帮助我们快速开发
  • JavaScript 提供了多个内置对象:Math、Date、Array、String等

查文档

1. MDN
  • 学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
  • Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括HTML、CSS 和万维网及HTML5 应用的API。
  • MDN: https://developer.mozilla.org/zh-CN/
2. 如何学习对象中的方法
  • 查阅该方法的功能
  • 查看里面参数的意义和类型
  • 查看返回值的意义和类型
  • 通过demo进行测试

Math对象

1. Math概述
  • Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math 中的成员。
Math.PI                   // 圆周率
Math.floor()              // 向下取整
Math.ceil()              // 向上取整
Math.round()             // 四舍五入版就近取整 注意-3.5结果是-3
Math.abs()               // 绝对值
Math.max() / Math.min()  // 求最大和最小值
  • ⚠️:上面的方法必须带括号
2. 随机数方法random()
  • random() 方法可以随机返回一个小数,其取值范围是[0,1),左闭右开0 <= x < 1
  • 得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

日期对象

1. Date概述
  • Date 对象和Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
  • Date 实例用来处理日期和时间
2. Date()方法的使用
  • 获取当前时间必须实例化
var now = new Date();
console.log(now);
  • Date()构造函数的参数
    -如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(‘2019-5-1’)或者new Date(‘2019/5/1’)
    -如果Date()不写参数,就返回当前时间
    -如果Date()里面写参数,就返回括号里面输入的时间
3. 日期格式化
方法名说明代码示例
getFullYear()获取当年dObj.getFullYear()
getMonth()获取当月 (0-11)dobj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取星期几(周日0到周六6)dobj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前分钟dObj.getMinutes()
getSeconds()获取当前秒钟dobj.getSeconds()
4. 获取日期的总的毫秒形式
  • Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数
  • 我们经常利用总的毫秒数来计算时间,因为它更精确
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();

数组对象

1. 数组对象的创建
  • 创建数组对象的两种方式
    -字面量方式
    -new Array()
2. 检测是否为数组
  • instanceof 运算符,可以判断一个对象是否属于某种类型
  • Array.isArray()用于判断一个对象是否为数组,isArray() 是HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
3. 添加删除数组元素的方法
方法名说明返回值
push(参数1…)尾部添加一个或多个元素,注意修改原数组并返回新的长度
pop()删除数组最后一个元素,数组长度减1,无参数、修改原数组返回它删除的元素的值
unshift(参数1…)向数组的开头添加一个或更多元素,注意修改原数组并返回新的长度
shift()删除数组的第一个元素,数组长度减1,无参数、修改原数组并返回第一个元素的值
4. 数组排序
方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序,无参数该方法会改变原来的数组 返回新数组
sort()对数组的元素进行排序该方法会改变原来的数组 返回新数组
var arr = [1, 64, 9, 6];
arr.sort(function(a, b)) {
	return b - a;  //降a序
	// return a - b;  // 升序
};
console.log(arr);
5. 数组索引方法
方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号,如果不存在,则返回-1。
lastIndexOf()在数组中查找给定元素的最后一个索引如果存在返回索引号,如果不存在,则返回-1。
6. 数组转换为字符串
方法名说明返回值
toString()把数组转换成字符串,逗号分隔每一项返回一个字符串
join(分隔符)方法用于把数组中的所有元素转换为一个字符串返回一个字符串
7. 课下查询
方法名说明返回值
concat()连接两个或多个数组,不影响原数组新的数组
slice()数组截取slice(begin, end)返回被截取项目的新数组
splice()数组删除splice(第几个开始, 要删除个数)返回被删除元素的新数组 注意这个会影响原数组

字符串对象

1. 基本包装类型
  • 为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和Boolean。
  • 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
// 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. 根据字符返回位置
  • 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
方法名说明返回值
indexOf(要查找的字符, 开始的位置)返回指定内容在原字符串中的位置,如果找不到就返回-1,开始的位置是索引号索引号或-1
lastIndexOf(要查找的字符)从后往前找,只找第一个匹配的索引号或-1
4. 根据位置返回字符‼️‼️‼️
方法名说明使用示例
charAt(index)返回指定位置的字符(index 为字符串的索引号)str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码(index 为索引号)str.charCodeAt(0)
str[index]获取指定位置处字符HTML5, IE8+支持,与charAt()等效

在这里插入图片描述

5. 字符串操作方法‼️‼️‼️
方法名说明注意事项
concat(str1, str2, str3, …)concat方法用于连接两个或多个字符串,拼接字符串,等效于+,+更常用
substr(start, length)从start位置开始(索引号),length取的个数,重点记住这个
slice(start, end)从start位置开始,截取到end位置,end取不到(他们俩都是索引号)基本和slice相同,但是不接受负值
substring(start, end)从start位置开始,截取到end位置,end取不到(索引号)基本和slice相同 但是不接受负值
6. replace()方法
  • replace() 方法用于在字符串中用一些字符替换另一些字符。
  • 其使用格式如下:
replace(被替换的字符串,要替换为的字符串);
7. split()方法
  • split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
  • 例如下面代码:
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组[a, b, c, d]
8. 课下查阅
  • toUpperCase() //转换大写
  • toLowerCase() //转换小写
  • 31
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值