JavaScript基础
JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
JavaScript的特点
（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。
（3）基于对象：内置大量现成对象，编写少量程序可以完成目标
javascript语法
JavaScript对换行、缩进、空格不敏感。
备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。
所有的符号，都是英语的。比如括号、引号、分号。
代码的引入
在HTML中，可以在body标签中插入<script type="text/javascript"></script>标签对；通过src引入<script src=****.js"></script>
变量赋值
变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字，变量区分大小写也就是说A和a是两个变量。
举例： var a = 100 var就是一个关键字，用来定义变量，关键字后面一定要有空格隔开。
注释
// 单行注释 /* 多行注释1 多行注释2 */
输入输出
警告窗
alert()的使用： <script type="text/javascript"> alert("warning"); </script>控制台输出
console.log("") 表示在控制台中输出。console表示“控制台”，log表示“输出”。 控制台在Chrome浏览器的F12中。控制台中经常使用这条语句输出，来测试程序是否正确。输入框
# prompt()的使用 <script type="text/javascript"> var a = prompt('今天是什么天气？'); console.log(a); </script>基础数据类型
与 python一样，js中定义变量的时候不必指定类型，变量会自动的根据存储内容的类型不同，来决定自己的类型。js中查看数据类型使用typeof方法。
数值类型：number
js中只要是数就是数值型，无论整数、小数、无论大小正负
var a = 100; //定义了一个变量a，并且赋值100 console.log(typeof a); //输出a变量的类型 console.log(typeof(a)); //输出a变量的类型 var newNum = 2.786.toFixed(2); //小数保留位数
字符串类型：string
var a = "盖伦"; var b = '赵信'; //不区分单双引号 console.log(typeof a); console.log(typeof b);
常用方法
方法
说明
.length #不加括号的是属性
返回长度
.trim() #得到一个新值
移除空白
.trimLeft()
移除左边的空白
.trimRight()
移除右边的空白
.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx
拼接
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串
返回第n个字符
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1
子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解即可
根据索引获取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它；顾头不顾尾,可以用负数,取子串
切片
.toLowerCase() #全部变小写
小写
.toUpperCase() #全部变大写
大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数
分割
空元素null
var c1 = null;//空对象. object console.log(c1)
未定义undefined
var d1; //表示变量未定义 console.log(typeof d1)
布尔值boolean
var b1 = false; console.log(typeof b1)
布尔值
代表
true
[ ] { }是属于true的，以及一些其他可以为true的数据
false
undefined null 0 '' NaN(not a number)
正则RegExp对象
创建正则表达式
创建方式一: var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\ 创建方式二： var reg2 = /正则表达式/ //内部的元字符就不会转义了 正则表达式的检测： reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false使用正则表达式
var exp = 'we are the champions' exp.match(/\d/) //只匹配从左到右的第一个数字 exp.match(/\d/g) //匹配所有符合规则的 返回一个数组 var exp2 = 'All Roads Lead to Rome' exp2.match(/a/) //只匹配小写a exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来 exp2.match(/a/ig) //不区分大小写并匹配所有 exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置 exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果 exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值 【注意事项】 事项1： var reg2 = /\d/g //正则表示要匹配多个值 reg2.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果 事项2： var reg3 = /\w{5,10}/ reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则 事项3 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true Date对象
语法
含义
getDate()
根据本地时间返回指定日期的月份和第几天
Date（）
根据本地时间返回指定日期和时间
getMonth()
根据本地时间返回指定日期月份(0-11)
getFullYear()
根据本地时间返回指定日期的年份
getDay()
根据本地时间指定日期对象的星期中的第几天(0-6)
getHours()
根据本地时间返回指定日期的小时（0-23）
getMinutes()
根据本地时间返回指定日期的分钟（0-59）
getSeconds()
根据本地时间返回指定日期的秒数（0-59）
常用对象: var dt = new Date() //获取到当前时间 dt.toLocalString() //转换成'2019/8/13 10:18:12' dt.getFullYear() //年 dt.getMonth() //月 1月是0 dt.getday() //周中天 周日是0 dt.getDate() //月中天 1号是1 dt.getHours() //时 从0开始 dt.getMinutes() //分 从0开始 dt.getSeconds() //秒 从0开始 自定义时间: var dt2 = new Date('2018/1/1 12:12:12') // 1月1日 var dt2 = new Date(2018,1,1); // 2月1日Math对象
常用方法
含义
Math.floor()
向下取整，地板函数
Math.ceil()
向上取整，天花板函数
Math.max(a,b)
求a和b中的最大值
Math.min(a,b)
求a和b中的最小值
Math.random()
0-1之间的随机数，min+Math.random()*(max-min)，求min-max之间的数
其他： Math.abs(x) 返回数的绝对值。 Math.pow(x,y) 返回 x 的 y 次幂。 Math.round(x) 把数四舍五入为最接近的整数。 Math.sqrt(x) 返回数的平方根。 Math.exp(x) 返回 e 的指数。 Math.log(x) 返回数的自然对数（底为e）。 Math.sin(x) 返回数的正弦。 Math.tan(x) 返回角的正切。
数据类型之间的转换
字符转数字parseInt()
# 自动识别数值类型，转换时自动省略非数字元素 parseInt('123') //123 parseInt('123abc') //123 parseInt('abc') //NaN not a number # 遇到小数直接取整数部分，不会四舍五入 var a = parseInt(4.6)+parseInt(4.7); console.log(a); // 输出9 console.log((4.6+4.7)); // 输出9.3字符串转小数 parseFloat()
var a = parseFloat(4.6)+parseFloat(4.7); console.log(a); // 9.3 console.log((4.6+4.7)); // 9.3
转字符串String()、toString()
注意二者用法，土建使用String
var n1 = 123; var n2 = 123.123; var str1 = String(n1); var str2 = String(n2); console.log(str1); console.log(str2);
var n1 = 123; var n2 = 123.123; var str1 = n1.toString(); var str2 = n2.toString(); console.log(str1); console.log(str2);
转布尔值Boolean()
任何数据类型都可以转成布尔值
<script type="text/javascript"> var b1 = '123'; // true var b3 = -123; // true var b4 = Infinity; //表示正无穷大 true var b2 = 0; // false var b5 = NaN; //false var b6; //表示undefined //false var b7 = null; //false console.log(Boolean(b1)); console.log(Boolean(b3)); console.log(Boolean(b4)); console.log(Boolean(b2)); console.log(Boolean(b5)); console.log(Boolean(b6)); console.log(Boolean(b7));
数组Array
数组的创建
var hero = ['盖伦','赵信','皇子']; //带数据创建（推荐） var hero2 = new Array(); //使用构造函数方式创建 使用new关键词对构造函数进行创建对象
数组的赋值
hero2[0] = '莫甘娜' // 通过索进行赋值 hero2[1] = '皎月'
数组的常用属性和方法
方法
描述
.length
数组的大小
.push(ele)
尾部追加元素
.pop()
获取尾部的元素
.unshift(ele)
头部插入元素
.shift()
头部移除元素
.slice(start, end)
切片
.reverse() #在原数组上改的
反转
.join(seq)#a1.join('+')，seq是连接符
将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变
连接数组
.sort()
排序
.forEach()
将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)
删除元素，并向数组添加新元素。
.map()
返回一个数组元素调用函数处理后的值的新数组
自定义对象
var a = {'key':'value',}json
var str1 = '{"name": "gailun", "age": 18}'; var obj1 = {"name": "zhaoxin", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);遍历对象中的值
var a = {"name": "gailun", "age": 18}; for (var i in a) { console.log(i, a[i]); }运算符
赋值运算
= += -= *= /= %=
比较运算符
> < >= <= == != 不比较类型 === !== 比较类型和值(常用) var b1 = '123'; var b2 = 123; console.log((b1 == b2)); // true console.log((b1 === b2)); // false
算数运算符
+ - * / % ** ++ -- var a = 1 var b = a++ // a=2 b=1 先进行赋值运算再进行自加 var c = ++a // a=3 c=3 先进行自加运算再进行赋值 字符串和数字相加 --> 字符串 字符串和数字相减 --> 数字 var b1 = '234'; var b2 = -123; var s1 = b1+b2; var s2 = b1-b2; console.log(typeof(s1)); //string console.log(typeof(s2)); //number
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非
var b1 = 234; var b2 = 123; console.log(b1>b2 && b2!==0); // true console.log(b1===12 || b2); // 123 console.log(!b2); // false
流程控制
特点：所有的代码块都是用{}标识的；所有的条件都是用()标识的
if 单支
var ji = 20; if(ji >= 20){ console.log('盖伦来了') } //下面的代码还会执行 alert('不要躲在草丛里');if else
var ji = 20; if(ji>=20){ console.log('盖伦来了') } else{ console.log('盖伦进草丛了') }if else if else
var ji = 20; if(ji === 20){ console.log('盖伦来了') } else if(ji === 30 ){ console.log('盖伦进草丛了') } else if(ji === 40 ){ console.log('盖伦进撤退了') } else{ console.log('GOGOGO') }case语句
关键字 switch case break
case表示一个条件,满足这个条件就会走进来,遇到break跳出。如果某个条件中不写 break，那么直到该程序遇到下一个break停止。
var gameScore = 'solo'; switch(gameScore){ case 'going': console.log('召唤师出击') break; case 'hidden': console.log('进入草丛') break; case 'attack': console.log('进行攻击') break; default: console.log('game over') }while循环
var i = 1; while(i<=9) { console.log(i); i = i+1; }do-while循环
不管有没有满足while中的条件do里面的代码都会走一次 var i = 3; do{ console.log(i); i++; } while (i<10) for 循环
//方式一: for(var i = 1;i<=10;i++) { console.log(i) } //方式二: var arr = [1,2,3,4,5] for (n in arr) { console.log(n) ; //标准的for循环中的i是number类型,表示的是数组的下标，如果要输出数组元素，需要下边的代码 console.log(arr[n]) ; }三元运算
# 语法格式 var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 var a = 1; var b = 2; var c = a>b ? a:b ; //如果a>b成立返回a，否则返回b console.log(c);
函数
function 函数名(参数){ 函数体 return 返回值 } 函数名(参数) //注意 : 1.传递的参数可以和定义的个数不一样,但是不建议这么写 // 2.返回值只能有一个，如果返回多个值，以数组的形式返回伪数组arguments
arguments只在函数中使用
function add() { console.log(arguments); //arguments接受了所有参数 } add(1,2,3,4) function add(a,b) { console.log(arguments); console.log(arguments.length); // 4 形参的个数 console.log(add.length); // 2 实参的个数 } add(1,2,3,4)说arguments是伪数组是因为：arguments可以修改元素，但不能改变数组的长短。
function fn(a,b) { arguments[0] = 99; //将实参的第一个数改为99 //此方法不通过，因为无法增加元素 console.log(arguments) } fn(2,4); // 99,4 fn(2,4,6); // 99,4,6 fn(2,4,6,8); //99,4,6,8匿名函数
var sum = function(a,b) { console.log(a+b); return a+b; } sum(2,3) ; //调用自调用函数
立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){ return a + b; }) (1, 2); 函数的全局变量和局部变量
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
闭包
# 闭包 var city = "BeiJing"; function f(){ var city = "ShangHai"; function inner(){ console.log(city); } return inner; } var ret = f(); ret(); // ShangHai 面向对象
使用Object或对象字面量创建对象
# 使用Object创建 var hero = new Object(); student.name = "gailun"; student.ad = "20"; # 使用对象字面创建 var hero = { name : "zhaoxin", ad : 20 };利用工程模式创建对象
function createHero(name, ad) { var obj = new Object(); obj.name = name; obj.ad = ad; return obj; } var hero1 = createStudent("gailun", 20); var hero2 = createStudent("zhaoxin", 20);构造函数模式创建对象
构造函数和普通函数有什么区别:
对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。
使用new操作符调用构造函数时，会经历 创建一个新对象 --》将构造函数作用域赋给新对象（使this指向该新对象）--》执行构造函数代码 --》返回新对象。
// 构建函数 function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; } // 实例化对象 var f1 = new Fruit('apple','red'); var f2 = new Fruit('banana','yelow');原型的模式创建对象(比较难理解)
function Hero() { this.name = 'gailun'; this.ad = 20; } Hero.prototype.alertName = function(){ //.prototype.alertName固定搭配 alert(this.name); }; var h1 = new Student(); var h2 = new Student(); h1.alertName(); // gailun h2.alertName(); // gailun alert(h1.alertName == h2.alertName); //true 二者共享同一函数