一.js的引入
<!-- js的第一种引入方式 内嵌 (推荐) <script> // alert("js的第一种引入方式") // 浏览器弹出 // console.log("js的第一种引入方式") // 控制台打印 // document.write("js的第一种引入方式") // 页面显示 </script> --> <!-- js的第二种引入方式 导入 <script src="./ceshi.js"></script> --> <!-- js的第三种引入方式 事件 <div onclick="alert('hello world')"> 点我 </div> --> <!-- js的第四种引入方式 行内 (不推荐) <a href="javascript:alert('hello world2')">点我</a> -->
二. 注释变量
一.注释
1.单行注释
// 两个 '//' 代表单行注释
2.多行注释
/**/ 把内容写到 /*内容*/
二. 变量
var关键字指定当前变量的作用域,全局或者局部不写var可以,默认指定全局变量,没有局部的概念 var一定写上
var a = 100 var a=1,b=2,c=3 console.log(a) console.log(b,c)
变量的命名:
var $ = "特殊的变量名" console.log($) var $a = 123 console.log($a)
三. 数据类型
/* 数据类型:分为两大类 基本数据类型(原始类型) + 引用数据类型(复杂类型) 基本数据类型: Boolean , Number , String , null , undefined 引用数据类型: Object [Array , function , Date , RegExp] 本质上一切皆是对象 */
1.Boolean 布尔类型
var a = true var a = false console.log(a,typeof(a))
2.Number数字类型
// NaN Number类型中特殊的关键字 => not a number /* NaN注意点: 1.NaN 和 数字不能参与运算 2.除了NaN!=任何值为真,剩下的比较都是假的 */
var a = 0b10 var a = 0o10 var a = 0x10 var a = 100 var a = 3.15 var a = 3.15e3 // Infinity 无限大 var a = 3.9e99999999999999999999999999999999999999999999999999 // -Infinity 负无限大 var a = -3.9e99999999999999999999999999999999999999999999999999 console.log(a,typeof(a))
var a = 100 - "abc" var a = NaN + 1 var a = NaN == NaN var a = NaN != NaN var a = NaN != 1 console.log(a,typeof(a))
3.字符串类型
var a = 'hello js' console.log(a , typeof(a))单引号
var a = "hello \\n js" console.log(a , typeof(a))双引号
var name = "安妮宝贝" var str = `你在么${name} 你在干什么 想我了没有` console.log(str, typeof(str))反引号+解析变量语法
四.Object 对象类型
1.字典
var obj = {} // (2)js对象(字典) var obj = {"a":1,"b":2,"c":3} // (3)添加/修改对象 obj["a"] = 100 obj["d"] = 300 console.log(obj,typeof(obj)) console.log(obj instanceof Object)
2.数组
// (1)定义空对象(数组) var arr = [] // (2)js对象(数组) var arr = [1,2,3,4] // (3)添加/修改对象 arr[0] = 100 arr[4] = 3000 console.log(arr,typeof(arr)) console.log(arr[6]) console.log(arr instanceof Array , 333)
3.function函数
function func(){ console.log("func ... ") } func() console.log(func instanceof (Array,Number,Function) , 333444)
5.特别的关键字
// null 空(等价python中的None) var a = null; console.log(a ,typeof(a)); // undefined 未定义的 var b; var b = undefined ; console.log(b, typeof(b)) ;
五. 强制转换Number
1.强制转换整型:parseInt 数字开头即可转换,布尔型转换不了
var n = 1234 var n = "ppppp" // NaN var n = "9999" // 9999 var n = "99pppp" // 99 var n = "pp12" // NaN var n = "109.34" // 109 var n = "109.123asdfasd2" // 109 var n = "asdfasd2109.123" // NaN var n = [] // NaN var n = {} // NaN var n = true // NaN var res = parseInt(n) console.log(res,typeof(res))强转整型
2.强转浮点型
parseFloat 数字开头即可转换 , 布尔型转换不了,可保留小数 var n = 1234 // 1234 var n = "ppppp" // NaN var n = "9999" // 9999 var n = "99pppp" // 99 var n = "pp12" // NaN var n = "109.34" // 109.34 var n = "109.123asdfasd2" // 109.123 var n = "asdfasd2109.123" // NaN var n = [] // NaN var n = {} // NaN var n = true // NaN var res = parseFloat(n) console.log(res,typeof(res))强转浮点型
3.Number
可以转换布尔类型,也可以转换纯数字字符串 var n = false // 0 var n = true // 1 var n = "123" // 123 var n = "123.123" // 123.123 var n = "123sdf" // NaN var res = Number(n) console.log(res,typeof(res))类型转换
六.强制转换String
""" 单纯的在数据两边套引号,表达字符串 """
var str = 1000; var str = 3.434 var str = [] var str = {} var str = undefined var str = null var str = NaN var res = String(str) console.log(res , typeof(res))
七.强制转换Boolean
// 布尔值为假的7中情况 var a = 0 var a = 0.0 var a ='' var a = false var a = null var a = NaN var a = undefined /注意点 var a = [] # 真的 var a = {} # 真的 var res = Boolean(a) console.log(res , typeof(res))
八.自动类型转换
1.Bnuber + Boolean
var res = 10 + true var res = 19.76 + true var res = 10 + 3.4 console.log(res , typeof(res))
2.Number + Boolean + String
// 对于字符串的自动转换,+号的作用是拼接 var res = true + "122" var res = 100 + "199" var res = 33 + 44 + "10" var res = 33+ "11" + 88 console.log(res , typeof(res))
3.除了+号 其他的符号都可以参与运算
var res = 100 - "199" var res = 100 / false var res = 3 * "5" var res = 3 * "abc" // NaN console.log(res ,typeof(res))
九.js的运算
1. ++ -- 递增 递减
// num++ 先赋值在自增 var num = 10 var res = num++; console.log(res,num) // ++num 先自增在赋值 var num = 10 var res = ++num console.log(res,num) // num-- 先赋值在自减 var num = 10 var res = num-- console.log(res,num) // ++num 先自减在赋值 var num = 10 var res = --num console.log(res,num)递增 递减
2. === !== && or not
// (2) === !== (全等于,不全等于) 严格比较两样东西: (1) 比较值的大小 (2)比较值的类型 var res = "1" === 1 var res = "1" !== 1 console.log(res) // (3) && => and || => or ! => not var num = 10 if(3<num && num < 5){ console.log("ok1") } if(num < 3 || num >= 10){ console.log("ok2") } var num = 0 if(!num){ console.log("ok3") }===
3.三元(目)运算符
// var res = 表达式?真值:假值 var age = 18; var res = age >= 18?"成年人":"青少年" console.log(res,typeof(res))三元运算符
十.数据类型的创建时的注意事项
var x1 = new Object(); // 一个新的 Object 对象 var x2 = new String("abcd"); // 一个新的 String 对象 var x3 = new Number(); // 一个新的 Number 对象 var x4 = new Boolean(); // 一个新的 Boolean 对象 var x5 = new Array(); // 一个新的 Array 对象 var x6 = new RegExp(); // 一个新的 RegExp 对象 var x7 = new Function(); // 一个新的 Function 对象 var x8 = new Date(); // 一个新的 Date 对象 console.log(x1,typeof(x1)) console.log(x2,typeof(x2)) // object var ceshi = "abcd" // string // 比较值的大小 var res = ceshi == x2 // 严格比较 : 1.大小 2.类型 var res = ceshi === x2 console.log(res)
推荐使用后者,速度更快,不会出现逻辑错乱 (推荐)
var x1 = {}; // 新对象 var x2 = "abcd"; // 新的原始字符串 var x3 = 0; // 新的原始数值 var x4 = false; // 新的原始逻辑值 var x5 = []; // 新的数组对象 var x6 = /()/ // 新的正则表达式对象 var x7 = function(){}; // 新的函数对象 var ceshi = "abcd" var res = ceshi == x2 var res = ceshi === x2 console.log(res)
十一. 流程控制_分支结构
var wangyongjuan = "富婆";
1.单项分支
if(wangyongjuan == "富婆"){ console.log("意味着捐很多钱") }
2.双项分支
var wangyongjuan = '青春的小女生' if(wangyongjuan=='富婆'){ console.log('意味着娟很多钱') }else{ console.log('被娟很很多钱') }
3.多项分支
var age = 1 if(0 < age && age < 10){ console.log("儿童时代") }else if(10 <= age && age < 18){ console.log("青少年时代") }else if(18<=age && age < 40){ console.log("壮年时代") }else if(40 <= age && age < 90){ console.log("广场舞时代") }else{ console.log("入土时代") }
4.巢状分支
var youfang = true; var youche = true; if(youfang){ if(youche){ console.log("富婆,老子要嫁给你~") } }
十二. switch_case
// 获取星期几 var date = new Date() console.log(date) var res = date.getDay() console.log(res , typeof(res)) res = "1" // switch 属于严格类型比较: (1)大小 (2) 类型 switch(res){ case 1 : console.log("星期一") 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; default: console.log("星期日") break; }分支结构: switch ... case ...
十三 流程控制_循环结构
1. for 循环
/* 1 2 3 for(初始值;判断条件;自增自减的值){ code ... } 先执行1,2,满足条件进入到循环体中执行代码 执行一遍之后,回到3号进行自增自减 在回到2号判断条件是否满足 如果满足,执行 如果不满足,不执行,依次类推... 最后不满足 循环终止; */
for(var i = 1;i<=100;i++){ console.log(i) } // 跳过55 for(var i = 1;i<=100;i++){ if(i == 55){ continue; } console.log(i) }
2 while 循环
var i = 10 while(i <=20){ if(i == 18){ break; } console.log(i) i++ }
3.for(var i in Iterable){} 作用: 遍历数据
var arr = ["耿择时","家营和","孙翔宇","张银","王生父"] for(var i in arr){ console.log(i) console.log(arr[i]) } console.log("<===========3===========>") // obj : 默认获取是键 var obj = {"gzs":"耿择时","jyh":"家营和","sxy":"孙翔宇"} for(var i in obj){ console.log(i) console.log(obj[i]) }
4.for(var i of Iterable){} 作用: 遍历数据
// arr : 默认获取的是数组中的值 var arr = ["耿择时","家营和","孙翔宇","张银","王生父"] for(var i of arr){ console.log(i) } // var i of/in Iterable 都可以处理数组和字符串 for(var i of "abcdefg"){ console.log(i) }
十四.函数_参数
一 函数
1. 普通函数
//方式一 存在预加载机制,提前把函数加载到内存中,在运行代码 func1() function func1(){ console.log("我是func1") }
2. 匿名函数
//匿名函数没有预加载机制,必须先定义在调用 var func2 = function(){ console.log('我是func2') } func2()
3. 不推荐 (必须先定义在调用)
// var func3 = new Function("alert(1213);document.write(1234);console.log(55667)"); // console.log(func3,typeof(func3)); // func3()
4.箭头函数(ES6新增了解)
function ceshi(x,y){ return x+y } var res = ceshi(1,2) console.log(res) var ceshi = (x,y) => {return x+y;} console.log(ceshi(3,9))
5. 闭包函数
function outer(){ var father = '王健林' function inner(){ console.log(`你的爸爸${father}`) } return inner } var func = outer() func()
二 函数的参数
1.不会报错,区分与python
function func_new1(a,b,c){ console.log(a,b,c) } // func_new(1,2,3) func_new1() console.log(111)
2.不会报错,区分与python
function func_new2(){ } func_new2(1,2,3,4)
3.arguments 计算累加和
function func_new3(){ // js中arguments 相当于 python的*args收集参数 ,打包成可迭代对象 console.log(arguments) var total = 0 for(var i of arguments){ console.log(i) total += i } return total } var res = func_new3(1,2,3,5,6,7) console.log(res)
十五.函数_调用
function func(){ console.log("函数在运行1...") } // 1.正常调用 func(); // 2.函数立即执行 (普通函数) (function func(){ console.log("函数在运行2...") })(); // 3.函数立即执行 (匿名函数) (function(){ console.log("函数在运行3...") })(); // 4.函数立即执行 !function(){ console.log("函数在运行4...") }(); ~function(){ console.log("函数在运行5...") }(); +function(){ console.log("函数在运行6...") }(); -function(){ console.log("函数在运行7...") }();函数_调用