自学前端总结-- JavaScript篇--2

比奇堡第一派总
184 阅读3分钟

  1. 循环嵌套

    1. 在一个循环体的内部又出现其它的循环
    2. 任意两个循环之间都可以相互嵌套
    //外层循环控制循环的行数
for(var i=1;i<=5;i++){
	for(var j=1,str='';j<=5;j++){
		str+='*';
	}
	console.log(str);
}
//九九乘法表
for(var a=1;a<10;a++){
	for(var b=1,str='';b<=a;b++){
		str+=(b+'*'+a+'='+(a*b)+' ');	
	}
	console.log(str);
}

  2. 函数

    1. Number()\parseInt()\parseFloat()

    2. 函数分为系统函数和自定义函数

    3. 函数：是一个功能体，需要提供若干个数据，返回处理的结果，为了封装重复执行的代码

    4. 创建函数

      function 函数名称(){
		函数体;————封装的重复执行的代码
}

    5. 函数调用

      函数名称();

    6. 创建带有参数的函数

      function 函数名称(参数){//用于接收外部传递的数据
		函数体;————封装的重复执行的代码
		
}
//调用
函数名称(参数列表);//实际传递的数据

    7. 创建函数时的参数称为形参，调用函数时的参数称为实参，实参会赋值给形参，实参跟形参数量可以不匹配，如果形参未赋值则值为undefined。

    8. 外部要调用函数中的值，函数要返回值，return;

    9. 对比return和break

      1. return用于函数中，结束函数的执行
      2. break用于switch-case和循环，结束对应语句的执行
    return;//结束函数执行
return 值;//返回值，函数调用后得到的结果

function getmax1(a,b,c){
	if(a<=b){
		if(b<c){
			return c;
		}
		else{
			return b;
		}	
	}
	else{
		if(a<c){
			return c;
		}
		else{
			return a;
		}	
	}
}
var str=getmax1(231,5,3);
console.log(str);

//三个数比较
function getmax1(a,b,c){
	return a>b?(a>c?a:c):(b>c?b:c);
}
console.log(getmax1(231,431,3));

//判断是否为素数
function isprime(a){
	if(a===1){
		return false;
	}
	for(var i=2,j=0;i<a;i++){
		if(a%i===0){
			j++;
			return false;
		}
	}
	return true;
}
console.log(isprime(121));

  3. 变量的作用域

    1. 全局变量：全局作用域

      1. 在全局作用域下声明变量，可以在任意的作用域下访问到

    2. 局部变量：函数作用域

      1. 在函数作用域下声明变量，只能在当前的函数作用域下访问到
      2. 函数内不加var声明的变量是全局变量（不规范）

  4. 变量声明提升：程序执行前，会将var声明的变量提升到所在作用域的最前边，只是声明提升，赋值不提升。

  5. 练习：斐波那契数列：创建函数fib，传递任意一个数字，返回这一项的值

    第一项和第二项的值都是1，从第三项开始，每项的值是前两项相加的和

    1 1 2 3 5 8 13

    function fib(a){
	for(var i=1,next=0,t1=0,t2=1;i<=a;i++){
		next=t1+t2;//第二项
		t2=t1;//前一项给下一项
		t1=next;//t1  t2  next  (t2)  t1  (t2) next 
		console.log(next);
	}
	console.log('第'+a+'项的值为：'+next);//输出下一项的值
}
fib(10);

  6. 函数的作用域

1.  作用域链：多个作用域之间嵌套，在查找变量的时候，会先到当前的作用域下查找，如果没有，会一直王上一级作用域查找

