js基础

港控/mmm° 2022-10-02 08:50 272阅读 0赞

## **1、什么JavaScript？ 客户端 : 由浏览器直接运行** ##

js是一门客户端的具有安全性的一门脚本语言  
特点：客户端 安全性 跨平台 脚本语言  
js功能：实现页面上常见的动态特效

## **2、js的历史背景（了解）** ##

Netscape公司的布兰登•艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript。

## **3、javascript的组成** ##

a、ECMAScript 欧洲计算机制造商协会，规范js语法  
b、BOM  
c、DOM

## **4、javascript 代码实现 内部脚本或外部连接** ##

a、js的代码必须出现在script标签内部 嵌入到网页中  
b、script标签位置任意 除了title中  
c、script标签的**src属性** 连接外部的js文件  
d、type属性用于确定是否是js代码 type = “text/javascript”  
e、**带有src属性的script标签内部js代码无效**  
//JavaScript引入测试  
![JavaScript引入测试][JavaScript]

## **5、javascript的几个输出语句 （重点）** ##

a、alert()弹出一个警告框，**阻塞其他代码执行**，用于调试  
b、 document.write()在浏览器中输出，.前面的叫**对象**，.后面的有括号的叫**方法**  
没有括号的叫属性  
c、console.log()在控制台打印输出

## **6、js中的注释** ##

//单行注释  
/\*\*/ 多行注释  
常见的快捷键 ：  
ctrl + / 单行注释  
ctrl + shift + / 多行注释  
ctrl + d 删除一行  
ctrl + 上箭头 向上移动 ctrl + 下箭头 向下移动  
ctrl + c 复制一整行  
ctrl + shift + a 选中相同代码

## **7、js中的字面量（常量） 固定不变的量** ##

数值型常量  
整数  
十进制 0–9  
二进制 0 1  
八进制 0–7 以0开头  
十六进制 0-9 a-f 以 0x开  
小数 小数点  
字符型常量  
用 引号 括起来的字符 “” ‘’ "错误用法’  
注意引号嵌套 ： " ’ ’ " 或者 ’ " " ’  
布尔型常量  
true和false

## **8、js中标识(zhi)符（变量）的命名规范** ##

a、由 字母 或 数字 或 下划线 或 $ 组成  
b、不能用数字  
c、不能用系统指定的关键字  
d、不要情绪化命名  
e、驼峰式命名 ：  
大驼峰: QianFengJiaoYu  
小驼峰：qianFengJiaoYu  
**f、匈牙利命名法**  
iNum 整数 以i开头 表示整数  
fNum 小数 以f开头  
oSpan 对象 以o开头  
sTitle 字符串 以s开头  
arrScore 数组 以arr开头

## **9、js中的变量** ##

程序运行时 值有可能会发生变量

## **10、变量的定义和赋值** ##

使用 var 定义变量 （可以省略var 不建议）

## **11、js中输出结果时注意几个问题：（重点）** ##

a、输出**字符串** 必须**加引号** alert(“hello”)  
b、输出**变量**的值 一定**不能**加引号 alert( age )  
c、当输出变量和字符串的结合数据时，需要使用 **+** 做拼接

## **12、变量的数据类型** ##

**基本数据类型** ：  
数值类型 number  
字符类型 string  
布尔类型 boolean  
对象（引用）数据类型 ：  
对象 object  
特殊 ：  
null 空 本身是一个对象  
undefined 未定义 一个变量定以后没有赋值 默认值为undefined  
function （函数 特殊）

## **13、（扩展） 测试变量的数据类型** ##

typeof 测试变量的数据类型  
用法 ：  
typeof 变量  
typeof(变量)  
总结 ： **typeof typeof 变量** 结果都是 **string**  
![js中的内置对象][js]  
![typeof的测试][typeof]

## **14、运算符和表达式 （重点）** ##

什么是运算符 ？  
运算符号  
什么是表达式?  
一个运算的式子  
表达式 ： 常量 变量 式子

## **15、算术运算符（重点）** ##

运算符 ：  
单目（一元）： ++ 自增 – 自减 （**难点）**  
双目（二元） : + - \* / %(模运算符)  
表达式 ：7%4 变量++ --变量 “8”-6 “8”-“6” “8a”-9  
表达式的值 ：  
*- / % 表达式的值要求：*\*  
a、符号两侧都是数值 正常计算 8-6  
b、符号两侧中有一侧是**纯数字字符串** 字符串会自动转成**数值** 正常计算 “8”-6=2 “8”-“6”=2  
c、符号两侧中有一侧是**非数字字符串** 不能正常计算 结果是**NaN** NaN===not a number 不是一个数

