当前位置：首页 > news >正文

10-js基础（ESMAScript）

news 2025/10/30 8:45:18

一、js编写的注意事项

1.1.noscript

给不支持js的浏览器用的（不过我觉得现在应该大部分都支持吧？）

在这里插入图片描述

<noscript><h1>您的浏览器不支持JavaScript，请打开或者更换浏览器</h1>
</noscript>

1.2.写script强烈建议写成双标签

<!--不推荐--><script src="./a.js"/>
<!--推荐--><script src="./a.js"></script>

1.3.渲染顺序

在body里的js也是从上往下渲染，所以建议如果要用js获取html元素，js要放在这些元素后面，例如：

<body><h1 class="title">我是标题</h1><script>let title = document.querySelector('title');console.log(title);</script>
</body>

在这里插入图片描述

二、关于js

2.1.JavaScript组成

在这里插入图片描述

ECMA是欧洲计算机制造商协会

ECMAScript一般简写成ES，比如ES5、ES6就是不同的版本

2.2.常见的JavaScript引擎

SpiderMonkey:第一款JavaScript引擎，由BrendanEich开发(也就是JavaScript作者)；
Chakra：微软开发，用于IT浏览器；
JavaScriptCore:WebKit中的JavaScript引擎，Apple公司开发;
V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；效率很高

2.3.浏览器内核的组成

浏览器内核由解析网页内容和解析js代码的2部分组成，例如WebKit

在这里插入图片描述

三、js

3.1.变量定义

用var或let定义变量。如果没定义变量就使用浏览器会报错。某些变量是内置的，例如name，是window的内置变量

<script>console.log(name+'1');
</script>

在这里插入图片描述

3.2.浏览器与js交互方式

alert（）:浏览器弹窗提示信息
console.log()：控制台输出
document.write()：网页内容显示
prompt()：可输入内容的浏览器弹窗，可以获取输入内容

<script>let a= prompt();console.log(a)
</script>

3.3.js注释

js单行注释用//，多行注释用/* */。很简单我就不多说了

js函数说明注释用/** */，注释了使用函数会有提示，很方便

在这里插入图片描述

3.4.js基本数据类型

js的变量类型可以通过赋值改变。

通过typeof操作符可以以字符串的方式返回类型，判断是否是NaN也可以使用isNaN。

这里只介绍几种，太简单的就不介绍了，懂的都懂。

3.4.1.number类型

number类型赋值种类：

十进制：111
十六进制：0x111
八进制：0o111
二进制：111

3.4.2.string类型

string类型的单引号''双引号""都能用且用法没有区别。

``反引号里可以添加变量。

let a=123
let b=`你好${a}`
alert(b)

如果一个字符串里有双引号就用单引号定义，反之亦然。如果单引号双引号都有，就用\进行转义，和这md一样。。。

3.4.3.null类型

null类型用typeof会默认他是object，所以定义一个空对象时建议使用null而不是{}

3.4.4.数据类型的转换

（1）number转string

隐式转换：加个空字符串

let a=123
a=a+""
console.log(typeof a)//输出为string

显式转换：使用String()或ToString()（面向对象使用）

let a=123
a=String(a)
console.log(typeof a)//输出为string

（2）string转number

隐式转换，用乘除（加减不行，因为字符串也能相加减）

let a="2"
let b="3"
a=a*b
console.log(typeof a)//输出为number

显式转换：使用Number()

let a="2"
a=Number(a)
console.log(typeof a)//输出为number

（3）其他类型转Boolean

有内容和{}都转为true，其他转为false。

"0"也转为true

3.5.运算符

应该很好理解吧

在这里插入图片描述

幂的运算可以使用方法Math.pow()

console.log(Math.pow(2,4))//表示2的4次方

3.6.js函数

函数有内置对象argument，里面会存放函数接受的所有参数

3.6.1.头等函数

函数可以赋值给变量

let foo=function (){console.log(666)
}
foo()

在这里插入图片描述

函数可以在变量之间传递

let foo2=foo

函数可以作为另一个函数的参数

function bar(fx) {console.log("传入的函数为：",fx)fx()
}
bar(foo)

在这里插入图片描述

3.6.2.立即执行函数

顾名思义就是运行到这个位置就立即执行的函数。（我之前还想为啥要套个函数壳子，后来知道了可以创建一个作用域防止变量冲突）

let name="张三";
(function (name){console.log(name+"888")
})(name)

在这里插入图片描述

3.6.3.常见匿名函数

（1）setTimeout

此函数用于延迟代码执行时间，用法案例：

setTimeout(()=>{console.log("两秒后执行")
},2000)

（2）setInterval

此函数用于让代码间隔一段时间后重复执行，用法案例：

setInterval(() => {console.log("每2秒执行一次")
},2000)

3.7.debug

可以f12查看源码，并在任意一行打上断点调试

在这里插入图片描述

也可以在代码中加上debugger进行断点

console.log(111)
debugger
console.log(222)

3.8.js对象

对象里可以有变量和函数，例如：

let person={name:"张三",eat:function (){console.log("吃饭")}
}
person.eat()

3.8.1.添加属性

可以直接添加属性，变量函数都是如此

person.age=18
person.sleep=function(){console.log("睡觉")
}

3.8.2.删除属性

用delete删除属性

delete person.eat

3.8.3.[]获取属性值

