JavaScript基础要点

最新推荐文章于 2024-03-11 19:56:08 发布

feifeiwuxian

最新推荐文章于 2024-03-11 19:56:08 发布

阅读量146

点赞数

分类专栏：前端H5 文章标签： javascript

本文链接：https://blog.csdn.net/feifeiwuxian/article/details/103486829

版权

前端H5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

2JS的组成

2.1 ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多参看MDN: MDN手册

2.2 DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

2.3 BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

3 JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部。

1.行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
2.内嵌式
<script>
   alert('Hello  World~!');
</script>
3.外部JS文件
<script src="my.js"></script>

4- 数据类型

4.1JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

4.2数字型 Number

JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。

var age = 21;       // 整数
var Age = 21.3747;  // 小数

4.2.1.数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

// 1.八进制数字序列范围：0~7
var num1 = 07;   // 对应十进制的7
var num2 = 019;  // 对应十进制的19
var num3 = 08;   // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

4.2.2.数字型范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

4.2.3数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值
isNaN

用来判断一个变量是否为非数字的类型，返回 true 或者 false

4.3 字符串

4.3.1字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

4.3.2字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

console.log('我今年' + 18);        // 只要有字符就会相连

4.4 布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

4.5Undefined和 Null

一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

5.获取变量数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

6.数据类型转换

什么是数据类型转换？

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

6.1转换为字符串

oString() 和 String() 使用方式不一样。
三种转换方式，更多第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

6.2转换为数字型（重点）

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

6.3转换为布尔型

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

7- 运算符（操作符）

7.1浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

所以：不要直接判断两个浮点数是否相等 !

7.2比较运算符

注意等号比较

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

7.3逻辑运算符

注意短路运算

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

7.3.1逻辑与

语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

逻辑或

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123
console.log('' && 1 + 2 && 456 * 5678); // 输出空
// 如果有空的或者否定的为假，其余是真的 0 ‘’ null undefined NaN

8.数组

JS 中创建数组有两种方式：

1.利用 new 创建数组

var arr = new Array();   // 创建一个新的空数组

2.利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

3.数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

9.函数

9.1冒泡排序法

      var array = [5, 4, 3, 2, 1]
        for (let i = 0; i < array.length - 1; i++) {
            for (var j = 0; j < array.length - 1 - i; j++) {
                if (array[j] > array[j + 1]) {
                    const temp = array[j]
                    array[j] = array[j + 1]
                    array[j + 1] = temp
                }
            }
        }
        console.log(array);

9.2函数的返回值

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

9.3arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

9.4函数的两种声明方式

自定义函数方式(命名函数)

// 声明定义方式
function fn() {...}
// 调用  
fn();

因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

feifeiwuxian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础要点

1浏览器执行 JS 简介浏览器分成两部分：渲染引擎和 JS 引擎2JS的组成2.1 ECMAScript ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。ECMAScript：规定了J...
复制链接

扫一扫

专栏目录