前端和后端

前端

前端就是用来渲染（绘图）的。

前端技术

安卓（基于java）

ios

html5 （web端、app端、小程序端跨平台（混合开发））

后端

数据交互提供服务

后端技术

java、c、c++、php、python

后端业务前移

中台的概念

前后端分离（前端和后端的服务分离）

前后端不分离（服务器渲染 ssr （速度快对服务器压力大首屏的ssr））

JavaScript

介绍

JavaScript是一个脚本语言（寄生，依托于浏览器运行，侵入性 xss攻击），是一个弱语言（没有强制规范类型由值指定的）。 JavaScript的构成由三部分构成，分别为BOM（broser object model 浏览器对象模型）、DOM (document object model 文档对象模型) 、ECMAScript（ECMA欧洲计算机协会）（基础语法 ES3、ES5、ES6..）

ECMAScript的版本简介

ES3 基础版本没有兼容问题

ES5 升级版本兼容大部分的浏览器

ES6 最新版本只兼容高版本浏览器

babel.js 是一个js库，他的用途是将对应的js以相应版本输出。

JavaScript的书写位置

内联写法（script 标签中）

<script>
    console.log('现在是内联写法')
</script>

外联写法（js文件中）

创建一个index.js文件

    console.log('现在是外联写法')

引入js文件

<script scr="index.js"></script>

内嵌写法

<!-- 内嵌写法 写在事件中-->
<button onclick="console.log('现在是内嵌写法')">点击</button>

注意事项

script 代码可以写在任何位置
script标签是按照文档流的顺序执行（从上到下）
推荐将script标签放到html标签结束的后面

JavaScript的变量定义

只能使用字母，数字，下划线_，美元符号$这几个
不能使用关键词及保留字

屏幕截图 2023-05-13 175731.png

不能以数字开头
见名知意（别用拼音太low了）
使用驼峰命名法

数据类型

数据类型划分

基础值类型（栈类型）

number 数值类型

//整数和浮点数都是数值类型（还有NaN）
var num = 1
console.log(typeof num)//number

string 字符串类型

//单引号和双引号内的是 字符串类型
var str = '这是一个字符串'
conole.log(str)
console.log(typeof str)//string

boolean 布尔类型(只有两个 true和false)

var bool = false
console.log(type bool)//boolean

null 空类型(空对象引用)

//在赋值为null时为 null类型 空对象引用（一般用于释放内存）
var nullV = null
console.log(typeof nullV)//object

undefined 未定义的值(null的派生子类)

//未定义的值  没有赋值的变量
var a //为赋值 默认为undefined
console.log(typeof a)//undefined

引用数据类型（对象类型）

Function、Array、Object、Date

内存划分

屏幕截图 2023-05-13 170852.png

运算符

算数运算符

    /* 算术运算符: + 、- 、* 、/ 、% 、++ 、--  */
    //+ 出现字符串的话进行字符串拼接 其他都会转为数值进行计算
    console.log("hhh"+1)//hhh1
    //boolean类型转数值 对应的true为1 false为0
    //undefined转为数值 NaN(NaN为数值类型) NaN跟任何数值进行计算得到结果都是NaN
    //null 转数值为0
    console.log(1+2+true)//4
    console.log(1+2+true+undefined)//NaN
    console.log(1+2+true+null)//4
    console.log(1+2+true+undefined+null+"hhh")//NaNhhh
    //* / % - 全部转为number进行计算(字符串如果不能转为数字，则会转为NaN)
    console.log(null * 13)//0  相当于 0 * 13
    console.log('123'*true + false)//123
    // --  ++(前置和后置的区别： 前置先计算后执行   后置先执行后计算)
    var a = 10
    console.log(--a)//9
    console.log(a--)//10

赋值运算符

//+= -= *= /= %= =
// a += b   →    a = a + b

