js基础

js

1.html + css + js

html:结构
css:样式
js:行为 动作 

2.js的组成部分

DOM : document object model  文档对象模型
BOM : broswer object model   浏览器对象模型
ECMAscript   核心 ES5*/

3.js起源

javascript==>布兰登艾奇 面向对象的语言 脚本语言

4.js作用:

可以和页面做交互

5.变量、数据类型与表达式上

//变量:在程序执行过程中其值可以改变的量
//多个变量可以在一起定义,中间以逗号分隔 
	   var a=1,b='str';

6.var 可以省略 加var可以使变量具有变量声明提升的作用

7.常量与变量

//常量:在程序执行过程中其值不可以改变的量
//如何定义变量?==>关键字:var
//var 变量名=变量值; //js 弱类型语言
//变量默认是没有类型  变量的类型取决于变量的值

8.5种基本数据类型

//number 数值 ==>整型、浮点型统称为number类型 
	//NaN not a Number 不是一个数值 是Number类型的一种
	//console.log(3-'abc')  //NaN
	//console.log(typeof NaN)  //number
    //isNaN() 判断一个值是否是非数值 返回值为 布尔型 
	//console.log(isNaN(3))  //false
	//console.log(isNaN('XYZ'))  //true

    // string 字符串==>被一对单引号或双引号包含的内容==>引号必须成对出现
	//  字符串拼接 
	//console.log() //控制台打印
	   document.write('哈哈')
	   document.write('<b>哈哈</b>')//页面中打印文本或标签

	//张三今年18岁,性别男 
	//要求 年龄和性别用变量表示 要求:年龄加粗 性别斜体 在页面中打印出来
	//var age=18,sex='男';
	//ES5 字符串拼接: 将非变量部分用引号包起来,如果拼接变量 则用'+'做连接符
	 document.write('张三今年<b>'+age+"</b>岁,性别<em>"+sex+'</em>');

	//ES6 字符串拼接 :
	  document.write(`张三今年<b>${age}</b>岁,性别<em>${sex}</em>`);


	//document.write("<img src='a.png'>");//ES5
	//document.write(`<img src=a.png>`);//ES6

// null   空类型==> 空指针对象 他是一种特殊的对象(对象占位符)
      // undefined 未定义类型==>=如果定义了变量 没有赋值 则默认保存undefined
		var x;
   console.log(x) //undefined
    // boolean  布尔型 只有两个值: true false

9.typeof(被检测的内容)

typeof 被检测的内容 操作符 一元(单目)运算符

	typeof 返回值为 string类型
	console.log();//在控制台打印 方便调试代码	
	console.log(typeof 123);  //'number'
	console.log(typeof "xyz");  //'string'
	console.log(typeof undefined);  //'undefined'
   console.log(typeof false);  //'boolean'
	console.log(typeof null);  //'object'
	console.log(typeof typeof 123);  //'string'
	console.log(typeof typeof undefined);  //'undefined'

10.命名规范

js中严格区分大小写
var sum,Sum,SUM; //在内存中占着不同的内存
标示符 :变量名、函数名、对象名
标示符的命名规范:

  • 1.必须由字母、数字下划线和$组成
  • 2.必须以字母或下划线或$开头
  • 3.不能使用关键字和保留字
  • 4.使用驼峰命名法==>如果变量是复合单词则除了第一个单词以外的单词首字母大写
  • 5.语义化==>见名识意
    //可选分号 语句的结束

11.注释

//单行注释
/*多行注释*/

注释的作用:1.解释作用 2.阻止代码的执行

12.复杂数据类型

函数、数组、对象 object

13.算数运算符

//根据操作数的个数来分类:   
//一元(单目)运算符  ++ -- ! + -
//二元(双目)运算符  + - * / % > < >= <= != == !== === && || 
//三元(三目)运算符==>条件运算符 条件1?条件2:条件3

//加性运算符: + -
  '+':
	//1) 正常运算
		console.log(3+5);  //8
	//2) 字符串拼接
	//3) 转Number
		var str='5';
		console.log(typeof +str);  //'Number'
		console.log(typeof str);  //'string'

 '-':
	//1)正常运算
		console.log(10-8);  //2
	//2)转Number
		console.log(-'5')  //-5

//乘性运算符 * / %
//正无穷  任何正数除以0 都等于正无穷 Infinity
//负无穷  任何负数初以0  都等于负无穷 -Infinity
	console.log(5/0);  //Infinity
	console.log(-3.14/0);  //-Infinity
	console.log(0/0);  //NaN

//自增自减运算符 ++ --  ==>只能被变量使用
//分为前置和后置   ++x  x++  --x  x-- 
//前置:对变量先进行增一(减一)操作,然后再进行运算
//后置:先运算,再对变量先进行增一(减一)操作
alert()==>系统弹出框
confirm()==>系统确认框 
prompt() ==>系统输入框
prompt("请输入你的内容","在这里输入");
    var a;
	console.log(a)  //undefined
	console.log(b)  //报错 变量在使用之前 必须先定义  如果变量名相同 后定义的覆盖	定义的
	
	console.log(typeof a)  //'undefined'
	console.log(typeof b)  //'undefined'

	console.log((0.1*10+0.2*10)/10==0.3)  //true
  console.log((0.1+0.2)==0.3)  //false