1.  函数提升：程序执行前，会将函数整体提升到所在作用域的最前面，可以先调用后创建

  1. 递归

    1. 在函数以内，调用自身这个函数，本身是一个死循环，用来解决循环问题。

    2. 使用：需要有边界条件，结合着return使用，同时递归函数前也需要加return，为了把最终的值不断传递给外层

    3. JS属于单线程运行，深层次递归嵌套会对cpu要求比较高

    4. 猴子吃桃

      function hz(n){
	if(n===1){
		return 1;
	}
	return (hz(n-1)+1)*2;
}
console.log(hz(10));

  2. 匿名函数

    1. 创建函数

      //函数声明
function fn(){}//var fn=function(){}
//函数表达式
var fun=function(){}

    2. 对比函数名称和函数名称()

      1. 函数名称：本质上就是一个变量，保存了一个函数

      2. 函数名称()：在调用一个函数，执行函数体中的代码，得到函数的返回值

      3. 函数表达式只是变量声明提升，必须先创建在写调用

      4. 练习：使用函数表达式创建函数，传递任意两个数字，返回两者之间所有整数的和。

        var getsum=function(n1,n2){
	for(i=n1,sum=0;i<=n2;i++){
		sum+=i;
	}
	return sum;
}
console.log(getsum(1,100));

  3. 匿名函数自调用

    (function(){
		语句块;
})();

  4. 回调函数

    1. 将函数以参数的形式传递
    function tao(){  }
function dong(){  }

tao(dong);
tao(function(){  });

  5. isNaN() 常用于检测一个字符串中是否含有非数字。

  6. eval() 执行字符串表达式

  7. 对象

    1. 对象是一组属性和方法的集合

    2. 分类

      1. 自定义对象：用户自己创建的对象
      2. 内置对象：JS提供的对象，可以直接拿来用的
      3. 宿主对象：根据不同的运行环境来划分的，浏览器和node.js两种对象

    3. 使用对象字面量创建对象

      1. {属性名:属性值,属性名:属性值}如果含有特殊字符必须添加引号

    4. 使用内置构造函数创建对象

      1. new Object();创建空对象，需要单独的添加每个属性

    5. 遍历属性

      //遍历对象属性
for(var k in car){
	//k代表属性名,car[k]属性值
	console.log(k,car[k]);
}

  8. 练习：创建一个学生对象，包含有一组成绩，遍历对象属性得到每个成绩，计算出总成绩和平均成绩

    var student={
	s1:56,
	s2:88,
	s3:90,
	s4:78
}
var sum=0;
var i=0;
for(var n in student){
	console.log(n,student[n]);
	sum+=student[n];
	i++;
}
var avg=sum/i;
console.log('总分：'+sum,'均分：'+avg);

  9. 检测对象中是否含有某个属性

  10. 对象.属性名===undefined; 存在→false 不存在→ture。

  11. 对象.hasOwnProperty('属性名') 存在→ture 不存在→false。

  12. '属性名' in 对象名 存在→ture 不存在→false。

  13. 对象中的方法

    1. 方法对应的就是一个函数

      var person={
	//成员属性
	name:'涛',
	sex:'男',
	//成员方法
	play:function(){
		//this,指代调用方法的对象
		console.log(this.name+'正在玩单杠');//person.name
	},
	work:function(){
		console.log('正在摊煎饼');
	}
}
//console.log(person);
//调用方法
person.play();
person.work();

//练习：创建一个圆对象，包含属性半径和圆周率
	var yuan={
	r:5,
	pai:3.14,
	c:function(){
		return 2*this.r*this.pai;
	},
	area:function(){
		return this.r*this.r*this.pai;
	}
}
console.log(yuan);
console.log(yuan.c());
console.log(yuan.area());

