day34 前端基础之JavaScript

day34 前端基础之JavaScript

ECMAScript 6

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

js简介

// 这是多行注释
/*
这是多行注释
*/
结束符：（；）为结束符

变量

1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2.声明变量使用 var 变量名; 的格式来进行声明
    var a = 1;
    a = 10;
    console.log(a) # 相当于print
    // 定义常量
    const pi = 3.14
    console.log(pi)

    let b = 1
    console.log(b)

js数据类型

JavaScript不区分整型和浮点型，就只有一种数字类型。
    1、.length	返回长度
    2、.trim()	移除空白
    3、.trimLeft()	移除左边的空白
    4、.trimRight()	移除右边的空白
    5、.charAt(n)	返回第n个字符
    6、.concat(value, ...)	拼接
    7、.indexOf(substring, start)	子序列位置
    8、.substring(from, to)	根据索引获取子序列
    9、.slice(start, end)	切片
    10、.toLowerCase()	小写
    11、.toUpperCase()	大写
    12、.split(delimiter, limit)	分割
代码：
    var a = '123'
    var b = 123
    var c = 123.12
    var d = '123.12'

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(b + parseInt(a));  # 转为数字类型，进行计算
    console.log(Number(a)) # 转为数字类型

    var s = 'hello baby'
    var a = 'meng'
    console.log(s.charAt(4)); # 取出索引4的值
    console.log(s.concat(a)) # 拼接字符用的

    var name = 'meng'
    var age = 18
    // var s = 'my name is ${name} my age is ${age}' # 用单引号是错误的
    var s = `my name is ${name}, my age is ${age}`  # 模板语法
    console.log(s)

布尔值

区别于Python，true和false都是小写。
# (空字符串)、0、null、undefined、NaN都是false。
var a = true;
var b = false;

数组

一、常用方法：
    .length	数组的大小
    .push(ele)	尾部追加元素
    .pop()	获取尾部的元素
    .unshift(ele)	头部插入元素
    .shift()	头部移除元素
    .slice(start, end)	切片
    .reverse()	反转
    .join(seq)	将数组元素连接成字符串
    .concat(val, ...)	连接数组
    .sort()	排序
    .forEach()	将数组的每个元素传递给回调函数
    .splice()	删除元素，并向数组添加新元素。
    .map()	返回一个数组元素调用函数处理后的值的新数组
二、代码：
    var a = 'a|b|c|d|v'
    console.log(a.split('|'))  # 转为数组 ["a", "b", "c", "d", "v"]

    var a = [1,6,2,3,9]
    a.sort()
    console.log(a)  # 排序为升序 [1, 2, 3, 6, 9]
    console.log(a.reverse()) # 反转
forEach（）语法：
    var a = [10,20,30]
    for(var i = 0;i<a.length;i++){
        console.log(i)  # 遍历a里的值
    }

运算符

算数运算符

一、算数运算符
    var x = 10
    var res1 = x++  //先是10
    var res2 = ++x  // 加完1在来res2在加一
    console.log(res1) //先赋值在加一
    console.log(res2)  // 先加一在赋值

逻辑运算符

二、逻辑运算符
    &&：相等于python里的and
    ||：等于or
    !：等于not

if流程控制

三、if流程控制
    var a = 10
    if (a>11){  # 和python语法一样，把':'换成'{}'
        console.log('yes')
    }else{
        console.log('no')
    }

switch

四、switch
注意：# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
    var day = new Date().getDay();
    switch (day){
        case 0:  # 条件
            console.log('yes');
            break;
        case 1 :
            console.log('no');
            break;
        default:  # 相等于else
            console.log('end****')
    }
    输出结果：end****

三元运算符

五、三元运算符
    var a = 1;
    var b = 2;
    var c = a > b ? a : b; # a大于b，走' ：'前面的,不大于走后面的
    console.log(c)
    输出结果：2
结论：这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；

函数

一、定义函数：
1、# arguments函数：arguments相当于将出传入的参数全部包含
    function f(a){  # 把：换成{},function相等于def
        console.log(a);
        console.log(arguments); # 把多余的值放到这里来，以数组的形式
        console.log(arguments[0]); # 可以根据数组来取值
        console.log(arguments[1]);
        console.log(arguments[2]);
        console.log(arguments.length) # 可以求取数组的长度
    }
    f(1,2,3,4,5)
    输出结果：
    '''
    1
    Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    1
    2
    3
    5
    '''