16.js两大类

   //基本数据类型  number string boolean null undefined 
	// 复杂数据类型 obejct 数组 对象 函数 

	//typeof 的返回值有6种:
	//number string undefined boolean object function

17.number string boolean null undefined 各种类型专数值

       1) Number() 强转函数==>可以将任意类型转为数值 
		console.log(Number(true));  //1
		console.log(Number(false));  //0
		console.log(Number('abc'));  //NaN
		console.log(Number('5'));  //5
		console.log(Number('12ab'));  //NaN
		console.log(Number(''));  //0
		console.log(Number(' '));  //0
		console.log(Number(null));  //0
		console.log(Number(undefined));  //NaN
        2)parseInt(被转换的字符串) ==>将字符串转为整型
		1)会忽略前置空格 从第一个非空格字符开始往后查找 直到找到第一个非数值字符 		停止 并返回该非数值前的内容
		2)忽略前置空格 如果第一个非空格字符就是非数值 则返回NaN
		console.log(parseInt('3.14'));  //3
		console.log(parseInt(' 45.56'));  //45
		console.log(parseInt('  w123'));  //NaN
		console.log(parseInt('100',2));  //4 ==>100按2进制输出
         3)parseFloat()==>将字符串转为小数
		console.log(parseFloat('12.34'));  //12.34
		console.log(parseFloat('12.34.56'));  //12.34
		console.log(parseFloat('12.3a4'));  //12.3
		console.log(parseFloat('a12.34'));  //NaN
4) +
		console.log(+'5');  //5
		console.log('5'*1);  //5

18.隐式转换==>后台调用Number()方法

       - * / % > < >= <= isNaN() != ==   + (当两边都不是字符串时,加号也具有隐式转换功能)
		console.log(5-'2'+true);  //4	
		console.log(8.4+'NaN');  //'8.4NaN'
		console.log(isNaN('5'));  //false
NaN 
1)任何涉及到NaN的操作 都返回NaN
2)NaN不等于任何数 包括它自己
     js规定 undefined只等于它本身和null  null只等于它本身和undefined
	console.log(undefined==null);//true
	console.log(undefined===null);//false

19.各种类型转字符串

    1) String()==>强转函数 可以将各类型转为字符串
	//console.log(String(true));//'true'
	//console.log(String(123));//'123'
	//console.log(String(null));//'null'
	//console.log(String(undefined));//'undefined'
	//console.log(typeof String(fn));//'String'
	//function fn(){}
     2)*.toString() ==>可以将除了null各undefined以外的所有类型转为字符串(参数必须是变量)
	var a=3;
	console.log(a.toString());  //'3'
	var x=null;
	console.log(x.toString());  //报错
//字符串下标==>从0开始 
	//var str='qwertyuioasdfghjkzxcvbn'; //==>字符串中首个字符下标为0 
	//console.log(str[3]); //'r'
	//*.length==>获取字符串和数组的长度
	//console.log(str.length);
	//console.log(str[str.length-1]);//'n'

21.各种类型转布尔

        // Boolean()==>强转函数 可以将任意类型转为boolean
		console.log(Boolean(123));  //true
		console.log(Boolean(-34.5));  //true
		console.log(Boolean(NaN));  //false
		console.log(Boolean(0));  //false
        console.log(Boolean('abc'));  //true
		console.log(Boolean(''));  //false
		console.log(Boolean(' '));  //true
		console.log(Boolean(undefined));  //false
        console.log(Boolean(null));  //false

         true  false
        Number 除了NaN和0以外的所有数  NaN和0
        String  除了空串以外的字符串  空串
        undefined 无     undefined
        对象(object) 除了null以外的所有对象   null

21.表达式的概念

  • 按照特定的规则 由运算符和操作数组成的式子
  • 运算符的分类:
  • 按照操作数个数分类:
  • 一元运算符: ++ – + - !
  • 二元运算符: * / % > < == !=
  • 三元运算符: 条件运算符 条件1?条件2:条件3

22.操作数类型和结果类型

操作数可以是:基本数据类型 和复杂数据类型

function fn(){
	return 2;
}
console.log(3+fn()); //5

结果:4大数据类型(null不经常出现)

23.运算符的优先级

() [] 》
++ -- !  》
* / % 》
+ - 》 
< > <= >= 》
== != === !== 》
&& 》
|| 》 
?: 》 
= += -=  》
   //隐式转换:后台调用Number()方法 
   //具有隐式转换功能的运算符:
	+(操作数都不是字符串时) - * / % < > <= >= == != isNaN() 
  //console.log(true+null);  //1
//加性运算符  + -
//+号的作用  1)运算  2) 拼接(加号遇到字符串拼接) 3)转数值  
//-号的作用  1)运算  2)转数值
//乘性运算符 * / %
	console.log('5'*true);  //5
//关系运算符  > < <= >=  返回值:boolean类型
	console.log(true>2);  //false
	console.log(''>-1);  //true
