js 基础一
1.js引入
//第一种引入方式:内嵌 推荐使用
<script>
alert("第一种引入") //浏览器弹出
console.log("第一种引入") //控制台打印
document.write("第一种引入") //页面显示
</script>
//第一种引入方式:导入
<script src="./1.js"></script> //导入.js文件
//第三种引入方式:事件
<div onclick="alert('hello world')"> 点我 </div> //单击事件触发
//第三种引入方式:行内 不推荐
<a href="javascript:alert('hello world2')">点我</a>
2.注释/变量
1.注释分两种:
// 单行注释
/**/ 多行注释
2.变量
var关键字指定当前变量的作用域,全局或者局部
不写var也可以,默认指定全局变量,没有局部的概念
var a=1,b=2
3.变量命名 :与python一样(字母数字下划线...)
特殊的变量名:$
var $=1,$a=2
3.数据类型
<script >
/*
数据类型:分为两大类
基础数据类型(原始类型):Boolean,Number,String,null,undefined(未定义)
引用数据类型(复杂类型):Object(对象类型) [Array(数组),function,Date(时间),RegExp(正则)]
本质一切皆对象
*/
// 1.Boolean 布尔类型
var a=true
var a=false
console.log(a,typeof(a)) //false "boolean"
// 2.Number 数字类型
var a = 0b11 // 0o八进制,0x十六进制
var a = 3.3
console.log(a,typeof(a)) // 3.3 "number"
// 特殊的关键字: NaN => not a Number(不是一个数字)
/*
NaN 注意点:
1.NaN和数字不能参与运算
2.除了NaN != 任何值为真,其他都为假
*/
var a = 11 - "aa" // NaN "number"
var a = NaN == NaN // false "boolean"
var a = NaN != NaN // true "boolean"
var a = NaN + 11 // NaN "number"
console.log(a,typeof(a))
// 3.String 字符串类型
var a = 'hello' // 单引号
var a = "hello" // 双引号
var name = "贾英贺"
var a = `我叫${name}
我是好人` // 反引号(支持跨行,解析变量:${变量名})
console.log(a,typeof(a))
// 4.Object 对象类型
// (1).字典 Object
var obj = {} // 定义空字典对象 {} "object"
var obj = {"a":1,"b":2}
obj["a"] = 100 //修改对象内容
obj["c"] = 3 //添加对象内容
console.log(obj,typeof(obj))
console.log(obj instanceof Object) //判断是否为字典类型 instanceof
// (2).数组 Array
var arr = [] //定义空数组对象
var arr = [1,2,3]
arr[0] = 100 //修改内容
arr[4] = 11 //添加内容
arr.push(44) // 向尾部追加数据
arr.unshift(66) // 向头部添加数据
console.log(arr,typeof(arr)) //[100, 2, 3, empty, 11] "object"
console.log(arr[3]) // undefined 没定义
console.log(arr instanceof Array) //判断是否为数组类型
// (3).函数 function
function func(){
console.log("我是函数...")
}
func() // 我是函数...
console.log(func instanceof (Array,Number,Function)) // 判断函数属于他们中一个就为真
// 5.特别的关键字: null undefined
// null 空(等价于python中的None)
var a = null
console.log(a,typeof(a)) // null "object"
// undefined 为定义的
var b;
var b = undefined;
console.log(b,typeof(b)) //undefined "undefined"
</script>
判断数据类型
<script>
// 1. typeof
typeof 2 输出 number
typeof null 输出 object
typeof {} 输出 object
typeof [] 输出 object
typeof (function(){}) 输出 function
typeof undefined 输出 undefined
typeof '222' 输出 string
typeof true 输出 boolean
// 2. instanceof # 判断已知对象类型的方法.instanceof 后面一定要是对象类型
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
console.log(c instanceof Array) //true
console.log(d instanceof Date) //true
console.log(e instanceof Function) //true
console.log(f instanceof function ) //false
// 3. constructor # 根据对象的constructor判断，返回对创建此对象的数组函数的引用
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
//注意： constructor 在类继承时会出错
// 4. prototype # 所有数据类型均可判断：Object.prototype.toString.call
var gettype=Object.prototype.toString
gettype.call('aaaa') 输出 [object String]
gettype.call(2222) 输出 [object Number]
gettype.call(true) 输出 [object Boolean]
gettype.call(undefined) 输出 [object Undefined]
gettype.call(null) 输出 [object Null]
gettype.call({}) 输出 [object Object]
gettype.call([]) 输出 [object Array]
gettype.call(function(){}) 输出 [object Function]
// 5. js判断字典对象是否为空{}
-- JSON.stringify(obj_dic) === '{}'
// 6. js 判断数字是否为空[]
-- lis.length === 0
</script>
4.数据类型转换
<script>
// 一.强制转换
// 1.强转数字类型: Number(parseInt,parseFloat,Number)
// (1).强转整型:parseInt 数字开头即可转换
var a = "123" //123 "number"
var a = "123abc" //123 "number"
var a = "123.45" //123 "number"
var a = "abc123" //NaN "number"
var a = [] //NaN "number"
var a = {} //NaN "number"
var a = true //NaN "number" 布尔类型不能转换
var res = parseInt(a)
console.log(res,typeof(res))
// (2).强转浮点型: parseFloat 数字开头即可转换 可以保留小数 其他与(1)一样
var a = "123" //123 "number"
var a = "123.45" //123.45 "number"
var res = parseFloat(a)
console.log(res,typeof(res))
// (3).Number 类型强转 可以转换布尔类型,也可以转换纯数字的字符串
var a = false //0 "number"
var a = true //1 "number"
var a = "123" //123 "number"
var a = "123.45" //123.45 "number"
var a = "123abc" //NaN "number"
var res = Number(a)
console.log(res,typeof(res))
// 2.强转字符串类型: String 单纯的在数据两边套上引号,表达字符串类型
var a = 123 //123 string
var a = [] // string
var a = null //null string
var a = undefined //undefined string
var a = NaN //NaN string
var res = String(a)
console.log(res,typeof(res))
// 3.强转布尔类型: Boolean 有7中情况为假
var a = 0 //false "boolean"
var a = 0.0 //false "boolean"
var a = "" //false "boolean" 空字符串
var a = false //false "boolean"
var a = null //false "boolean"
var a = undefined //false "boolean"
var a = NaN //false "boolean"
// 注意点 空数组,空字典是真值
var a = [] //true "boolean"
var a = {} //true "boolean"
var res = Boolean(a)
console.log(res,typeof(res))
// 二.自动转换
// 1.Number + Boolean 布尔向数字转换
var res = 123 + true //124 "number"
var res = 123.45 - true //122.45 "number"
console.log(res,typeof(res))
// 2.Number + Boolean + String
// (1).对于字符串的自动转换,+号的作用是拼接
var res = true + "123" //true123 string
var res = 123 + "456" //123456 string
var res = 11 + 22 + "99" //3399 string 前两计算后,与后一个拼接
console.log(res,typeof(res))
// (2).除了+号,其他符号都可以参与运算
var res = 100 - "99" // 1 "number"
var res = 3 * "5" // 15 "number"
var res = 1/false //Infinity "number" 无限大
var res = 3 * "abc" //NaN "number"
console.log(res,typeof(res))
</script>
5.与python不一样的运算符
<script>
// 1.++ -- 递增 递减
var num = 10
var res = num++
console.log(res,num) //10 11 先赋值再自增
var num = 10
var res = ++num
console.log(res,num) //11 11 先自增再赋值
// 2. === !== 全等于 不全等于 严格比较两个数据: 1.比较值的大小 2.比较值的类型
var res = "1" === 1 //false
var res = "1" !== 1 //true
console.log(res)
// 3.逻辑与 && =>and ,逻辑或 || => or, 逻辑非 ! =>not
var num = 10
if(num > 8 && num < 16){
console.log("青少年")
}
// 4.三元(目)运算符 ? : 表达式?真值:假值
var num = 5
var res = num > 0 ? "好人":"坏人"
console.log(res,typeof(res)) //好人 string
</script>
6.循环控制
<script>
// 一.流程控制 : 分支结构
// 1.单项分支:
var num = 22
if (num > 18){
console.log("成年了")
}
// 2.双项分支:
var age = 25
if (age < 18){
console.log("未成年")
}else{
console.log("成年了")
}
// 3.多项分支:
var age = 10
if (age > 0 && age < 8){
console.log("儿童时代")
}else if (age >= 8 && age < 18){
console.log("青年时代")
}else if (age >= 18 && age < 35){
console.log("壮年时代")
}else{
console.log("退出历史舞台")
}
// 4.巢状分支:if语句的嵌套
var fangzi = true
var chezi = true
if (fangzi){
if (chezi){
console.log("你可以找对象了~")
}
}
// 二.流程控制: switch ..case.. switch属于严格类型比较:大小和类型
var date = new Date()
console.log(date) //Tue Jan 19 2021 21:35:41 GMT+0800 (中国标准时间)
var week = date.getDay() //获取星期
switch(week){
case 1:
console.log("今天是星期一")
break
case 2:
console.log("今天是星期二")
break
case 3:
console.log("今天是星期三")
break
default:
console.log("输入错误~")
break
}
// 三.流程控制 : 循环结构
// 1.for 循环
// for (初始值;判断条件;自增自减的值){代码块}
for (var i = 1;i < 10 ;i++){
if (i == 5){ //跳过5
continue
}
console.log(i)
}
// 2.while 循环
var i = 1
while(i<10){
console.log(i)
i++
}
// 3.for(var i in Iterable){代码块} 作用:遍历数据 获取对象索引或键值
var arr = ["aa","bb","cc","dd"] //创建数组
for (var i in arr){
console.log(i) //数组获取的是索引
}
var obj = {"jyh":"贾英贺","gtq":"光头强"} //创建字典
for (var i in obj){
console.log(i) //字典获取的是键的值
}
// 4.for(var i of Iterable){代码块} 作用:变量数据 获取对象的值,但是无法对字典进行遍历
var arr = ["aa","bb","cc","dd"] //创建数组
for (var i of arr){
console.log(i) //数组获取的是值
}
for(var i of "abcde"){ //两个方法都可以遍历字符串
console.log(i)
}
</script>
7.函数
<script>
// 一.函数
// 1.普通函数 存在预加载机制 可先调用后定义
func1()
function func1(){
console.log("hello world")
}
// 2.匿名函数 没有预加载机制,必须先定义后调用
var func2 = function(){
console.log("我是匿名函数~")
}
func2()
// 3.箭头函数
var func3 = () =>{console.log("我是箭头")}
func3()
var func33 = (x,y) =>{console.log(x + y)}
func33(1,2)
// 4.闭包函数 内函数使用外函数变量,外函数把内函数返回出来
function outer(){ //定义函数
var name = "舒畅"
function inner(){
console.log(`我喜欢的明星是${name}`)
}
return inner
}
var func4 = outer() //调用函数
func4()
// 二.函数的调用
// 1.正常调用
function func(){
console.log("我是函数1~")
}
func();
// 2.函数立即执行(普通函数) 函数加括号再()执行
(function func(){
console.log("我是函数2~")
})();
// 3.函数立即执行(匿名函数)
// 方法一:
(function(){
console.log("我是函数3~")
})();
// 方法二:
!function(){
console.log("函数在运行4...")
}();
// 方法三:
~function(){
console.log("函数在运行5...")
}();
// 方法四:
+function(){
console.log("函数在运行6...")
}();
// 方法五:
-function(){
console.log("函数在运行7...")
}();
// 三.函数的参数 js中实参与形参不匹配不会报错,区别于python
/*
1.形参与实参
形参: 1.普通(位置)形参 2.默认形参
实参: 普通(位置)实参
*/
function func11(a,b = 10){
console.log(a,b)
}
func11(b=11,c=22) //11 22 实参没有关键字实参,只有普通实参,按位置往函数传参
// 2.arguments 计算累加和
function func22(){
//arguments相对于python中的*args收集参数,打包成可迭代对象
var total = 0
for(var i of arguments){
total += i
}
return total
}
var res = func22(1,2,3,4) //调用函数
console.log(res) //10
</script>