web学习笔记4 - js基础2

js基础2 自学总结
封面画师：唏嘘的星辰 p站ID：13312138

JS拼接

拼接的四种方法
1. 拼接1：通过 + 进行拼接
2. 拼接2： `${a}`
3. 拼接之后结果都是字符串和基本数据类型进行拼接

var a = 10
// 1 数字和字符串进行拼接 +
var s1 = "我的年龄是"+ a + "岁"
console.log(s1)

// 2 es6字符串模板的写法${a} 给a标量占位置的
var s2 = `我的年龄是${a}岁，他的年龄也是${a}岁`
console.log(s2)


// 把数字转成字符串的功能 可以是拼接进行转换

// 把字符串转化成数字 字符串必须数字字符串
var b = "10"
// 1 直接*1, 先把b字符串转成数字，再乘以1，这种转换称为隐式转换
console.log(b*1) 


// 2 通过一些api进行转换属于强制转换（显式转换） parseInt() 转换成整型的， parseFloat() 转成浮点数
var c = parseInt(b)
console.log(c)


var a1 = "10"
var a2 = 2
var a3 = (a1*1+a2) / a2 == "6"
console.log(a3)

var img1 = "./pro-logo.jpg"
var img2 = "./pro-logo2.jpg"

var p1 = "钢筋结构1"
var p2 = "钢筋结构2"

var htmlStr = `
        <div>
            <img src=${img1} alt='' >
            <p>${p1}</p>
        </div>
        <div>
            <img src=${img2} alt='' >
            <p>${p2}</p>
        </div>
`
document.write(htmlStr)

原理：把之前的div标签写成一个字符串，通过for循环可以拼接多个div，把多个div直接渲染在body里面
var s = ""
for(var i = 0;i<3;i++){
   s+= <div></div>
}
console.log(s)
// 输出：<div></div><div></div><div></div>

显式转换和隐式转换

显式转化 通过一些api进行转换 parseInt() parseFloat()

parseInt() 把目标转化为整数型
parseFloat() 把目标转化为浮点型（小数型）
隐式转换 “10” * 1 = 10 “10”/2

数组

普通数组

数组 用来存储数据的，每一个元素都是有索引值，通过该元素的索引值进行访问的，索引值从0开始，数组的个数从1开始。
例如：

var arr1 = ["蕾姆","拉姆","塞尔达","林克","米法"]
arr1[0] 就是 “蕾姆” arr1[4] 就是 “米法”

数组遍历

//  数组遍历
    // array.length 数组的长度
     for (var i = 0; i < arr1.length; i++) {
           var e = arr1[i];
           console.log(e)
     }

二维数组

var arr = [[1,2,3],["安培死了","百度已经更新安培的年龄消息"]] // 二维数组
var a1 = arr[1]
// a1[0] 就是 "安倍死了"
// arr[0][0] 就是 1
// arr [一维数组] [二维数组] [三维数组] 以此类推
for(var i = 0;i<arr.length;i++){ var e = arr[i] }

对象

对象 可以表示多个数据，多个数据是属于一个整体，
对象 包含属性和方法
属性值可以是任意类型

var obj = {
    name: "蕾姆",
    age: 18,
    cp:{
        name: "莱月卯"
    },
    sister:{
        name: "拉姆",
        age: 18
    },
    friend:[
        {
            name: '艾米利亚',
            age: 20
        },
        {
            name: '路人甲A',
            age: 18
        },
        {
            name: '路人乙B',
            age: 16
        }
    ]
}
console.log(obj.name) //对象如何访问属性
console.log(obj.son.name) 
console.log(obj.guinv[1].name)

//  获取所有名字
for(var i = 0;i<obj.guinv.length;i++){
console.log(obj.guinv[i].name)
}

数据分析

数据分析，遇见 {} 代表对象；遇见 [] 代表数组;
d1.innerHTML = "<h1>M</h1>" 在d1插入html字符串

var data = [
    {
        id:1, //商品id
        // 图片url
        imgUrl:"./img/pro-logo.jpg",
        info:"厂家直销，不要999，只要99元",
        company:"河南佰辰机械设备有限公司",
        tips:["诚","钻石版"],
        price:60000
    },
    {
        id:2, //商品id
        // 图片url
        imgUrl:"./img/pro-logo2.jpg",
        info:"厂家直销，不要999，只要99元",
        company:"河南佰辰机械设备有限公司",
        tips:["诚","钻石版"],
        price:110000
    },
    {
        id:3, //商品id
        // 图片url
        imgUrl:"./img/pro-logo.jpg",
        info:"厂家直销，不要999，只要99元",
        company:"河南佰辰机械设备有限公司",
        tips:["诚","钻石版"],
        price:60000
    }
]
var s = ""
for(var i = 0;i<data.length;i++){  
    s+= `<div class="c1">
        <img src=${data[i].imgUrl} alt="">
        <p>${data[i].info}</p>
        <p>${data[i].company}</p>
        <p>${data[i].price}</p>
        </div>`

}   

// innerHTML 给元素添加一个html字符串
    d1.innerHTML = s
// document.write(s)