Javascript笔记(自用）

TimYang
125 阅读6分钟

JavaScript

1.初识JavaScript

1.1变量

变量就是个容器用来装东西的盒子

1.2变量的使用

var age; //1.声明一个age变量
var age = 10 //2.给age赋值为10
console.log(age)//3.输出结果

案例如下：

var myname = "卡卡西";
var address = "火影村";
var age = 30;
​
var email = 110@11.com
var gz = 2000

案例2:

var myname = prompt('请输入您的名字')
alert(myname)

1.3变量语法扩展

var myname = "pink老师";
myname = "迪丽热巴"

1.3.1 声明多个变量

var age = 18,
    address = "abc",
    gz = 18;

1.3.2声明变量的特殊情况

var sex;
console.log(sex) //undefined 
console.log(tel) //referenceError 报错
qq = 110 //不声明直接赋值使用

1.4变量案例3:交换变量

var temp;
var apple1 = "青苹果";
var apple2 = "红苹果";
temp = apple1;
apple1 = apple2
apple2 = temp;

1.5变量小结

  • 变量先声明再赋值 ， 声明变量本质是去内存申请空间。
  • 声明变量并复制称之为变量的初始化
  • 驼峰命名法
  • 区分变量不合法

2.数据类型

数据类型就是把不同数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。

var num = 10 
//js 变量数据类型是根据 = 右边变量值的数据类型进行判断,变量就确定了数据类型
//js 是动态语言,变量的数据类型是可以变化的。
var x = 10// x 是数字类型
x = "鸣人"//x 是字符串类型

2.1数据类型的分类

JS分为两种类别数据类型:

  • 简单数据类型(Number,String,Boolean,Undefined,Null)
  • 复杂数据类型(Object)
简单数据类型说明默认值
Number数字型,包含整形值和浮点型值,如21，0.210
Boolean布尔值类型,如true,false，等价于 1 和 0false
String字符串类型,如"张三" 注意js里面,字符串都带引号""
Undefinedvar a; 声明变量但没有给值 a = undefinedundefined
Nullvar a = null; 声明了变量a 为 空值Null

2.1.1isNaN()

这个方法用来判断非数字 并且返回一个值,如果是数字返回的是false，如果不是数字返回为true

console.log(isNaN(12)) //false
console.log(isNaN("abc")) //true

2.2字符串型

var str = 'coder "a" why';
var str1 = "coder 'a' why";

注意 外单内双，外双内单

//字符串转译字符
var a = "a \n c"

2.2.1:字符串案例

alert(' abc \n defg "你好" ')

2.2.2:获取字符串长度

var str = 'my name is andy'
console.log(str.length)

2.2.3:字符串的拼接

//字符串拼接都会变成一个字符串
console.log("沙漠" + 18) //沙漠18
var age = 18;
console.log('卡卡西' + age + '岁')

2.2.4:显示年龄案例:

var age = prompt("请输入您的年龄");
var str = '您今年已经' + age + '岁'
alert(str)

2.3:布尔类型

var flag = true; 
var flag1 = false;
//注意 true 如果用在相加情况下为 1 反之为 0

2.4:undefined为定义

var str;
console.log(str);

//如果undefined和数字相加会发生什么
var variable = undefined
console.log(variable + 1) //NaN
​

2.5:Null

var space = null;
console.log(space + '猫')
console.log(space + 1) // 1 null与数字相加会等于 1 因为null就是空

2.6:检测数据类型

var num = 10
console.log(typeof num) //number  其他类型以此类推,但是typeof 只能检测普通数据类型,复杂类型是检查不出来的
var timer = null;
console.log(typeof timer) //object

3.数据类型转换

3.1:number => string

方式说明案例
toString()转换成字符串var num = 1；alert(num.toString())
String()强制转换转换成字符串var num = 1； alert(String(num))
加号拼接字符串和字符串拼接的结果都是字符串var num = 1； alert(num + "我是字符串")
//1. totring() 方法
var num = 10
var str = num.toString()
//2.String() 方法
console.log(String(num))
//3.拼接隐式转换
console.log(num + '')

3.2:string=>number

方式说明案例
parseInt(string)函数将string类型转成整数数值型parseInt("78")
parseFloat(string)函数将string类型转成浮点数值型parseFloat("78.21")
Number()强制转换将string类型转成数值型NUmber("12")
js隐式转换利用算术运算隐式转换转为数值型'12' - 0
1.var age = prompt("请输入年龄")//3.14 //120px
  console.log(parseInt(age)) // 3 120去掉单位
2.var age = prompt("请输入年龄")//3.14 //120px
  console.log(parseFloat(age)) // 3.14 120去掉单位
3.var age = prompt("请输入年龄")
  console.log(Number(age))
4.console.log('12' - 0 ) // 12

注意 如果输入数字之前是字母都识别不出来直接输出NaN

3.3:数据类型转换案例1：

var birth = prompt("请输入出生年份");
var age = 2018 - birth

3.4:数据类型转换案例2：

var num1 = prompt("请输入第一个值")
var num2 = prompt("请输入第二个值")
var result = parseFloat(num1) + parseFloat(num2)
alert(result)

3.5:转换为布尔型

方式说明案例
Boolean()函数其他类型转换成布尔值Boolean("true")
  • 代表空,否定的值会转换为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.运算符导读

运算符(operator) 也被称为操作符,适用于实现赋值，比较和执行算数运算等功能的符号

4.1递增运算符

var age = 10;
++age //类似于 age = age + 1
console.log(age) //11
​
var p = 10
console.log(++p + 10) //21
​
var num = 10
num++
console.log(num++ + 10)//20
//先返回原值,后自加1

4.1.1递增运算符练习

var a = 10
++a  //11 
var b = ++a + 2 //a = 12 
console.log(b) //14
​
var c = 10;
c++ // c++ 11 c = 11
var d = c++ + 2 //11 + 2 = 13
console.log(d) // 13
​
var e = 10
var f = e++ + ++e
console.log(f) 10 + 12 = 21

4.1.2递增运算小结

  • 前置递增和后置递增运算符可以简化代码编写
  • 单独使用时,运算结果相同
  • 与其他代码联用可能执行结果不同
  • 后置：先原值运算,后自加
  • 前置：先自加，后运算

4.2比较运算符

console.log(18 == 18)
console.log(18 == "18") //true 默认转换数据类型只有双等号

4.3逻辑运算符

console.log(3 > 5 && 3 > 2)
//逻辑与 两侧为true结果为true 只有一个true返回为false
console.log(3 > 5 || 3 > 2)
//逻辑或 ｜｜ or 两侧都为false 结果为false ，一侧是true 返回就是true
console.log(!true)
//逻辑非 反过来的结果

4.3.1逻辑运算符练习

var num = 7
var str = "我爱你～dja"
console.log(num > 5 && str.length >= num) //true
console.log(num < 5 && str.length >= num) //false
console.log(!(num < 10))//false
console.log(!(num < 10 || str.length == num)) //false

4.3.2短路运算

//逻辑与短路运算 返回结果为真 返回第二个 反之
console.log( 123 && 456) //456
console.log(0 && 456) //0
console.log(0 && 1 + 2 & 456 * 7632 ) //0
​
//逻辑或短路运算 返回真就是返回第一个
console.log(123 || 456) //123
console.log(123 || 456 || 456 + 123)
console.log(0 || 123)

4.4 赋值运算符

  • =

    var num = 10

  • +=

    var num  = 10
num += 2

  • -=

    var num = 10
num -= 2

  • *=

    var num = 10
num *= 2

4.5 运算符优先级

avatar
文章
阅读
粉丝