//相等和不相等运算符 == != === !== 
相等和不相等 == !=  会进行隐式转换 只比较值
console.log('2'==2);  //true
console.log(NaN=='NaN');  //false  (NaN不等于任何值,包括它本身)
console.log(''!=0);  //false
全等和不全等 === !== 不会进行隐式转换 先比较类型是否一致 再去比较值是否相等
console.log('20'===20);  //false
console.log('abc'==='xyz');  //false
console.log(null==undefined);  //true
console.log(null===undefined);  //false   (类型不同)
console.log(null=='');  //false   (null只等于null和undefined)
(undefined只等于null和undefined)

console.log(3!==3);  //false
console.log('5'!==5);  //true
逻辑运算符  !>&&>||  非>与>或
! 返回值为boolean类型 非真即假,非假即真  逻辑非
console.log(!3);  //false
console.log(!0);  //true
console.log(!!'abc');  //true
&& ==> 逻辑与and
1)找假(false)==> 当表达式中,有假时,返回第一个为假的值
2)如果表达式中 全部为真,则返回最后一个为真的值
console.log(3&&'abc'+88&&0);  //0
console.log(undefined&&'xyz');  //undefined
console.log(3*2 && null && 'qqq');  //null
console.log(3&&4);  //4 
console.log('aaa'&&3*4);  //12
console.log(''+1 && true && 'asdf');   //'asdf'
|| 逻辑或 <1>找真==>当表达式中,有真时,返回第一个为真的值
<2>全部为假时,返回最后一个为假的值
console.log( 3|| undefined);  //3
console.log('we' || null || 123);  //'we'
console.log(null || undefined || false);  //false
console.log(''|| 3*false || NaN);  //NaN
console.log(false|| !undefined);  //true
Console.log(false|| undefined);  // undefined
初等运算符 () []  ==>优先级最高的运算符
逗号运算符  ==>优先级最低的运算符 默认取的是最后一个值
     (有括号取最后一个值,无括号取第一个值)
var a;
a=(1,2,3);
console.log(a);// 3

var b;
b=1,2,3;
console.log(b);// 1

赋值运算符 = 运算顺序 从右到左,左边必须只能是变量

复合赋值运算符 += -= *= /= %= 运算顺序 从右到左
var a=3;
a+=4;  //==> a=a+4;
a*=5; //==> a=a*5;
条件运算符 ?:
条件1?条件2:条件3
var x='和嘎嘎哈哈' ? alert('我是条件2'): alert("我是条件3");*/
(条件1为true取条件2,条件1为false取条件2)

if语句  选择结构(分支结构)的一种 switch语句

if语句有三种形态
单分支 ==>判断小括号里的内容 结果是否成立,成立则执行大括号中的内容,不成立则什么都不做
当大括号中的内容 只有一条时 可以省略大号
if(判断条件){
    //代码块;
}

var score=0;
if(undefined){
	alert('成才了');
	alert('哈哈啊哈');
 }
双分支==>判断if后小括号中的内容是否成立 如果成立 则执行if后大括号中的内容 如果不成立 则执行else中的内容
if else
if(判断条件){
	//代码块
}
else{
	//代码块
}

var age=prompt('请输入你的年龄','在这里输入..');
if(age>=18){
	alert('你老啦');
}
else{
    alert('你快老了');
}
多分支 三条及三条以上   if else-if
90-100 优秀
80-89 良 
70-79 中
其他情况不及格

if(){
}
else if(){
         }
else if(){
         }
.....
else{
    }

var score=prompt("请输入你的分数");
 if(score>=90 && score<=100)
	alert('优秀');
    
 else if(score>=80 && score<90)
 	alert('良');
          
 else if(score>=70 && score<80)
 	alert('中');
 		   
 else
 	alert('不及格');
if语句的嵌套
var score=prompt("请输入你的分数");
先判断输入的内容是否是数字
再判断输入的数字是否在0--100之间
90-100 优秀
80-89 良 
70-79 中
其他情况不及格

if(isNaN(score)){
	alert("请输入数字");
}
else if(score>=0 && score<=100){
	if(score>=90){
         alert('优秀');
    }
	else if(score>=80){
         alert('良');
    }
    else if(score>=70){
        alert('中');
    }
    else{
        alert('不及格');
    }
}
else{
  alert("请输入正确的区间值");
}

alert('dasd');   //系统弹出框
var x=confirm("确定吗");  // 系统确认框 点确认返回true 点取消返回false 
console.log(x);

24.系统输入框

var x=prompt('提示文字','默认文本'); //点击确认返回输入框中的文本(String类型) 点击取消返回null
console.log(typeof x);
  1. switch语句 是选择结构的一种
  • switch后小括号中和case后可以是任意类型的内容
  • switch会用 switch后 小括号中的值 和 每个case后的值 做全等比较 如果全等 执行 相应case后的代码块
  • break:立即结束switch的执行 (可选的)
  • 执行语句中,没有遇到break 则会一直往下执行 直到遇到break 如果一支没有遇到 break 则会将switch语句执行完毕
  • case 和default的位置 不会影响执行效果
  • 多个case 可以执行 同一条语句
