JS 语句语法1

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": []}';