Day5 JavaScript学习

67 阅读3分钟

一.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。