1、JS常用语
1】输入:prompt('请输入内容')
2】弹出警示框:alert('输入不正确')
3】控制台输出:console.log('程序员使用')
2、变量(是一个容器)
1】声明变量
var age; //声明一个名词为age的变量
2】赋值
age = 10; //给age这个变量赋值为10
3】变量的初始化:声明一个变量的同时直接赋值
var age = 10;
4】更新变量:后赋的值会覆盖之前的值
5】声明多个变量
var age = 10,
address = '四川成都'
6】只声明,不赋值。输出 undefined (未定义的)
7】不声明, 不赋值。 直接使用变量会报错
8】只赋值,不声明。可输出,不建议使用
3、变量的命名规范
1】区分大小写;2】不能数字开头;3】不能是关键字、保留字;4】变量名必须有意义;5】驼峰命名法:如-- myFirstName;6】使用翻译网站
4、临时变量
声明一个临时变量temp
var temp;
var apple1 = '青苹果';
var apple2 = '红苹果';
//把apple1的值交给temp
var temp = apple1;
//把apple2的值交给apple1
var apple1 = apple2;
//把temp的值交给apple2
var apple2 = temp;
5、变量的数据类型
1】Number数字型
①数字前面加0,表示8进制;
②数字前面加0x表示16进制;
③Number.MAX_VALUE 数字里面的最大值; Number.MIN_VALUE 数字里面的最小值;Number.MAX_VALUE*2无穷大(Infinity)-Number.MAX_VALUE*2无穷小(-Infinity)
④NaN非数值;isNaN() 可用来判断非数字。是数字false,不是数字true
2】字符串类型string(单引号或者双引号)
①字符串嵌套(外双内单,或外单内双)
②字符串转义字符都是用\开头(\n换行;\t缩进......)
③字符串的长度:.length属性
④字符串的拼接:'沙漠'+'骆驼'(只要是字符串类型+其他类型=最后的结果一定是字符串类型)【+口诀:数值相加,字符相连】【变量和字符串相连口诀:引引加加】
3】Boolean 布尔类型
①true参与运算时当1来看;flash当0来看
②underfined+数值;结果是NaN
③空值:null+1;结果是1
6、获取变量数据类型
1】typeof:如:console.log( typeof num);
2】prompt('请输入') 取过来的值是字符串型;
3】控制台颜色/字面量
7、数据类型转换
1】转换为字符串:
①toString:变量.toString②String:String(变量)③变量+'字符串'
2】转换为数字类型:
①整数:parseInt(变量);②浮点数:parseFloat(变量);③强制转换:Number(变量)④运用算术运算“-”“*”“/”
3】转换为布尔类型:Boolean(变量);
①空的,否定的值:''、0、NaN、null、undefined 转换为flash;
②其余值都转换为true
-----------------------------------------------------------------------------------------------------------
1、运算符
1】算数运算符(+ - * / %)
①浮点数直接运算会有误差(不能拿浮点数与浮点数判断是否相等)
②算数运算符有优先级,先乘除后加减,有括号先算括号里面
③表达式的结果叫返回值
2】递增和递减运算符(++,--)
①递增和递减运算符必须和变量配合使用
②前置自增运算符(++写在前面,如++num),先自加1,然后返回结果
③后置自增运算符(写在后面++,如num++),先返回原值,后自加1
④单独使用前置/后置自增,无区别;如果还参与了其他运算,那么前置自增,先加1后返回值,后置自增先返回值,后自加1;
3】比较运算符(< > >= <= == != === !==)运算结果为布尔型true/false
①==等于,会默认转换数据类型,会把字符串型数据转换为数字型;只要求两侧的值相等;
②===全等于,要求两侧的值与数据类型完全一致;
4】逻辑运算符(&&与 ||或 !非)
①&&两侧都为true,结果才是true;其余为false(一假为假)
②||两侧都为false,结果才是false;其余为true(一真为真)
③!取反(写表达式前面)
④运算中断
&&发生中断的情况为第一个表达式为假(表达式1为假,则返回表达式1的值,否则返回表达式2的值)
||发生中断的情况为第一个表达式为真(表达式1为真,则返回表达式1的值,否则返回表达式2的值)
5】赋值运算符(=)
①+= num+=2 等同num = num+2;
②-=、*=、/=、%= 同理
6】逗号运算符:一条语句中执行多个表达式(了解)
如:var num1,num2,num3;
2、运算的优先级
1】从大到小依次是①();②++,--,!;③算数④比较;⑤逻辑;⑥赋值;⑦逗号;
3、流程控制语句
1】顺序结构语句(从上往下依次执行)
2】分支结构语句
①if(条件表达式){执行语句1}else{执行语句2}
执行思路:if里面条件表达式为真,执行语句1;if里面条件表达式为假,执行语句2;
注意:执行语句1和执行语句2,只能2选1执行
②多分枝语句:if(条件表达式1){语句1} else if(条件表达式2){语句2} else if(条件表达式3){语句3}else{最后的语句}
注意:多选1,最后只有一个语句执行;理论上else if可以写任意多个;注意else 和if直接要有空格
③三元表达式:有三元运算符组成的式子
语法结构:条件表达式? 表达式1 : 表达式2;
④switch语句:针对特定值
语法结构:
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
执行思路:利用表达式与case后面的选项值相匹配,匹配上执行里面的语句,如果都没匹配上,执行default里面的语句;
注意:表达式我们经常写成变量;匹配的时候全等匹配;break不能省略;
3】循环结构语句
----------------------------------------------------------------------------------------------------
1、for循环
1】用途:重复执行某些代码,通常跟计数有关;
2】语法结构:
for(初始化变量;条件表达式;操作表达式){
//循环体
}
3】断点调试:
Chrome浏览器F12--Sources面板--点击对应行--刷新--F11
4】循环嵌套:
外层每循环一次,内层都要循环全部;
2、while循环
1】语法结构:
while(条件表达式){//循环体}
2】执行思路:当条件表达式结构为true,则执行循环体,否则退出循环体;
3、do while循环
1】语法结构:
do {//循环体} while(条件表达式)
2】执行思路
do while 会先执行一次循环体,再进行判断
4、循环选择:
确定循环次数用for;不确定循环次数用while;
5、continue/break关键字
1】continue:退出本次循环,直接跳转到i++上,继续执行剩余次数循环;
2】break:退出剩下的所有次数循环;
----------------------------------------
6、数组Array:一组数据的集合,可存储在单个变量下
1】创建数组①方法1:var arr = new Array();②方法2:var arr = [ ];
2】①数组可放任意数据类型;②数据之间用逗号“,”分割;③里面的数据叫元素;
3】获取数组元素:数组名[索引号](索引号是从0开始的)
4】数组的长度:arr.length
7、命名规范:变量名词,函数动词;
------------------------------------------------------------------------------------------
数组-------------------------------
1、arr[i],是数组里面的第i个元素
2、arr.length,数组长度
3、console.log(sum, average);输出多个变量,用逗号分隔
4、修改数组长度,可增加数组元素,新增的元素为空,输出为 undefined;
5、修改索引号,可追加数组元素,arr[arr.length]=新增元素;arr[0]如果原来已经有元素,那么arr[0]=新元素,会替换原有元素;【注意:不能直接给数组名赋值,否则会直接覆盖数组,导致元素丢失】
6、冒泡排序
函数--------------------------------
1、函数的声明语法
function 函数名(){
//函数体
}
2、函数的调用
函数名();
1】不调用,不执行;
2】调用需要加小括号;
3、形参和实参(参数可有可无,数量不限)
function 函数名(形参1,形参2...){
//函数体
}
函数名(实参1,实参2...);
1】形参个数=实参个数:正常输出
2】形参个数<实参个数:多余的实参不参与运算
3】形参个数>实参个数:形参等于未定义的变量undefined;如果参与运算,则输出NaN;
4、函数的返回值(return)
1】语法:return 需要返回的结果;
2】只要函数遇到return就把结果返回给调用者;
3】通常函数不进行直接输出,而是用return返回值
4】return会终止函数,并且后面的代码不会被执行;
5】return只能返回一个值;(返回多个值,可用数组)
6】有return则返回后面的值,如果没有return或者return后面没有值,则返回undefined;
------------------------------------------------------------------------------------------------------------------
1、arguments(函数内置对象)
1】储存所有传递过来的实参;
2】伪数组(arguments):①具有length属性;②按照索引方式进行存储;③没有pop();push();等属性;
2、小技巧
1】通常一个函数只干一件事
2】函数中使用true和false来表示状态
3】先加上一个状态,再判断条件,如果满足改变状态,最后返回状态
3、函数的两种声明方式
1】自定义函数(命名函数)
function fn(){}
fn();
2】函数表达式(匿名函数)
var fun = function(){};
fun();
①fun是变量名,不是函数名;②变量内存的是函数;③也能传递参数;
4、作用域
1】全局作用域
整个script 标签/单独的一个js文件
2】局部作用域
在函数内部起效果和作用
5、变量的作用域
1.全局变量(浏览器关闭后销毁,占内存):可在全局进行访问;
①在全局声明的变量②在局部未声明的变量
2.局部变量(程序执行完毕后销毁,节约内存):只能在函数内访问;
①在局部作用下的变量(函数内)②形参也属于局部变量
6、作用域链:访问一个变量时,先访问当前作用域,如果没有,就向上一级作用域查找,这种链式查找机制就叫作用域链(就近原则)
7、预解析:js引擎运行js分为两步:预解析 和 代码执行
1】预解析会把JS里面的 var 和function 提升到当前作用域的最前面
①变量预解析(变量提升):把变量声明提升到当前作用域的最前面,但不提升赋值操作;
②函数预解析(函数提升):就是把所有的函数声明,提升到当前作用域的最前面,但是不调用函数
2】注意:①函数表达式,必须先申明,后调用;②命名函数,可先申明后调用,也可先调用后申明;③变量要尽量先申明,再使用;
对象----------------------------------
1、创建对象的3种方式(object)
1】字面量:var obj = {
uname: '张三',
age: 18,
sex: '男',
sayHi: function(){
console.log('Hi~');
}
};
注意:①属性名:值②多个方法/属性之间用逗号隔开③方法冒号后面跟匿名函数
1)调用属性:
①obj.uname②obj['age']
2)调用方法:
①obj.sayHi();
2】new Object:var obj = new Object();
obj.uname = '张三';
obj.age =18;
obj.sex = '男';
obj.sayHi = function() {
console.log('Hi~');
}
3】构造函数:用于封装对象的属性和方法的函数。
语法格式:
function 构造函数名() {
this.属性 = 值;
this.方法 = function () {}
}
调用:
new 构造函数名();
①构造函数名字首字母要大写
②构造函数不需要return就能返回结果(返回的是一个对象)
③调用构造函数,必须使用new
2、遍历对象for...in
for(var k in obj){ //obj为对象名,K为变量
console.log(k); //输出的是属性名
console.log(obj[k]); //输出的是属性值,K一定不能加引号
}
-----------------------------------------------------------------------
1、Math对象:不是一个构造函数,无需new调用,直接使用属性和方法即可
1】Math.PI 圆周率π
2】Math.max();最大值
Console.log(Math.max(1,2,3,4)); // 4
3】Math.abs();绝对值
4】三个取整
①Math.floor();向下取整②Math.ceil();向上取整③Math.round();四舍五入——(特殊)遇到.5的时候,往大了取, -1.5,取-1;
5】Math.random(); 返回一个0-1之间的随机浮点数(包括0,不包括1)
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
2、Date() 日期对象
1】使用Date:var date = new Date();
①没有跟参数,返回系统当前时间;②new Date('2019-04-22 8:8:8') 跟字符串
2】格式化日期:年 月 日
date.getFullYear(); 返回当前年
date.getMonth()+1; 返回当前月(0-11),实际月份需要+1
date.getDate(); 返回当前号数
date.getDay(); 返回周几,周日是 0 ;
date.getHours(); 时
date.getMinutes(); 分
date.getSeconds(); 秒
3】时间戳(1970年1月1日距离现在的时间毫秒数)
①date.valueOf(); date.getTime();②var time=+new Date(); ③ Date.now();——H5新增,有兼容性问题
3、Array()数组对象
1】创建数组对象:
①var arr1 = new Array(); 创建一个空数组
②var arr2 = new Array(2); 创建了一个有两个空元素的空数组,长度为2
③var arr3 = new Array(1,2); 创建了一个数组相当于 [1, 2]
2】检测是否为数组:
①arr instanceof Array 返回true或false
②Array.isArray(arr); 返回true或false ——IE9以上支持,有兼容性问题
3】添加/删除数组元素
①push() ●在数组末尾添加元素;●arr.push(数组元素);●push完毕后返回新数组的长度;●可一次添加多个元素
②unshift() ●在数组前面添加元素;●arr.unshift(数组元素); ●unshift完毕后返回新数组的长度;●可一次添加多个元素
③pop() ●删除数组最后一个元素,●并返回删除元素,●()内没有值;●arr.pop()
④shift() ●删除数组的第一个元素,●并返回删除元素,●()内没有值;●arr.shift()
4】翻转数组
arr.reverse();
5】数组排序(冒泡排序)
arr.sort(); //只能实现个位排序
解决办法:
arr.sort(function(a,b){
return a - b; //升序 b-a 降序;
});
6】获取数组元素的索引
indexOf (数组元素);——返回数组元素的第一个满足条件的索引号,如果找不到则返回-1;(从前往后查找)
lastIndexOf (数组元素);——返回数组元素的最后一个满足条件的索引号,如果找不到则返回-1;(从后往前查找)
7】将数组转换为字符串
①toString() //直接输出,用逗号隔开
②join('分隔符') //没有分隔符默认逗号,有分割符用分隔符
4、字符串对象
1】基本包装类型:
字符串变量在使用时,js内部将其包装成了字符串对象,可以使用属性和方法。
2】字符串的不可变性:赋值或者拼接越多,效率越低,越占内存(了解)
3】字符串中每一个字符,都有一个对应的索引号;indexOf('要查找的字符' , 起始位置); 返回索引值;lastindexOf同理;
4】charAt(index) 根据位置返回字符;
charCodeAt(index) 根据位置返回相应索引号的字符ASCII值:目的判断用户按了哪个键
str[index]——H5新增,考虑兼容问题
5】
①concat('字符串1','字符串2')——等效于+号
②substr('截取起始位置','截取几个字符')——起始位置为索引号
③replace('被替换的字符','替换为的字符')——只会替换第一个字符
④split('分隔符')——字符串转换为数组
5、简单数据类型(数字,字符串,布尔,undefined,null) 与 复杂数据类型(数组,对象) 在内存中保存的方式不一样
1】如果变量中存储的数据是简单类型, 当变量进行传值时,把变量中的值复制一份,然后给另一个变量。
2】
1)如果变量中保存的复杂数据类型,变量中保存的 数据的地址
2)当变量在传值时,是把地址传给了另一个变量
3)两个变量保存的地址是一样的,指向的是同一个对象
4)当操作了其中一个,另一个也被影响。
影响的情况有:
1】变量之间的赋值
2】函数调用时,传参
循环:知道次数用for,不知道次数用wihle
练习:
1.筛选数组
2.sort排序
3.倒计时
4.随机数
5.数组去重 |
|