JavaScript基础

风雨渡八荒

于 2022-04-12 19:01:39 发布

阅读量566

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_52558788/article/details/124131469

版权

JavaScript

类型：

客户端脚本语言：动态语言

支持、使用变量

“弱”类型语言：隐式转换

运行机制：

解释性语言：一边执行一边解析（浏览器在运行过程当中进行解析）

编译性语言：jsp、python、php（解析器）

浏览器：

html：搭建页面架构

css：美化页面

js：动态效果

前后端分离：

web前端：应用（application）的前台(html+css+js+数据渲染、交互)

web后端：

移动端：HYbridAPP(混合app)

nodeJs：js运行服务器

三大框架：

js封装：

vue

react

angular

微信小程序：底层js

知识要点：

基础篇：

基本语法、数据类型。。。

初级篇：

DOM、BOM

高级篇：

原型、闭包、面向对象

es6 Promise 异步 class

js不是一个面向对象语言而是基于对象的语言，

在js中 “万物皆对象”；

语法格式：

.html文件

可以出现在页面的任何位置：

一般情况下：

<head>
    <script type="text/javascript">
    </script>
</head>

<body>
    <script type="text/javascript">
    </script>
</body>

<body>
    
</body>
<script type="text/javascript">
    </script>

<script src="xxx.js"></script>

（.）：调用符

document对象：属性方法

输出：

document.write();//将内容输出在body中，可能影响布局

console.log();//将内容输出到控制台 A（console）

console.dir();//在控制台输出打印日志；

document：当前文档对象（html）

注释：

//单行注释

多行注释

符号：

‘’ 定界符

"" 定界符——在定界符前加上\（转义符）可以输出定界符

console.log("i'am a shuiguo");
console.log('威哥说：“今晚去喝茶”')
consloe.log("威哥说：\"今晚去喝茶\"")

. 对象的调用符号（用于调用某个对象的属性或者方法）

; 代码的分割符、结束符

= 赋值运算符

js变量：允许发生变化的数据单位

是什么？

作用：保存数据；

声明变量（定义变量）：

var 变量名；es5

注意：通过var关键字声明变量会导致变量提升；

变量的声明会被提前到script的顶端；

var a = 100；

var a；顶部

不能以特殊符号、数字、字母开头，其后可以跟下划线、数字、字母

let 变量名；es6

1、阻止变量提升

2、阻止变量的重复定义

3、支持块级作用域

变量命名：

驼峰命名法则：

大驼峰：User UserName 类构造函数组件常量 ...

小驼峰：user userName 变量函数属性方法定义

匈牙利命名：

user user_name img_true_color

js中输出一个未赋值的变量结果是undefined

undefined 未定义（特殊的数据类型）

数据类型

特殊数据类型

undefined：未定义

null：空对象

NAN：非数字

infinate：无穷

普通类型、标量类型：

字符串类型：string

数字类型：number

布尔类型：true false

引用数据类型

数组：array

对象：object

自定义函数：function

js引用类型：

var arr = [1,2,3,"fref"];//数组
console.log(typeof arr)//object类型

//??在js中如何判定一个数组，是一个真数组？？

var obj = {};//对象 json对象
console.log(typeof obj);//object类型

var fn = function(){};//函数
console.log(typeof(fn));//function类型

//null 特殊类型：代替空
console.log(typeof(null));//object对象

js运算符：

= 赋值符

算数符号：+ - * / %(求模、取余)

//拼串：字符串拼接变量

+：加法运算：符号两边同为数字；

+：连接符：符号两边有一个不为数字；

-：数字字符串可以做减法//隐式转换

//“弱”类型语言（自动转换（数字字符串））

//纯字符无法进行隐式转换

//强制类型转换：手动操作

parseFlaot()    //保留小数位 //字符串转化为浮点数
parseInt()  //不保留小数位    //字符串转换为整数

var str ="100memeda"
var str2 ="200heheda"

console.log(str-str2)//NaN not a number

str =parseFlaot(str);
str2 =parseFlaot(str2);
console.log(str,str2)


console.log(parseInt("memeda")) //NaN
console.log(parseInt("memeda200"))//NaN

*：console.log('200'*'100')//20000

//赋值运算符
//  =
var a = 10;
var b = 20;

//a += b;   //A = A+B；A=30

//a -=b;    //A = A-B;

//比较运算符
>   >=  <   <=
== 等于
=== 全等于
等于：比较值是否相等
全等：比较值与数据类型是否都相等

！=：不等于  值是否不等于
！==：不全等 值与数据类型是否都不相等

自增自减运算符：
前：++    --
先运算、再判断
后：++    --
先判断、再运算

基于运算符的优先级导致的

ascII码：数字

//逻辑运算符：最终结果（true   false）
作用：程序的逻辑判断
逻辑与：    &&
    exp1（表达式）&&exp2(表达式)
    表达式：var a=10;a++;name=="dasdf";
逻辑或：    ||
    

逻辑非：    ！

流程控制语句（判断语句）：
if（条件）{
    条件  返回值 真
}else{
    false 执行
}

//三目运算符、三元表达式
//? : ;
if(a>b){
    console.log(a)
}else{
    console.log(b)
}
等于
var num = a>b? a:b

()小括号：将一个代码结构包含一个整体来执行；
提高某段代码的执行权重。（小括号包裹的代码段具备最高执行权重）

执行权重

（）最高执行权重前++ --

比较运算符

算术类

逻辑类

赋值类

//？js中有哪些数据类型为假？；

console.log(false   ==  '')//true

console.log(false   ==  '   ')//true

console.log(false   ==  0)//true

console.log(false   ==  '0')//true

console.log(false   ==  0.0)//true

console.log(false   ==  null)//false

console.log(false   ==  [])//true 空数组也是假值

console.log(false   ==  {})//flase

console.log(false   ==  -1)//flase

console.log(false   ==  undefined)//flase