{ r: 5, pai: 3.14, c: [Function: c], area: [Function: area] }
31.400000000000002
78.5

    2. 原始类型和引用类型的存储

      1. 原始类型：直接将数据存储到栈内存中
      2. 引用类型：将数据存储在堆内存中，同时会生成一个地址，把地址存储到栈内存中；如果不被任何的地址所引用，就会自动销毁
      3. null：空地址，不指向任何堆内存数据，直接给引用类型赋值为null即可销毁。

  14. 数组

    1. 数组是一组数据的集合，每个数据称为元素

    2. 创建数组

      1. [元素1, 元素2,元素3]

    3. 数组的下标

      1. 自动给数组元素添加编号，是0及以上的整数

    4. 数组的长度

      1. 数组.lenth 获取数组元素的个数
      2. 数组[数组.lenth] 在数组末尾添加元素

    5. 使用构造函数来创建数组

      1. new array() 空数组
      2. new array(3) 初始化长度为3的数值
      3. new array(元素1,元素2,元素3)

    6. 数组的分类

      1. 关联数组：以字符串做下标,特别说明某一个元素，需要单独的添加某个元素
      2. 索引数组：以0及以上的整数做下标

    7. 数组跟对象的区别

      1. 两者都是用于存储一组数据的
      2. 数组的元素是一组有序的数据
      3. 对象的属性是一组无序的数据
      4. 对象是没有长度属性的

    8. 数组的遍历

      1. 循环访问数组中的每个元素

  15. API

    1. js中预定义的函数或者方法
    2. 如何区分两个名称相同的API是不是同一个API
    3. 看调用当前API的对象类型是否相同
    4. toString() 将数组转为字符串，之后用逗号隔开
    5. join() 将数组转为字符串，可以指定之间的分隔符号

  16. 练习：创建数组要求使用遍历数组元素翻转数组元素。

    var en=['a','b','c','d','e'];
var a=0;
for(var b=0,temp;b<(en.length/2);b++){
	temp=en[b];
	en[b]=en[en.length-1-b];
	en[en.length-1-b]=temp;
 }
console.log(en);

  17. 练习：遍历数组排序，从小到大排序

    //数组排序
var sort=[123,45,67,1,23,34,22,101,89,77];
var k=0;
while(k<sort.length-1){
	for(var j=0,temp=0;j<sort.length-k;j++){
		while(sort[j]>sort[j+1]){
			temp=sort[j]; 
			sort[j]=sort[j+1];
			sort[j+1]=temp;
		}
	}
	k++;
}
console.log(sort);

[1, 22, 23, 34, 45,67, 77, 89, 101, 123]

  18. API

1.  数组名.reverse() 翻转数组元素

    ```
    var arr=['a','b','c','d'];
    arr.reverse();
    console.log(arr);

    [ 'd', 'c', 'b', 'a' ]
    ```

1.  sort() 排序

    ```
    //排序
    var arr=[1,2,4,213,45,3];
    //默认是按照首个字符编码排序
    //arr.sort();

    arr.sort(function(a,b){
    	return a-b;//数字从小到大
    	return b-a;//数字从大到小
    });
    console.log(arr);
    ```

1.  如何学习API：作用，参数，返回值

1.  数组还需要查看原数组是否发生变化

1.  拼接多个数组

    ```
    //拼接数组
    var arr=[];
    var arr1=[];
    var arr2=[];
    console.log(arr**.concat**(arr1,arr2));//原数组没有发生变化
    ```

1.  截取数组元素

    ```
    console.log(arr.slice(2,5));//截取元素，后面元素不包括
    console.log(arr.slice(5));//Error
    console.log(-4,-1);//倒着数
    ```

1.  删除、替换数组元素

    ```
    //从下标2开始删除
    rr.splice(2);
    //3表示删除长度
    //如果不删，则直接插入数据
    arr.splice(2,0,'y','t','u','a');
    console.log(arr);
    ```

1.  在数组末尾添加元素

    ```
    //在数组的末尾添加
    arr.push('a');
    console.log(arr);
    ```

1.