default:缺省值 (可选的)
	语法结构:
		switch('a'){
			case 'a':代码块;break;  
			case value:代码块;  
			case value:代码块;  
			case value:代码块;  
			case value:代码块;
			...  
			default:代码块;
		}
var day=prompt("请输入今天是周几?");
	switch(Number(day)){
		
		case 4:alert('四');break;
		case 4:alert('六');break;
		case 1:alert('一');break;
		default:alert('输入有误');break;
		case 2:alert('二');break;
		case 3:alert('三');break;
		case 5:alert('五');break;
		case 7:alert('日');
  }
输入月份,弹出相应的季节
var month=prompt("请输入月份");
switch(Number(month)){
	case 12:
	case 1:
	case 2:alert('冬天');break;
	case 3:
	case 4:
	case 5:alert('春天');break;
	case 6:
	case 7:
	case 8:alert('夏天');break;
	case 9:
	case 10:
	case 11:alert('秋天');break;
}

if和switch的区别

  1. 可以互相替换
  2. 当分支在三条以内时(<=3)使用if语句,当分支在四条及以上(>=4)时 使用switch语句
成绩判断
90-100 优秀
80-89 良
70-79 中
60-69 及格
0-59 不及格
var score=prompt("请输入成绩");
	//判断成绩是否为数值
	if(!isNaN(score)){
		//判断成绩是否在0--100区间内
		if(score>=0 && score<=100){
 			switch(parseInt(score/10)){
        		case 10:alert("满分");break;
        		case 9:alert("优");break;
        		case 8:alert("良");break;
        		case 7:alert("一般");break;
        		case 6:alert("及格");break;
        		default:alert('不及格');
    		}
        }
    } else{
		alert("成绩输入有误!");
	}
密码判断
var pas=prompt("请输入密码");
	//判断密码长度是否是6位
	if(pas.length==6){
		//判断密码是否为纯数字
		if(!isNaN(pas)){
			alert('密码设置正确');
        }
		else{
			alert("密码必须是6位数字");
        }
    }
	else{
		alert("请输入6位数密码");
    }
年龄判断
var age=prompt('请输入您的年龄');
	if(age<18){
		alert("您还未满18");
	}
	else if(age>=18 && age<=59){
		alert("您可以进入");
    }
    else{
		alert("您超出限制");
	}
switch(true){
    case age<18:alert("您还未满18");break;
    case age>=18 && age<=59:alert("您可以进入");break;
    default:alert("您超出限制");break;
}

25.循环

  • 选择结构 分支结构 if语句 switch语句

  • 循环结构 for循环 while循环 do-while循环

  • 当型循环: for while 先判断 后执行

  • 直到型循环: do-while 先执行 后判断

  • 循环:反复执行某一部分操作 意义: 节省代码量,提高运行效率 方便修改维护代码

for(1.初始值 ; 2.控制条件 ; 3.步长值 ){
			4.代码块

 }
	执行顺序:  1 ==> 2 ==> 4 ==> 3  ==> 2 ==> 4 ==>3 

	在控制台中打印1--5 
	for(var i=1; i<=5; i++ ){
		console.log(i);
    }

	var i=1;
	for( ; ; ){
	    if(i>5){
			break;
	    }
    	console.log(i);
    	i++;
	 }


	for(var i=1;i<5;i+=1);
		console.log(i); //5

 	for(var i=2; i<=100 ; i+=2){
 		console.log(i);
 	 }

 	循环遍历
 	for(var i=1;i<=100;i++){
 		if(i%2==1){
 			console.log(i);
 		}
 	}
while ==> 
	1.初值
	while(2.控制条件){
		4.代码块
		3.步长值
   }

	var i=1;
	while('ab'){
		console.log(i);
		i++;
    }

    当循环次数已知时 用for 当循环次数未知时 用while循环 

	珠峰折纸问题
	884443m 1m 
    var zhi=1,mon=884443,count=0;
    while(zhi<=mon){
        纸张对折
        
        zhi*=2;
        document.write(zhi+" ");
        count++;
    }
 	document.write('<br><hr>打印次数'+count)
打印闰年
闰年 1. 能整除4并且不能整除100 
	 2. 整100年份 能整除400的 
	 最后 打印出2000--3000年之间有多少个闰年
    var count=0;
	for(var year=2000; year<=3000;year++){
		判断是否是闰年
		if(year%4==0 && year %100!=0 || year %400==0 ){
    		document.write(year+" ");
    		count++;
		}
	}
	document.write('<br /><hr>2000--3000年之间一共有'+count+"个闰年");

26.函数

-函数是什么??

函数:函数是指由事件驱动或可重复调用执行的代码块

作用:一次封装 多次调用 节省代码量 提高加载速度

函数的创建
1.函数声明

function 函数名(形参列表){
//执行代码块;
}
2.函数表达式==>将一个匿名函数赋给变量的方式