二、匿名函数：
    var sum =function (a,b){
        return a + b
    }
    sum(1,2); # 这是匿名函数
    res = sum(1,2); # 接收返回来的值
    console.log(res) # 查看一下值

函数的全局变量和局部变量

局部变量：
    在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
	在函数外生命对的变量是全局变量，网页上的所有脚本和函数都能访问它。
作用域：
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与Python作用域关系查找一样。
例子：
    var city = '北京'; # 最后在全局变量查找
    function f(){
        var city = '上海'; # 然后再外部查找
        function inner(){
            var city = '深圳'; # 先在内部函数查找
            console.log(city)
        }

        inner()
    }
    f()

内置对象和方法

自定义对象

一、自定义对象
第一种方法：
    var obj = {'username':'meng'}
    // 增加
    obj.age = 10;
    obj['gender'] = 'male';
    // 修改
    obj.age = 11;
    //删除
    delete obj.age
    console.log(obj)
    console.log(obj.usernaem) # 取值
第二种方法：
    var obj = new Object() # 相当于{} object,空对象
    // 增加
    obj.age = 10;
    obj['gender'] = 'male';
    // 修改
    obj.age = 11;
    //删除
    delete obj.age
    console.log(obj)

遍历对象

二、遍历对象：
    var a = {'username':'meng','age':18}
    for (var i in a){  # 循环遍历对象
        console.log(i,a[i]) # 打印出k值和v值，a[i]相当于value值
    }

Date对象（建议能用Python解决就用Python）

三、Date对象
    var d = new Date();
    //getDate()                 获取日
    //getDay ()                 获取星期
    //getMonth ()               获取月（0-11）
    //getFullYear ()            获取完整年份
    //getYear ()                获取年
    //getHours ()               获取小时
    //getMinutes ()             获取分钟
    //getSeconds ()             获取秒
    //getMilliseconds ()        获取毫秒
    //getTime ()                返回累计毫秒数(从1970/1/1午夜)
用法：
    var d = new Date()
    console.log(d.getDay()) # 打印出星期几

JSON对象

相当于loads反序列化：
    var obj1 = '{"name":"meng","age":18}'; # 注意里面外面用单引号，里面用双引号
    str_obj = JSON.parse(obj1); # JSON字符串转换成对象，反序列化
    console.log(str_obj);
    console.log(str_obj.name)
相当于dumps序列化：其他类型转化成字符串称为序列化
    var obj1 = {"name":"meng","age":18};
    console.log(JSON.stringify(obj1)) # 对象转换成JSON字符串
    console.log(typeof JSON.stringify(obj1))

正则对象

第一种正则表达式方式：new RegExp()
    #                    必须是a开头的        匹配5-11位
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); # 不用自己写，去百度搜对应的需求
    console.log(reg1.test('a455fdf')) # 符合a开头和在5-11位数，匹配成功

第二种正则表达式方式：/正则表达式/
	var reg1 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/  # 完全跟第一种一样
    console.log(reg1.test('a455fdf'))

手机号匹配：
    var reg1 = new RegExp("13[123569]{1}\\d{8}|15[1235689]\\d{8}|188\\d{8}"); # 去百度搜需求
    // console.log(reg1.test('11d5545'))  # 匹配失败
    console.log(reg1.test('15112282880')) # 匹配正确

全局匹配：
    var s1 = 'egondsb dsb dSb';
    console.log(s1.match(/s/)); # 找到第一个小写s就停止
    console.log(s1.match(/s/g)); # g：全局  找出所有的小写s，大写找不到
    console.log(s1.match(/s/gi)) # i：忽略大小写  找出所有s

Math对象

Math对象的方法：
    abs(x)      返回数的绝对值。
    exp(x)      返回 e 的指数。
    floor(x)    对数进行下舍入。
    log(x)      返回数的自然对数（底为e）。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)      返回数的正弦。
    sqrt(x)     返回数的平方根。
    tan(x)      返回角的正切。
代码：
    console.log(Math.random())
    console.log(Math.floor(2.5)) # 2  跟取整一样
    console.log(Math.round(2.5)) # 3  四舍五入