本文已参与「新人创作礼」活动，一起开启掘金创作之路
读书使人充实，讨论使人机智，笔记使人准确...。凡有所学，皆成性格。 ———— （英国）培根
JavaScript简介
graph TD
A(JavaScript)-->ECMAScript-->JavaScript基础
A-->DOM-->Web-APIs
A-->BOM-->Web-APIs
DOM：页面文档对象模型
BOM：浏览器对象模型
JavaScript输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
关于变量
变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间（声明一个变量开辟一块新的空间）
声明一个变量并赋值，我们称之为==变量的初始化==
var age = 18;
var age = 'pink老师';
变量案例弹出用户名
<script>
// 1.用户输入姓名 存储到一个myname的变量里
var myname = prompt('请输入你的名字');
// 2.输出这个用户名
alert(myname)
</script>
变量语法扩展
- 更新变量：一个变量被重新赋值后，他原有的值就会被覆盖，变量值将以最后一次赋的值为准
var age =18
age=81 //最后的结果就是81，因为18被覆盖掉了
- 同时声明多个变量(中间用英文逗号隔开)
var age=18,
address='wasdon',
salary=2000;
声明变量的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age; console.log(age) | 只声明不赋值 | undefined |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 |
| age=10; console.log(age) | 不声明只赋值 | 10 |
javascript的变量数据类型是只有程序在运行中，根据等号右边的值来确定的
var num=10 // num属于数字型
var str='java' //str属于字符串型
javascript是动态语言，变量数据类型是可以变化的
var x=10 // x是数字型
x='java' //x是字符串型
isNaN()方法
| isNaN(x) | |
|---|---|
| x是数字 | 返回false |
| x不是数字 | 返回true |
数据类型转换
- 转成字符串
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成字符串 | var num=1; alert(num,toString()); |
| String() | 转成字符串 | var num=1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1; alert(num+"我是字符串"); |
- 转化为数字型
| 方式 | 说明 | 案例 |
|---|---|---|
| parselnt（string）函数 | 将 string类型转成整数数值型 | parselnt（'78'） |
| parseFloat（ string）函数 | 将 string类型转成浮点数数值型 | parseFloat（'78.21'） |
| Number（）强制转换函数 | 将 string类型转换为数值型 | Number（'12'） |
| js隐式转换（-＊/） | 利用算术运算隐式转换为数值型 | '12'-0 |
隐式转换是我们在进行算数运算时，js自动转换了数据类型
- 转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean() | 其他类型转成布尔值 | Boolean(’true‘) |
代表为空，否定的值会被转换为false，如'',0,NaN.null,unfined
其他值都会被转换为true
arguments的使用
当我们不确定有多少个参数传递的时候，可以用==arguments==来获取。在 JavaScript中， arguments3实际上它是当前函数的一个==内置对象==。所有函数都内置一个 arguments对象， arguments对象中==存储了传递的所有实参==
==arguments展示形式是一个伪数组==，因此可以进行遍历。伪数组具有以下特点：
●具有 length属性
●按索引方式储存数据
●不具有数组的push，pop等方法
function fn() {
console.log(arguments)
console.log(arguments.length)
console.log(arguments[2])
//我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
}
fn(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++) {//里层循环管每一趟交换次数
//内部交换2个变量的值，前一个和后一个相比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr)
预解析
-
我们js引擎运行js分为两步：预解析和代码执行
- 预解析js引擎会把js里面所有的var还有 function提升到当前作用域的最前面
- 代码执行按照代码书写的顺序从上往下执行
-
预解析分为变量预解析（变量提升）和函数预解析（函数提升）
- 变量提升就是把所有的变量声明提到当前的作用域最前面不提升赋值操作
- 函数提升就是把所有的函数声明提到当前作用域的最前面不调用函数
对象
创建对象的三种方法
-
利用==字面量==创建对象
var obj = {};//创建了一个空对象 var obj = { uname: "jack", age: 18, sex: 'man', sayHi: function () { console.log('hello'); } } console.log(obj.uname) //调用方式1 console.log(obj['uname']) //调用方式2 obj.sayHi() //调用函数 -
利用==new Object==创建对象
var obj = new Object();//创建了一个空对象 obj.uname = "jack"; obj.age = 18; obj.sex = 'man'; obj.sayHi = function () { console.log('hello'); } -
利用==构造函数==创建对象
-
构造函数首字母要大写
-
调用构造函数，必须使用new
function Star(uname, age, sex) { this.uname = uname; //this表示当前 this.age = age; this.sex = sex; } var ldh = new Star('刘德华', 18, '男');//调用函数返回一个对象 var zxy = new Star('张学友', 19, '男');
-
构造函数和对象
●构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（ class）
●创建对象，如 new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
遍历对象属性
for...in语句用于对数组或者对象的属性进行循环操作
var obj = {
uname: "jack",
age: 18,
sex: 'man',
sayHi: function () {
console.log('hello');
}
}
for (var k in obj) {
console.log(k); // k是变量 输出 属性名
console.log(obj[k]); // obj[k] 输出属性值
}
内置对象
-
自定义对象
-
内置对象
-
浏览器对象（Js独有）
两个数之间的随机整数，包含这两个整数
function getRandom(mim,max){
return Math.floor(Math.random()*(max-min+1)) + min
}
日期格式化
| 方法名 | 说明 | 代码 |
|---|---|---|
| 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() |
数组
数组元素增删改
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1无参数、修改原数 | 返回它删除的元素的值组 |
| unshift(参数1...) | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 |
数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组元素的顺序，无参数 | 该方法会改变原来的数组，返回新数组 |
| sort() | 对数组元素排序 | 该方法会改变原来的数组，返回新数组 |
var arr = [13, 4, 77, 1, 7];
arr.sort(function (a, b) {
return a - b; //升序
return b - a; //降序
});
console.log(arr);
数组索引方法
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号，如果不存在，返回-1 |
| lastIndexOf() | 在数组中的最后一个索引 | 如果存在返回索引号，如果不存在，返回-1 |
数组去重（将旧数组赋给新数组）
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) { //===全等，包括数值和数据类型
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
数组转换为字符串
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| toString() | 把数组转换成字符串，默认逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 把数组中所有的元素转换成一个字符串 | 返回一个字符串 |
| concat() | 连接两个或多个数组，不影响原数组 | 返回一个新数组 |
| slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始，删除的个数) | 返回被删除项目的新数组，影响原数组 |
字符
==字符串不可变==（只改变地址，不改变内容）
var str = 'abc'
str = 'hello'
graph LR
abc-
str--->hello-
案例
查找字符串"abcoefoxyozzopp"中o出现的位置和次数
-
核心算法：先查找第一个o出现的位子
-
只要indexOf返回的结果不是-1就继续查找
-
indexOf只能查找第一个，所以后面的查找，利用第二个参数，当前索引加1，继续查找
var str = "abcoefoxyozzopp";
var index = str.indexOf('o');
while (index !== -1) {
console.log(index);
index = str.indexOf('o', index + 1);
}
根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符 | str.charAt(0) |
| charCodeAt(index) | 获取定位置处的字符ASCII码 | str.charCodeAt(index) |
| str[index] | 获取定位置处的字符 | HTML5,IE8+支持和charAt()等效 |
案例
判断一个字符串"abcoefoxyozzopp"中出现次数多的字符，并统计其次数。
-
核心算法：利用 charAt（）遍历这个字符串
-
把每个字符都存储给对象，如果对象没有该性，就为1，如果存在了就+1
-
遍历对象，得到最大值和该字符
var str = "abcoefoxyozzopp";
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (o[chars]) {
o[chars]++
} else {
o[chars] = 1;
}
}
console.log(o);
var max = 0; //声明变量
var ch = '';//声明变量
//遍历对象
for (var k in o) { //k得到的是属性名，o[k]得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是' + ch);
字符串操作方法
| 方法名 | 说明 |
|---|---|
| concat（str1，str2，str3...） | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr（start，length） | 从 start位置开始（索引号）， length取的个数，重点记住这个 |
| slice（start， end） | 从 start位置开始，截取到end位置，end取不到（他们俩都是索引号） |
| substring（start， end） | 从 start位置开始，截取到end位置，end取不到本和 slice相同但是不接受负值 |
简单类型又叫做基本数据类型或者==值类型==，复杂类型又叫做==引用类型==
-
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string，number，boolean，undefined， null（可用于临时存放空对象）
-
引用类型：复杂数据类型，在存储时变量中存储仅仅是地址（引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义象），如 Object， Array，Date等
堆和栈（内存）
堆栈空间分配区别：
1、栈（操作系统）:由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。
简单数据类型存放到栈里面
2、堆（操作系统）:存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面
-
简单数据类型：是存放在栈里面，里面直接开辟一个空间存放的是值
-
复杂数据类型：首先在栈里面存放地十六进制表示，然后这个地址指向堆里面的数据
