前端 -- JavaScript基础
Javascript介绍
-
能处理逻辑
-
可以和浏览器交互
-
不够严谨
ECMAscript : js的一种标准化规范,标出了一些基础的js语法
DOM -- document object model 文本对象模型,主要操作文档中的标签
BOM -- browser object model 浏览器对象模型,主要用来操作浏览器
11.3.1 JS引入
方式一: <script> alert('XXX') // 页面弹出警告框 </script> 方式二: <script src="链接"></script> 结束符: 分号 -- ; 单行注释: // 多行注释: /* 内容 */
11.3.2 变量
-
变量名: 数字\字母\下划线$
-
创建变量的关键字 : var a=1
创建变量可以不指定数据类型
-
创建变量但不赋值: var a; a创建出来就是一个underfind类型
11.3.3 输入输出
弹出框:alert 弹出输入框:var inp=prompt('问句') 弹出输入孔,输入的内容会被返回给inp 控制台输出: console.log(变量或值)
11.3.4 数据类型
查看数据类型: typeof 变量; / typeof(变量);
数值类型
-
整数 \ 小数 : number
-
保留小数位: b.toFixed(2)
字符串: String
-
'单引号' ; var s1 = '字符串1'
-
"双引号" ; var s2 = "字符串2"
属性 : length 方法: s.strm() 去两端空白,得到一个新值 a.concat('abc') a拼接'abc' .charAt(索引) 给索引求字符 .indexOf(字符) 给字符求索引 .slice(start,end) 顾头不顾尾,可以用负数,取子串 .toLowerCase() 全部变小写 .toUpperCase() 全部变大写 .split(',',2) 根据(第一个参数)分隔符切割,取前多少个结果
11.3.5 boolean 布尔值
Boolean() true : [] {} false : undefined null NaN 0 ''
11.3.6 null \ undefined
null 表示空 boolean值为false undefined 没有定义 创建变量但是不赋值 boolean值为false
11.3.7 内置对象类型
数组 Array
创建: var arr = ['a','b','c']; var arr2 = new Array(); 索引操作: arr[0] 查看 arr2[0] = 'alex' 赋值操作
Array常用的属性和方法
| 属性或方法 | 解释 |
|---|---|
| .length | 数组长度 |
| .push() | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift() | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转原数组 |
| .join(seq) | seq是连接符 将数组元素连接成字符串 |
| .concat(val, ...) | 数组合并,得到一个新数组，原数组不变 |
| .splice(a,b,c) | 参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) |
| .sort() | 排序 |
自定义对象
var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
遍历对象中的内容：
var a = {"name": "Alex", "age": 18}; for (var i in a){ console.log(i, a[i]); }
11.3.8 数据类型之间的转换
string --> int parseInt('123') // 123 parseInt('123abc') // 123 parseInt('abc') // NaN not a number string --> float parseFloat('1.233') float/int --> String var num = 123 String(num) // "123" var str = num.toString() 任意类型 --> Boolean Boolean(数据) 字符串和数字相加 --> 字符串 字符串和数字相减 --> 数字
11.3.9 运算符
赋值运算符
= += -= *= /= %=
比较运算符
> < >= <= 比较值,不比较类型 == 等于 != 不等于 比较类型和值(常用) === 等同于 !== 不等同于
算数运算符
+ - * / % ** ++ / -- 自增 / 自减 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
11.3.10 流程控制
特点:
-
所有的代码块都是用{}标识的
-
所有的条件都是用()标识的
if语句
if (条件) { 执行操作 }else if(条件)){ 满足条件执行 }else if(条件)){ 满足条件执行 }else{ 满足条件执行 }
case语句
var err_type = 'info' // case表示一个条件,满足这个条件就会走进来,遇到break跳出。如果某个条件中不写break，那么直到该程序遇到下一个break停止,case条件是根据switch中定义条件的进行判断 switch(err_type) { case 'warining': console.log('警告'); break; case 'error': console.log('错误'); break; default: console.log('没错') }
循环语句
var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 } //方式一: for(var i = 1;i<=10;i++){ console.log(i) } //方式二: var arr = [1,2,3,4,5] for (n in arr){ console.log(n) // n是索引,取值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)
11.3.11 函数
函数的定义
function 函数名(参数){ 函数体 return 返回值 } 函数名(参数) //注意 : 传递的参数可以和定义的个数不一样,但是不要这么写 // 返回值只能有一个,如果有多个,默认返回最后一个 //arguments伪数组,传递多少个值,接收多少个 function add(){ console.log(arguments); } add(1,2,3,4) function add(a,b){ console.log(arguments); console.log(add.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 arguments[0] = 99; //将实参的第一个数改为99 } add(1,2,3,4)
匿名函数
var add = function(){ console.log('hello,world'); } //add()调用
自调用函数
(function(a,b){ console.log(a,b) })(1,2)
11.3.12 正则用法
创建一个正则: var reg = new RegExp('正则表达式') //写在字符串中所有带\的元字符都会被转移,应该写 \\ var reg = / 正则表达式 / //内部不需要写成字符串 reg.text('待检测的字符串') // 字符串中有符合表达式规则的内容就返回true否则返回false 在字符串中应用正则 var exp = 'Agoni4017' exp.match(/\d/) //只匹配符合规则的第一个 exp.match(/\d/) //匹配所有符合规则的,返回一个数组 var exp = 'my heart beat with you' exp.match(/a/) //只匹配小写a exp.match(/a/i) //i表示不区分大小写 exp.match(/a/gi) //不区分大小写匹配所有 exp.search(/正则表达式/i) // 不区分大小写,找到符合条件的第一个索引位置 exp.split(/正则表达式/i,n) //不区分大小是,根据正则切割,返回前n个结果 exp.replace(/正则/gi,'新值') //将符合条件的所有内容替换成新的值 reg.lastIndex() //查看索引的位置 小问题1 var reg = /\d/g //表示匹配多个值 reg.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果 小问题2 var reg = /\w{5,10}/ //5-10位字母数字下划线 reg.test() //如果什么都不写,那么默认test中传递undefined参数,9位字符串符合正则条件
11.3.13 date对象
创建对象 var dt = new Date() // 获取当前的时间 dt.toLocalString() // 转换成'2019/8/13 10:18:12 dt.getFullYear() // 年 dt.getMonth() // 月,从0来时 dt.getday() // 周中天,从0开始,周日为0 dt.getDate() //月中天,1号是1 dt.getHours() // 时,从0开始 dt.getMinutes() // 分,从0开始 dt.getSeconds() // 秒,从0开始 自定义时间 var dt = new Date('2018/1/1 12:12:12') 1月1日 var dt = new Date(2018,1,1); 2月1日
11.3.14 math对象
Math.floor() //向下取整 Math.ceil() //向上取整 Math.max() //求最大值 Math.min() //求最小值 Math.random() //随机数,默认0-1之间. Math.abs() //绝对值 Math.round() //四舍五入取整 求min-max之间的随机数: min+Math.random()*(max-min)
11.3.15 面向对象
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('Agoni',24) // 实例化 stu.stu_name // 查看属性 stu.stu_age stu.show() // 调用方法
