黑马程序员技术交流社区

标题: 【成都】js基础笔记 [打印本页]

作者: 进gege 时间: 2019-4-25 15:03
标题: 【成都】js基础笔记
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.数组去重

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2