比较运算符

    /* 比较运算符(条件运算 返回值是boolean类型的值) > <  >= <=  !=  ==  ===  */
   console.log(NaN == NaN)//false
   console.log(NaN != NaN)//true
   //自动转为number类型
   console.log(true>false)//true
   //出现NaN的比较必定为false 除非有!符号
   //字符串和字符串进行比较 比较的是ascii码（安位置来比）
   // A 65    a 97
   console.log("21">"121")//true
   console.log("abc">"cba")//false
   console.log("Abc">"abc")//false

逻辑运算符

    /* 逻辑运算符 && || ! */

    //与 &&(短路与) 都是true才返回true 否则返回false
    //boolean类型转换
    //数值转boolean   0、NaN为false 其他皆为true
    //字符串转boolean   非空字符串就是true 只有""为false
    //null 和 undefined 默认都为false
    console.log(1 && 2)//2  如果是真取最后一个真，如果有假取第一个假


    //或 ||(短路或)有一个是true就返回true 否则返回false
    //如果有true返回第一个true 否则返回最后一个false
    console.log(true || undefined)//true


    //非 取反
    console.log(!-1)//false
    console.log(!0)//true

位移运算符

    /*位移运算符  <<  >> 基于二进制进行运算，左移后边补零 右移删除后面多余的内容*/

   //快速的将2变成8
   console.log(2<<2)
   //快速的将8变成2
   console.log(8>>2)

位运算符

//& | ^
console.log(8 & 9) //8
console.log(8 | 9) //9

三元运算符

    /*三元运算符   布尔类型表达式?真的结果:假的结果 */
    var a = 1>2?5:6
    console.log(a)//6

运算符的运算顺序

屏幕截图 2023-05-13 173046.png

类型转换

显示转换（强制转换）和隐式转换（自动转换）

其他类型转字符串

    //隐式转换：加一个空字符串
    var number = 1
    number += ''
    console.log(typeof number)//string
    //显式转换 使用String() 和 toString()
    var bool = true
    console.log(typeof String(bool))//string
    console.log(typeof toString(bool))//string

其他类型转number类型

    //Number()
    var bool = true  
    console.log(Number(bool))//1
    //parseInt()  (整数)   parseFloat()  (浮点数)
    var str = "1.11"
    console.log(parseFloat(str))//1.11
    console.log(parseInt(str))//1
    
    //Number方法 是将整体进行转换 转换不成功结果为NaN
    //parseInt和parseFloat方法是以截取的方式进行转换，即前面部分满足条件就可以进行转换
    var str ="123abc"
    console.log(Number(str)) //NaN
    console.log(parseInt(str)) //123
    //null的转换
    console.log(Number(null)) //用Number()转为 0
    console.log(parseInt(null)) //用parseInt()为 NaN
    
     //undefined转为number类型 结果为NaN
     cosnole.log(Number(undefined))//NaN
     //空字符串转为number类型结果为0
     console.log(Number(''))//0

其他类型转为boolean类型

console.log(Boolean("")) //false
console.log(Boolean(" ")) //true
console.log(Boolean(null)) //false
console.log(Boolean(undefined)) //false
console.log(Boolean(NaN)) //false
console.log(Boolean(0)) //false
console.log(Boolean(-1)) //true
/*
字符串转boolean类型非空即为true
数值转boolean类型除 NaN 、0其他皆为true
null和undefined都是false
*/

Number的值

console.log(NaN)
//最大的整数
console.log(Number.MAX_SAFE_INTEGER)
//最小的整数
console.log(Number.MIN_SAFE_INTEGER)
//最大值
console.log(Number.MAX_VALUE)
//最小值
console.log(Number.MIN_VALUE)
//无穷大
console.log(Infinity)
//无穷小
console.log(-Infinity)
//无穷大
console.log(Number.POSITIVE_INFINITY)
//无穷小
console.log(Number.NEGATIVE_INFINITY)

//NaN 不等于 NaN
console.log(NaN != NaN)
//无穷大和无穷大加1一样大
console.log(Infinity == Infinity+1)

02-js基础