![Untitled]()

  1. 二维数组

    1. 二维数组用于对数据进行二次分类
    2. 访问：数组[下标][下标]
    var arr3=[	['广州','深圳','珠海'],
	['苏州','南京','无锡'],
	['郑州','洛阳','开封']
];
console.log(arr3[2][2]);

  2. 字符串对象

    1. 包装对象：为了让原始类型的数据像引用类型的数据，具有属性和方法

    2. JS下有三种包装对象：字符串对象、数值对象、布尔对象

    3. 转义字符

      1. ' 将具有特殊意义的符号转为普通符号
      2. \n 换行
      3. \t 空格

    4. API

      1. length 获取字符串长度
      2. charAt() 获取下标对应的字符
      **var str='javascript';
for(var i=0,count=0;i<str.length;i++){
	if(str[i]==='a'){//str.charAt(i)
		count++;
	}
}
console.log(count);
console.log(str.indexOf('a'));//第一次出现的位置
console.log(str.lastIndexOf('a'));//最后一次出现的位置

//英文字母转大写
//所有的字符串API都不能对原字符串有任何影响
var str='JavaScript';
console.log(str.toUpperCase());//转大写
console.log(str);
console.log(str.toLowerCase());//转小写
console.log(str);

var str='tao111111@tedu.com';
console.log(str.slice(0,str.indexOf('@')));
console.log(str.slice(str.indexOf('@')+1));

str='javascript';
console.log(str.substr(4,3));//4表示下标，3表示长度

//字符串转数组
// var arr=['a','c','b'];
// console.log(arr.toString());

var str='abc.123.web.png';
console.log(str.split('.'));
var arr=str.split('.');
console.log(arr[arr.length-1]);

console.log(Math.PI);//圆周率
Math.ceil();//向上取整
Math.floor();//向下取整
Math.round();//四舍五人**

    5. 练习：一句英文中的每个单词首字母大写，其余小写

var str='WhAt aRe yOU doING';
var arr=str.split(' ');
console.log(arr);
for(var i=0;i<arr.length;i++){
	var str1=arr[i].substr(1).toLowerCase();//截后面字母
	var str2=arr[i].substr(0,1).toUpperCase();//截首字母
	arr[i]=str2+str1;//拼接
}
console.log(arr.join(' '))

//翻转字符串
var str='abcd';
// var arr=str.split('');
// console.log(arr);
// arr.reverse();
// str=arr.join('');
// console.log(str);
console.log(str.split('').reverse().join(''));

  1. math对象

    console.log(Math.pow(5,2));//5的2次方
//查看一组数字的最大值
console.log(Math.max(23,21,3,44,13,22));
//查看一组数字的最小值
console.log(Math.min(23,21,3,44,13,22));

//随机生成四个字母
var str=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9'];
var arr=[];
for(var i=0;i<4;i++){
	var a=Math.floor((Math.random()*str.length));
	arr.push(str[a]);
	str.splice(a,1);//判断删除元素
}
console.log(str);
console.log(arr);

**//双色球
var blueball=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33'];
var redball=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'];
var res=[];
for(var i=0;i<6;i++){
	var num=Math.floor(Math.random()*blueball.length);
	res.push(blueball[num]);
	blueball.splice(num,1);
}
//console.log(res);
res.map(Number);//字符串数组不能正确排序，强转数值类型
var k=0;
while(k<res.length-1){
	for(var j=0,temp=0;j<res.length-k;j++){
		while(res[j]>res[j+1]){
			temp=res[j];
			res[j]=res[j+1];
			res[j+1]=temp;
		}
	}
	k++;
}
console.log(res);
var num1=Math.floor(Math.random()*redball.length);
res.push(redball[num1]);
console.log(res);

//双色球
var blueball=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33'];
var redball=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'];
var res=[];
for(var i=0;i<6;i++){
	var num=Math.floor(Math.random()*blueball.length);
	res.push(blueball[num]);
	blueball.splice(num,1);
}
//console.log(res);
res.sort(function(a,b){
	return a-b;//数字从小到大
});
var num1=Math.floor(Math.random()*redball.length);
res.push(redball[num1]);
console.log(res);**

  2. date对象

    1. 用于对日期时间的存储和计算

    2. 创建

      1. new date('2021/9/15 11:33:30')
      2. new date(2021,8,15,11,33,30) 范围是0~11
      3. new date() 当前系统时间
      4. new date(150000000000)距离计算机元年毫秒数
      var d=new Date();
