JavaScript

m0_69962105

已于 2023-11-02 14:51:26 修改

阅读量130

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-11-01 18:33:31 首次发布

本文链接：https://blog.csdn.net/m0_69962105/article/details/134161448

版权

一、JavaScript概述

1、JavaScript和ECMAScript的关系

JavaScript的创造者---Netscape公式为了使这门语言能够称为国际标准，就将这门语言提交给了国际标准化组织ECMA。JavaScript和ECMAScript的关系是，前者是后者的规格，后者是前者的一种实现

2、ECMAScript的历史

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则1表达式，添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式，添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符(**)，增加Array.prototype.includes

一个完整的JavaScript实现是由3个不同部分组成的：

1、核心（ECMAScript）

2、文档对象模型（DOM）Document object model（整合js，css，html）

3、浏览器对象模型（BOM）Broswer objet model（整合js和浏览器）

JavaScript插入HTML页面后，可以所有的现代浏览器执行

二、JavaScript引入方式

1、Script标签内写代码

<script>

//在这里写js代码

</script>

2、引入额外的JS文件

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

三、JavaScript语言规范

注释

         1、单行注释：//



2、多行注释：/* */

在JavaScript中的语句要有分号为结束符

四、JavaScript语言基础

变量声明

1、JavaScript的变量名使用数字，字母，下划线，$组成，不能以数字开头

2、声明变量使用 var 变量名的格式进行声明，例如：var a=1；

注意：

1、变量名是区分大小写的

2、推荐使用驼峰式命名规则

3、保留字不能作为变量名

补充：

1、ES6中新增了let命令，用于声明变量，但是所声明的变量只在let命令所在的代码块内生效

2、ES6新增const用来声明常量。一旦声明，其值就不能改变

五、JavaScript数据类型

1、JavaScript拥有动态数据类型

var a=1；

var a=2；

var a=3；

2、数值（Number）

1、JavaScript不区分整型和浮点型，统称为数值类型

var a=1；

var a=1.1；

NaN：表示不是一个数字（Not a Number）

parseInt（"123"）返回123

数字类型转换为字符串两种办法：toString() String（）

其它类型转换为数值类型：Number（）

3、字符串

1、带引号的就是字符串（单引号，双引号）

var x="jack"； //定义一个字符串

2、字符串拼接(+)

var y="hello"

var z=x+y;

console.log(z); //结果：jackhello

字符串常用方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.triRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value，.......)	拼接
.indexOf(substring,start)	子序列位置
.substring(from，to)	根据索引获取子序列
.slice(start，end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter，limit)	分割

占位符：

在JavaScript中使用${}来表示占位符，占位符的值直接写在{}里面

例：var name="jack";

var age='19';

var res="他的名字是${name}，年龄为：${age}"

4、布尔值

var a=true;

var b=false;

在JavaScript中：""(空字符串)，0，null，undefined，NaN都是false。

null和undefined的区别：

1、null：表示空，一般在需要指定或清空一个变量时才会使用，如：name=null；

2、undefined：表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。如：var a；

null：表示变量的值是空（null可以手动删除一个变量的值，让该变量变为object类型，值为null）

undefined：表示只是声明了变量，但还没有赋值

5、对象（object）

JavaScript中所有的事物都是对象：字符串，数值，数组，函数，此外，JavaScript还允许自定义对象。

JavaScript提供多个内置对象：String、Date、Array等

对象是带有属性和方法的特殊数据类型

数组

数组对象的作用：使用单独的变量名来存储一系列的值。类似python中的列表

var a=[123，'jack']

console.log(a[0])

数组的常用方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift	头部移除元素
.slice(start，end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val，....)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值得新数组

6、查看数据的类型

typeof "abc"

六、运算符

1、算符运算符

+ - * / % ++ --

x++和++x的说明：

1、x++：先将x赋值在进行自增加1运算

2、++x：先进行自增运算，再赋值

2、比较运算符

< > <= >= != == === !==

==和===的区别：

1、==：弱等于，只比较两个数据的值是否相同

2、===：强等于，不仅比较连个数据值得大小，还比较类型是否相同

3、逻辑运算符

&&（与） ||（或）！（非）

4、赋值运算符

= += -= *= /=

七、流程控制

1、单分支：if-else

var a=10;

if （a<10）{

console.log("yes");

}else{

console.log("no");

}

2、多分支：if-else if-else

var a=10;

if （a<10）{

console.log("a<10");

}else if（a>10）{

console.log("a>10");

}else{

console.log("yes");

}

3、switch

var day = new Date().getDay();

