JavaScript学习笔记
概念 | 脚本语言：一行一行的翻译成机器语言，并一行一行的执行；而不是全部编译执行； | ||||||||||
作用 | 表单动态校验、网页特效、服务端开发Node.js、桌面程序Electron、App（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js） | ||||||||||
执行 | 浏览器分成两部分：渲染引擎、JS引擎 渲染引擎：用来解析HTML和CSS，俗称内核，比如Chrome的blink； JS引擎：也称为JS解释器，用来读取网页中的JS代码，对其处理后运行； 解释型语言（脚本语言）：翻译一句，执行一句； 浏览器本身并不会执行JS代码，而是通过内部JS引擎（解释器）来执行JS代码； JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行； | ||||||||||
组成 | JS的组成： ECMAScript（定义JavaScript的语法）： DOM（Document Object Model文档对象模型）：是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小位置颜色等）； BOM（Browser Object Model浏览器对象模型）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出对话框、控制浏览器跳转、获取分辨率等； | ||||||||||
位置 | JS的3种书写位置： 1.行内（写在开始标签内部）； 2.内嵌（HTML文件内部）最常用；写JS代码 3.外部（单独的JS文件）双标签；JS代码量比较大的情况，不会破坏HTML的结构化页面，把大段JS放到HTML页面之外；引用外部JS问价你的script标签中间不可以写代码； | ||||||||||
注释 | 单行 注释 //，VSCode中，快捷键Ctrl+/ 多行注释 /**/，VSCode中，默认快捷键shift+alt+a，建议修改为Ctrl+Shift+/ | ||||||||||
输入输出 | alert(msg)浏览器弹出警示框 console.log(msg)浏览器控制台打印输出信息 prompt(info)浏览器弹出输入框，用户可以输入 | ||||||||||
变量 | var age;console.log(age);只声明，不赋值；输出：undefined; console(age);不声明，不赋值，直接使用；输出：报错； age=10;console.log(age);不声明，直接赋值；输出：10 | ||||||||||
命名规范 | 字母、数字、下划线、美元符号组成； 区分大小写；不能数字开头；不能关键字； 驼峰命名规范；变量名有意义； 不能使用var name； var $name;是合法的； var 18age;var &sex; var the world;var theworld;都是错误的或者不符合规范的； | ||||||||||
数据类型 | 根据=右边的值类型，进行类型推断； 变量的数据类型是可以变化的；var x=10;x=’hello’; 简单数据类型 lNumber 数字型，包含整形、浮点型；八进制（0开头）十六进制（0x开头）； lBoolean 布尔类型true、false，等价于1/0； lstring字符串，”张三” lUndefined声明了，而未赋值的； lNull空值； Number.MAX_VALUE最大值（10的308次方）; Number.MIN_VALUE最小值（10的-324次方）; NaN表示非数字类型Not a Number； Infinity无穷大，-Infinity负无穷大； isNaN（）判定一个变量是否为【非数字】类型； 字符串必须加引号，单引号或者双引号； JS可以用单引号嵌套双引号，或者用双引号嵌套单引号；（外双内单，外单内双） 转义字符：\n,\\,\’,\”,\*,\t,\b空格（相当于 ）； 转义字符必须放到引号里面（单引号双引号均可）； “我是一个’高富帅’的\n程序员” length获取字符串长度； 字符串拼接，用加号+，如果其中一个是字符串，另外一个就会自动转换为字符串类型，然后再进行拼接； ‘hello’+18;’hello’+18+’world’;’12’+12; true当1，false当0；true+2就是3，false+2就是2； Null+1还是1，这里Null相当于0；Undefined+1是NaN； typeof null结果是object； | ||||||||||
类型转换 | toString（）转换为字符串；String（）转换为字符串； 字符串拼接时非字符串类型自动转换为字符串； 转换为数字类型parseInt（str）；parseFloat(str)；Number(str)； 隐式转换为数字：-*/运算符； 转为Boolean类型：Boolean（）； 能转换为false的：’’空字符串,0,NaN,null,undefined，其他都转换为true； 编译：一次性编译，全部编译完成后执行； 解释：解释一句，执行一句； | ||||||||||
运算符 | 分类：算术、递增递减、比较、逻辑、赋值； +-*/%浮点数的计算精度不如整数； ++前置，先返回，后自增；后置：先自增，后返回；–同理； | ||||||||||
比较运算符：,=, ==判等号，会自动进行类型转换； !=不等，会自动进行类型转换； ===全等，要求类型和值都相同； ！==不全等，类型和值有一个不同，就是不全等； 18==‘18’ true ; 18===’18’false; 逻辑运算符：&& || ! 短路运算：如果左边的值能够确定表达式的值，就不再向右计算了； 赋值运算符：+=，-=，/=，%=， | |||||||||||
语句 | if(){}else if(){} else if(){} else{};三元a>b?a:b;seconds<10?’0’+seconds:seconds; switch(expression){case 1:语句1;break;case 2:语句2;break;default:语句3;} for(var i=0;i<10;i++){} while(){} do{}while() 后面都不用加分号；； var arr=new Array();var arr=[];var arr=[1,’hello’,true]; 数组里面的各个元素数据类型可以不同； 数组的长度可以改变，可以向数组中添加新的元素； 添加数据arr[1]=1;arr[4]=6;如果索引已经存在，就覆盖原值，否则添加新数据； 不要给数组名赋值，会覆盖掉所有数组数据；arr=’hello’; | ||||||||||
函数 | function f(){} function f2(p1,p2){} function(){return 666;} function getMax(a,b){return a>b?a:b;} return只能返回一个值； function fn(){console.log(arguments);console.log(arguments.length);} 全局作用域：整个script标签或者一个单独的js文件； 局部作用域：函数内部； ES6中有第三种作用域：块级作用域，就是大括号{}范围内； | ||||||||||
预解析 | 函数调用可以放在函数定义之前； JS引擎运行分为2步：预解析，代码执行； 预解析会把JS里面所有var和function提升到当前作用域的最前面；
| ||||||||||
对象 | {}大括号，对象字面量；[]中括号，数组字面量，()小括号，提升优先级运算符； 创建对象3种方式：字面量{}，new Object，构造函数； var obj={name=’Cat’,age=22,sayHi:function(){console.log(“hello”);}} 多个属性和方法之间用逗号，隔开； 属性和函数都是用键值对语法格式：age:18； obj.name;obj[“name”];obj.sayHi(); var obj=new Object(); obj.uname=’Tom’; obj.age=22; obj.sayHi=function(){console.log(‘hello’); 构造函数名首字母要大写； 构造函数不需要return语句； 调用构造函数，必须要用new关键字； function Star(uname,age,sex){ this.name=uname; this.age=age; this.sex=sex; this.sing=function(song){console.log(song);} } var ldh=new Star(‘刘德华’,18,’男’);ldh.sing(‘冰雨’); new的执行过程： 1.在内存中创建一个新的空对象； 2.让this指向这个对象； 3.执行构造函数里面的代码，给这个新对象添加属性和方法； 4.返回这个新对象（所以构造里面不需要return）； 遍历对象成员： for(var k in obj) {console.log obj.k;//输出属性名 console.log(obj[k]);//输出属性值 } | ||||||||||
内置对象 | JS对象分类3种：自定义对象，内置对象，浏览器对象； 内置对象有：Math对象，日期对象，数组对象，字符串对象； 查阅文档：https://developer.mozilla.org 如何学习一个方法：功能，参数，返回值，测试； Math.PI;Math.max(1,2,3);Math.random();Math.floor(); Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1）; var date=new Date(); 获取总的毫秒数（时间戳）从1970年1月1日起： date.valueOf();date.getTime(); var date=+new Date();date;Date.now(); arr isinstanceof Array、Array.isArray(arr);判定变量是不是数组； arr.push(3);添加元素； arr.pop();删除数组最后一个元素；返回值是删除的元素； arr.shift();删除数组第一个元素；返回值是删除的元素； arr.reverse()翻转数组； arr.sort(function(a,b){return a-b;})升序排序数组; arr.sort(function(a,b){return b-a;})降序排序数组; arr.indexOf();arr.lastIndexOf();获取元素索引； arr.toString();arr.join(‘-’);数组转字符串； 包装类型：将基本类型包装成复杂类型； var str=’hello’;=>var temp=new String(‘hello’);var str=temp; 3个包装类型（引用类型）：StringNumber、Boolean； str.indexOf(“h”,3);str.charAt(3); concat(str1,str2,str3,,,,);sbustr(start,length);slice(start,end);substring(start,end); str.replace(‘a’,’b’);str.split(‘,’); | ||||||||||