一.JavaScript数据类型
在ES6中一共有7种数据类型,相比较ES5,多了一种新的原始数据类型Symbol,表示独一无二的值。
数字类型number, 字符串string, 布尔bool, undefined, null, symbol, 对象object
ES6声明符
let,const:let可以声明变量,const可以声明常量(const声明的常量不能再更改),一般不用var
①number
1如何声明数字类型?
let num =10 声明整数
let mun =10.1 声明小数
let num =2e4 声明科学计数法
2数字的运算
let a= 10
let b =10
计算和 let sum =a+b
计算乘 let multiple = a*b
计算除 let divide=a/b
计算差 menus = a-b
特殊情况的做法
let value = a/0 -结果是无穷大Infinity
取余数 let mod = a%b
②字符串
1如何声明字符串
let str = '文字'(单引号和双引号都可以)
2字符串相加
let sunStr = str1 + str2
数字与字符串相加,会拼接起来,结果是字符串
3获取字符串中的子字符
str[0] str[a.lengh-1]
4模板字符串
let modStr = `12345${}`
在上述${}中可以添加变量
③bool
一般用作结果性质的东西
1 声明一个布尔值
let bool = new Boolean()
2 如何比较大小
"==="与"==",前者要比较数据类型
3 bool一般配合 if else 进行使用
undefined, null, 0, NaN, ""
(上述5个falsy值)
④object对象
(我们用对象来描述一个事物的特点)
1对象在内存空间中的表现形式:键值对
key:string value:对象,数组,数字……
2通过对象的键,找到对应的值
eg: people.name
第二种写法 people["name"]
如果你不知道对象里面有声明哪些键
let keys = Object.keys(people)
keys[0]就是name所对应的key
let name = people[keys[0]]
找到对象中存在所有的值
let values=Object.values(people)---返回所有值的数组
对象的原型
对象的[prototype]这个东西叫原型,由浏览器为我们提供的,有时候我们定义的属性
,key会和原型上的重复
hasOwnProperty用来判断属性是自有的,还是浏览器提供的
let isSelfProperty=people.hasOwnProperty("name")---true
let isSelfProperty=people.hasOwnProperty("toString")---false
二.JavaScript逻辑运算
1逻辑运算
&&且 两边都是true结果为true
||或 只要有一边为true结果为true
!非 取反
2三元表达式
a?b:c
a 是否为真?如果a为真,返回b,否则返回c
3++ 和--用来做自增和自减运算
4控制语句
if (以6<a<8为例),提醒js不支持下面这句话:if(6<a<8){}
if(6<a && a<8){} ----------方法一
if(a>6){ ----------方法二
//判断a大于6且小于8的时候
}else if(a>8){
//判断a大于8的时候
}else{
//判断小于6的时候
}
switch
switch (true) {
case (a > 6 && a < 8):
// 判断a大于6且小于8的时候
break;
case (a > 8):
// 判断a大于8的时候
break;
default:
// 判断小于6的时候
break;
}
三.循环
for(let i=0;i<50;i++){
console.log("报告,我是第${i}号学生")
}
//0-100之间的偶数
for(let i=0;i<100;i++){
if(i%2==0){
console.log(i)
}
}
注:
1使用相对路径进行文件的链接eg:./img/01.png
./代表在当前文件夹下查找文件
../代表在上一级目录文件夹查找
../../是向上找两级
2 可以在浏览器network标签下检查css文件和js文件是否被加载
3 内联样式的权重比class里要高
小结
前四天,学习hmtl中的少部分标签,css中的选择器,微元素,子代选择器如first-child,last-child,
文档流以及浮动会脱离文档流,flex弹性盒子及flex子元素的属性,
transform可以改变大小,旋转,位置;
transition写过渡效果,做动画,配合hover用;
@keyframes自动播放的动画;
position:relative,absolute,fixe。