JavaScript基础(一)

WangQ
158 阅读10分钟

一、JavaScript介绍

1、JavaScript是什么？

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2、作用

  • 网页特效（监听用户的一些行为让网页做出对应的反馈）
  • 表单验证（针对表单数据的合法性进行判断）
  • 数据交互（获取后台的数据，渲染到前端）
  • 服务端编程（node.js）

3、JavaScript的组成

  • ECMAScript：规定了JS基础语法核心知识，比如变量、分支语句、循环语句、对象等等
  • Web APIS：
    • DOM（页面文档对象模型）：操作文档，比如对页面元素进行移动、大小、添加删除等操作
    • BOM（浏览器对象模型6 ）：操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器等等

4、JavaScript书写

  • 内部JS---直接写在html，用script标签包住；

    • 规范：script标签写在</body>标签上方
    • 拓展：alert('你好，JS')页面弹出警告对话框
    • 注意事项：将<script></script>放在HTML的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML；如果先加载的JS期望修改下方的HTML，那么他可能由于HTML尚未加载而失效；

  • 外部JS---代码写在以.js结尾的文件里

    • 语法：通过src引入到html页面中
    • 注意事项：<script></script>中间无须写代码，否则会被忽略；
    • 外部JS会使代码更加的有序，更易于复用，且没有了脚本的混合，HTML也会加易读

  • 内联JS---代码写在标签内部，Vue中会使用

1 <body>
2     <button onclick="alert('逗你玩——')">点击我</button>
3 </body>

5、JavaScript注释及结束符

  • 单行注释：//
  • 多行注释：/* */
  • 结束符：分号; ，注意JS中换行符会被识别成结束符，所以换行符可以省略，但是为了风格统一，要么每句都不写，要么每句都写

6、输入和输出语法

（1）输出语法

1 docment.write('要输出的内容')；
2 //向body内输出内容
3 //如果输出的内容写的是标签，也会被解析成网页元素
4 alert('要输出的内容')；
5 //页面弹出警告对话框
6 console.log('控制台打印')；
7 //控制台输出语法，程序员调试调用

（2）输入语法

1 prompt('要输入的内容')；
2 //显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

7、字面量

字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。

二、变量

1、变量是什么

  • 变量是计算机存储数据的容器，是内存中一块用来存储数据的空间
  • 注意：变量不是数据本身，它们仅仅是一个用来存储数值的容器。可以理解为一个个用来装东西的纸箱子。

2、 变量的基本使用

(1)声明变量

想要使用变量，首先需要创建变量，也就是声明变量。声明变量的本质是去内存申请空间
let 变量名，声明变量由两部分组成：声明关键字、变量名（标识）
let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语。
let age ，age就是变量的名称，也叫标识符。

(2)变量赋值

定义一个变量后，要能够初始化它。

let age = 18
//声明变量的时候同时初始化
//将18这个数据存入到了age这个容器中 注意：是通过变量名来获取变量里面的数据

(3)更新变量

变量赋值以后可以给它一个不同的值来更新它

let age = 18
age = 19
console.log(age)//输出19
//注意：let不允许多次声明一个变量

(4)声明多个变量

let age = 19, uname = 'pink'

3、变量的本质

  • 内存：计算机中存储数据的地方，相当于一个空间
  • 变量：是程序在内存中申请的一块用来存放数据的小空间

4、变量命名规则与规范

  • 规则：
    • 不能用关键字
    • 关键字-有特殊意义的字符，JS内置的一些英语词汇。例如：let、var 、if、for等
    • 只能由下划线、字母、数字和$开头，不能用数字开头
    • 字母严格区分大小写，如Age和age是不同的变量
  • 规范：
    • 起名要有意义
    • 遵循小驼峰命名法--第一个单词首字母小写，后面每个单词的首字母大写，如userName
  • alet和var的区别
    关键字var
    var语句在javascript中声明一个变量： var a = 10;
    说明：
    1、变量声明在代码执行之前被处理。
    2、用var声明的JavaScript变量的范围是其当前执行上下文。
    3、在函数之外声明的JavaScript变量的范围是全局的。

function nodeSimplified(){
  var a =10;
  console.log(a); 
   var a=20;
   console.log(a); // 输出： 20
  }
  console.log(a);  // 输出： 20
}

在上面的代码中，当在if循环内更新变量时，你会发现变量“a”的值全局更新为20，因此在if循环之外值仍然存在。它类似于其他语言中的全局变量。但是，请务必小心使用此功能，因为可能会覆盖现有值。

关键字let
let语句在块作用域中声明一个局部变量。
let a =10;
说明：let语句允许我们创建一个变量，其范围仅限于使用它的块里。

三、运算符

1、算术运算符

主要包括加减乘除及取余（求模）
JS中优先级越高越先执行，优先级相同时从左向右执行

  • 乘、除、取余优先级相同，并且其优先级高于加减
  • 加、减优先级相同
  • 使用()可以提升优先级 先乘除后加减，有括号先算括号里的

2、赋值运算符

对变量进行赋值的运算符，有=、+=、-=、=、/=、%=
= 赋值运算执行过程：将等号右边的值赋予给左边，要求左边必须是一个容器
+=、-=、=、/=、%=，是为了简化代码，比如

let num = 5;
num = num += 5;
//等价于
let num += 5

3、一元运算符

自增：++

  • 前置自增，例：

let num = 1;
++num;
num值加1

  • 后置自增，例：

let num = 1;
num++;
num值加1

