前端 -- JavaScript基础

时间 2019-11-15

标签前端 javascript 基础栏目 JavaScript 繁體版

原文原文链接

11.3 Javascript

Javascript介绍正则表达式

能处理逻辑数组
能够和浏览器交互浏览器
不够严谨dom

ECMAscript : js的一种标准化规范,标出了一些基础的js语法函数

DOM -- document object model 文本对象模型,主要操做文档中的标签this

BOM -- browser object model 浏览器对象模型,主要用来操做浏览器spa

11.3.1 JS引入

方式一:
    <script>
        alert('XXX')  // 页面弹出警告框
    </script>
方式二:
    <script src="连接"></script>
    
结束符: 分号 -- ;
单行注释: // 
多行注释: /* 内容 */

11.3.2 变量

变量名: 数字\字母\下划线$prototype
建立变量的关键字 : var a=1code

建立变量能够不指定数据类型对象
建立变量但不赋值: 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()    // 调用方法