01-JavaScript基本输出语句
alert(); 弹出一个警告框
// document.write(); 在文档中(body元素中)写入内容
// console.log(); 控制台输出日志(推荐)
// document.write(‘
你好
‘);02-变量的基本概念
变量指的是存储信息的 容器
// ECMAScript 定义了变量的规则
// 它的变量类型 为 松散类型(弱类型) 指的是变量可以保存各种类型的数据 没有对数据的类型进行约束
// 创建变量会使用 一个 var 操作符 它也是一个关键字
// 关键字(指的是具有特殊含义的单词)
// var 后面跟随一个变量名
// ‘=’ 赋值符
// 它的含义是将符号右边的值 赋予给左边的变量
// var user = ‘小花’;
// console.log(user);
// 交换a和b的值
// var a = 5;
// var b = 6;
// var c;
// c = a;
// a = b;
// b = c;
// a = a+b; // a = 11 , b = 6
// b = a-b; // b = 5,a = 11
// a = a-b; // a = 6,b = 5
// console.log(a);
// console.log(b);
// ——————————————————————
// 变量的使用 可以先创建 后赋值
// 也可以在创建时进行赋值
// var num = 7;
// var num2;
// num = 3;
// 变量需要先创建(声明) 后使用
// 所有的变量在声明完成后 如果没有对它进行赋值 则默认的值为 undefined (未定义)
1.只声明不赋值,因为程序也不知道里面存的是什么,所以结果是undefined(未定义的)
2.不声明不赋值,直接使用某个变量会报错
3.不声明直接赋值可以直接使用,但不推荐,因为会变成全局变量
// var age;
// console.log(age);
// ——————————————————————
// 可以使用一个语句声明多个变量
// 多个变量之间 使用 逗号( , )隔开
03-变量名的命名规范
规定
// 1. 数字 字母 下划线() 美元符($)
// 2. 不可以使用数字开头
// 3. 不可以使用关键字 和保留字
// 规范
// 4. 变量的命名必须要有明确含义(语义化)
// 5. 使用骆驼命名法(驼峰命名法)
// var var = 3; // 关键字不能作为变量名
// var 3user = 123; // 不能使用数字开头
// var num2 = 22; // 正确命名
// var = 213; // 正确命名
// var age@ = 123; // 不能使用下划线和美元符外的其他符号
// var $ = ‘aaa’; // 正确命名
// var username
// —————————————————————————-
// 骆驼命名法
// 1. 小驼峰式命名(除第一个单词外所有单词的首字母大写)
// 2. 大驼峰式命名(所有单词的首字母大写)
// 通常 变量的命名采用小驼峰式命名
// 函数命名采用小驼峰式命名
// 类 采用大驼峰式命名
// 构造函数 采用大驼峰式命名
04-基本数据类型
// 基本数据类型 (原始类型/值类型)
// 传统(ES2015前)的ECMAScript 有 5种基本数据类型
// ES2015 新增了第六种 Symbol
// ES2020 新增了第七种 Bigint
// ————————————————————
// 1. Undefined
// 这个类型 只有一个值 undefined
// undefined 的意思是 未定义 它表示一个变量声明后没有赋值 是所有为赋值变量的默认值
// 这个值一般不会主动使用 应为没意义
// var message = undefined; // 无意义
// var message2;
// console.log(message);
// console.log(message2);
// ————————————————————
// 2. Null
// 这个类型 只有一个值 null
// null 的英文含义是 空 表示没有东西
// null 表示 一个变量将来会指向一个对象 但现在没有指向
// null 是一个空对象指针
// var n = null;
// console.log(n);
// ————————————————————
// 3. Number
// Number类型表示的数值 数值的意义是计数和运算
// ECMAScript中 Number 类型 表示 所有的 小数或整数
// (在Java中 整数是 int 类型 小数是 float 类型 )
// var num1 = 21;
// var num2 = 3;
// console.log(num1+num2);
// console.log(num1-num2);
// console.log(num1num2);
// console.log(num1/num2);
// 特殊的值 NaN (Not a Number) 非数字
// 当一个需要返回数值的操作 无法获得数值的结果时 就会返回 NaN
// 所有的运算都是需要返回数值的操作
// console.log(22undefined);
// Infinity 无穷
// console.log(5/0); // 数学中0无法作为除数 在JS中0作为除数就会返回 Infinity
// console.log(9999999999999999999999n*99999999999999999n); // 在整数的结尾添加n 则为Bigint类型
// —————————————————————
// 4. Boolean
// 布尔类型 有两个值 分别是 true 和 false
// true和false分别表示真和假
// 当你只需要两种情况的数据时 就可以使用布尔类型
// 布尔类型可以直接和数字进行运算 在运算时 true会自动转换成数字1 false会自动转换成数字0
// 在使用布尔类型时 也可以使用 数字 1 和 0 进行表示
// var b = true;
// var b2 = false;
// console.log(b + 3);
// console.log(b2 +3);
// —————————————————————-
// 5. String
// 字符串类型
// 除了其他数据类型以外 所有添加在引号中的数据 都是字符串类型
// 引号 可以是 单引号 和 双引号
// 当一个数据 不是其他类型 也不是字符串时 它会被JS引擎当作变量解析
// xxxx is not defined
// var str = ‘你好世界’;
// console.log(str);
// console.log(你好世界);
// console.log(abc);
// 字符串中的特殊字符
// \ 转义符
\ 表示斜杠
\’ 表示单引号
\t 表示制表符
\n 表示换行符
05-引用数据类型
// 引用数据类型 通常被称之为 对象
// Object 类型
// 对象是由一组 无序的 名值对(键值对)构成
// 它用于描述一个整体
// 使用一个变量保存多个值
// var name = ‘闫梦涵’;
// var age = 18;
// var sex = ‘女’;
// console.log(name);
// console.log(age);
// console.log(sex);
// 创建对象 new Object()
例: var o = new Object(); // 创建对象
// 点操作符(.) 用于访问对象的属性<br /> o.name = '闫梦涵';<br /> o.age =18;<br /> o.sex='女';<br /> o.phone = 13677888888;<br /> console.log(o);<br /> console.log(o.name);<br /> console.log(o.age);<br /> console.log(o.sex);
06-数据类型检测
// ECMAScript 是一个弱类型语言 在声明变量时并没有指定和约束数据类型
// 所以变量的数据类型 是由 赋值操作决定的
// 我们需要一个手段来检测数据类型
// ECMAScript 提供了一个关键字 typeof 来进行类型检测
// typeof 关键字 用于检测数据的类型 并返回一个 字符串的结果
// var message;
// console.log(typeof message); // ‘undefined’
// var n = null;
// console.log(typeof n); // ‘object’ 特殊结果
// var num = 123;
// console.log(typeof num); // ‘number’
// var nan = NaN;
// console.log(typeof nan); // ‘number’
// var str = ‘你好’;
// console.log(typeof str); // ‘string’
// var b = false;
// console.log(typeof b); // ‘boolean’
// var big = 123n;
// console.log(typeof big); // ‘bigint’
// var o = new Object();
// console.log(typeof o ); // ‘object’
// —————————————————
// console.log(typeof alert); // ‘function’
// console.log(typeof console.log); // ‘function’
// console.log(typeof Object); // ‘function’
// var num2 = 17;
// console.log(typeof (typeof num2)); //typeof ‘number’
07-算数运算符
// 运算符 优先级
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
// % 取余运算符 读音 模(mo)
// 运算符表达式: a % b
// 表达式含义: a 除以 b 取余数
// console.log(5%3);
// console.log(11%5);
// ———————————————————————————
// 一元运算符
// 指的是只有一个数参与运算的运算符
// ++ 一元自增运算符 将运算数+1
// — 一元自减运算符 将运算数-1
// 这两个运算符可以出现在运算数的前后
// var num = 3;
// num++; // num = num + 1
// ++num; // num = num + 1
// console.log(num);
// 一元自增和一元自减运算符 不是独立出现时(有其他运算符时) 前后顺序会影响运算结果
// 一元自增运算符 出现在前 则先+1 后使用值
// 出现在后 先使用值 再+1
// var num2 = 5;
// console.log(num2++); // 5
// console.log(num2); // 6
// console.log(++num2); // 6
// console.log(num2); // 6
// var a = 7;
// console.log(a + a++ + ++a - a++ + —a + a - a—); // 22 21 23 24
// // 7 + 7 + 9 - 9 + 9 + 9 - 9
// // 8 9 10 9 8
// console.log(a); //
// 一元 + 运算符
// 一元 - 运算符
// 一元+和一元- 可以将运算数据转换成 number 类型<br /> // 在转换过程中 一元+运算符 保留原数据符号<br /> // 一元- 运算符 使用相反符号<br /> // console.log(+'21'); // 21<br /> // console.log(+'1.3'); // 1.3<br /> // console.log(+'1.3a'); // NaN<br /> // console.log(+'-3'); // -3<br /> // console.log(-'-3'); // 3<br /> // console.log(-'3'); // -3<br /> // console.log(+true); // 1<br /> // console.log(+false); // 0<br /> // console.log(+null); // 0<br /> // console.log(+undefined); // NaN<br /> // var o = new Object();<br /> // console.log(+o); // NaN<br /> // --------------------------------------------------------<br /> // 小数在编程语言中 叫做 浮点数<br /> // 浮点数运算 遵循 IEEE 754 规则<br /> // console.log(1+2);<br /> // console.log(0.1+0.2); // 0.30000000000000004<br /> // console.log(0.1+0.1); // 0.20000000000000000 0000000000000000000000000564316278674875893<br /> // console.log(0.2+0.2); // 0.40000000000000000 000000546726789537924<br /> // 解决小数位数和精度问题<br /> // toFixed()<br /> // 语法: number.toFixed(length);<br /> // 返回值: 字符串<br /> // var num = 0.1+0.2;<br /> // console.log(+num.toFixed(2));<br /> // var price = 99;<br /> // console.log(price.toFixed(2));<br /> // ------------------------<br /> // Number.isInteger();<br /> // 判断一个数是否是整数<br /> // 返回值: 布尔值<br /> // console.log(Number.isInteger(33));<br /> // console.log(Number.isInteger(33.1));<br /> // ------------------------<br /> // Number.isNaN();<br /> // 判断一个值是否是 NaN<br /> // 返回值: 布尔值<br /> // console.log(Number.isNaN(NaN));<br /> // console.log(Number.isNaN(22*undefined));<br /> // --------------------------------------------<br /> // 幂运算符 **<br /> // 含义 x ** y 为计算x的y次幂<br /> // console.log(2**8);<br /> // console.log(2**12);<br /> // console.log(2**31-1); // 2147483647
08-关系运算符
// 主要用于判断两个数值之间的 大小关系
// 关系运算符 返回一个布尔值作为结果
// console.log(3>5);
// console.log(7<9);
// console.log(7<=9);
// console.log(3>=3);
// ————————————————————-
// 特殊情况
// console.log(‘你’ > ‘好’);
// console.log(‘你’ < ‘好’);
// console.log(‘吃’ > ‘饭’);
// console.log(‘吃’ < ‘饭’);
// console.log(‘喜’ > ‘欢’);
// console.log(‘喜’ < ‘欢’);
// console.log(‘欢’ > ‘喜’); // 27426 > 21916
// console.log(‘欢’ < ‘喜’); // 27426 < 21916
// 在进行字符串大小比较时 JS引擎会将字符串转换成数值进行比较
// 转换规则 是将字符串转换成 Unicode编码 进行比较
// 平时使用的 UTF-8 就是Unicode编码
// 它是一组纯数字的字符编码
// 它里面包含了多国语言和文字 字母 数字 符号 中文 日文 …
// Unicode 范围 0 - 65535
// 常用范围
// 数字 0-9 Unicode 48-57
// 小写字母 a-z Unicode 97-122
// 大写字母 A-Z Unicode 65-90
09-相等比较
// 相等运算符( == ) 类似数学中的等号<br /> // 比较运算符的左右 各有一个值 若两个值相等 则返回 true 否则返回 false<br /> // 不相等运算符 ( != ) <br /> // 比较运算符的左右 各有一个值 若两个值不相等 则返回 true 否则返回 false<br /> // console.log(32 == 32);<br /> // console.log(17 != 15);<br /> // 特殊情况<br /> // 在进行不同数据类型 比较时 相等运算符 和 不相等运算符 会提前进行数据类型的转换<br /> // 转换原则<br /> // 1. 比较之前 如果有布尔类型的值 则转换成数字进行比较<br /> // 2. 比较之前 如果是字符串和数字的比较 则将字符串转换成数字 进行比较<br /> // console.log(2 == '2'); // 字符串2转成数字2 true<br /> // console.log(32 != '33'); // 字符串33转数字33 true<br /> // console.log(1 == true); // 布尔值true转成数字1 true<br /> // console.log(true == '1'); // 布尔值true转成数字1 字符串1转数字1 true<br /> // console.log(null == 0); // 没有类型转换 false<br /> // console.log(null == null); // true<br /> // console.log(undefined == undefined); // true<br /> // console.log('abc' == 'abc'); // true<br /> // console.log(undefined == null); // true 特殊情况<br /> // console.log(NaN == NaN); // false 特殊情况<br /> <br /> // console.log('NaN' == NaN); // 'NaN'转成NaN false<br /> // NaN和任何值比较相等 结果都是false<br /> // console.log(123.00 == 123); // true<br /> // console.log(020 == 20); // false<br /> // console.log(020); // 以0开头的数值 是 8进制数据<br /> // console.log(0xff); // 以0x开头的数值 是 16进制数据<br /> // ---------------------------------------------<br /> // 扩展知识<br /> // ECMAScript 提供了一个函数<br /> // Object.is()<br /> // 它用于判断两个值是否相等 并返回一个布尔值<br />相当于全等判断,不会进行数据类型的转化<br /> // console.log(Object.is(NaN,NaN));// true<br /> // console.log(NaN === NaN);// false<br /> // console.log(Object.is(3,3));// true<br /> // console.log(Object.is(3,'3')); // false<br /> // ----------------------------------------------<br /> // 全等运算符( === )<br /> // 不全等运算符 ( !== )<br /> // 全等运算符 和 不全等运算符 在比较数据相等或不相等之前 不进行数据类型转换<br /> // 如果两个数据的 类型不同 则默认为 不相等
10-逻辑非运算符
// 逻辑非运算符可以作用于 ECMAScript中的 任意数据类型
// 作用
// 1. 将被操作的数据转换成布尔类型
// 2. 将转换后的布尔数据进行求反
// 逻辑非作用于number类型
// console.log(!123); // false
// console.log(!12.3); // false
// console.log(!-12.3); // false
// console.log(!0); // true
// 结论: 任意非0的数字 转换成布尔类型 都为 true
// console.log(!Infinity); // false
// console.log(!NaN); // true
// Infinity 转布尔类型为 true
// NaN 转布尔类型为 false
// 逻辑非作用于boolean类型
// 直接进行求反
// console.log(!true);
// console.log(!false);
// 逻辑非作用于string类型
// console.log(!’你好’); // false
// console.log(!’abc’); // false
// console.log(!’123’); // false
// console.log(!’ ‘); // false
// console.log(!’’); // true
// 结论: 任意非空字符串转布尔类型为 true 空字符串转布尔类型为 false
// console.log(!null); // true
// console.log(!undefined); // true
// 结论: null,undefined,NaN 这三个特殊值转布尔类型为 false
// var o = new Object();
// console.log(!o); // false
// 结论: 任意对象转布尔类型结果都是true
// ——————————————————————————————————-
// ECMAScript 中 所有数据类型 都可以被转换成 boolean 类型
// 可以使用两个逻辑非运算符 快速将任意数据转换成 布尔类型
// console.log(!!5);
// console.log(!!’’);
// console.log(!!null);
// console.log(!!0.0);