JavaScript学习笔记(一)

我的Javascript基础学习

交互编程的三个基本要素:

1.用户输入
2.程序内部处理
3.输出结果

基础知识点:

1.数据类型: 字符串型。数字型,bool型,undefined型,null型,infinity(无穷大),-infinity(负无穷大),NaN(Not a number)
2. 自增: n++ 或者 ++n
3. 自减: n-- 或者 --n
4. 一个等号为赋值,两个等号为判断,三个等号为全等
5. && 逻辑与 ,|| 逻辑或 ,! 逻辑非
6. if 语句格式 :if(条件表达式 ) { xxx }
7. 三元表达式: 由三元运算符组成的式子成为三元表达式,语法结构:条件表达式? 表达式1:表达式2 , 执行思路,如果条件表达式结果为真,则返回 表达式1 的值,否则返回 表达式2 的值
8. switch语句: 语法结构: switch(表达式) { case value: xxx default:xxx},其中default是前面的 case的情况都不满足再执行
9. while语句: while(表达式) { xxx},先判断条件是否满足,如果表达式为真,再执行循环体内部的结构,
10. 10.do while语句: do { xxx } while(条件表达式),执行思路:跟while不同的地方在于 do while 先执行一次循环体,再判断条件,所以至少执行一次
11. 声明函数之后再调用函数,函数不调用,函数本身就不会执行,只有在调用的时候函数体内部的代码才会执行和发挥作用
12. 函数的封装:把一个或多功能通过函数的方式封装起来,对外只提供一个接口,简单理解(封装类似将电脑配件整合到机箱中,类似于快读打包)
13. 当一个函数不知道会有几个参数传进来的时候,就可以使用arguments,函数内部使用 arguments[n]的形式可以调用传进来的参数,它是一个伪数组(并不是真正意义上的数组) 1st:具有数组的length属性 ,2nd:按照索引的方式进行存储,3rd:他没有真正数组的一些方法如 pop(), push()等
14. 函数之间可以相互调用和嵌套使用
15. 调用函数需要添加小括号
16. 两种函数的声明:1st利用函数关键字定义函数(命名函数):function fn() {},2nd:函数表达式(匿名函数): var fun =function() {};,调用 fun(),fun是变量名不是函数名, 3rd:函数表达式声明方式和声明变量差不多,只不过变量里面存的是值, 而函数表达式里面存的是 函数
17. 作用域:就是代码(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性更重要的是减少命名冲突
18. 局部作用域: 在函数内部就是局部作用域,这个代码的变量只在函数内部起效果
19. 从执行效率来看,全局变量只有当浏览器关闭的时候才会销毁,比较占内存资源,局部变量 当程序执行完就会销毁,比较节约内存资源
20. 内部函数可以访问外部函数的变量,例如:如果外部第一层函数 fn()没有num,则会在script的子级代码中寻找num
21. 预解析:JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器再运行JavaScript代码的时候分为两步:预解析 和 代码执行
22. 在JavaScript 中,对象是一组无序的相关属性和方法的集合,所以的事物都是对象,例如字符串,数值,数组,函数等
23. 将某人的信息保存在数组内: var arr =[‘name’,‘sex’,age,‘weight’],这样就创建了一个数组类的对象
24. 如何调用对象属性:调用对象的属性 我们采取这种方法 对象名 . 属性 . 我们理解为 的 ,调用 属性还有一种方法 对象名[属性名]
25. 利用new Object 创建对象: new后面的 首字母必须大写, 例如

        var obj = new Object(); //创建了一个空对象
        obj.uname='张三疯';
        obj.age=18;
        obj.sex='男';
        obj.sayHi=function() {
     
            console.log('你好呀');
        }

,我们利用 等号 “=” 赋值的方法,添加对象的属性和方法,每个属性和方法之间用 分号结束
26.构造函数创建对象:function xxx(x1,x2,x3) {},记得用 this.xxx=x1来给每一个属性赋值
27.遍历对象: 用 for in遍历我们的对象:for( 变量 in 对象):

        for (var k in obj) {
     
            console.log(k); //k 变量 输出 得到的是属性名
            console.log(obj[k]); // obj[k] 得到的是属性值
            // console.log(obj.k); 此方法不行
        }
        // 我们使用 for in 里面的变量 我们喜欢写 k 或者 key

28.Math对象: Math.max():求全部数中的最大值, Math.abs():求某一个数的绝对值,若括号内是 ‘pink’,则返回 NaN
29.Math三个取整方法: 1st: Math.floor():往小了取整,如1.9变为1 ,2nd: Math.ceil():往大了取整,如1.1变为2, 3rd:Math.round(): 四舍五入,其他数字都是四舍五入,但是 .5特殊 ,它往大了取, -1.5会变成 -1(因为-1大于-2)。
30.Math的随机数方法:random() ,返回的是在0<=x<1之间的小数,这个方法里面不跟参数,我们想要得到两个数之间的随机整数,并且包含这两个数:
用 Math.floor(Math.random()*(max-min+1)+min),例如

        function getRandom(min,max) {
     
            return Math.floor(Math.random()*(max-min+1)) + min;
        }
        // 5.随机点名
        var arr=['张三','李四','王麻子','特朗普','奥巴马','许嵩','周杰伦','维斯布鲁克']
        console.log(arr[getRandom(0,arr.length-1)]);

31:Date日期对象: Date()日期对象 ,是一个构造函数, 必须使用 new 来调用 ,创建我们的日期对象,例如: var arr = new Date(), 1st:使用Date,如果没有参数,则返回系统当前的时间
32:Date参数的常用写法: 1st:数字型: 2019,10,01 ,当使用数字型的写法,会自动给月份多加一个月,上述会打印出11月份,2nd:字符串型:‘2019-10-1 8:8:8’
33. var date =new Date()之后,使用:1st: date.getFullYear():返回当前日期的年,2nd: date.getMonth()+1 :返回月份,不过要比当前小一个月,所以+1,3rd:date.getDate():返回是几号,4th:date.getDay(), 返回的星期几,但是周日返回的是 0 例子:

var year =date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var day =date.getDay();
        var arr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

        console.log('今天是'+year + '年'+month+'月' +dates +'日' +arr[day]);

34.还是如上初始化 date, 1st:date.getHours():获取小时,2nd:date.getMinutes():获取分钟,3rd:date.getSeconds():获取秒数
35.时间戳: 获得Date总的毫秒数,不是当前时间段毫秒数,而是距离1970年1月1日过了多少毫秒数,为什么是1970年的这个时候呢?自行去百度把哈哈哈。
36.三种获得时间戳的方法: 1st:通过 valueOf 和 getTime() 获取:date.getTime() , date.valueOf(), 2nd:简单写法(最常用的写法): var date1=+new Date() ,3rd:更简单的写法 H5新增的:Date.now() ,新方法注意兼容性
37.数组的两种创建方式: 1st:利用数组字面量:var arr = [1,2,3],2nd:利用new Array(), var arr1 = new Array(2):这个2表示 数组的长度为2,里面有两个空(empty)的数组元素,var arr2 =new Array(2,3):等价于 [2,3],这样写表示有两个数组元素 分别是 2 和 3
38.检测是否为数组方法:1st:利用 instanceOf 例如:

        console.log(arr instanceof Array);

如果是数组 则返回 True,否则返回 false,2nd:Arrary.isArray(xxx), 例如:

        console.log(Array.isArray(arr));

值得注意的是:Array.isArray(参数); 是H5新增的方法 ,ie9 以上的版本才支持。
39.添加数组元素: 1st:在数组末尾添加元素: arr.push(参数) ,2nd: 在数组的开头添加数组:arr.unshift(参数),值得注意的是: push或unshift完毕之后,返回的结果是 新数组的长度 , 原数组也会发生变化,若原先数只有3个元素,经过以下代码变换之后,数组长度就变为5,且4,pink被加入到原数组

        console.log(arr.push(4, 'pink')); // 返回值 5

40.删除数组元素: 1st:arr.pop() ,它是删除数组的最后一个元素,一次只能删除一个元素,他返回的值是删除的那个元素,原数组也会发生变化。 2nd:shift(), 它是删除数组的第一个元素,shift没有参数,它返回的值也是被删除的那一个数组元素,原数组也会发生变化

41.数组的排序:使用 arr.sort() , 但是如果需要排序成功 ,需要加如下代码:

        //需要进行一下操作才可以正确的排序成功
        arr.sort(function(a,b){
     
            // return a-b;  //升序的顺序排列
            return b-a; // 降序的顺序排列
        });

42.数组的索引: 返回数组元素索引号的方法,1st: indexOf(数组元素) ,此方法默认是从前慢开始找 ,它只返回第一个满足条件的索引,后面有满足的将不会再执行,当在数组中找不到元素的时候 ,他将返回值 1, 2nd: lastindexOf(数组元素), 此方法是从后往前查找的,但是索引号不变

43.数组转化为字符串: 使用 arr.toString() 的方法使得数组转化为字符串,和数字等转化为字符串类似.




容易搞混和遗忘的类型:

  1. bool类型的 true 和 false 参与加减法等数学运算分别看做 1 和 0
  2. 一个变量声明了 但是未赋值 就是 undefined 类型的数据类型
  3. str.length 会求出一个字符串的长度
  4. undefined 类型 和 数字相加 最后结果是 NaN(不是一个数字 代表不确定)
  5. undefined类型和字符串相加例如: ‘caigou’ + undefined 等价于 : caigouundefined
  6. 判断bool类型的值的 代码: Boolean(xxxx)
  7. 获取某一个数据是什么类型的方式: typeof(xxx)
  8. 把数据转换为字符串类型: 1st:变量.toString ,2nd:String(变量),3rd:利用字符串拼接的方法例如: num+ ’ '(整型加一个空字符)
  9. 把数据类型转换为数字型: 1st:parseInt(变量),此方法得到的只能是整数(会舍弃小数点后的部分), 2nd:parseFloat(变量),此方法将保留小数点后的部分, 3rd:Number(变量) ,进行强制类型转换, 4th:利用算术运算 * - / (不包括 + 号运算)进行强制转换例如: ‘66’ - 0 结果为整型的 66
  10. 我们不能直接拿着浮点数进行比较 是否相等 例如: var num= 0.1 +0.2,但是 num == 0.3 返回的 是 false , 0,1+ 0.2 = 0.30000000000000004
  11. === 三个等号是判断数据类型和值是否都相等(全等),不相等为false
  12. 逻辑与短路运算:如果表达式1 结果为真,则返回表达式2 ,如果表达式1为假,则返回表达式表达式1
  13. 逻辑或的短路运算:如果表达式1结果为真,则返回表达式1,如果表达式1结果为假,则返回表达式2
  14. 表达式是有返回值的
  15. switch语句如果有一个条件满足了但是并未给此 case 加 break;,则后面的情况不论是否满足都会输出结果
  16. do while语句至少都会执行一次内部样式
  17. 对于函数的形参和实参匹配问题:1st:如果形参个数少于实参:只会取到形参的个数,多的实参不会调用,2nd:如果形参个数多于实参,形参可以看做是不用声明的变量,没有接收参数的形参看做是一个undefined
  18. 函数的形参也可以看做是一个局部变量
  19. js中目前没有块级作用域,js在es6的时候新增的块级作用域,块级作用域:if {xxx},for {xxx},外部的是不能调用if和num里面声明的变量的
  20. 作用域链: 内部函数访问外部函数的变量,才去的是链式查找的方式来取决那个值 这种结构我们称作作用域链 就近原则
  21. 预解析:会把函数的声明(function)和变量(var)的声明提到整个代码的最前面,代码的执行会按照代码的书写顺序 从上往下执行,预解析分为:变量预解析(变量提升:提升到当前作用域的最前面,但是不提升赋值操作),函数预解析(函数提升,提升到当前作用域的最前面,但是不调用函数) 例子:
function fun() {
     
            console.log(num); //undefined 
            var num = 20;
        }
        var num = 10;
        fun();

        //相当于执行了以下操作
        var num;
        function fun() {
     
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun()
  1. var a=b=c: 相当于:var a=9 ; b = 9, c = 9, b和c没有var定义,直接赋值,如果在函数内部这样做则把 b 和 c 当全局变量看
  2. 变量和属性的区别: 变量: 单独声明并赋值,使用的时候 直接写变量名,单独存在, 属性: 在对象内部,不需要声明,使用的时候必须是 对象 . 对象
  3. 因为我们一次创建对象 里面有很多属性和方法是大量相同的 我们只能复制
    因此 我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数 称为 构造函数
    又因为 这个函数不一样,里面封装的不是普通的代码,而是 对象
    构造函数 就是把我们对象里面一些相同的属性 和方法 抽象出来封装到函数里面
    25.构造函数首字母要大写,构造函数不需要写 return 就可以返回结果,我们调用构造函数,必须使用 new ,只要new 构造函数名 (),就创建了一个对象xxx{}
        function Star(uname,age,sex,song) {
     
            this.name=uname;
            this.age=age;
            this.sex=sex;
            this.sing =function( song) {
     
                console.log(song);
            }
        }
        var ldh =  new Star('须知毫',18,'男',);
        ldh.sing('hahahahaaaaa')

26.内置对象: JavaScript中的对象分为三种: 自定义对象,内置对象,浏览器对象
前两种对象是js的基础内容,属于ECMAScript;第三个浏览器对象属于我们js独有,称为 JS API
内置对象就是指 JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者是最基本而必要的功能(属性和方法)
27.console.log(Math.max(1,23.32,3223,23,‘sad’)); // 结果是NaN,因为其中混入了一个 ‘sad’,不是数字类型
28.console.log(Math.abs(’-1’)); // 隐式转换 会把字符串型的 -1 转换为数字型
29.Math.random() 不能提供像密码一样安全的随机数,不能用他们来处理有关安全的事情
30.Date()中的 月份和 星期日的表示和中国有些不同,星期日用0表示,月份都要比我们的表示小一个月
31.倒计时案例 获取天数,小时,分钟,秒数的 算法: 在取得剩余时间的总毫秒数之后:
times=times/1000:(获取秒数,parseInt(1s=1000ms))
1st: 天数 : var days =parseInt( times/60/60/24;)
2nd:小时: var hours = parseInt(times/60/60%24;)
3rd: 分钟:var minutes = parseInt(times/60%60;)
4th:秒数: var seconds = parseInt(times%60)
32.instanceOf 不仅可以拿来判断是否是数组,也可以拿来验证是否是其他东西, 使用 aaa instanceOf bbb, 译为: aaa 是 bbb吗?

console.log(obj instanceof Object);

上例为判断是否为 一个 对象(Object)

32.一个函数的return的注意事项:

return语句之后的语句将不会再执行

return num1,num2;
则返回的结果是最后一个值

你可能感兴趣的:(前端学习,JavaScript)