JS基础
JavaScript
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JS现在的应用场景：
网页特效
服务端开发(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
JS和HTML、CSS的区别
1、HTML：提供网页的结构，提供网页中的内容
2、CSS: 用来美化网页
3、JavaScript: 可以用来控制网页内容，给网页增加动态的效果
JavaScript的的组成：
ECMAScript--js核心
定义了JavaScript的语法规范
描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。
BOM--浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。
DOM--文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
JavaScript的书写位置
1、写在行内
<input type="button" value="按钮" onclick="alert('Hello World')" />
2、写在script标签中
<head>
<script>
alert("HelloWorld");
</sript>
</head>
3、写在外部js文件中，在页面引用
<script src="main.js"></script>
注意：引用外部js文件的script标签中不可以写js代码。
变量
var(variable)：声明变量
变量赋值：var age; age = 18;
同时声明多个变量：var age,name,sex; age=10; name="tom";
同时给多个变量赋值：var age = 10; name= "tom";
变量的命名规则：
使用字母，数字，下划线，美元符号$开头，不能以数字开头。
不能使用关机键字和保留字。
区分大小写。
JS数据类型
Number、String、Boolean、Undefined、Null
Number类型：
1、数字字面量：数值的固定值的表示法。 110、60.5
2、进制
十进制：var num = 9;
十六进制：var num = 0xA;
八进制：var num = 07; （加上0）
3、浮点数：
精度问题
var n = 5e-324;
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
注意：不要判断两个浮点数是否相等。
4、数值范围：
最小值：Number.MIN_VALUE，这个值为： 5e-324。
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308。
无穷大：Infinity。
无穷小：-Infinity。
5、数值判断
NaN：not a number
NaN 与任何值都不相等，包括他本身。
isNaN：is not a number
String类型
1、字符串字面量
‘abc’ "abc"
2、转义符
3、字符串长度
.length
Boolean类型
Boolean字面量：true、false
Undefined和Null
1、undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined。
2、null表示一个空，变量的值如果想为null，必须手动设置。
复杂数据类型：Object
获取变量的类型：typeof
字面量
在源码中一个固定值的表示法，即常量。
数据类型转换
1、转换成字符串类型：
toString()
String(xxx):存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null.
String(i); i只声明，未赋值。
2、转换成数值类型
Number()：可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN。
console.log(Number("123"));
parseXxx()
3、转换成布尔类型
Boolean()
0 ''(空字符串) null undefined NaN 会转换成false，其它都会转换成true.
关系运算符(比较运算符)
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等
表达式与语句
函数
函数声明：
function 函数名(){ }
函数表达式：
var fn = function(){ //函数体 }==》js中函数亦可以给一个名称。
函数的参数：
语法：
function 函数名(形参1,形参2,,形参...){ //函数体 }
arguments的使用
函数其他
1、匿名函数：没有名字的函数
使用：将匿名函数赋值给一个变量，这样就可以通过变量进行调用。
附注：关于自执行函数(匿名函数自调用)的作用：放置全局变量污染。
2、自调用函数
var fn = function(){ }
匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用来执行。
fn()或者：
(function(){alert(123)})();
==》函数也是一种数据类型。
==》因为函数也是一种类型。所以函数可以作为参数。
也可以作为返回值。
function fn(b){ var a =10; return function(){alert(a+b)};}
fn(15)();
总结：JS是一门弱类型的语言。并不关注传递的参数的数据类型。
作用域
全局变量和局部变量
全局变量：
在任何地方都可以访问到的变量就是全局变量，对应全局作用域。
局部变量：
只在固定的代码片段内可以访问到的变量。
注意：
不使用var声明的变量是全局变量。不推荐使用。
变量退出作用域的时候会被销毁，全局变量关闭网页或浏览器才会被销毁。
________________________________________________________________
块级作用域
任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域。附注：
作用域是一种规则，在代码编译阶段就确定了，规定了变量与函数的可被访问的范围。全局变量拥有全局作用域，局部变量则拥有局部作用域。 js是一种没有块级作用域的语言(包括if、for等语句的花括号代码块或者单独的花括号代码块都不能形成一个局部作用域)，所以js的局部作用域的形成有且只有函数的花括号内定义的代码块形成的，即函数作用域。
词法(静态)作用域
变量的作用域是在定义是决定而不是执行时决定，也就是输词法作用域取决于源码。通过静态分析就能确定。因此词法作用域也叫做静态作用域。
JS中静态作用域规则：
1、函数允许访问函数外的数据。
2、整个代码结构中只有函数可以限定作用域。
3、作用域规则首先使用提升规则分析。
4、如果当前规则中有(变量)名字了，就不再考虑外面(变量)的名字。
预解析：
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。
预解析过程：
●把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
●把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
●先提升var，在提升function。
如果变量和函数同名的话，函数优先。
全局解析规则：
函数内部解析规则：
●变量提升
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
●函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。
作用域链
只有函数可以制造作用域结构，那么只要是代码，就至少有一个作用域，即全局作用域。凡是代码中有函数，就构成了另外一个作用域。
// 案例1： function f1() { function f2() { } } var num = 456; function f3() { function f4() { } }
// 案例2 function f1() { var num = 123; function f2() { console.log( num ); } f2(); } var num = 456; f1();
var a = 25; function abc (){ alert(a);//undefined var a = 10; } abc(); console.log(a); //25 function a() { console.log('aaaaa'); } var a = 1; console.log(a); //1
尚待理解：
// 1、----------------------------------- var num = 10; fun(); function fun() { console.log(num); var num = 20; } //2、----------------------------------- var a = 18; f1(); function f1() { var b = 9; console.log(a); console.log(b); var a = '123'; } // 3、----------------------------------- f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c); }
var a，是局部变量，b，c是全局变量。
对象
对象创建方式：
1、对象字面量
var o = { name: 'zs', age: 18, sex: true, sayHi: function () { console.log(this.name); } };
2、newObject()创建对象
var person = new Object(); person.name = 'lisi'; person.age = 35; person.job = 'actor'; person.sayHi = function(){ console.log('Hello,everyBody');
3、工厂创建对象
function createPerson(name, age, job) { var person = new Object(); person.name = name; person.age = age; person.job = job; person.sayHi = function(){ console.log('Hello,everyBody'); } return person; } var p1 = createPerson('张三', 22, 'actor');
4、自定义构造函数
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayHi = function(){ console.log('Hello,everyBody'); } } var p1 = new Person('张三', 22, 'actor');
对象使用：
1、遍历对象属性:for..in语法
2、删除对象属性
delete obj.name;
内置对象
JavaScript 中的对象分为3中：内置对象、浏览器对象、自定义对象
JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...
对象只是带有属性和方法的特殊数据类型。
MDN：mozailla developer network
Math对象
Math.PI // 圆周率 Math.random() // 生成随机数 Math.floor()/Math.ceil() // 向下取整/向上取整 Math.round() // 取整，四舍五入 Math.abs() // 绝对值 Math.max()/Math.min() // 求最大和最小值 Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt() // 求指数次幂/求平方根
Date对象
// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数 var now = new Date(); console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数 Date构造函数的参数 1. 毫秒数 1498099000356 new Date(1498099000356) 2. 日期格式字符串 '2015-5-1' new Date('2015-5-1') 3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始
●获取日期毫秒值形式：
var now = new Date(); // valueOf用于获取对象的原始值 console.log(date.valueOf()) // HTML5中提供的方法，有兼容性问题 var now = Date.now(); // 不支持HTML5的浏览器，可以用下面这种方式 var now = + new Date(); // 调用 Date对象的valueOf()
●日期格式化的方法
getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime() getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期几 0周日 6周6 getDate() // 返回当前月的第几天 getMonth() // 返回月份，***从0开始*** getFullYear() //返回4位的年份 如 2016
Array对象
// 1. 使用构造函数创建数组对象 // 创建了一个空数组 var arr = new Array(); // 创建了一个数组，里面存放了3个字符串 var arr = new Array('zs', 'ls', 'ww'); // 创建了一个数组，里面存放了4个数字 var arr = new Array(1, 2, 3, 4); // 2. 使用字面量创建数组对象 var arr = [1, 2, 3]; // 获取数组中元素的个数 console.log(arr.length);
●数组常用方法：
// 1 栈操作(先进后出) push() pop() //取出数组中的最后一项，修改length属性 // 2 队列操作(先进先出) push() shift() //取出数组中的第一个元素，修改length属性 unshift() //在数组最前面插入项，返回数组的长度 // 3 排序方法 reverse() //翻转数组 sort(); //即使是数组sort也是根据字符，从小到大排序 // 带参数的sort是如何实现的？ // 4 操作方法 concat() //把参数拼接到当前数组 slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始 splice() //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目) // 5 位置方法 indexOf()、lastIndexOf() //如果没找到返回-1 // 6 迭代方法 不会修改原数组(可选) every()、filter()、forEach()、map()、some() // 7 方法将数组的所有元素连接到一个字符串中。 join()
●清空数组
// 方式1 推荐 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);
基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean。
// 下面代码的问题？ // s1是基本类型，基本类型是没有方法的 var s1 = 'zhangsan'; var s2 = s1.substring(5); // 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于： var s1 = new String('zhangsan'); var s2 = s1.substring(5); s1 = null;
// 创建基本包装类型的对象 var num = 18; //数值，基本类型 var num = Number('18'); //类型转换 var num = new Number(18); //基本包装类型，对象 // Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如： var b1 = new Boolean(false); var b2 = b1 && true; // 结果是什么==》true
String类型
字符串的不可变
var str = 'abc'; str = 'hello'; // 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中 // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
●创建字符串对象的常用方法
var str = new String('Hello World'); // 获取字符串中字符的个数 console.log(str.length);
●字符串对象的常用方法
// 1 字符方法 charAt() //获取指定位置处字符 charCodeAt() //获取指定位置处字符的ASCII码 str[0] //HTML5，IE8+支持 和charAt()等效 // 2 字符串操作方法 concat() //拼接字符串，等效于+，+更常用 slice() //从start位置开始，截取到end位置，end取不到 substring() //从start位置开始，截取到end位置，end取不到 substr() //从start位置开始，截取length个字符 // 3 位置方法 indexOf() //返回指定内容在元字符串中的位置 lastIndexOf() //从后往前找，只找第一个匹配的 // 4 去除空白 trim() //只能去除字符串前后的空白 // 5 大小写转换方法 to(Locale)UpperCase() //转换大写 to(Locale)LowerCase() //转换小写 // 6 其它 search() replace() split() fromCharCode() // String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
浙公网安备 33010602011771号