目录
1、基本语法
基于node.js环境实现，故可直接在node中运行，不需要在嵌入到html中
// 1、注释
// 单行注释 —— 快捷键是Ctrl+/
/*
块级注释1 —— 默认快捷键：alt+ shift + a
块级注释2 —— 可自行设定为：Ctrl + Shift + /
块级注释3
*/
// 2、输入与输出
// alert(msg)——浏览器弹出警示框
// console.log(msg)——浏览器控制台打印输出信息
// prompt(info)——浏览器弹出输入框，用户可以输入
// 由于是在node中使用的js，一般使用console.log(msg)
// 3、VScode设置`console.log('')`快捷键：
// 1）、打开vscode,选择文件–首选项–用户代码片段
// 2）、选择javascript类型，打开javascript.json文件
// 3）、按照操作，设置快捷输入：
/*
{
"Print to console": {
"prefix": "cl",
"body": [
"console.log('$1');",
],
"description": "Log output to console"
}
}
*/
// 4）、这样输入cl，然后按下tab键后，vscode会自动输入：console.log('');
// 4、其他
// 分号：虽然在JavaScript中，分号只是可选项，但是我们一般都要写分号；
console.log('hello word!');
// 语句块：语句块用{ }，后面无需加分号；
{
console.log('hello');
console.log('word!');
}
// 大小写敏感：JavaScript 对大小写是敏感的；
var a=10;
var A=20;
console.log(a); // 10
console.log(A); // 20
// 换行输入，如下
console.log('你好 \
世界');
2、变量
// 声明变量
var age; // var：variable，变量的意思; age：变量名
// 给变量赋值
age = 18;
// 声明的同时进行赋值，即初始化
var tatle = 25;
// 变量的更新
tatle = 30;
console.log('tatle的最新结果是：' + tatle); // 结果是：tatle的最新结果是：30
// 声明多个变量
var height = 20, width = 10, area;
area = height * width
console.log('area是：' + area); // 结果是：area是：200
/*
声明变量的特殊情况：
1）、只声明、不赋值——结果是：undefined
var age;
console.log (age);
2）、不声明、不赋值、直接使用——结果是：报错
console.log(age)
3）、不声明、只赋值——结果是：10
age = 10;
console.log (age);
*/
/*
变量命名规范：
1）、由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge, num01, _name
2）、严格区分大小写。var app; 和 var App;是两个变量
3）、不能以数字开头。18age是错误的
4）、不能是关键字、保留字。例如：var、for、while
5）、变量名必须有意义。MMDBBDnl→age
6）、遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
*/
// 交换两个变量
var a=10;
var b=20;
var temp; // 定义一个临时变量
temp=a;
a=b;
b=temp;
console.log('交换后，a的值是'+a+',b的值是'+b); // 交换后，a的值是20,b的值是10
3、数据类型
// JS是一种弱类型或者说动态语言，不用提前声明变量的类型，程序会被自动确定
/*
JS把数据类型分为两类：
简单数据类型（Number-数字型,String-字符串型,Boolean-布尔型,Undefined-未定义,Null-空值）
复杂数据类型（object—Object是个大类，function函数、array数组、date日期...等都归属于Object)
*/
var age = 10;
var areYouOk = '是的';
var total = 78.92;
3.1、数字型 Number
// 范围
console.log('数字型的最大值是：' + Number.MAX_VALUE); // 数字型的最大值是：1.7976931348623157e+308
console.log('数字型的最小值是：' + Number.MIN_VALUE); // 数字型的最小值是：5e-324
// 三个特殊值
console.log('无穷大：' + Infinity); // 无穷大：Infinity
console.log('无穷小：' + -Infinity); // 无穷小：-Infinity
// 判断是否是数字型
console.log(isNaN(areYouOk)); // 不是数字类型，返回true
console.log(isNaN(age)); // 是数字类型，返回false
3.2、字符串类型 String
// 此处先讲字符串类型，后面会在专门讲解字符串对象
// JS更推荐使用单引号，单引号内部可以使用双引号
var s1='hello';
var s2='hello my "one"!';
console.log(s1); // hello
console.log(s2); // hello my "one"!
/*
转义符：
\n —— 换行符；
\\ —— 斜杠\；
\' —— '单引号；
\" —— ”双引号；
\t —— tab缩进；
\b —— 空格；
*/
// 字符串内换行+转义符
var strMsg;
strMsg='酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为\
独特的风景。我审视四周，这里，是我的舞台，我就是天\
地间的王者。这一刻，我豪气冲天，终于大喊一声：\"收破烂啦～\"'
console.log(strMsg); // 结果：酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声："收破烂啦～"
// 字符串的长度
console.log('strMsg的长度是' + strMsg.length); // strMsg的长度是80
// 字符串的拼接
var str_1 = 'hello';
var str_2 = ' my ';
var str_3 = 'love';
console.log(str_1 + str_2 + str_3); // 结果是：hello my love
3.3、布尔型 Boolean
// 布尔类型有两个值：true和false ，其中true表示真（对），而false表示假（错）
// 布尔型和数字型相加的时候，true的值为1，false的值为0
var res_1=true+1;
console.log('true+1的结果是：'+res_1); // true+1的结果是：2
var res_2=false+10;
console.log('false+10的结果是：'+res_2); // false+10的结果是：10
3.4、Undefined、Null
// 一个声明后没有被赋值的变量会有一个默认值undefined
var a;
console.log('a的结果是:' + a); // a的结果是:undefined
// undefined进行计算：undefined与数值运算，结果为NaN
var b;
b = a + 10;
console.log('a+10的结果是：' + b); // a+10的结果是：NaN
// 一个声明变量给 null 值，里面存的值为空，可以参与运算，相当于0
var c = null;
console.log('c的值是：' + c); // c的值是：null
var d = c + 20;
console.log('d的值是：' + d); // d的值是：20
3.5、获取变量的数据类型
var a='hello',b=20,c,d=null,e=true;
console.log(typeof a); // string
console.log(typeof b); // number
console.log(typeof c); // undefined
console.log(typeof d); // object
console.log(typeof e); // boolean
3.6、数据类型的转化
// 1、转化为字符串类型
var num = 1;
console.log(num.toString()); // toString()方法转化为字符串
console.log(String(num)); // String()强制转化
console.log(num + ''); // 加号，拼接成字符串
console.log(String(false)); // false
// 2、转换为数字型
/*
parseInt(string)——将string类型转化成整数数值型
parseFloat(string)——将string类型转化成浮点数数值型
Number()强制转化——将string类型转化成数值型
js隐式转化(- * /)——利用算术运算符 隐式转换成数值型
*/
var a = '18', b = '3.14', c = '3.94', d = '120px', e = 're120px', f = '120px88px';
// parseInt
console.log(parseInt(a)); // 18
console.log(parseInt(b)); // 3
console.log(parseInt(c)); // 3
console.log(parseInt(d)); // 120
console.log(parseInt(e)); // NaN
console.log(parseInt(f)); // 120
// parseFloat
console.log(parseFloat(a)); // 18
console.log(parseFloat(b)); // 3.14
console.log(parseFloat(c)); // 3.94
console.log(parseFloat(d)); // 120
console.log(parseFloat(e)); // NaN
console.log(parseFloat(f)); // 120
// Number()
console.log(Number(a)); // 18
console.log(Number(b)); // 3.14
console.log(Number(c)); // 3.94
console.log(Number(d)); // NaN
console.log(Number(e)); // NaN
console.log(Number(f)); // NaN
// 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120'); // 3
console.log('123' * 1); // 123
// 3、转换为布尔型
// Boolean()函数，会其他类型转化为布尔类型
// 代表空、否定的值会被转换为false，如：''、0、NaN、null、undefined；
// 其余值都会被转换为true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true
4、运算符
// 1、算术运算符
console.log(10 + 20); // 30
console.log(10 - 20); // -10
console.log(10 * 20); // 200
console.log(10 / 20); // 0.5
console.log(9 % 2); // 1 --取余，9除以2等于4余1
// 浮点数的精度问题
// 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数
// 重要——所以：不要直接判断两个浮点数是否相等 !
console.log(0.1 + 0.2); // 结果是：0.30000000000000004
console.log(0.07 * 100); // 结果是：7.000000000000001
// 2、自增++与自减--
// 注意：前置自增（自减）运算符 与 后置自增（自减）运算符的区别
// 前置自增运算符，先自增，后返回值在参与运算
// 后置自增运算符,先返回值参与运算，后自增
var num = 10;
console.log(++num + 20); // 31 —— (10+1)+20=31
console.log(num); // 11
var num2 = 10;
console.log(20 + num2++); // 30 —— 20+10=30，然后num2再自增到11
console.log(num2); // 11
// 3、比较运算符
var a1 = 10; a2 = 20; a3 = '10';
console.log(a1 < a2); // true
console.log(a1 <= a2); // true
console.log(a1 > a2); // false
console.log(a1 >= a2); // false
console.log(a1 == a2); // false
console.log(a1 != a2); // true
console.log(a1 == a3); // true，会将a3隐士转化为10，故相等，返回true
console.log(a1 === a3); // false，全等（值跟数据类型都得一致），故返回false
// 4、逻辑运算符
// && —— and
// || —— or
// ! —— not
console.log(1 > 4 || 5 > 2); // true
console.log(1 > 4 && 5 > 2); // false
console.log(!(1 > 4)); // true
// 短路运算
// 逻辑与的短路运算（表达式1 && 表达式2）
// 如果表达式1为真，则返回表达式2；如果表达式1为假 那么返回表达式1
console.log(123 && 456); // 结果：456
console.log(0 && 456); // 结果：0
console.log('' && 1 + 2 && 456 * 56789); // 结果：''
// 逻辑或的短路运算（表达式1 || 表达式2）
// 如果表达式1为真，则返回表达式1；如果表达式1为假，则返回表达式2
console.log(123 || 456); // 结果：123
console.log(0 || 456 || 456 + 123); // 结果：456
// 5、赋值运算
var age = 10;
console.log(age += 5); // 15——相当于 age = age + 5;
console.log(age -= 5); // 10——相当于 age = age - 5;
console.log(age *= 10); // 100——相当于 age = age * 10;
// 6、优先级
/*
1）小括号（）
有括号先算括号里面的；
2）一元运算符
加加（++）； 减减（--）； 非（!）
3）算数运算符
加（+）;减（-）;乘（*）;除（/）;取于（%）；这里是先乘（*）除（/）取于（%）后加（+）减（-）。
4）关系运算符
大于（>）;大于等于（>=）;小于（<）;小于等于（<=）。
5）相等运算符
等于（==）；不等于（!=）;全等于（===）;不全等于（!==）。
6）逻辑运算符
先且（&&）后或（||）。
7）赋值运算符（=）
8）逗号运算符（,）
*/
5、流程控制
5.1、判断语句
// 1、if语句
// if
var score_1=77;
if(score_1>=60){
console.log('及格');
} // 及格
// if-else
if(score_1>=60){
console.log('及格');
}
else{
console.log('不及格');
} // 及格
// if-else-if
if(score_1>=80){
console.log('优秀');
}
else if(score_1>=70){
console.log('良好');
}
else if(score_1>=60){
console.log('及格');
}
else{
console.log('不及格');
} // 良好
// 2、三元表达式
var score_2=59;
score_2>=60?console.log('及格'):console.log('不及格'); // 不及格
// 3、switch语句
var day=5;
switch(day){
case 1:
console.log('周一')
break;
case 2:
console.log('周二')
break;
case 3:
console.log('周三')
break;
case 4:
console.log('周四')
break;
case 5:
console.log('周五')
break;
case 6:
console.log('周六')
break;
case 7:
console.log('周日')
break;
} // 周五
5.2、循环语句
// 1、For语句
// 计算1加到100的值，for循环做法
var i = 1; // 用于循环
var sum = 0; // 用于求和
for (i; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
// 2、For嵌套
// 打印5行10列的星星
var str = '';
// 行循环
for (var r = 1; r <= 5; r++) {
// 列循环，每列拼接10个星星
for (var c = 1; c <= 10; c++) {
str += '☆';
}
// 最后一行的话，就不换行
if (r == 5) {
str;
}
else {
str += '\n';
}
}
console.log(str);
// 3、while
// 计算1加到100的值，while循环做法
var j = 1, total = 0;
while (j <= 100) {
total += j;
j++;
}
console.log(total); // 5050
// 4、do-while
// 计算1加到100的值，do-while循环做法
var z = 1, agg = 0;
do {
agg += z;
z++;
} while (z <= 100)
console.log(agg); // 5050
// 5、break语句
// break 关键字用于立即跳出整个循环（循环结束）
var z1=1;
var total1=0;
// 无限循环，但是当z1=101时，使用break退出循环
while(1){
total1+=z1;
z1++;
if(z1==101){
break;
}
}
console.log(total1); // 5050
// 6、continue语句
// continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）
// 求1-100的奇数之和
var i3 = 1;
var sum3 = 0;
for (i3; i3 <= 100; i3++) {
// 判断是否是偶数，如果是偶数则利用continue退出本次循环
if(i3%2==0){
continue;
}
sum3 += i3;
}
console.log(sum3); // 2500
6、数组
// 1、创建数组
// 使用字面量创建数组
// 在编程语言中，一般固定值称为字面量
var arr1 = []; // 创建一个数组，此时是空数组
var arr2 = [20]; // 创建一个包含1项数据为20的数组
var arr3 = ['lily', 'lucy', 'Tom']; // 创建一个包含3个字符串的数组
var arr4 = [1, 2, '文本', true]; // 数组内部可以是不同的数据类型
// 使用Array构造函数创建数组
var arr5 = new Array(); // 创建一个空数组
var arr6 = new Array(10); // 创建一个包含10项的数组
var arr7 = new Array('lily', 'lucy', 'Tom'); // 创建一个包含3个字符串的数组
// 使用typeof返回数组的类型是object
console.log('数组返回的类型是：' + typeof (arr7)); // 数组返回的类型是：object
// 数组的访问，索引从0开始
console.log(arr4[0]); // 1
console.log(arr4[3]); // true
console.log(arr4[10]); // undefined，如果访问的索引未定义（即超过了），结果是undefined
// 2、遍历数组
var arr8 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
var str = '';
for (var i = 0; i < arr8.length; i++) {
if (i == arr8.length - 1) {
// 最后一个不加|
str = str + arr8[i];
}
else {
str = str + arr8[i] + '|';
}
}
console.log(str); // 结果是：星期一|星期二|星期三|星期四|星期五|星期六|星期日
// 3、在数组中新增元素
// 方法1：修改length长度，此时未定义的部分都是undefined
var arr9 = ['星期一', '星期二', '星期三'];
arr9.length = 7;
console.log(arr9[6]); // undefined
// 方法2：修改索引号 追加数组元素
var arr10 = ['星期一', '星期二', '星期三'];
arr10[3] = '星期四';
arr10[4] = '星期五';
console.log(arr10); // ['星期一', '星期二', '星期三', '星期四', '星期五']
// 方法3：替换原来的元素
arr10[0] = '周一';
console.log(arr10); // ['周一', '星期二', '星期三', '星期四', '星期五']
// 练习：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
var arr11 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
var arr12 = [] // 空数组，用来存放结果
var j = 0;
for (var i = 0; i < arr11.length; i++) {
if (arr11[i] >= 10) {
arr12[j] = arr11[i];
j++;
}
}
console.log(arr12); // [77, 52, 25]
7、函数
// 1、函数的声明与调用
/*
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数在使用时分为两步：声明函数和调用函数:
第一步：声明函数:
function 函数名() {
//函数体代码
}
第二步：调用函数
函数名(); // 通过调用函数名来执行函数体代码
*/
// 利用函数计算1-100之间的累加和
// 定义函数
function getSum(startNum, endNum) {
var sum = 0;
for (var i = startNum; i <= endNum; i++) {
sum = sum + i;
}
console.log(startNum + '至' + endNum + '的和是：' + sum);
}
// 调用函数
getSum(1, 100); // 1至100的和是：5050
// 2、函数的参数
// 上面的示例，function getSum(startNum,endNum){}中的startNum、endNum是形参；getSum(1,100)中的1、100是实参
// 看下，如果形参与实参的个数不同的话，会是什么样的结果
getSum(1, 100); // 1至100的和是：5050
getSum(1, 100, 200); // 1至100的和是：5050 —— 按照顺序，多余的实参直接舍弃
getSum(1); // 1至100的和是：0 —— 函数内部已经将sum初步赋值为0
// 3、函数的返回值
// return语句用于返回函数的返回值
// 在使用 return 语句时，函数会停止执行，并返回指定的值
// 如果函数没有 return ，返回的值是 undefined
// return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准
// 示例1：求两个数的最大值
function getMax(num_1, num_2) {
if (num_1 >= num_2) {
return num_1;
}
else {
return num_2;
}
}
var a = getMax(1, 100); // 定义一个a来接收结果
console.log(a); // 100
// 示例2：return 语句之后的代码不被执行
function twoNumSum(num_1, num_2) {
return num_1 + num_2;
console.log('这句不会被执行，因为前面有return');
}
var b = twoNumSum(1, 100);
console.log(b); // 101
// 示例3：return只能返回一个值。如果用逗号隔开多个值，以最后一个为准
function add(num1, num2) {
return num1, num2;
}
var resNum = add(21, 6);
console.log(resNum); // 6
// 4、可变参数arguments
// 当我们不确定有多少个参数传递的时候，可以用arguments来获取
// arguments是伪数组，具有以下特点：
// 具有length属性；按索引方式储存数据；不具有数组的push,pop等方法
// 示例：利用函数求任意个数的最大值
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max
}
var max1 = maxValue(1, 2, 3, 4, 5);
console.log(max1); // 5
var max2 = maxValue(22, 33, 44, 55, 66, 77, 88, 99);
console.log(max2); // 99
// 5、函数声明的两种方式
// 方式1：命名函数
// 上面示例的所有函数都有名字，如maxValue、getMax，这些都是命名函数
// 方式2：匿名函数
// 如：var fn = function(){...}；
// 因为函数没有名字，所以也被称为匿名函数
// 这个fn里面存储的是一个函数
// 函数表达式方式原理跟声明变量方式是一致的
// 函数调用的代码必须写到函数体后面
8、作用域
// 1、全局作用域——作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件。
var a = 10; // a是全局变量
var b = 20; // b是全局变量
console.log(a + b);
// 2、局部作用域 （函数作用域）——作用于函数内的代码环境，就是局部作用域。
function getMax() {
var c = 20; // c是局部变量
var d = 100; // d是局部变量
return c > d ? c : d;
}
var e = getMax(); // e是全局变量
console.log(e);
// 3、局部变量不能在函数外部被访问
// console.log(c); // 报错：c is not defined
// 4、JS没有块级作用域，在块级定义的变量，能在块级外部被访问
// 块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域
{
var f = 10;
}
console.log(f); // 10
// 5、ES6中，可以使用let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问
if (true) {
let g = 3;
}
// console.log(g); // 报错：g is not defined
// 6、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改
function test() {
const x = 10;
x = 11;
}
test(); // 报错，x是常量不能修改
function test2() {
const x = 10;
}
test2();
// console.log(x); // 报错-Assignment to constant variable
9、预解析
// 1、什么是预解析？
/*
在了解预解析之前，先来思考两个问题？
问题1：如果未声明变量，然后直接输出，会报错；但是如果先直接输出，再声明变量，则不会报错，为什么呢？
问题2：如果先调用函数，再声明命名函数，不会报错；但是如果先调用函数，再声明匿名函数，则会报错，是为什么呢？
*/
// 问题1：
// 报错
console.log(num1); // Uncaught ReferenceError: num1 is not defined
// 不报错
console.log(num2); // undefined
var num2;
// 问题2：
// 不报错
fn();
function fn() {
console.log('打印'); // 打印
}
// 报错
fn2();
var fn2 = function(){
console.log('打印'); // Uncaught TypeError: fn is not a function
}
/*
说明：造成上面两个问题的原因是
- JS代码是由浏览器中的JS解析器来执行的。JS解析器在运行JS代码的时候分为两步：预解析和代码执行。
- 预解析就是在当前作用域下, JS代码执行之前，浏览器会默认把带有var和function声明的变量在内存中进行提前声明或者定义。
*/
// 2、预解析过程
/*
预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
- 变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
- 函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数
*/
// 案例1
console.log('案例1');
var n1 = 10;
f1();
function f1() {
// 函数内部的n1有预解析，但是不提升赋值，所以打印的时候还没赋值，故结果是undefined
console.log(n1); // undefined
var n1 = 20;
}
// 案例2
console.log('案例2');
var n2 = 10;
function f2() {
// 函数内部n2有预解析，第一次打印的时候还没赋值，结果是undefined，第二次打印的时候已经赋值，故打印结果是20
console.log(n2); // undefined
var n2 = 20;
console.log(n2); // 20
}
f2();
// 案例3
console.log('案例3');
var a = 18;
f3();
function f3() {
// a有预解析，但是打印的时候还没赋值，故结果是undefined
// b不存在预解析，打印结果直接就是9
var b = 9;
console.log(a); // undefined
console.log(b); // 9
var a = '123';
}
// 案例4
// 说明1：f4预解析，故调用的时候直接先打印3行的10；在函数外部的a4、b4、c4均为定义，故报错
console.log('案例4');
f4(); // 说明1
console.log(c4); // 报错
console.log(b4); // 报错
console.log(a4); // 报错
function f4() {
var a4 = 10;
var b4 = 10;
var c4 = 10;
console.log(a4);
console.log(b4);
console.log(c4);
}
10、对象
/*
1、什么是对象
现实生活中，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一个人可以是“对象”，一个数据库、一张网页也可以是“对象”。
在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
2、对象的作用
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？
JS 中的对象表达结构更清晰，更强大，如将一个LOL游戏的英雄盖伦的信息以及技能表达结构如下：
- 创建英雄这个对象
- 英雄.姓名='德玛西亚之力'
- 英雄.昵称='盖伦'
- 英雄.血量=20000
- 英雄.攻击力=500
- 英雄.技能='德玛西亚正义'
3、如何创建对象
在JS中，现阶段我们可以采用三种方式创建对象（object）：
- 利用字面量 { } 创建对象
- 利用 new Object 创建对象
- 利用构造函数创建对象
*/
// 方法1：利用字面量 { } 创建对象
// 创建英雄对象
var hero = {
// 注意：冒号与逗号
// 对象里面的变量称为属性，不需要声明，用来描述该对象的特征
name: '德玛西亚之力',
nickName: '盖伦',
hp: 20000,
ad: 500,
// 对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能
skill: function () {
console.log('德玛西亚正义');
}
}
// 对象的调用
hero.skill(); // 德玛西亚正义
console.log(hero.nickName); // 盖伦
// 方法2：利用 new Object 创建对象
var hero_2 = new Object;
hero_2.name = '德玛西亚之力';
hero_2.nickName = '盖伦';
hero_2.hp = 20000;
hero_2.ad = 500;
hero_2.skill = function () {
console.log('德玛西亚正义');
};
hero_2.skill(); // 德玛西亚正义
console.log(hero_2.name); // 德玛西亚之力
// 方法3：利用构造函数创建对象
// 构造函数约定首字母大写
function Hero(name, nickName, hp, ad, skill) {
this.name = name; // 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
this.nickName = nickName;
this.hp = hp;
this.ad = ad;
this.skill = function () {
console.log(skill); // 构造函数中不需要 return 返回结果
};
}
// 创建盖伦这个对象
// 创建对象的时候，必须用 new 来调用构造函数
var gailun = new Hero('德玛西亚之力', '盖伦', 20000, 500, '德玛西亚正义');
gailun.skill(); // 德玛西亚正义
console.log(gailun.ad);; // 500
/*
构造函数和对象
- 构造函数，如Hero()，泛指某一大类（class），他抽象了对象的公共部分，封装到了函数里面；
- 创建对象，如new Hero()，特指某一个，通过new关键字创建对象的过程我们也称为`实例化对象`；
new 在执行时会做四件事情：
- 在内存中创建一个新的空对象；
- 让 this 指向这个新的对象；
- 执行构造函数里面的代码，给这个新对象添加属性和方法；
- 返回这个新对象（所以构造函数里面不需要return）；
*/
// 4、遍历对象
for (var k in gailun) {
console.log('属性:' + k + ' — 值:' + gailun[k]); // 这里的 k 是属性名,obj[k] 是属性值
}
/*
结果是：
属性:name — 值:德玛西亚之力
属性:nickName — 值:盖伦
属性:hp — 值:20000
属性:ad — 值:500
属性:skill — 值:function () {
console.log(skill); // 构造函数中不需要 return 返回结果
}
*/
11、内置对象
/*
JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
- 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，后续在JS API中讲解
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript提供了多个内置对象：Math、Date、Array、String等
- 可以在这个文档查看内置对象：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
*/
11.1、Math对象
// Math对象不是构造函数，它具有数学常数和函数的属性和方法。
// 跟数学相关的运算（求绝对值，取整、最大值等）可以使用Math中的成员
/*
属性：
E | 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 | 返回 2 的自然对数（约等于0.693）。
LN10 | 返回 10 的自然对数（约等于2.302）。
LOG2E | 返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。
PI | 返回圆周率（约等于3.14159）。
SQRT1_2 | 返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 | 返回 2 的平方根（约等于 1.414）。
方法：
abs(x) | 返回 x 的绝对值。
acos(x) | 返回 x 的反余弦值。
asin(x) | 返回 x 的反正弦值。
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) | 对数进行上舍入。
cos(x) | 返回数的余弦。
exp(x) | 返回 Ex 的指数。
floor(x) | 对 x 进行下舍入。
log(x) | 返回数的自然对数（底为e）。
max(x,y,z,...,n) | 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) | 返回 x,y,z,...,n中的最低值。
pow(x,y) | 返回 x 的 y 次幂。
random() | 返回 0 ~ 1 之间的随机数，随机返回一个小数，其取值范围是[0，1)。
round(x) | 四舍五入。
sin(x) | 返回数的正弦。
sqrt(x) | 返回数的平方根。
tan(x) | 返回角的正切。
tanh(x) | 返回一个数的双曲正切函数值。
trunc(x) | 将数字的小数部分去掉，只保留整数部分。
*/
// 常用的属性与方法示例
// Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
// Math.floor()——向下取整，往最小了取值
// Math.ceil()——向上取整，往最大了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// Math.round()——四舍五入
// Math.round()没有类似于Math.round(x,2)四舍五入保留两位小数
// 但是可以采用：Math.round(x*100)/100的方式
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(1.035321132,2)); // 1——第二个数是直接舍弃的
console.log(Math.round(1.035321132*100)/100); // 1.04
// random( )方法可以随机返回一个小数，其取值范围是[0，1)，左闭右开
// 随机取得0-1之间的小数
console.log(Math.random()); // 0.1408545817456277
// 随机取得0-1之间的小数，并保留两位小数
console.log(Math.round(Math.random()*100)/100); // 0.64
// 随机生成一个 1~ 10 之间的数字
// 步骤1：定义函数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 步骤2：调用
var res=getRandom(1,10);
console.log(res); // 7
11.2、日期对象
// Date()日期对象是一个构造函数，必须使用new来调用日期对象
/*
1、Date()方法
- 如果没有参数 返回当前系统的当前时间
- 如果Date()里面写参数，就返回括号里面输入的时间
- Date()参数里面有几种写法：
- new Date(milliseconds)
- new Date(dateString)
- new Date(year,month,day,hours,minutes,seconds,milliseconds)
月份英语：
- 一 月：January
- 二 月：February
- 三 月：March
- 四 月：April
- 五 月：May
- 六 月：June
- 七 月：July
- 八 月：August
- 九 月：September
- 十 月：October
- 十一月：November
- 十二月：December
*/
// new Date()返回当前系统的当前时间
var date = new Date();
console.log(date); // Tue Jan 17 2023 16:17:46 GMT+0800 (中国标准时间)
// new Date(year,month,day,hours,minutes,seconds,milliseconds)中month的是从0-11，而不是1-12
// 下面的例子的写法，10代表十一月份，故输入结果是Nov
var date1 = new Date(2019, 10, 1);
console.log(date1); // Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)。
// new Date(dateString)
// dateString中，10则是正常代表十月份，故输出结果是Oct
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2); // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
/*
2、日期格式化
getFullYear() | 从 Date 对象以四位数字返回年份
getMonth() | 从 Date 对象返回月份 (0 ~ 11)
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getHours() | 返回 Date 对象的小时 (0 ~ 23)
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6),0表示周日
*/
var datee = new Date();
console.log(datee); // Tue Jan 17 2023 16:51:56 GMT+0800 (中国标准时间)
// 周二：2023-01-17 16:51:56:800
console.log(datee.getFullYear()); // 2023
console.log(datee.getMonth()); // 0
console.log(datee.getDate()); // 17
console.log(datee.getHours()); // 16
console.log(datee.getMinutes()); // 51
console.log(datee.getSeconds()); // 56
console.log(datee.getMilliseconds()); // 800
console.log(datee.getTime()); // 1673945516800
console.log(datee.getDay()); // 2
// 综合示例：结束时间是2023-01-20 12:00:00，求现在到结束时间还差多少天、多少时、多少分、多少秒
// 步骤1：将当前时间与结束时间转化为时间戳
// 步骤2：两个时间戳的差值/1000，就是两个时间的秒差
// 步骤3：再将秒差转化为多少天、多少时、多少分、多少秒
function countDown(endTime){
var end=new Date(endTime).getTime(); // 将结束时间转化为时间戳
var now= new Date().getTime(); // 将当前时间转化为时间戳
var time_s=(end-now)/1000; // 求秒差
var d = parseInt(time_s / 60 / 60 / 24); // 多少天
d = d < 10 ? '0' + d : d; // 如1天，显示为01天
var h = parseInt(time_s / 60 / 60 % 24); // 多少时
h = h < 10 ? '0' + h : h;
var m = parseInt(time_s / 60 % 60); // 多少分
m = m < 10 ? '0' + m : m;
var s = parseInt(time_s % 60); // 多少秒
s = s < 10 ? '0' + s : s;
console.log(d + '天' + h + '时' + m + '分' + s + '秒'); // 返回结果
}
countDown('2023-01-20 12:00:00'); // 02天18时50分44秒
11.3、数组对象
// 1、创建数组
// 利用字面量创建
var arr1 = [1, 'A', true];
// 利用Array构造函数创建
var arr2 = new Array(); // 创建一个空数组
var arr3 = new Array('lily', 'lucy', 'Tom'); // 创建一个包含3个字符串的数组
var arr4 = new Array(10); // 创建一个包含10项的数组
// 2、检测是否为数组
var obj = {};
var arr = [1, 2, 3];
console.log(obj instanceof Array); // false
console.log(arr instanceof Array); // true
// 3、添加数组的元素
// 除了下面两个方法外，在《数组》章节，还可以通过修改索长度来来增加元素：arr.length='x';
// push()方法：在数组的末尾添加一个或者多个数组元素
arr.push(4);
arr.push(5, 6, 7);
console.log(arr); // (7) [1,2,3,4,5,6,7]
// unshift()方法：在数组的开头 添加一个或者多个数组元素
arr.unshift(0);
arr.unshift(-3, -2, -1);
console.log(arr); // (11) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7]
// 4、删除元素
// 注意：与添加的方法不同，pop()与shift()方法，不能删除多个元素
// pop()方法：删除数组的最后一个元素
arr.pop(); // 删除了7
console.log(arr); // (10) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6]
// shift()方法：删除数组的第一个元素
arr.shift(0);
arr.shift();
console.log(arr); // (7) [-1, 0, 1, 2, 3, 4, 5]
// 示例：有一个工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var gz = [1500, 1200, 2000, 2100, 1800];
var gz_new = [];
for (var i = 0; i < gz.length; i++) {
if (gz[i] <= 2000) {
gz_new.push(gz[i]);
}
}
console.log(gz_new); // (4) [1500, 1200, 2000, 1800]
// 5、排序
// reverse()方法：颠倒数组元素的顺序，改变原数组
var color = ['pink', 'red', 'blue'];
color.reverse();
console.log(color); // (3) ['blue', 'red', 'pink']
// 2. 数组排序
/*
sort()方法用于排序
语法：
arr.sort([compareFunction])
参数:
compareFunction [可选]，用于数组排序规则的比较函数:
- 如果不含有该参数，数组元素按照转换字符串的各个字符的Unicode编码顺序进行排序（升序）
- compareFunction比较函数:
该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字；
数字>0则按照参数顺序排序，数字=0则不排序，数字<0则按照参数的反序排序
*/
// sort()方法不加参数，则按照字符串的升序顺序排序，即按照字符编码的升序顺序进行排序
var brr1 = ['b', 'c', 'a'];
console.log(brr1.sort()); // (3) ['a', 'b', 'c']
var brr2 = [1, 24, 35, 2, 18, 23, 3];
console.log(brr2.sort()); // (7) [1, 18, 2, 23, 24, 3, 35]
// 升序排序-数字
var brr3 = [1, 24, 35, 2, 18, 23, 3];;
brr3.sort(function (a, b) {
return a - b;
})
console.log(brr3); // (7) [1, 2, 3, 18, 23, 24, 35]
// 降序排序-数字
var brr4 = [1, 24, 35, 2, 18, 23, 3];;
brr4.sort(function (a, b) {
return -(a - b);
})
console.log(brr4); // (7) [35, 24, 23, 18, 3, 2, 1]
// 字符串升序
var brr5 = ['b', 'c', 'a'];
brr5.sort();
console.log(brr5); // (3) ['a', 'b', 'c']
// 字符串降序
var brr6 = ['b', 'c', 'a'];
brr6.sort().reverse(); // 升序后翻转
console.log(brr6); //(3) ['c', 'b', 'a']
// 6、查找对应索引
// arr.indexOf('x')——在arr数组中，从前面往后查找是否有元素x，如果有返回对应索引，如果没有返回-1
// arr.lastIndexOf('x)——在arr数组中，从后面往前找是否有元素x，如果有返回对应索引，如果没有返回-1
// 注意，索引是从0开始的
var crr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(crr.indexOf('green')); // 1——即第二个元素
console.log(crr.indexOf('blue')); // 2
console.log(crr.lastIndexOf('blue')); // 4——从后面开始找，故是4
console.log(crr.lastIndexOf('pink')); // 3
// 示例：['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素
// 算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加，否则不添加
var str = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
var strNew = [];
for (var i = 0; i < str.length; i++) {
if (strNew.indexOf(str[i]) == -1) {
strNew.push(str[i]);
}
}
console.log(strNew); // (5) ['c', 'a', 'z', 'x', 'b']
// 7、数组转换为字符串
// 方法1：toString()方法，该方法是用逗号分割
var nums = ['c', 'a', 'z', 'x', 'b'];
var s1 = nums.toString();
console.log(s1); // c,a,z,x,b
// 方法2：join(分隔符)，该方法可以自定义分割的符号
var s2 = nums.join('-');
console.log(s2); // c-a-z-x-b
var s3 = nums.join('/');
console.log(s3); // c/a/z/x/b
11.4、字符串对象
// 1、基本包装类型
// 基本包装类型：就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法
// 思考：按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，那为什么下面的程序能运行呢？
var text = 'hello';
console.log(text.length); // 5
/*
这是因为JS会把基本数据类型包装为复杂数据类型，其执行过程如下 ：
1）、var temp = new String('hello'); // 生成临时变量，把简单类型包装为复杂数据类型
2）、text=temp; // 赋值给我们声明的字符变量
3）、temp=null; // 销毁临时变量
这样就是text这个基本的字符串类型，包装成字符串对象了
*/
// 2、字符串的不可变性
// 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
var str = 'abc';
str = 'hello';
/*
当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
由于字符串的不可变，在大量拼接字符串的时候会有效率问题
*/
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str1 = '';
for (var i = 0; i < 100000; i++) {
str1 += i;
}
console.log(str1); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
// 3、根据字符返回位置
// indexOf('要查找的字符', [起始的位置])——从前往后找——找不到返回-1
// lastIndexof('要查找的字符', [起始的位置])——从后往前找——找不到返回-1
var str2 = '改革春风吹满地，春天来了';
console.log(str2.indexOf('春')); // 2
console.log(str2.indexOf('春', 5)); // 8
console.log(str2.indexOf('山')); // -1
console.log(str2.lastIndexOf('春')); // 8
console.log(str2.lastIndexOf('春', 6)); // 2
console.log(str2.lastIndexOf('山')); // -1
// 4、根据位置返回字符
// charAt(index) 根据位置返回字符
var str3 = 'andy';
console.log(str3.charAt(3)); // y
// 遍历所有的字符
for (var i = 0; i < str3.length; i++) {
console.log(str3.charAt(i));
} // a n d y
// charCodeAt(index) 返回相应索引号的字符ASCII值
console.log(str3.charCodeAt(0)); // 97 ——a的ASCII值是97
// str[index] H5 新增的
console.log(str3[0]); // a
// 5、字符串操作方法
// concat('字符串1','字符串2'....)
var str4 = 'andy';
console.log(str4.concat('red')); // andyred
// substr('截取的起始位置', '截取几个字符');
var str5 = '改革春风吹满地';
console.log(str5.substr(2, 2)); // 春风——从第3个字符开始，截取2个
// 替换字符 replace('被替换的字符', '替换为的字符') 只会替换第一个字符
var str6 = 'andyandy';
console.log(str6.replace('a', 'b')); // bndyandy
// 字符转换为数组 split('分隔符')
var str7 = 'red, pink, blue';
console.log(str7.split(',')); // ['red', ' pink', ' blue']
var str8 = 'red&pink&blue';
console.log(str8.split('&')); // ['red', ' pink', ' blue']
标签：node,10,console,log,对象,JavaScript,js,返回,var From： https://www.cnblogs.com/taoshushu/p/17060677.html