var fn=function(){}

	函数声明和函数表达式的区别: 
	函数声明定义函数之后 可以在任何地方调用 
	函数表达式 必须先定义才能调用 如果先调用了会报错 
		
	var fn=function(){
		console.log(123);
	}
	fn();
  • 形参:形式参数 ==>用于接受实参的变量 写在创建函数时 小括号里的内容

  • 如果形参没有接收到值 默认保存undefined

  • 实参:真实参数 ==>用来传递数据给形参的变量 调用函数时 小括号里的内容
    参数传递:是单向的 只能 实参传给形参(一次性的) 不能形参传给实参

  • arguments 函数中 用来保存实参的集合(伪数组)

  • 数组?用来保存数据的集合

  • arguments 和形参 映射关系

  • agruments和形参存在一一对应的关系

  • 如果某个形参的值发生了改变, 则相应的arguments值也发生了改变,同样,

  • 如果agruments的某个值 发生了改变 则相应的形参也会发生改变

function fn(a,b){
	arguments[0]=50;
	a=10;
	console.log(a+b);
}
fn(3,4);
模拟函数重载==>通过arguments的长度 来判断实参个数 做不同的事
function fn(){
	if(arguments.length==1){
		console.log(arguments[0]);
	}
	else  if(arguments.length==2){
		alert(arguments[0]+arguments[1]);
    }
	else if(arguments.length==3){
		alert(arguments[0]*arguments[1]*arguments[2]);
	 }
}
函数的返回值 return关键字==>返回相应的值到主调函数中
return的作用: 1. 返回相应的值(可以返回任何类型的内容) 2.立即结束函数的执行 

function fn(a,b){
	if((a+b)%2==1){
		return true;
	}
	else{
		return false;
	}
}

console.log(fn(123,456));

调用函数 默认值为 undefined

 function fn1(){
	console.log(1); //1
	return 2;
	console.log(3);
 	console.log(4);
}
console.log(fn1()*2); //2


function fn(){
	var x=10;
	return x/4;//没有返回值 默认返回undefined
}
console.log(fn()*2);
  • 全局变量:在函数外部定义的变量叫做全局变量 全局变量的作用范围为script标签中
    • 局部变量:在函数内部定义的 带var的变量叫做局部变量 没var的依然是全局变量
  • 作用范围只在函数中有效 (函数的形参也是局部 变量)
var x=5;
function fn(){
    console.log(x);
    var x=10;
    console.log(x);
}
fn();//10
字符串的创建:
var str="hello world";
	//*.length 获取长度
console.log(str.length);
	//通过 下标来获取相应的字符
console.log(str[4]);//'o'
console.log(str[str.length-1]);//'d'
var newStr='';
console.log(newStr.length);//0

27.字符串截取方法

字符串.charAt(下标值)==>通过下标 获取字符串中相应的字符
   var str='hello world';
   //console.log(str.charAt(7));//'o'

字符串.charCodeAt(下标值)==>通过下标 获取字符串中相应的字符的ASCII值
   //console.log(str.charCodeAt(5));
字符串.slice(起始下标,结束下标);  左包右不包 遇见负数加字符串长度(length)
   console.log(str.slice(1));//'ello world'
   console.log(str.slice(3,8));//'lo wo'
   console.log(str.slice(-4));//'orld'
   console.log(str.slice(-1,5));//''
   console.log(str.slice(-8,-5));//'lo '
*.substr(起始下标,截取个数); 
   console.log(str.substr(1));//'ello world'
   console.log(str.substr(3,7));//'lo worl'
   console.log(str.substr(-4));//'orld'
   console.log(str.substr(-1,5));//'d'
   console.log(str.substr(-5,-5));//''
slice(起始下标,结束下标)  返回值:string
substr(起始下标,截取个数)
substring(起始下标,结束下标)

	var str='hello world';
	console.log(str.slice(2,5));//'llo'
	console.log(str.substring(2,5));//'llo'

	console.log(str.slice(5,2));//""
	console.log(str.substring(5,2));//'llo'
	console.log(str.substring(-1,5));//'hello'
	console.log(str.substring(-5,-3));//''   两值都为负数时为空

28.查找方法

indexOf(查找字符(串),起始下标)==> 查找字符(串)在字符串中首次出现的位置(下标)  左==>右 
查找不着 默认返回-1
	var str='hello world';
	console.log(str.slice(8,10));//'rl'
	console.log(str);
	console.log(str.indexOf('e'));//1
	console.log(str.indexOf('o'));//4
	console.log(str.indexOf('o',5));//7
	console.log(str.indexOf('x'));//-1
	console.log(str.indexOf('wor'));//6
lastIndexOf(查找字符(串),起始下标)==> 查找字符(串)在字符串中最后一次出现的位置(下标)  右==>左
	console.log(str.lastIndexOf('o'));//7
	console.log(str.lastIndexOf('lo'));//3
	console.log(str.lastIndexOf("l",6));//3
toUpperCase() 转大写
	console.log(str.toUpperCase());//HELLO WORLD
	var x='AbCd';
toLowerCase() 转小写
	console.log(x.toLowerCase());

Math.ceil  向上取整
	console.log(Math.ceil(3.01));//4
	console.log(Math.ceil(3.99));//4
