JavaScript详细笔记2
1. JavaScript 数组
1.1 数组简介
- 概念：数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。
- 创建：
var arr=new Array();
var arr1=[];
var arr2=['xiao','美美',12,true];
-
获取数组元素
-
遍历数组：就是把数组的每个元素从头到尾都访问一次
var arr3=['red','green','black'];
for(var i=0;i<3;i++){
console.log(arr3[i]);
}
-
数组的长度 数组名.length
var arr4=['刘备','关羽','张飞','马超','赵云','黄忠','姜维'];
for(var i=0;i<arr4.length;i++){
console.log(arr4[i]);
}
-
案例
var num=[2,6,1,7,4];
var sum=0;
for(var i=0;i<num.length;i++){
sum+=num[i];
}
console.log(sum);
console.log(sum/num.length);
var arr=[2,6,1,77,52,25,7];
var max=arr[0];
for(var i=1;i<arr.length;i++){
if(arr[i]>max){
max=arr[i];
}
}
console.log(max);
var str=['red','green','black','pink'];
var str1='';
var sep='!'
for(var i=0;i<str.length;i++){
str1+=str[i]+sep;
}
console.log(str1);
1.2 数组中新增数组元素
-
通过修改length长度新增数组元素 var str=['red','green','black','pink'];
console.log(str.length);
str.length=6;
console.log(str);
-
修改索引号新增数组元素 var str=['red','green','black','pink'];
str[4]='blue';
console.log(str);
str[0]='yellow';
str='有点意思';
-
案例：
var str=[];
for(var i=0;i<10;i++){
str[i]=i+1;
}
console.log(str);
var arr=[2,0,6,1,77,0,52,0,25,7];
var str1=[];
var count=0;
for(var i=0;i<arr.length;i++){
if(arr[i]>=10){
str1[count]=arr[i];
count++;
}
}
console.log(str1);
for(var i=0;i<arr.length;i++){
if(arr[i]>=10){
str1[str1.length]=arr[i];
}
}
console.log(str1);
1.3 数组案例
2. JavaScript 函数
2.1 函数的基础
-
概念：就是封装了一段可被重复执行的代码块，通过此代码块可以实现大量代码的重复使用。 function getSum(num1,num2){ var sum=0; for(var i=num1;i<=num2;i++){ sum+=i; } console.log(sum);}getSum(1,100);
-
函数的使用
-
函数的参数
-
函数形参和实参匹配问题
-
函数的返回值
-
函数返回值注意事项
2.2 arguments使用
? 在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有的函数都内置了一个arguments对象，arguments对象中存储了传递的左右实参。
arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：
- 具有length属性
- 按索引方式存储数据
- 不具有数组的posh、pop等方法
2.3 数组案例
2.4 函数声明方式
-
利用函数关键字自定义函数(命名函数) -
函数表达式(匿名函数)：声明方式与变量声明差不多，只不过变量里面存的是值，函数表达是存的是函数
3. JavaScript 作用域
3.1 作用域
3.1.1 什么是作用域
- 概述：通常来说 ，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。(就是代码名字(变量)在某个范围内起作用和效果)
- 目的：提高程序的可靠性，更重要的是减少命名冲突
3.1.2 作用域分类(es6之前)
- 全局作用域：整个script标签或者是一个单独的js文件。
- 局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。(函数作用域)
3.2 变量的作用域
3.2.1 分类
- 全局变量：在全局作用域下的变量。(注意：在函数内部没有声明直接赋值的变量也属于全局变量 )
- 局部变量：在局部作用域下的变量或者在函数内部的变量。(只能在函数内部使用)(注意：函数的形参也可以看做是局部变量)
3.2.2 区别
- 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
- 局部变量：当程序执行完毕就会销毁，比较节约内存资源
JavaScript没有块级作用域 {}
3.3 作用域链
-
只要是代码，就至少有一个作用域 -
写在函数内部的是局部作用域 -
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域 -
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作用域链(就近原则)。 var num=10;function fn(){
案例：
4. JavaScript 预解析
4.1 预解析基础
4.1.1 什么是预解析
js引擎运行js分为两步：预解析和代码执行
预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
代码执行：按照代码书写的顺序 从上往下执行
4.1.2 预解析分类
-
变量预解析(变量提升)：就是把所有的变量声明提升到当前作用域最前面，不提升赋值操作 console.log(num);
-
函数预解析(函数提升)：把所有的函数声明提升到当前作用域最前面，不调用函数 fun();
4.1.3 预解析案例
5. JavaScript 对象
5.1 对象基础
5.1.1 对象是什么？
-
现实中：对象是一个具体的事物，看得见摸得着的实物。 -
在js中：对象时一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数组、函数等。 -
对象是由属性和方法组成
- 属性：事物的特征，常用名词
- 方法：事物的行为，常用动词
5.1.2 为什么需要对象？
js中的对象表达结构更清晰、更强大
5.2 创建对象的三种方式
5.2.1 利用字面量创建对象
var obj={};
变量、属性、函数、方法的区别
5.2.2 利用new Object创建对象
var obj=new Object();
5.2.3 利用构造函数创建对象
-
为什么需要构造函数
- 因为前面两种创建对象的方式一次只能创建一个对象，
- 里面很多的属性和方法是大量相同的，我们只能赋值,可以 利用函数的方法，重复这些相同的代码，把这些函数称之为构造函数
- 这个函数里面封装的不是普通代码，而是对象
- 构造函数：就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
-
创建模板 function 构造函数名(){ this.属性=值; this.方法=function(){ }}new 构造函数名();
-
案例：
注意:
- 构造函数名字首字母要大写
- 构造函数不需要return就可以返回结果
- 调用函数返回的是一个对象
- 调用函数对象必须使用new
- 只要new Star() 调用函数就创建一个对象 ldh {}
- 属性和方法前面必须添加this
-
构造函数与对象的区别
- 对象是一个具体的事物，特指某一个
- 构造函数泛指某一大类，类似java语言的类(class)
- 利用构造函数创建对象的过程相当于对象实例化
5.3 new 关键字执行过程
- new 构造函数可以在内存中创建一个空的对象
- this 就会指向刚才创建的空对象
- 执行构造函数里面的代码，给这个空对象添加属性和方法
- 返回这个对象
5.4 遍历对象
-
fo…in语句：用于对数组或者对象的属性进行循环操作 -
案例 var obj={
name:'栀虞',
age:21,
sex:'女',
fn:function(){}
}
for(var k in obj){
console.log(k);
console.log(obj[k]);
}
6. JavaScript 内置对象
6.1 内置对象基础
- JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象
- 前面两种对象时js基础内容，属于ECMAScript；第三个浏览器对象属于js独有的
- 内置对象：就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript提供了多个内置对象：Math、Date、Array、String等
6.2 查文档
6.2.1 MDN
- Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息，包括HTML、CSS和万维网及HTML5应用的API。
- MDN：https://developer.mozilla.org/zh-CN/
6.2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面的参数的意义以及类型
- 查看返回值的意义及类型
- 通过demo进行测试
6.3 Math对象
-
Math是一个内置对象，它具有数学常数和函数的属性和方法。不是一个构造对象，所以不需要new 来调用，直接使用里面的属性和方法即可。 -
console.log(Math.PI);
console.log(Math.max(4,8,99,2));
console.log(Math.max(-1,-10));
console.log(Math.max(1,99,'栀虞'));
console.log(Math.max());
-
案例：封装自己的数学对象 var myMath={
PI:3.141592653,
max:function(){
var max=arguments[0];
for(var i=1;i<arguments.length;i++){
if(arguments[i]>max){
max=arguments[i];
}
}
return max;
},
min:function(){
var min=arguments[0];
for(var i=1;i<arguments.length;i++){
if(arguments[i]<min){
min=arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1,4,2,7));
console.log(myMath.min(2,3,9,0));
console.log(Math.abs(-1));
console.log(Math.abs('-1'));
console.log(Math.abs('栀虞'));
console.log(Math.floor(1.5));
console.log(Math.ceil(1.1));
console.log(Math.round(1.1));
console.log(Math.round(1.5));
console.log(Math.round(-1.1));
console.log(Math.round(-1.5));
-
Math随机数方法
- Math.random()函数返回一个浮点，伪随机数在范围==[0,1)==，你可以缩放到所需的范围
- 没有参数
console.log(Math.random());
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
console.log(getRandom(1,10));
var arr=['张三','李四','张三丰','李思思','王五'];
console.log(arr[getRandom(0,arr.length-1
)]);
-
案例：
6.4 日期对象
-
创建Date实例来处理日期和时间，Date对象基于1970年1月1日(世界标准时间)起的毫秒。 -
需要通过调用函数Date来实例化日期对象，以常规函数调用它(即不加new操作符)将会返回一个字符串，而不是一个日期对象。 -
Date() 日期对象，是一个构造函数，必须使用new来调用创建我们的日期对象。 -
-
格式化日期年月日星期 var data=new Date();console.log(data.getFullYear());
-
格式化日期时分秒 var date=new Date();console.log(date.getHours());
-
获取日期的总的毫秒形式
-
案例：倒计时效果
- 核心算法：输入的时间减去现在的时间就是剩余时间，即倒计时，但是不能拿这时分秒相减，比如05分减去25分，结果会是负数。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间总的毫秒数，得到的就是剩余时间的毫秒数
- 把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
function countDown(time){
var nowTime=+new Date();
var inputTime=+new Date(time);
var times=(inputTime-nowTime)/1000;
var d=parseInt(times/60/60/24);
d=d<10?'0'+d:d;
var h=parseInt(times/60/60%24);
h=h<10?'0'+h:h;
var m=parseInt(times/60%60);
m=m<10?'0'+m:m;
var s=parseInt(times%60);
s=s<10?'0'+m:m;
return d+'天'+h+'时'+m+'分'+s+'秒';
}
console.log(countDown('2021-12-12 18:00:00'));
6.5 数组对象
6.5.1 数据创建及检测是否为数组
var arr=[1,2,3];
var arr1=new Array(2);
var arr2=new Array(2,3);
var arr=[];
var obj={};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
6.5.2 添加删除数组元素
var arr=[1,2,3];
console.log(arr.push(4,'栀虞'));
console.log(arr);
arr.unshift('red');
console.log(arr);
console.log(arr.pop());
console.log(arr);
console.log(arr.shift());
console.log(arr);
6.5.3 案例：筛选数组
有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除，剩余的放到新数组
var arr=[1500,1200,2000,2100,1800];var newArr=[];for(var i=0;i<arr.length;i++){ if(arr[i]<2000){
6.5.4 数组排序
6.5.5 获取数组元素索引
6.5.6 数组去重案例
有一个数组[‘c’,‘a’,‘z’,‘x’,‘a’,‘x’,‘c’,‘b’]，要求去除数组中的重复元素
核心原理：遍历旧数组，然后拿旧数组去查询新数组，如果该元素在新数组不存在，则添加，否则不添加
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 arr=['c','a','z','x','a','x','c','b'];
console.log(unique(arr));
6.5.7 数组转换为字符串
var arr=[1,2,3];
console.log(arr.toString());
var arr1=['green','blue','zhiyu'];
console.log(arr1.join('-'));
6.6 字符串对象
6.6.1 基本包装类型
JavaScript还提供了三个特殊的应用类型：String、Number、Boolean
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法
var str='andy';
console.log(str.length);
var temp=new String('andy');
str=temp;
temp=null;
6.6.2 字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
不要大量的拼接字符串
6.6.3 根据字符返回位置
字符串所有方法，都不会修改字符串本身(字符串是不可变的)，操作完成后会返回一个新的字符串。
var str='改革春风吹满地，春天来了';
console.log(str.indexOf('春',3));
console.log(str.lastIndexOf('春',3));
案例：返回字符位置
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
核心算法：先查找第一个o出现的位置，然后只要indexOf()返回的结果不是-1，就继续往下查找，因为indexOf只能查找一个，所以后面的查找就用第二个参数，当前索引加1，从而继续查找。
function strSearch(str,split){
var index=str.indexOf(split);
var num=0;
while(index!=-1){
console.log(index);
num++;
index=str.indexOf(split,index+1);
}
console.log(num);
}
var split='o';
var str="abcoefoxyozzopp";
strSearch(str,split);
6.6.4 根据位置返回字符
var str='andy';
console.log(str.charAt(3));
for(var i=0;i<str.length;i++){
console.log(str.charAt(i));
}
console.log(str.charCodeAt(0));
console.log(str[1]);
案例：统计出现次数最多的字符和次数
判断字符串"abcoefoxyozzopp"中出现次数最多的字符，并统计其次数
核心算法：利用charAt()遍历这个字符串；把每个字符都存储给对象，如果对象没有这个属性，就为1，如果存在+1；遍历对象，得到最大值和该字符。
function maxSearch(str){
var o={};
var max=0;
var ch='';
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);
for(var k in o){
if(o[k]>max){
max=o[k];
ch=k;
}
}
console.log('出现次数最多的是：'+ch+'，出现了'+max+'次');
}
var str="abcoefoxyozzopp";
maxSearch(str);
6.6.5 字符串操作方法
- concat(str1,str2,str3…)：用于连接两个换货多个字符串，拼接字符串，等效于+，但+更常用。
- substr(start,length)：从start开始(索引号)，length取的个数。
- slice(start,end)：从start位置开始，截取到end位置，end位置取不到(两个都是索引号)。
- substring(start,end)：从start开始，截取到end，end取不到，基本和slice一致，但不接受负值。
var str='andy';
console.log(str.concat('red'));
var str1='春天来了，冬天还会远吗？';
console.log(str1.substr(1,3));
- replace(‘被替换的字符’,‘替换为的字符’):替换字符
- split(‘分隔符’)：字符转换为数组
var str='andy';
console.log(str.concat('red'));
var str1='春天来了，冬天还会远吗？';
console.log(str1.substr(1,3));
var str2='andy';
console.log(str2.replace('a','b'));
var str3='abcoefoxyozzopp';
while(str3.indexOf('o')!=-1){
str3=str3.replace('o','*');
}
console.log(str3);
var str4='red-green-blue';
console.log(str4.split('-'));
- toUpperCase()：转换大写
- toLowerCase()：转换小写
7. JavaScript 简单数据类型与复杂数据类型
7.1 简单数据类型与复杂数据类型
简单类型又叫做基本数据或者值类型，复杂类型又叫应用类型
值类型：在存储时变量中存储的是值本身，因此叫做值类型–>string,number,boolean,undefined,null
应用类型：在存储时变量中存储的仅仅是地址(应用)，因此叫做应用数据类型–>通过new关键字创建的对象(系统对象、自定义对象)，Object、Array、Date等
堆和栈
- 栈(操作系统)：由操作系统自动分配释放存放函数的参数值、局部变量的值等，其操作方式类似于数据结构中的栈；简单数据类型放到栈里面（存放在栈里面，直接开放开辟一个空间存值）
- 堆(操作系统)：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面（首先在栈里面存放地址，然后这个地址指向堆里面的数据)
7.2 传参
function fn(a){
a++;
console.log(a);
}
var x=10;
fn(x);
console.log(x);
function Person(name){
this.name=name;
}
function f1(x){
console.log(x.name);
x.name='张学友';
console.log(x.name);
}
var p=new Person('刘德华');
console.log(p.name);
f1(p);
console.log(p.name);
|