前置自增和后置自增独立使用时二者并没有差别。—般开发中我们都是独立使用。后面i++后置自增会使用相对较多

前置自增和后置自增参与其他运算时的区别：
前置--先自增后运算

let i = 1
console.log(++i + 2)
// 注意：此时 i = 2
// i 先自加1，变成2之后，再进行运算与2相加
// 即++i的表达式值为2，结果为4

后置--先运算后自增

console.log(i++ + 2)
// 注意，此时 i = 1
// i++表达式值为1，先运算输出完毕后，i 值再自加为2，结果为3

自减: --，类比于自增运算符

4、比较运算符

  • 作用:比较两个数据大小、是否相等
  • 比较运算符的使用
>>:左边是否大于右边
<:左边是否小于右边
>=:左边是否大于或等于右边
<=:左边是否小于或等于右边
>==: 左右两边是否相等
>二==:左右两边是否类型和值都相等>!==:左右两边是否不全等
>比较结果为boolean类型，即只会得到true或false
  • 字符串比较，是比较的字符对应的ASCII码，从左往右依次比较， 如果第一位一样再比较第二位，以此类推
  • NaN不等于任何值，包括它本身
  • 尽量不要比较小数，因为小数有精度问题
  • 不同类型之间比较会发生隐式转换。最终把数据隐式转换转成number类型再比较
  • 在开发中，如果进行准确的比较使用===或者!==

  • 注意：
    =和==和===怎么区别?
    =是赋值
    ==是判断只要求值相等，不要求数据类型一样即可返回true
    ===是全等要求值和数据类型都一样返回的才是true
    开发中，请使用===

    比较运算符返回的结果是什么?
    结果只有2个,true或者false

5、逻辑运算符

  • 逻辑运算符用来解决多重条件判断
  • 逻辑运算符的使用:

image.png

  • 逻辑运算符里的短路
    短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

image.png

通过左边能得到整个式子的结果，因此没必要再判断右边。无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在量赋值

  • 例子：

image.png

image.png

6、运算符优先级

image.png 注意：一元运算符里面的逻辑非优先级很高，逻辑与比逻辑或优先级高

7、比较运算符的应用

(1)相关知识

对象是一个指向性数据类型，存的是地址。地址相同才相等，地址不同值相等，两个对象也不相等

比较运算符，比较两个值的大小，返回布尔值

== 比较值相等，会发生数据类型转换，以值比较大小

=== 绝对相等，优先判断数据类型，类型相同才比较

null===undefined为假，因为数据类型不一样，但双等为真，定义上是一样的

== 比较会将两边转换成数字比较大小或转换为字符串比较大小。两边都不是数字和布尔值时，并且至少有一个时字符串时转换成字符串比较，否则都是数字比较。

typeof(a)判断变量类型

【】空数组转字符串为空字符串不等于“0”，转数字为0

两边都是对象时，比较的时他们的地址

一个变量给另一个变量赋值，修改该变量值，另一个变量不受影响

数组为对象则为真，给数组取非后为假，即转换成布尔类型

(2)五种特殊类型比较

按照规律比较

(1)比较会将两边转换成数字比较大小或转换成数字字符串比较编码值大小

(2)两边都不为数字和布尔值时并且至少有一个字符串时转换成字符串比较，负责都是数字比较

(3)字符串转数字、数字转换成字符串可以正常转， 带有非数字字符的会被转换成NaN

(4)其他对象转数字为NaN，[]转数字为0

(5)两边都是对象时，比较的是他们的地址。地址相同则为真，地址不同则为假

    // == 比较值相等(数据类型转换，以值大小比较结果) === 绝对相等(优先判断数据类型，类型相同才比较)
    var a = "123";
    var b = NaN;
    var c = true;
    var d = null;
    var e = undefined;
    var f = {};
    var g = function () { };
    var h = [];
    console.log(typeof (a));  //"string" 字符串
    console.log(typeof (b));  //"number"
    console.log(typeof (c));  //"boolean"
    console.log(typeof (d));  //"object" 
    console.log(typeof (e));  //"undefined"
    console.log(typeof (f));  //"object"
    console.log(typeof (g));  //"function" 
    console.log(typeof (h));  //"object"
    console.log(d == e);   //true
    console.log(d === e);  //false
    // 以下两种输出可以判断是否是null,undefined
    console.log(d === null);     //true 
    console.log(e === undefined); //true
    // null和undefined在定义上是相等的，数据类型不同
    // == 比较会将两边转换成数字比较大小或转换成字符串比较编码值大小
    // == 两边都不为数字和布尔值时并且至少有一个是字符串时转换成字符串比较，否则都是数字比较
    console.log(123 == "123");   //true
    console.log("123px" == "123px");   //true
    //true false 1 0
    console.log(2 == true); //false
    // 字符串转数字 数字字符串可以正常转，带有非数字字符的会被转成NaN
    console.log("10px" == 10); //false
    // 其他对象转数字为NaN，[]转数字为0
    // []转换为字符串为空字符串，不是字符0
    console.log([] == "0"); //false
    console.log([].toString());//空字符串
    console.log([] == false); //true
    // 两边都是对象时，比较的是他们的地址
    console.log([] == []) //false
    // 不相等，因为值相等不代表地址也相同
    var arr1 = [];
    var arr2 = arr1;
    console.log(arr1 == arr2);  //true
    console.log([] == ![])  //true
   // 空数组取非，取非要转换成布尔值，数组也是对象，对象都为真，所以布尔值为true
   // 取非为fasle,结果为真
avatar
文章
阅读
粉丝