**总结** ： 任何数%10 结果都是个位数  
\+ ：  
表示 加法 和 拼接  
字符串和数字相加表示**连接** “99”+10  
10 + “10” - 10 结果的类型： number 结果值为：1010-10=1000

**自增和自减 ：**  
自增和自减对应的操作数必须是变量  
i++和++i的区别 ：  
相同点 ：  
自增或自减变量都会自动的加1或减1  
不同点(**难点)** ：  
表达式的值不同  
如果++在前，先将自增变量的值加1，再将自增变量的值赋值给整个表达式（先自增 后赋值）  
如果++在后，先将自增变量的值赋值给整个表达式 ，再将自增变量的值加1 （先赋值 后自增）  
![自增的测试][20190617085937424.png]

var i = 1;
        ++i +  i++  +  i      //这个表达式的结果是：7
        2+(2+1)+3

**16、赋值运算符 （重点）**  
运算符 ： =  
表达式 ： var num = 90;  
注意 ： 赋值符号的左侧必须是变量 90 = num错误 num+1 = 89; 错误

复合赋值运算符 ： += -= /= %= \*=  
var m = 90;  
m += 10； 等价 m = m + 10  
alert( m ) 100

## **17、关系运算符（重点）** ##

运算符 ：  > >=  < <=  ==等于  !=不等    ===全等     !==不全等   
    表达式 : 6>7   8==9   10=="10"    "as" < "78"   "17" < "9"    "18" < 9    "9a" < 9
    表达式的值 ：  有两种情况  成立为true  不成立为false 
    
    1、符号两边都是数值  正常比较  
    2、符号两边都是字符 正常比较     比较的是字符的ASCII码值   a(97)   A(65)   0(48)      "as" < "78"(false)   "abc" > "ab"(true）   "18"<"9"true
    3、符号两侧有一侧是纯数字字符串 字符串会自动转成数值 正常比较  "18" < 9 false   
    4、符号两侧中有一侧是非数字字符串 不能正常比较  结果都是 false

==，===区别 ：

== ： 10==“10” true 只比较符号两侧的值是否相等  
=== ： 10===“10” false 先比较类型，再比较值 10!==“10” true

## **18、逻辑运算符（重点）** ##

运算符 ： && 与 ||或 ！非  
表达式 ：

1<2 &&5==9     !(8<9)

表达式的值 ：  
&& 与: **两侧都成立，表达式的值为真** true && true 结果为真 有一侧为假，表达式的值就是false  
|| 或 ： **两侧都为假，表达式的值为假** false || false 结果为假 有一侧为真 表达式的值就是 true

6<7 && 9==8     false       6<7 || 9==8   true      6>7 || 9==8  false
    
    ！ ：  ！true结果为false  !false 结果为true

写一个表达式，表示某个变量既能被3整除又能被7整除  
(num %3 = =0) && (num%7= =0 ) 或 num%21==0

## **19、条件运算符 ( ？ ： 三元运算符 ) （重点）** ##

运算符 ： ? :  
条件表达式 ：  
表达式1 ? 表达式2 ：表达式3  
表达式的值 ：  
判断表达式1的结果是否为真 ， 如果为真 取表达式2的值作为整个条件表达式的值，否则取表达式3的值作为整个条件表达式的值

7>8 ? 56 : 90  // 90

总结 ： js中表示真假的几种情况  
1、true为真 false为假  
2、所有数字为真 0为假  
3、所有字符串为真 空字符串为假 ""空串  
4、所有对象为真（包括空对象）  
5、所有函数为真  
6、null和undefined为假

## **不借助第三个变量 完成交换(面试题)** ##

**方案一**

a = [b,b=a][0];

1、根据运算符优先级，首先执行b=a  
此时的b直接得到了a的变量值  
2、然后一步数组索引让a得到了b的值

**方案二**

利用了ES6的解构赋值语法  
它允许我们提取数组和对象的值，对变量进行赋值  
（旧版本浏览器不能使用ES6语法）

[a,b] = [b,a];

[JavaScript]: /images/20220113/2a0d0f2fd24b445bb9d8f6c2374a06d6.png
[js]: /images/20220113/07dece6e53734a229c5ae36be51055c3.png
[typeof]: /images/20220113/631a8816e7234b5e8310fc4bf8a68f5b.png
[20190617085937424.png]: /images/20220113/cff790ef23e344f58458a429c8b4dc8b.png