var y=d.getFullYear();
var m=d.getMonth()+1;
var date=d.getDate();
var hour=d.getHours();
var minuter=d.getMinutes();
var second=d.getSeconds();
var day=d.getDay()+1;//0~6
var week=['一','二','三','四','五','六','日'];
console.log();

var d1=new Date();
var d2=new Date('2021/9/21');
var d=d2.getTime()-d1.getTime();
d=parseInt(d/1000);
second=d%60;
day=parseInt(d/60/60/24);
hour=parseInt(d/60/60-day*24);
minuter=parseInt(d/60-hour*60-day*24*60);
console.log('还有'+day+'天'+hour+'时'+minuter+'分'+second+'秒，就到中秋了');

    3. 转为本地字符串

      var d=new Date();
console.log(d.toLocaleString());
console.log(d.toLocaleDateString());
console.log(d.toLocaleTimeString());

    4. 设置

      //设置时间
var d=new Date('2021/9/15 11:1:30');
d.setFullYear(2022);
//3天前
d.setDate(d.getDate()-3);

console.log(d.toLocaleString());

  3. Number对象

    1. new Number() 封装城数值对象
    2. Number() 强制转数值型
    3. toFixed(n) 强制保留小数点后n位
    4. toString() 强制转字符串型

  4. boolean对象

    1. new Boolean() 封装成布尔对象
    2. Boolean() 强制转换布尔型
    3. !!数据 隐式转换布尔型

  5. 错误处理

    1. 常见的错误

      1. 语法错误（SyntaxError）：代码书写不规范
      2. 引用错误（ReferenceError）：使用了未声明的变量
      3. 类型错误（TypeError）：当前所调用的不是一个函数

    2. throw 错误内容

      var age=15;
try{//尝试执行
	if(age<18||age>60){
		throw '非法年龄';
	}
}catch(err){
	//捕获错误
	//只有try中出现错误，才会执行
	//将错误收集到err，执行错误处理代码
	console.log(err);
}

  6. 练习：创建函数，传递任意一个日期，返回这个日期是一年的第几天。

    var d=new Date('2021/9/15');
var d1=new Date(d);
d1.setDate(1);
d1.setMonth(0);
var d2=d-d1;
var day=parseInt(d2/1000/60/60/24);
console.log(d.toLocaleDateString()+'是这一年中的'+day+'天');

  7. ES6

    1. 块级作用域

      1. let声明的变量不存在声明提升，不允许重复声明

      2. { } 大括号之间的作用域

        {
	var n1=2;//全局变量
	let n2=5;//局部变量
	const n3=1;//局部变量
}

      3. var声明的变量存在声明提升，允许重新赋值，在全局作用域下是全局变量

      4. let和const声明的变量不存在提升，不允许重新赋值，任何情况下都不是全局变量

    2. 参数增强

      1. 可以给参数设置默认值

    3. 箭头函数

      1. 简化了匿名函数的写法，不等价于匿名函数

        //箭头函数
let arr=[23,21,1,4,6];
// arr.sort(function(a,b){
// 	return a-b;
// });
// arr.sort((a,b)=>{
// 	return a-b;
// });
arr.sort((a,b)=>a-b);
console.log(arr);

      2. 如果箭头函数函数体内只有return形式可以简化成arr.sort((a,b)=>a-b);

  8. 模板字符串

    1. 解决了字符串的拼接
    2. ``反引号之间的内容就是模板字符串 ${ js表达式 }

求点赞，收藏，非常感谢！！！！！！！！

avatar
文章
阅读
粉丝