JS基础知识

最新推荐文章于 2024-08-17 11:58:11 发布

品克缤

最新推荐文章于 2024-08-17 11:58:11 发布

阅读量422

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46893049/article/details/124509965

版权

JavaScript基础

JS的组成

1.ECMAScript——JavaScript语法

2.DOM——页面文档对象模型 ↘

Web APIs

3.BOM——浏览器对象模型 ↗

三种引入方式

1.行内式

直接写到元素内部。可读性差，在HTML中编写js大量代码时，不方便阅读。在特殊情况下使用。

2.内嵌式

写在 <script> </script> 标签里

3.外部js

<script src = "*js路径*" >*这里不可以写代码*</script>

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

输入输出语句

1.prompt()

prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

语法

prompt(msg,defaultText)

参数	描述
msg	可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText	可选。默认的输入文本。

2.alert()

显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

语法

window.alert(message);

3.console()

浏览器控制台打印输出信息

console.log(); 打印内容的通用方法

4.document.write()

写入 HTML 输出。

出于测试目的，使用 document.write() 比较方便

3.innerHTML

写入HTML元素

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容。

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

变量

1.声明变量

var varname = value;

JavaScript有三种声明方式。

var

声明一个变量，可选初始化一个值。
let

声明一个块作用域的局部变量，可选初始化一个值。
const

声明一个块作用域的只读常量。

2.参数值

参数	描述
varname	必须。指定变量名。变量名可以包含字母，数字，下划线和美元符号。 1.变量名必须以字母开头 2.变量名也可以以$和_开头（但一般不这么用） 3.变量名是大小写敏感的（y和Y是不同的变量） 4.保留字（如JavaScript关键字）不能作为变量名使用
value	可选。指定变量的值。注意：如果变量声明未指定值，其默认值为 undefined安上的

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

例如：

var age = 10,
	name = 'abc',
	add = 'world';

数据类型

js的变量数据类型只有程序在运行过程中，根据等号右边的值才能确定。

js是动态语言，变量的数据类型可以变化。

1.数字型

在JS中，数字前的0表示八进制，0x表示十六进制。旧浏览器将导致 parseInt(“010”) 为 8，因为旧版本的 ECMAScript（比 ECMAScript 5 旧）当字符串以 “0” 开头时使用八进制基数 (8) 作为默认值。从 ECMAScript 5 开始，默认值为十进制基数 (10)。

NaN

全局属性 NaN 的值表示不是一个数字（Not-A-Number）。

NaN如果通过 == 、 != 、 === 、以及 !==与其他任何值比较都将不相等 – 包括与其他 NAN值进行比较。必须使用 Number.isNaN() 或 isNaN() 函数。

**isNaN（）和Number.isNaN（）之间的区别：**如果当前值是NaN，或者将其强制转换为数字后将是NaN，则前者将返回true。而后者仅当值当前为NaN时才为true：

2.字符串型String

String可以是引号中的任意文本，其语法为双引号或单引号。

JS可以用单引号嵌套双引号（或双引号嵌套单引号）

获取字符串长度

str.length()

字符串拼接（+）

字符串 + 任何类型 = 拼接之后的新字符串

3.布尔型

true or false

4.undefined 和 null

4.1 如果一个变量声明未赋值就是undefined 未定义数据类型

undefined + “str” = undefinedstr

undefined + 1 = NaN

4.2 一个声明变量给null值，里面存的值为空

null + “str” = nullstr

null + 1 = 1

获取数据类型

typeof var

eg: console.log(typeof true); >输出> boolean

数据类型转换

1.转换为字符串

1.1 变量.toString() 返回一个表示该对象的字符串。

1.2 String(变量)

1.3 加号拼接字符串

2.转换为数字型

2.1 parseInt(string) string -> int eg: parseInt('78')

2.2 parseFloat(string) string -> float eg: parseFloat('7.8')

2.3 Number() string ->number

2.4 js隐式转换（ - * / ）利用算数运算隐式转换为数值型

3.转换为布尔型

Boolean()

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

运算符

运算符也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。

算术运算符

加、减、乘、除、取余

浮点数不能直接拿来进行比较是否相等（例如 0.1 不能被二进制完整得表示）

函数

在JS中，如果实参的个数和形参的个数一致，则正常输出结果；

如果实参个数多于形参的个数，无视多出的实参。

如果实参个数小于形参的个数，未传值的形参是undefined，结果是NaN。

两种声明方式

1.命名函数

function fn(){
		……
}

2.匿名函数

var **fun()** = function(){
		……
}

fun();

fun是变量名，不是函数名，自己随便取

Arguments对象

是一个对应于传递给函数的参数的类数组对象。

你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
arguments[1]
arguments[2]

参数也可以被设置：

arguments[1] = 'new value';

arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array：

作用域

在函数内部没有声明就直接赋值的变量，也是全局变量。

作用域链

当在一个函数内部声明另一一个函数时，就会出现函数嵌套的效果。当函数嵌套时，内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引人某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域（就近原则）。我们称这种链式的查询关系为作用域链。

预解析

JS引擎运行js分为两步：1.预解析 2.代码执行

预解析：js引擎会把js里面所有的var和function提升到当前作用域的最前面（只含声明不含赋值）。

预解析分为两种

1.变量预解析（变量提升）