Math.floor 向下取整
	console.log(Math.floor(3.01));//3
	console.log(Math.floor(3.99));//3
Math.round 四舍五入
	console.log(Math.round(3.49));//3
	console.log(Math.round(3.51));//4

Math.min 最小值
	console.log(Math.min(5,true,8,null,'abc'));
Math.max 最大值

Math.random() 随机数 随即生成0--1之间的数   [0,1)  
	console.log(Math.random());
	假设 你想获取20--30之间的随机数
	Math.floor(Math.random()*(最大值-最小值+1)+最小值);   ===>公式
	Math.floor(Math.random()*11+20);

Math.abs() 取绝对值
	console.log(Math.abs(1),Math.abs(-1));

Math.pow(m,n)  求m的n次幂
    console.log(Math.pow(2,3));


   var str='qwertyuiosdfghjkfgdsja';

28.连缀写法

console.log(str.slice(0,str.length-1)+str[str.length-1].toUpperCase());
var str='a3b2c4x1';  //'a6b4c8x2';
function fn(str){
   	var newStr=''
   	//遍历字符串
   	for(var i=0; i<str.length;i++){
   		//判断当前字符是否是数字
   		if(isNaN(str[i])){  // 
   			newStr+=str[i];   //newStr='a6b4c8x2'
   		}
   		else{
   			newStr+=str[i]*2; //newStr='a6b4c8x2'
   		}
   	}
   	//将数值乘2后的字符串返回
   	return newStr;
}
console.log(fn(str));

29.数组

数组是什么?

在内存在占用连续内存 保存数据的集合

数组的创建

var arr=[];  //数组字面量(直接量)

用构造器(构造函数)创建数组

var arr=new Array(5);// 构造器创建函数时

如果小括号中的值为 单个数值时 则被视为数组长度

数组元素的读(获取) 写(设置)
	var arr=['a',null,undefined];

	console.log(arr[0]);//'a'
	console.log(arr[arr.length-1]);//undefined

	arr[10]='xyz';
	arr[1]=123;
	arr[100]='asdas';
	console.log(arr.length);//101
	清空数组
	arr.length=0;
	console.log(arr);//[]

	删除数组中的最后一个元素
	arr.length-=1;// arr.length=arr.length-1;===>减少数组长度
	console.log(arr);


	.length 属性 
	var arr=[1,2,3,4,5,6,'a',null];
	console.log(arr.length);//8

**数组的遍历 **

var arr=['abc',345,456,'x',undefined];
	 正序遍历数组
	for(var i=0; i<arr.length; i++){
		console.log(arr[i]);
	 }
	 倒叙遍历数组
	for(var i=arr.length-1; i>=0 ; i--){
		console.log(arr[i]);
	 }

console.log(typeof arr); //' object'
 instanceof 检测类型
	function fn(){}
	console.log(fn instanceof Array) false

转换方法

  • 字符串转数组 ==> 字符串.split(分隔符);
  • 如果 小括号中 没有参数,则默认该字符串为一个数组项
  • 如果 小括号中 参数为空字符串 则字符串中的每个字符 都是一个数组项
  • 如果 小括号中 参数为 字符串中 不存在的字符 则默认该字符串为一个数组项
  • 如果 小括号中 参数为字符串中的某个字符 则该字符变为逗号,逗号与逗号之间如果没有
  • 内容 则默认为 空字符串,如果该字符为前置或后缀字符,则前置字符前和后缀字符后需添加空字符串
var str='abbaceattyar';

	console.log(str.split());//["abbaceattyar"]
	console.log(str.split(""));//["a", "b", "b", "a", "c", "e", "a", "t", "t", "y", "a", "r"]
	console.log(str.split(' '));//["abbaceattyar"]
	console.log(str.split('a'));// ["", "bb", "ce", "tty", "r"]*/

var str='qqqwqrqqqq';
	console.log(str.split('q'));//[ '','' ,'' , 'w' , 'r' ,'' ,'' ,''  ,'']


	var str='wertwwtwtw';
	console.log(str.split('w'));//[ '' , 'ert' ,  ''  , 't' , 't' , '' ]

数组转字符串 join(连接符);

var arr=['xy',123,'bcd'];

	console.log(arr.join());//xy,123,bcd   空加逗号;
	console.log(arr.join('-'));//xy-123-bcd   
	console.log(arr.join(""));//xy123bcd   空字符串什么也不加
	var arr=['xy',123,'bc'];

** 栈方法 ==>会改变原数组**

push(添加项1,添加项2....) 在队尾添加一个或多个项,返回值为新数组长度
	console.log(arr.push(5,6)); //5
	console.log(arr); //['xy',123,'bc',5,6]
pop()==> 在队尾删除一个项,返回值为被删除的项
	console.log(arr.pop());//'bc'
	console.log(arr);//['xy',123]
队方法  ==>会改变原数组
	unshift(添加项1,添加项2....) 在队头添加一个或多个项 返回值为新数组长度
	console.log(arr.unshift(1,'we'));//5
	console.log(arr);//[1,'we','xy',123,'bc']
	
	shift()==>在队头删除一个项,返回值为被删除的项
	console.log(arr.shift());//'xy'
