黑马程序员技术交流社区

标题: 【成都】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