01-js介绍.js
// 语法分类:es5、es6,js是弱类型语言。
// es6是对es5语法的优化、查漏补缺。
02-变量声明.js
// es5变量声明使用var
// 1. 可以重复声明变量;
// 2. 存在变量提升;
// 变量提升:是js中一种特有的编译机制,每次浏览器在执行js代码之前,都会先编译js,将使用var声明的变量,或者是function函数提升到 **当前作用域** 的最顶端。
console.log(uname);var uname = "小名";
var uname = 100;uname = "小王";
console.log(uname);var a = 10;
var b = 20;// es6变量声明使用let、const
// 1.不能重复声明变量;
// 2.let、const解决了变量提升的问题;
let uage = 20;
uage = true;// let uage = 10; // 报错
// console.log(usex); // 报错:使用let、const必须先声明,再使用。
const usex = false;
// const usex = true; // 报错
console.log(uage, usex);// es6使用let声明变量,使用const声明常量,使用const声明的变量,值不能被修改。
// usex = [1, 3, 5]; // 报错,不允许修改
// 注意:数组和对象用const声明的时候,内部的属性是可以修改的。
const arr = [1, 2, 3, 4];
arr[0] = 100;const user = { name: "小名", age: 10 };
user.name = "小红";
console.log(arr, user);
03.作用域分类.js
// es5两种:全局作用域,局部作用域,对应的变量就是全局变量和局部变量。
// es5局部作用域:函数内部,其他情况都是全局作用域(包括循环和条件语句)
var a = 10;if (true) {var b = 20;
}for (var i = 0; i < 2; i++) {var test = 11;
}console.log(a, b, test);function sum() {// var c = 30; // 函数内部使用var声明变量是局部变量。
}
// console.log(c);// es6三种:全局作用域,局部作用域,块级作用域。对应的变量就是全局变量和局部变量。
// es6局部作用域:函数内部,块级作用域(循环和条件语句),其他情况都是全局作用域。
let a1 = 100; // 全局变量if (true) {// 块级作用域,变量只能在块内部使用let b1 = 20;
}
console.log(a1, b1);
04.数据类型.js
// 数据类型:基本数据类型、引用类型(复杂类型)。
// 基本数据类型:string,number,boolean,undefined
// 引用类型:null,函数,数组,对象
// typeof和instanceOf两种方法判断数据类型。// let a = 10; // number
// let a = "10"; // string
// let a = true; // boolean
// let a = undefined; // undefined// 注意:object是js中广义上的类型,数组/null/侠义对象都属于object,typeof不能精准判断对象类型。
// let a = [1, 2, 3, 4]; // object
// let a = null; // object
// let a = { name: 1 }; // object
// let a = function () {}; // function
// console.log(typeof a);// instanceof:用于判断一个变量是否属于某个类的实例对象,返回值为bool值。
// let a = [1, 2, 3, 4]; // true
// let a = null; // object
// let a = { name: 1 }; // object
// let a = function () {}; // function
console.log(a instanceof Object);
console.log(a instanceof Array);
05.字符串方法API.js
let string = "Abcda5a8";
let string1 = "efg";
// 1. 属性length
console.log(string.length);// 4. indexOf(要查找的字符,从哪个索引位置开始查找): 返回指定字符第一次出现的位置,没有符合条件的字符返回-1。
// console.log(string.indexOf("a", 2));
console.log(string.indexOf("f")); // -1// 5. replace(): 将字符串中的某个字符,替换为目标字符,返回替换后的字符。默认不会替换所有,只会替换第一次出现的字符。如需替换所有,用正则表达式匹配。
// console.log(string.replace("a", "f"));
console.log(string.replace(/a/gi, "f")); // g表示全局匹配,i表示忽略大小写// 6. slice(起始索引(含),结束索引(不含)): 截取一段字符串内容。
console.log(string.slice(0, 3));// 7. split(截取的标识): 根据指定字符对字符串进行截取,返回一个数组。
let sku = "6G+128G;8G+128G;8G+256G;8G+521G";
console.log(sku.split(";"));// 8. 英文字符大小写转换
console.log(string.toUpperCase()); // 转化为大写
console.log("ABCD".toLowerCase()); // 转化为小写// 9. trim(): 移除首尾两端的空格,中间的不行
console.log(" 12 345 ".trim());// 2. charAt(): 返回指定索引位置的字符;
console.log(string.charAt(0));// 3. concat(): 连接两个或多个字符串,返回连接后的字符串
console.log(string.concat(string1));
06.数值类型.js
// 数值number类型:整数和小数
let num = 10;// number类型 -> string类型
// 1. toString() 将数值转化为字符串类型
console.log(typeof num, typeof num.toString());// 2. toFixed() 将小数设置保留几位,返回字符串类型
let num1 = 10.5678;
console.log(typeof num1.toFixed(2));// 3. 利用+算术运算符进行隐式转换
let res = num1 + "";
console.log(typeof res);// string类型 -> number类型
// 1. parseInt() parseFloat() 都返回number类型
let num2 = "10.55";
console.log(parseInt(num2));
console.log(parseFloat(num2));// 2. 利用*算术运算符进行隐式转换
console.log(num2 * 1);// number类型中的特殊类型:NaN,非正常的数值类型,在运算出错时出现。
console.log(typeof ("abc" * 10));
07.运算符.js
// 1. == 和 === : ==只比较值不比较类型,===比较值又比较类型。
let num1 = 10;
let num2 = "10";if (num1 == num2) console.log("==相等");
if (num1 === num2) console.log("===相等");// 2. &&与,||或
if (num1 == 10 && num2 == "10") console.log("&&成立");
if (num1 == 10 || num2 == "100") console.log("||成立");
08.Math对象.js
let num1 = 10.66;
// Math.round(数值): 返回一个四舍五入的整数
console.log(Math.round(num1));// Math.floor(数值): 向下取整,不存在四舍五入
// let num2 = 10.99; // 结果10
let num2 = 10.01; // 结果10
console.log(Math.floor(num2));// Math.floor(数值): 向上取整,不存在四舍五入
// let num3 = 10.99; // 结果11
let num3 = 10.01; // 结果11
console.log(Math.ceil(num3));// Math.random(): 求0-1之间的随机数,结果不会取到1,0是可以随机到的。
// 区间: [0,1)
console.log(Math.random());// 求50-100之间的随机数,求随机数公式:Math.random() * (最大值-最小值) + 最小值
console.log(Math.random() * 50 + 50);// 求11-56之间的随机数
console.log(Math.random() * 45 + 11);
09.Date对象.js
// 创建一个当前时间的时间对象。
let date = new Date();// 年 月 日
console.log(date.getFullYear(), date.getMonth() + 1, date.getDay());
// 时 分 秒
console.log(date.getHours(), date.getMinutes(), date.getSeconds());// 获取时间戳:是一个事件节点,表示从 1970 年 1 月 1 日至某个时间点的毫秒数。1秒=1000毫秒
console.log(date.getTime(), Date.now());// 创建某个时间点的事件对象
// new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
// new Date(dateString) 参数是日期字符串
// new Date(year, month, day, hours, minutes, seconds, milliseconds)
const date1 = new Date(1701674757847);
console.log(date1); // 返回当前时间戳对应的日期时间
const date2 = new Date("Dec 04, 2023 15:25:57");
console.log(date2.getTime());
const date3 = new Date(2023, 12, 4, 15, 25, 57);
console.log(date3.getTime());
10.对象.js
// js对象:狭义上的对象。let user = { name: "小王", age: 20 };
// Object.keys(目标对象):获取对象中所有的键,返回值是一个数组。
console.log(Object.keys(user));
// Object.values(目标对象):获取对象中所有的值,返回值是一个数组。
console.log(Object.values(user));
// 增
user["sex"] = "男";// 删
// delete user.name;// 改
user["age"] = 30;let params = "sex";
user[params] = "校长";
console.log(user, user.age);// JSON是一种有着固定结构和语法的数据,俗称JSON字符串,后端接口通常返回JSON字符串。
// 特点:
// 1. 跨平台;一套接口部署多个平台
// 2. 数据结构简单, 解析方便
// 3. 数据量小, 传输速度更快// 它相当于是一个字符串对象, 内部的键必须使用双引号. '{"a":1, ...}'// 对象和JSON之间的转化
// JSON字符串 -> 对象
let json = '{"code": 0, "data": {}}';
console.log(JSON.parse(json));// 对象 -> JSON字符串
console.log(JSON.stringify(user));let json1 ='{"code": 0,"message": "","data": {"list": [{"label": "经典观光","id": "93","img": "https://product-ssl-qiniu.bmtrip.com/product_5da95859aa87a.png","children": []},{"label": "亲子系列","id": "114","img": "https://product-ssl-qiniu.bmtrip.com/product_5e1ea6dad2f80.png","children": []}';