带空格等一些不好用.获取属性值的自定义属性可以使用[]获取

let person= {name: "张三","my friend": "李四",eat: function () {console.log("吃饭")}}
// 错误写法
// person.my friend="王五"// 正确写法
person["my friend"] = "王五"

3.8.4.对对象进行遍历

let person= {name: "张三",age:18,hobby:"听歌"}
// 1、第一种遍历方法，用到索引值时用
let keys=Object.keys(person)//拿到对象的key
for (let i=0; i<keys.length; i++) {let key=keys[i]console.log(person[key])}
// 2、第一种遍历方法，不用到索引值时用
for (let i in person) {console.log(person[i])
}

3.8.5.用构造函数创建自定义对象

//es5用function，es6用class
function person(name,age,hobby){this.name = name;this.age = age;this.hobby = hobby;
}
class Person {constructor(name,age,hobby){this.name = name;this.age = age;this.hobby = hobby;}
}
let foo=new person("张三",18,"听歌")
let bar=new Person("李四",20,"吃饭")
console.log(foo,bar)

在这里插入图片描述

3.9.栈内存和堆内存

基本数据类型是放在栈的，对象和函数是放在堆里。对象里再定义一个对象也是放在堆里

在这里插入图片描述

如果修改一个对象对应的堆内存值，他之前赋值给的另一个对象对应的值也会改变

let person= {name: "张三",age:18,hobby:"听歌"}
let person2 = person
person.name="22"
console.log(person2.name)//打印22

3.10.this指向

this被对象调用指向对象，在外面调用指向windows

3.11.包装类型对象

包装类型对象能把基本数据类型的变量等包装成对象以便让他能够使用方法

let a="aawf"
//这里将变量a包装以便使用length方法
console.log(a.length)

3.12.一些数据类型的常用方法

3.12.1.number

（1）一些值

number的最大、最小值，最大、最小整数值可以直接获取

在这里插入图片描述

（2）转字符串

可以将数字按不同进制（2~36进制）转换成string类型，默认10进制

let a=123
console.log(a.toString());
// 该数2进制转string类型
console.log(a.toString(2));
// 该数8进制转string类型
console.log(a.toString(8));
// 该数16进制转string类型
console.log(a.toString(16));// 直接用数字需要使用2个.
console.log(666..toString())

在这里插入图片描述

可以设置保留多少位小数，括号里为需要保存的小数位数

let a=3.1415926535;
console.log(typeof a.toFixed(2))

（3）把string转成number类型

用parseInt和parseFloat可以把string类型转化成number类型，这两个也是全局方法，可以不用Number调用

let b="23"
let c="2.352"
console.log(Number.parseInt(b))
console.log(Number.parseFloat(c))

3.12.2.Math

以下是一些常见的函数，更多的在mdn官方文档

在这里插入图片描述

3.12.3.String

（1）遍历string

string类型可以用for…of迭代

let foo="hello world";for (let i of foo){console.log(i)
}

在这里插入图片描述

（2）改变大小写

let foo="Hello World";
console.log(foo.toUpperCase());//字母全变为大写，输出HELLO WORLD
console.log(foo.toLowerCase());//字母全变为小写，输出hello world

（3）查找和替换字符串

indexOf：返回含某个字符串的第一个索引
includes：返回布尔值，判断是否包含某个字符串
startsWith:返回布尔值，判断是否以某个字符串开头（区分大小写）
endsWith:返回布尔值，判断是否以某个字符串结尾（区分大小写）
replace:返回替换第一个匹配字符串后的字符串

let foo="Hello World";
// indexOf
console.log(foo.indexOf("o"))//输出4
// includes
console.log(foo.includes("a"));//输出false
// startsWith
console.log(foo.startsWith("he"));//输出false
// endsWith
console.log(foo.endsWith("ld"));//输出true
// replace
console.log(foo.replace("o","6"));//输出Hell6 World

（4）获取子字符串slice

slice:slice(x,y)返回索引x-y间字符串（y为负数时表示末尾倒数），slice(x)返回索引x到末尾的字符串

let foo="Hello World";
console.log(foo.slice(2,6))//输出llo
console.log(foo.slice(2,-1))//输出llo Worl
console.log(foo.slice(2))//输出llo World

（5）字符串拼接concat

concat:可以链式调用，传多个参数

let foo="Hello";
let bar="World";
let baz="Liren";
let a=foo.concat(bar).concat(baz)
let b=foo.concat(bar,baz,"666")
console.log(a)//输出HelloWorldLiren
console.log(b)//输出HelloWorldLiren666

（6）删除首尾空格trim

trim:可删除首尾空格

let foo="    Hello     ";
console.log(foo.trim())//输出Hello

（7）切割split与拼接join字符串

split:可切割字符串，返回数组
join:可拼接字符串并在其中加上一段字符串

let foo="Hello-World";
let bar=foo.split("-");
let baz=bar.join("*");
console.log(bar)//输出数组['Hello', 'World']
console.log(baz)//输出Hello*World

3.13.高阶函数

高阶函数就是函数里参数有函数，这里写一个高阶函数的示例，myForEach为高阶函数

let arr=[{name:"张三",age:18},{name:"李四",age:1},{name:"王五",age:25},
];
arr.myForEach=function (fn){for(let i=0;i<this.length;i++){fn(this[i]);}
}arr.myForEach((item)=>{console.log(item);
})