console.log(arr);//[123,'bc']

重排序方法 ==>会改变原数组

reverse() 数组翻转
	var arr=[4,5,2,1,3];
	console.log(arr.reverse());//[3, 1, 2, 5, 4]
	console.log(arr);//[3, 1, 2, 5, 4]
	
	sort() 数组排序==>默认按照 数组项的ASCII值排序 从小到大
	var arr=[12,4,222,34];
	console.log(arr.sort());
	console.log(arr.sort(function(x,y){
		return x-y;   //第一个参数减第二个参数 升序排序
		return y-x;   //第二个参数减第一个参数 降序排序
	}));

操作方法

  • 数组.concat(拼接项1,拼接项2…) 数组拼接(拼接常量)
  • 返回值为:拼接后的数组,原数组不变
var arr=[1,2],arr1=['ab','c'],arr2=['ty',null];
	console.log(arr.concat(undefined,456)); 
	console.log(arr)

	slice() 数组截取
	var arr=[4,5,1,'a',undefined];
console.log(arr.slice(1,3)); //[5,1]
数组.splice(起始下标,删除个数,添加项1,添加项2...) 会改变原数组
	返回值为被删除项组成的数组
	数组的增删改方法 
	var arr=[1,3,'aaa',null];  //[1,3,4,5,null]
	console.log(arr.splice(2,3,4,5));//["aaa",null]
	console.log(arr);//[1,3,4,5]
var arr=[5,4,'ab',undefined,250];
	console.log(arr.splice(1,2,3,4)); //[4,'ab']
	console.log(arr);//[5,3,4,undefined,250]

	var arr=[23,45,11,78,'ab']; //[23,34,44,45,11,78,'ab'];
	console.log(arr.splice(1,0,34,44));//[]
	console.log(arr);//[23, 34, 44, 45, 11, 78, "ab"]

	使用prompt弹出输入框,要求用户输入一个英文的语句,将输入语句的第二个单词截取出来
	var str=prompt("请输入一句话");
	var arr=str.split(" ");
	alert(arr[1]);

	字符串.replace(被替换项,替换项); //将 被替换项首次出现的位置 替换成 替换项
	var str='hello world';
	console.log(str.replace('o',1)); //hell1 world

	var str='border-bottom-right'; //'borderBottomRight' 转驼峰
	function fn(str){
		var arr=str.split('-'); //['border','bottom','right']
		var newStr=arr[0];
		//从第二个数组项遍历数组
		for(var i=1; i<arr.length;i++){
			newStr+=arr[i].charAt(0).toUpperCase()+arr[i].slice(1);
        }
		return newStr;
	 }
	console.log(fn(str));

30.js算法题

var nums = [1,5,9,5,3,6,1,8,9,2,7,6];// 将数组中重复的值只保留一个,且做升序排列,返回[1,2,3,5,6,7,8,9]
function fn(nums){
   //定义一个新数组 用来保存不重复的值
    var arr=[];
   //循环遍历nums数组
    for(var i=0; i<nums.length; i++){
    //判断当前项是否出现在新数组中
        if(arr.indexOf(nums[i])==-1){
        	//如果当前项没有出现在新数组中 则将当前项添加到新数组中
        	arr.push(nums[i]);  
    	}
 	}
    //将数组从小到大排序后 返回
    return arr.sort(function(x,y){return x-y});
}
console.log(fn(nums));
var arrs = ["a","c",6,"e",5,3,"d"];将arrs中所有的数字乘以5,返回[30,25,15]
var arr = ["a","c",6,"e",5,3,"d"];
function fn(arr){
    //定义新数组 用来保存乘5后的数字
    var newArr=[];
    for(var i=0; i<arr.length;i++){
        //判断当前项 是否是数字
        if(!isNaN(arr[i])){
            newArr.push(arr[i]*5);//将当前项乘5以后 添加到新数组中
        }
    }
    return newArr;
}
console.log(fn(arr));

var arr=[1,'a',null,'xyz',undefined,567,'sd','ds'];中有几个字符串?
function fn(arr){
    var count=0;//定义计数器
    //循环遍历数组
    for(var i=0; i<arr.length;i++){
        //判断当前项是否是字符串
        if(typeof arr[i]=='string'){
            count++;
        }
    }
    return count;
}
console.log(fn(arr));

var str='abc!123bd#e5&66';转换成str='abc![1][2][3]bd#e5&66';

