前端 -- javascript
JavaScript介绍
- 能处理基础逻辑
- 可以和浏览器交互
- 不够严谨
JavaScript的组成
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
- BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动
JS代码的引入
方式一： 在html页写js代码
<script> alert('hello,world') </script>
方式二： 引入js文件
<script src="first.js"></script>
结束符和注释
结束符 ; 是js代码中的结束符 单行注释 // alert('hello,world'); 多行注释 /*多行注释*/
变量和赋值
变量命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字，变量区分大小写，也就是说A和a是两个变量
创建变量的关键字：var
创建一个变量：var a = 1
创建变量时可以不指定数据类型
创建变量但不赋值：var a a被创建出就是一个undefined（未定义）
补充：
let声明的变量的作用域只在for循环中
function f(){ a = 1 for(let i = 0; i < 10; i++){ var b = 2} } a全局生效 b在函数内生效 i只在for循环中生效
循环jq对象的数组，for循环里要用let定义
输入输出信息
弹出框
alert ('hello') 弹出框的内容是hello
弹出输入框
var inp = prompt ('问句') 输入的内容会被返回给inp
控制台输出
console.log(变量或值)
基础数据类型
查看数据类型 typeof 变量 或 typeof (变量)
数字number
在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的
保留小数：float.toFixed(2) 保留两位小数
字符串stbuerzhiring
单、双引号都是字符串的表达方式
| 常用方法 | 说明 |
| length（是属性） | 返回长度 |
| a.concat('abc') | a拼接'abc'字符串 |
| charAt(索引) | 找出索引对应位置的字符 |
| indexOf(字符) | 通过字符求对应索引 |
| slice(start,end) | 切片，顾头不顾尾，可用负数，取子串 |
| toLower/UpperCase() | 全部转换小/大写 |
| split(',',2) | 根据分隔符切割，取前几个结果 |
布尔值boolean
只有两个值：小写的true和false
true包括 [] {}
false包括 undefined null NaN 0 ''
空null和未定义undefined
null 表示空，boolean值为false
undefined 没有定义，创建变量但是不赋值，boolean值为false
内置的对象类型
数组Array
创建数组的两种方式
方式一： 字面量方式创建
var arr = ['a','b','c'];
方式二： 使用构造函数的方式创建
var arr2 = new Array();
索引操作
arr[0] 查看
arr2[0] = 'alex' 赋值操作
常用方法
| 常用方法 | 说明 |
| length（是属性） | 返回长度 |
| pop（） | 获取尾部的元素 |
| unshift(a) | 头部插入元素a |
| shift() | 头部移除元素 |
| slice(start,end) | 切片 |
| reverse() | 反转（在原数组上修改） |
| join(seq) | seq是连接符，将数组元素连接成字符串 |
| concat(val,...) | 两个数组合并，得到新数组，原数组不变 |
| sort() | 排序 |
| splice() |
删除元素，并向数组添加新元素 参数：1.从哪删(索引) 2.删几个 3.删除位置替换的新元素（可以是多个） |
JSON对象
var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
日期date
创建日期对象只有构造函数一种方式,使用new关键字
var dt = new Date(); //创建了一个date对象（获取当前时间）
常用方法
正则对象RegExp
创建一个正则: var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\ var reg2 = /正则表达式/ //内部的元字符就不会转义了 reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false 在字符串中应用正则 var exp = 'alex3714' exp.match(/\d/) //只匹配从左到右的第一个 exp.match(/\d/g) //匹配所有符合规则的 返回一个数组 var exp2 = 'Alex is a big sb' 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位字符串的规则
math对象
面向对象（了解）
function Student(name,age){ this.stu_name = name this.stu_age = age } Student.prototype.show = function(){ console.log(this.stu_name,this.stu_age) } var stu = Student('alex',84) // 实例化 stu.stu_name // 查看属性 stu.stu_age stu.show() // 调用方法 object.prototype.show = function(){ console.log(this.stu_name,this.stu_age) }
数据类型之间的转换
string --> int
parseInt('123') 👉 123
parseInt('123abc') 👉 123
parseInt('abc') 👉 NaN (not a number)
string --> float
parseFloat('1.233') 👉 1.233
float/int --> string
var n1 = 123; var str1 = String(n1); 👉 '123' var num = 234; console.log(num.toString()) 👉 '234'
任意数据类型 --> Boolean
Boolean(数据)
运算符
赋值运算
= += -= *= /= %=
比较运算
> < >= <=
== != 不比较类型
=== !== 比较类型和值(常用)
算数运算符
+ - * / % ** ++（自增） --（自减） var a = 1 undefined var b = a++ // a=2 b=1 var c = ++a // a=3 c=3
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非 true && true //true true || false //true !true //false
流程控制
特点
- 所有代码块都是用{}标识
- 所有条件都是用()标识
条件判断
if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行
var gameScore = 'better'; switch(gameScore){ //case表示一个条件 满足这个条件就会走进来 遇到break跳出。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') }
var a = 1 var b =2 var c = a>b ? a:b //如果a>b成立返回a，否则返回b console.log(c)
循环语句
var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 }
//不管有没有满足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件
方式一 for(var i = 1;i<=10;i++){ console.log(i) } 方式二 var arr = [1,2,3,4,5] for (n in arr){ console.log(n) }
函数function
function 函数名(参数){ 函数体 return 返回值 } 函数名(参数) //注意 : 传递的参数可以和定义的个数不一样,但是不要这么写 // 返回值只能有一个
//arguments伪数组 function add(){ console.log(arguments); } add(1,2,3,4) function add(a,b){ console.log(arguments); } add(1,2,3,4)
var add = function(){ console.log('hello,world'); } //add()调用
(function(a,b){ console.log(a,b) })(1,2)
