JS ECMAScript

最新推荐文章于 2024-07-12 17:27:47 发布

小汤汤汤汤

最新推荐文章于 2024-07-12 17:27:47 发布

阅读量238

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/Maoxim/article/details/113246172

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS组成
ECMAScript JavaScript语法
DOM 页面文档对象模型
BOM 浏览器对象模型

1.行内式的js，直接写到元素内部
<input type="button" value="Button" onclick="alert('Break')">
2.内嵌式js
<script> alert('Break'); </script>
3.外部js script 双标签
<script src="js.js"> </script>
引用外部 JS文件的 script 标签中间不可以写代码

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:
在这里插入图片描述

        <script>
            let name = prompt('input your name');
            alert(name);
        </script>

在JS中八进制前面加0，十六进制前面加 0x
最大值:Number.MAX_VALUE，这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE，这个值为:5e-32
Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

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

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字 var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

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

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

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

转换为字符串
在这里插入图片描述
转换为数字型(重点)

转换为布尔型
在这里插入图片描述
代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

创建数组
1.利用new创建数组
var 数组名 = new Array();
var arr = new Array();

2.利用字面量创建数组
var 数组名 = [];
var 数组名 = [‘A’,‘B’,‘C’];

声明函数

// 声明函数 function 函数名() {
//函数体代码 }

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

调用函数

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

注意:在JavaScript中，形参的默认值是undefined。

arguments的使用
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:
 具有 length 属性
 按索引方式储存数据
 不具有数组的 push , pop 等方法

利用函数求任意个数的最大值

function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) { if (max < arguments[i]) {
} }
return max; }
console.log(maxValue(2, 4, 5, 9)); console.log(maxValue(12, 4, 9));

JS没有块级作用域

JS解释器分为两步，预解析和代码执行
预解析会把js里的所有var 还有function 提升到当前作用域的最前面
代码执行按照代码书写的顺序从上到下

预解析分为变量预解析（变量提升）和函数预解析（函数提升）
1.变量提升就是把所有的变量声明提升到作用域之前，不提升赋值操作
2.函数提升就是把所有的函数声明提升到当前作用域的最前面，不调用函数

在 JavaScript 中，现阶段我们可以采用三种方式创建对象(object):
 利用字面量创建对象
 利用 new Object 创建对象
 利用构造函数创建对象

1.利用字面量创建对象

var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~'); }
};

对象的调用

对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”
 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
 对象里面的方法调用:对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2.利用new Object创建对象

var andy = new Obect();
andy.name = 'pink'; 
andy.age = 18;
andy.sex = '男'; 
andy.sayHi = function(){
alert('大家好啊~'); }

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

function Person(name, age, sex) { this.name = name;
this.age = age;
this.sex = sex; 
this.sayHi = function() {
alert('我的名字叫:' + this.name + '，年龄:' + this.age + '，性别:' + this.sex); }
}
var bigbai = new Person('大白', 100, '男'); 
var smallbai = new Person('小白', 21, '男'); 
console.log(bigbai.name); 
console.log(smallbai.name);

遍历对象属性
for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) { // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值

JavaScript 中的对象分为3种:自定义对象、内置对象、浏览器对象
前面两种对象是JS 基础内容，属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

查文档
MDN: https://developer.mozilla.org/zh-CN/

Math 对象
Math.PI
Math.floor() //向下求整
Math.ceil() // 向上取整
Math.round()// 四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min()// 求最大和最小值

Math.random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

日期对象
Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

Date()方法的使用

获取当前时间必须实例化
var now = new Date(); console.log(now);
Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)
如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间

日期格式化
在这里插入图片描述
获取日期的总的毫秒形式
Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值 
console.log(date.valueOf()) ;
console.log(date.getTime());
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法，有兼容性问题 var now = Date.now();
var now = Date.now();

倒计时
案例分析：
1 核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
2 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
 d = parseInt(总秒数/ 60/60 /24);
 h = parseInt(总秒数/ 60/60 %24)
 m = parseInt(总秒数 /60 %60 );
 s = parseInt(总秒数%60);

数组对象
数组对象的创建
创建数组对象的两种方式
字面量方式
new Array()

检测是否为数组
instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true 
console.log(obj instanceof Array); // false 
console.log(Array.isArray(arr)); // true 
console.log(Array.isArray(obj)); // false

添加删除数组元素的方法
在这里插入图片描述
数组排序

数组索引方法

数组转换为字符串

else

字符串对象
基本包装类型
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。