var str='abc!123bd#e5&66'; //[1][2][3]
function fn(str){
    //1.截取有效字符串
    //2.转数组 将字符串中的每一个字符都转为数组项
    var arr=str.substring(0,str.indexOf('#')).split(""); //截取abc!123bd并转换成数组
    //循环遍历数组
    for(var i=0; i<arr.length; i++){
        //判断当前项是否是数字
        if(!isNaN(arr[i])){
            //将当前项拼接一对'[]'
            arr[i]='['+arr[i]+']';
        }
    }
    return arr.join("")+str.slice(str.indexOf('#'));
}
console.log(fn(str));
var str='abc!123bd#e5&66';
// 将字符串中#号之前的数字用中括号括起来,形成结果:'abc![123]bd#e5&66'
function fn(str){
    //先将有效字符截取
    // 'abc!123bd'
    var newStr=str.slice(0,str.indexOf('#')),index,lastIndex;
    for(var i=0; i<newStr.length;i++){
    //查找首个为数字的字符的下标
        if(!isNaN(newStr[i])){
            index=i;
            break;
        }
    }
    for(var i=str.length-1;i>=0;i--){
    //查找最后一个为数字的字符的下标
        if(!isNaN(newStr[i])){
            lastIndex=i;
            break;
        }
    }
    return 	str.slice(0,index)+'['+newStr.slice(index,lastIndex+1)+']'+str.slice(lastIndex+1);
}
console.log(fn(str));
var str = "hello world";请编写代码统计str中o和l共出现了多少次
var str='hello world';
function fn(str,val,val1){
    //定义计数器
    var count=0;
    //循环遍历字符串
    for(var i=0;i<str.length;i++){
        //判断当前项是否等于val或val1
        if(str[i]==val || str[i]==val1){
            count++;
        }
    }
    return count;
}

console.log(fn(str,'o','l'));
生成 [2, 10)的三个随机数并找出最大值,把最大值赋给res
        res = 0;
        // your code here
        var arr = [];
        for (var i = 1; i <= 3; i++) {
            arr.push(Math.floor(Math.random() * 8 + 2));
        }
        if (arr[0] > arr[1] && arr[0] > arr[2]) {
            res = arr[0];
        } else if (arr[1] > arr[0] && arr[1] > arr[2]) {
            res = arr[1];
        } else {
            res = arr[2];
        }
        console.log(res)
求出一组数中的最大值和最小值并返回俩数的积
	var arr=[45,234,24,34,35,4,6,57,65];
    function maxValue(arr){
        //假设一个最大值
        var max=0,min=999999999999;
        //遍历数组
        for(var i=0; i<arr.length; i++){
            //判断当前值是否大于max
            if(max<arr[i]){
                max=arr[i];//234
            }
            //判断当前值是否小min
            if(min>arr[i]){
                min=arr[i];//4
            }
        }
        return max*min;
    }
	console.log(maxValue(arr));
10到100的十位随机数并升序排序(不允许重复)
	function fn(){
		//定义新数组
		var arr=[];
		while(arr.length<10){
			//随机获取10-100之间的随机数
			var val=Math.floor(Math.random()*91+10);
			//判断获取的随机数 是否出现在新数组中
			if(arr.indexOf(val)==-1){ 
				//将不重复的值添加到新数组中
				arr.push(val); 
			}
   		}
		//返回升序排序的数组
		return arr.sort(function(x,y){return x-y})
	}
	console.log(fn());
封装字符串翻转方法
	var str='hello world';
	function fn(str){
		//return str.split('').reverse().join("");
		var newStr='';
		for(var i=str.length-1;i>=0;i--){
			newStr+=str[i];
 		}
	    return newStr;
	 }
	console.log(fn(str));
封装冒泡排序(封装sort方法)
    //循环嵌套  
    var arr=[23,3,21,1,2,4,3,435,37];
    //外循环控制比较的轮数   轮数=元素个数-1
    //内循环控制每轮比较的次数 次数等于元素个数-1  (元素个数-当前轮数)
    function fn(arr){
        var temp;
        //外循环控制轮数
        for(var i=1; i<arr.length; i++){
            //内循环控制每轮比较的次数 
            for(var j=0; j<arr.length-i;j++){
                // 判断相邻两个数的大小关系 
                if(arr[j]>arr[j+1]){
                    temp=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=temp;
                }
            }
        }
        return arr;
    }
    console.log(fn(arr));
将函数的实参  按照下标值 将所有下标 为奇数的 累加在一起 将下标为偶数的累乘在一起
function fn(){
    var sum=0,sum1=1;
    for(var i=0;i<arguments.length;i++){
        if(i%2==1){
            sum+=arguments[i];
        }
        else{
            sum1*=arguments[i];
        }
    }
    return sum+','+sum1;
}
console.log(fn(12,31,3,12,2,5,6,7,3));
随机从数组中取出三个不同的值。
一、var arr = [0,1,2,3,4,5,6,7,8,8,9,9,10,10];
var str=[];
var aa;
function fn(arr){
    for(var i=1;i<arr.length;i++){
        aa=Math.floor(Math.random()*arr.length);
        if(str.indexOf(arr[aa])==-1){
            str.push(arr[aa])
        }
        if(str.length==3){
            return str;
        }
    }
}
console.log(fn(arr));
定义一个新数组用来保存这三个不同的数
var newArr=[];
while(newArr.length<3){
    //随即获取数组中的值
    var val=arr[Math.floor(Math.random()*arr.length)];
    //判断随机获取的值是否出现在新数组中
    if(newArr.indexOf(val)==-1){
        newArr.push(val);
    }
}
return newArr;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值