把所有的变量声明提升到当前的作用域的最前面，但不提升赋值操作

2.函数预解析（函数提升）

把所有的函数声明提升到当前的作用域的最前面，但不调用

黑马js p142 案例

对象

创建对象三种方式

1.利用字面量创建对象

花括号{}里面包含属性和方法

var 对象名 = {		//注意等于号
	属性1:…… ,
	属性2:…… ,
}

2.利用 `new Object()` 创建对象

var 对象名 = new Object();
对象名.属性1 = ……;
对象名.属性2 = ……;

3.利用构造函数创建对象

function 构造函数名(){
	this.属性 = 值;
	this.方法 = function(){}
}

调用构造函数

new 构造函数名();

构造函数名首字母要大写（规范）

例：

function Star(name, age, sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
    this.sing = function(song){
        console.log(song)
    }
}
var xiaoming = new Star('小明',18,'男');
xiaoming.sing('菊花台');

调用对象两种方式

1.对象名.属性名

2.对象名[‘属性名’] （要加单引号）

new关键字

new在执行时会做四件事情：

1.在内存中创建一个空对象

2.让this指向这个新的对象

3.执行构造函数里面的代码，给这个新对象添加属性和方法

4.返回这个新对象（所以构造函数里面不需要return）

遍历对象属性 —— for in

for(var 变量名 in 对象名){
	console.log(变量名);			// 括号里写 变量名 得到的是 属性名
	console.log(对象名[变量名]); 	  // 括号里写 对象名[变量名] 得到的是 属性值  **注意[]不加引号**
}

变量名一半写 k 或者 key

内置对象

JS对象分为三种：自定义对象、内置对象、浏览器对象

内置对象是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。js提供了多个内置对象：Math、Date、Array、String等。

Math对象

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159。

Math.sqrt()

求平方根

Math.abs()

返回一个数的绝对值。

Math.floor()

向下取整

Math.ceil()

向上取整

Math.round()

四舍五入，当参数为负时，末位为 5或者.5 往数轴右边取，例如Math.round(-1.5)==-1

Math.random()

函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

得到一个0到max之间的随机数：
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}
得到一个两数之间的随机数：
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
得到一个两数之间的随机整数：
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;		//不含最大值，含最小值
}

Date（）日期对象

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。

Date（）日期对象是一个构造函数，必须使用new创建对象

//不加参数时，输出当前时间
var date = new Date();
console.log(date);
//加参数，输出参数时间
new Date('2020-3-12');
new Date('2020/3/12');

getFullYear()

根据当地时间，返回一个对应于给定日期的年份数字。

getHours()

根据本地时间，返回一个指定的日期对象的小时。

getMonth()

根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。

getDay()

根据本地时间，返回一个0到6之间的整数值，代表星期几： 0 代表星期日， 1 代表星期一，2 代表星期二，依次类推。

//格式化日期：以 a 年 b 月 c 日 星期 d 的格式输出
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('现在是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

Date.now()

返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

var 变量名 = +new Date(); 也能返回当前时间总的毫秒数。

数组对象

检测是否为数组

1.变量 instanceof 类型（数组是Array）

2.Array.isArray(数组名)

在数组末尾添加一个或者多个数组元素

arr.push(element1, ..., elementN)

返回值是新数组的长度

在数组开头添加一个或者多个数组元素

arr.unshift(element1, ..., elementN)

返回值是新数组的长度

删除数组的第一个元素

arr.shift()

返回值是数组的第一个元素的值

删除数组的最后一个元素

arr.pop()

返回值是数组的最后一个元素的值

翻转数组

arr.reverse()

返回值是翻转后的数组

数组排序（冒泡排序）

arr.sort([compareFunction])

返回值是排序后的数组

如果没有指明 compareFunction ，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 compareFunction），比较的数字会先被转换为字符串，所以在Unicode顺序上 “80” 要比 “9” 要靠前。

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：
如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

所以，比较函数格式如下：
function compare(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列
function compareNumbers(a, b) {
  return a - b;
}
总结：
//sort 方法可以使用 函数表达式 方便地书写：
    
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;					//升序，降序则return b - a; 
});								//注意sort括号里是放了一个完整的函数
console.log(numbers);
升序排列写法

返回数组索引号

arr.indexOf(searchElement[, fromIndex])

首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

searchElement

要查找的元素

fromIndex 可选

**开始查找的位置。**如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

arr.indexOf(searchElement[,fromIndex])

数组中该元素最后一次出现的索引，如未找到返回-1。

数组转换为字符串

toString

返回一个表示该对象的字符串

arr.join([separator])

separator （可选）

指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

返回值是一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

合并数组

concat()

合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

数组删除/修改/插入

splice(索引号，删几个，插入什么元素)

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

返回值是由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
//从索引 2 的位置开始删除 0 个元素，插入“drum” 和 "guitar"
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
//从索引 2 的位置开始删除 1 个元素，插入“trumpet”
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

可以利用splice去重

分割字符串

split()

使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

根据位置返回字符

str.charAt(index)

index 是一个介于0 和字符串长度减1之间的整数。 (0~length-1)如果没有提供索引，charAt() 将使用0。如果指定的 index 值超出了该范围，则返回一个空字符串。

str[index]

H5新增

截取字符串

str.substring(indexStart[, indexEnd])

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

indexStart 需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。

indexEnd 可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。