switch（day）{

case 0：

console.log("sunday")；

break

case 1：

console.log("monday")；

default：

console.log("....")

}

switch中的case子句通常都回会加break语句，否则程序会继续执行后续case中的语句

4、for循环

for （var i=0；i<10；i++）{

comsole.log(i)；

}

5、while循环

var i = 0；

while（i<10）{

console.log(i)；

i++；

}

6、三元运算

var a = 1；

var b = 2；

var c = a > b ? a : b

三元运算符的顺序是先写判断条件a>b，冒号左边是条件成立的结果，右边是不成立的结果

八、函数

1、函数的定义

JavaScript函数和python中基本一样，只是定义方式有点区别

1、普通函数的定义

function d1(){

console.log("hello");

}

d1(); //函数名+括号调用函数

2、带参数的函数

function d2(a,b){

console.log(a,b);

}

d2(1,2);

3、带返回值的函数

function sum(a,b){

return a+b;

}

sum(1,2;)

4、匿名函数

var sum = function(a,b){

return a+b；

}

sum(1,2)

2、函数中的arguments参数

function d2(){

console.log(a+b);

console.log(arguments.length)；

console.log(arguments[0])；

}

sum(1,2)

arguments：内置对象，接收所有传入的参数，以数组的形式存储，因此取值时，用索引取值，也可以接收多余参数，同样用索引取值

3、函数的全局变量和局部变量

局部变量

在JavaScript函数内部的变量都是局部变量，只能在函数内部使用它

全局变量

在函数外声明的变量都是全局变量，网页上的所有脚本和函数都能访问他

变量生存周期

JavaScript变量的生命周期从它们被声明的时间开始

局部变量会在函数运行以后被删除

全局变量会在页面关闭后被删除

4、作用域

1、查找顺序：函数内部查找-------》外层函数查找---------》最外层查找

和python作用域关系一模一样

2、闭包函数
var city = "beijing";
function d1(){
    var city = "shanghai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = d1();
ret();

九、内置对象和方法

JavaScript中所有事务都是对象：字符串，数字，数组，日期等，在JavaScript中，对象是拥有属性和方法的数据

1、自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但只能用字符串作为键

var a = {"name"："Alex"，"age"：18}；

console.log(a.name)；

console.log(a["age"])

遍历对象中的内容

var a = {"name"："Alex"，"age"：19}；

for （var i in a）{

console.log(i，a[i])；

}

2、Date对象

1、不指定参数

var d1 = new Date();

console.log(d1.toLocalString());

2、参数为日期字符串

var d2 = new Date("2004/3/20 11:12");

console.log(d2.toLocalString());

3、参数和毫秒数

var d3 = new Date(5000);

comsole.log(d3.toLocalString());

Data对象的方法

var d = new Date();

getDate（）：获取日

getDay（）：获取星期

getMonth（）：获取月（0~11）

getFullYear（）：获取完整年份

getYear（）：获取年

getHours（）：获取小时

getMinutes（）：获取分钟

getSeconds（）：获取秒

getMillseconds（）：获取毫秒

getTime（）：返回累计毫秒数（从1970/1/1午夜）

3、JSON对象

var str1 = '{"name"："jack"，"age"：18}'；

var obj1 = {"name"："jack"，"age"：18}；

//JSON字符串转换为对象

var obj = JSON.parse(str1)；

//对象转换为JSON字符串

var str = JSON.stringify(obj1)；

parse：反序列化

stringify：序列化

4、RegExp对象

1、定义正则表达式的两种方式：一般第二种用的多

1. var reg1 = new RegExp（"^[a-zA-Z][a-zA-Z0-9]{5,11}"）;

2. var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/;

2、正则校验数据:test

reg1.test('jason666')

校验时test中不传参数，默认是undefined

3、全局匹配

var s1 = 'egondsb dbs dsb'；

s1.match(/s/)；匹配第一个s出现的索引位置

s1.match(/s/g)；显示所有s，只显示小写

s1.match(/s/gi)；显示所有的s，不论大小写

注意事项：

1、正则表达式中不能出现空格

2、全局匹配值只有一个lastIndex属性

5、Math对象

Math属性值	概述
abs（x）	返回数的绝对值
exp（x）	返回e的指数
floor（x）	对数进行下舍入
log	返回数的自然对数（低为e）
max（x，y）	返回x和y中的最高值
min（x，y）	返回x和y中的最小值
pow（x，y）	返回x和y次幂
random（）	返回0~1之间的随机数
round（x）	把数四舍五入为最接近的整数
sin（x）	返回数的正弦
sqrt（x）	返回数的平方根
tan（x）	返回角的正切