<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
<script> alert('沙漠骆驼'); </script>
<script src="my.js"></script>
// 输入框 prompt('请输入您的年龄');
// 输出展示给用户 alert('计算的结果是'); // 控制台输出 给程序员测试用的 console.log('我是程序员能看到的');
// 1 只声明不赋值 var sex; console.log(sex); // undefined // 2 不声明 直接赋值使用 qq = 110; console.log(qq); // 不报错,但不提倡...
var x = 10; // x 是数字型 x = 'pink'; // x 变成字符串型
// 1)Number 数值型 // 1. 八进制0~7 数字前面加0表示八进制 var num1 = 012; console.log(num1); // 10 // 2. 十六进制0~9 a~f 数字的前面加0x表示十六进制 var num2 = 0xa; console.log(num2); // 10 // 3. 数字型的最大值 console.log(Number.MAX_VALUE); // 4. 数字型的最小值 console.log(Number.MIN_VALUE); // 5. 无穷大 console.log(Number.MAX_VALUE * 2); // Infinity 超过最大值 // 6. 无穷小 console.log(-Number.MAX_VALUE * 2); // -Infinity 超过最小值 // 7. 非数字 console.log('啦啦啦' - 100); // NaN // 8. 判断非数字 isNaN() console.log(isNaN(12)); // false console.log(isNaN('啦啦啦')); // true // 2)Boolean 布尔型 var flag1 = true; var flag2 = false; console.log(flag1 + 1); //=2 true当1来看 console.log(flag2 + 1); //=1 false当0来看 // 3)String 字符串 // 1. 转义字符实现换行 var str1 = '我是一个\n程序员'; console.log(str1); // 2. 字符串长度 var str2 = 'my name is andy'; console.log(str2.length); // 15 // 3. 字符串拼接(只要有字符串,最终的结果就是字符串类型) console.log(12 + 12); // 24 console.log('12' + 12); // '1212' // 4)Undefined 声明了变量没有给值 var str3; console.log(str3); // undefined var variable = undefined; console.log(variable + 'pink'); // undefinedpink console.log(variable + 1); // NaN(Not a Number) 非数字 // 5)Null 声明了变量为空值 var space = null; console.log(space + 'pink'); // nullpink console.log(space + 1); // 1
// 获取变量的数据类型 var num = 10; console.log(typeof num); // number var str = 'pink'; console.log(typeof str); // string var flag = true; console.log(typeof flag); // boolean var vari = undefined; console.log(typeof vari); // undefined var timer = null; console.log(typeof timer); // object // prompt 取过来的值是字符串型的 var age = prompt('请输入您的年龄'); console.log(age); console.log(typeof age); //string // +prompt 取过来的值是数值型的 var num1 = +prompt('请输入第一个数据:');
// 1)转换为字符型 // 1. 变量.toString() var num = 10; var str = num.toString(); console.log(typeof str); // 2. 强制转换 String(变量) console.log(String(num)); // 3. + 拼接字符串 隐式转换 console.log(num + ''); // 2)转换为数字型 // 1. parseInt(变量) 是取整的 console.log(parseInt('3.14')); // 3 取整 console.log(parseInt('120px')); // 120 带单位的会去掉单位 console.log(parseInt('rem120px')); // NaN 无法转换为数字 // 2. parseFloat(变量) 是小数浮点数 console.log(parseFloat('3.14')); // 3.14 console.log(parseFloat('120px')); // 120 带单位的会去掉单位 console.log(parseFloat('rem120px')); // NaN 无法转换为数字 // 3. 强制 Number(变量) var str = '123'; console.log(Number(str)); // 123 console.log(Number('12')); // 12 // 4. 算数运算 - * / 隐式转换 加号不行! console.log('12' - 0); // 12 console.log('123' - '120'); // 3 console.log('123' * 1); // 123 // 3)转换为布尔型 // 强制 Boolean(变量) 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('-----------其余的都为TRUE------------'); console.log(Boolean('123')); // true console.log(Boolean('你好吗')); // true
console.log(1 + 1); // 2 console.log(1 - 1); // 0 console.log(1 * 1); // 1 console.log(1 / 1); // 1 console.log(5 % 3); // 2 console.log(3 % 5); // 3 // 小数转换成二进制进行计算会产生误差 console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.07 * 100); // 7.000000000000001 // 所以我们不能直接拿着浮点数来进行相比较是否相等 var num = 0.1 + 0.2; console.log(num == 0.3); // false // ++ --前置(先加1 后返回值) var p = 10; console.log(++p + 10); // 21 p=11 // 后置++ --(先返回值 后加1) var age = 10; console.log(age++ + 10); // 20 age=11
// > < >= <= console.log(3 >= 5); // false console.log(2 <= 4); // true // == != 值等于 比较值 console.log(18 == '18'); // true // === !=== 全等于 比较值和类型 console.log(18 === '18'); // false
// 1. 逻辑与 && 全真才真 console.log(3 > 5 && 3 > 2); // false console.log(3 < 5 && 3 > 2); // true // 2. 逻辑或 || 全假才假 console.log(3 > 5 || 3 > 2); // true console.log(3 > 5 || 3 < 2); // false // 3. 逻辑非 !取反 console.log(!true); // false // 逻辑与&& 短路运算 // 如果表达式1为真,则返回表达式2 console.log(123 && 456); // 456 // 如果表达式1为假,则返回表达式1 console.log(0 && 456); // 0 // 逻辑或|| 短路运算 // 如果表达式1为真,则返回表达式1 console.log(123 || 456 || 456 + 123); // 123 // 如果表达式1为假,则返回表达式2 console.log(0 || 456 || 456 + 123); // 456 // 逻辑中断会影响程序运行结果 var num = 0; console.log(123 || num++); // 123 中断了 console.log(num); // 0
var num = 10; num += 5; console.log(num); // 15 var age = 2; age *= 3; console.log(age); // 6
/* 1.括号 () 2.一元运算符 ++ -- ! 3.算数运算符 先* / % 后+ - 4.关系运算符 > >= < <= 5.相等运算符 == != === !== 6.逻辑运算符 先&& 后|| 7.赋值运算符 = 8.逗号运算符 , */ console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true var num = 10; console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); // true var a = 3 > 5 && 2 < 7 && 3 == 4; console.log(a); // false var b = 3 <= 4 || 3 > 1 || 3 != 2; console.log(b); // true var c = 2 === "2"; console.log(c); // false var d = !c || b && a; console.log(d); // true
1)if 分支语句
// if... var age = 20; if (age >= 18) { console.log('你可以进网吧'); } // if... else... var year = 2021; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { console.log('是闰年'); } else { console.log('是平年'); } //if.. else if.. else... var score = 78; if (score >= 90) { console.log('A'); } else if (score >= 80) { console.log('B'); } else { console.log('C'); }
2)switch 分支语句
var num = 1; // 必须是值和数据类型都一致才可以!! switch (num) { case 1: console.log('这是1'); break; case 2: console.log('这是2'); break; default: console.log('没有匹配结果'); }
3)三元表达式
// 条件表达式? (True)表达式1 : (False)表达式2 var num = 10; var result = num > 5 ? '是的' : '不是的'; console.log(result);
1)for 循环
/* for (初始化变量; 条件表达式; 操作表达式) { 循环体; } */ // 打印九九乘法表(正三角形) var str3 = ''; for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { str3 += j + '*' + i + '=' + (i * j) + '\t'; } str3 += '\n'; } console.log(str3);
2)while 循环
当条件比较复杂的时候用while,其他情况尽量都用for。
/* while (条件表达式) { 循环体; 操作表达式; } */ // 计算 1-100 所有整数的和 var sum = 0; var j = 1; while (j <= 100) { sum += j; j++; } console.log(sum);
3)do while 循环
/* do { // 循环体 } while (条件表达式) */ // 循环体至少能执行一次 var i = 1; do { console.log('how are you?'); i++; } while (i > 100)
4)break和continue
// break 退出整个循环 for (var i = 1; i <= 5; i++) { if (i == 3) { // 退出整个for循环 break; } console.log('我正在吃第' + i + '个包子'); } // continue 退出本次循环 for (var i = 1; i <= 5; i++) { if (i == 3) { // 退出i=3这一轮的循环 continue; } console.log('我正在吃第' + i + '个包子'); }
数组(Array) 就是一组数据的集合,存储在单个变量下。
// 1. 利用new var arr = new Array(); // 2. 利用数组字面量[] var arr = []; var arr1 = [1, 2, '啦啦啦', true];
console.log(arr1); console.log(arr1[0]); // 1 console.log(arr1[4]); // undefined
var arr2 = ['red', 'green', 'blue']; for (var i = 0; i < 3; i++) { console.log(arr2[i]); }
for (var i = 0; i < arr2.length; i++) { console.log(arr2[i]); }
// 1)通过修改length长度 var arr2 = ['red', 'green', 'blue']; arr2.length = 5; console.log(arr[3]); // undefined console.log(arr[4]); // undefined // 2)可以直接追加数组元素 var arr2 = ['red', 'green', 'blue']; arr2[3] = 'pink'; arr2[4] = 'hotpink'; console.log(arr2);
// 翻转数组 var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink']; var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { // newArr.length从0开始,随着元素增加变大 newArr[newArr.length] = arr[i] } console.log(newArr);
封装了一段可以被重复执行调用的代码块 ,目的是让大量代码重复使用。
/* function 函数名() { 函数体 } */ sayHi(); // 1.函数声明提升:可以在函数前面调用 function sayHi() { console.log('hi~~'); } sayHi(); // 2.函数表达式:没有函数提升的特性了 const fun = function (n, m) { return n + m; } fun(1, 2); // 3.设置函数默认值 function fun1(a = 1, b = 2) { return a + b; } console.log(fun1()); // 3
function getSum1(num1, num2) { console.log(num1 + num2); } getSum1(1, 2); // 多的不要了 getSum1(1, 2, 3); // 少的为undefined getSum1(1); // NaN
// 1. return 会终止函数 function getSum(num1, num2) { return num1 + num2; // return 后面的代码不会被执行 alert('我是不会被执行的哦!') } console.log(getSum(1, 2)); // 2. return 只能返回一个值 function fn(num1, num2) { return num1, num2; } console.log(fn(1, 2)); // 2 // 3. 我们求任意两个数的 加减乘数结果 function getResult(num1, num2) { // 返回的是一个数组 return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]; } var re = getResult(1, 2); console.log(re); // 4. 如果函数没有return 则返回undefined function fun2() { } console.log(fun2()); // undefined
// 存储形式为“伪数组”的形式,没有真数组的一些方法,pop()push()等... function fn() { for (var i = 0; i < arguments.length; i++) { // [1,2,3] console.log(arguments[i]); } } fn(1, 2, 3);
function fn1() { console.log(111); fn2(); console.log('fn1'); } function fn2() { console.log(222); console.log('fn2'); } fn1(); // 111 222 fn2 fn1
// var 变量名 = function() {}; var fun = function (aru) { console.log('我是函数表达式'); console.log(aru); } fun('啦啦啦');
(function () { let a = 10; let b = 20; console.log(a + b); })()
// ES6之前:分为全局作用域、局部作用域 // 1. 全局作用域:整个script标签 或一个单独的js文件 var num1 = 10; var num1 = 30; console.log(num1); // 2.局部作用域/函数作用域:只在函数内部起效果和作用 function fn() { // 局部作用域 var num2 = 20; console.log(num2); } fn(); // 3. ES6新增的块级作用域 if (3 < 5) { let num3 = 10; } console.log(num3); // 会报错 外面不能调用num3
// 1. 全局变量: 在全局作用域下的变量 // 注意!如果在函数内部,没有声明直接赋值的变量也属于全局变量! var num = 10; console.log(num); function fn() { console.log(num); // num为全局变量 } fn(); // 2. 局部变量:在函数内部的变量 // 注意!函数的形参也可以看做是局部变量! function fun(aru) { // aru为局部变量 var num1 = 10; // num1为局部变量 num2 = 20; // num2为全局变量! } fun(); // 从执行效率看: // 1) 全局变量 只有浏览器关闭的时候才会销毁,比较占内存资源 // 2) 局部变量 当我们程序执行完毕就会销毁,比较节约内存资源
var num = 10; function fun1() { // 外部函数 var num = 20; function fun2() { // 内部函数 console.log(num); } fun2();// 20 就近原则 } fun1();
JS引擎运行分为两步:预解析、代码执行。
1)预解析:JS引擎把所有的var、function声明提升到当前作用域的最前面。
2)代码执行:按照代码书写的顺序从上往下执行。
预解析分为:变量预解析(变量提升)、函数预解析(函数提升)
1)变量提升:把所有的“变量声明”提升到当前的作用域最前面,不提升赋值操作。
2)函数提升:把所有的“函数声明 ”提升到当前作用域的最前面,不调用函数。
console.log(num); // undefined var num = 10; // 相当于执行了以下代码 // var num; // console.log(num); // num = 10;
fn(); // 可 function fn() { console.log(11); } fun(); // 报错 var fun = function () { console.log(22); } // 相当于执行了以下代码 // var fun; // fun(); // fun = function() { // console.log(22); // }