JavaScript 高级使用对象内置构造函数模板字符串拼接

最新推荐文章于 2024-03-17 09:15:00 发布

巜巜

最新推荐文章于 2024-03-17 09:15:00 发布

阅读量340

点赞数

分类专栏： JavaScript 高级开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_49739911/article/details/127226444

版权

JavaScript 高级开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，万物皆对象，如字符串、数值、数组、函数等

属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示

自定义对象：自己创建的对象

对象字面量

{属性名：属性值，属性名：属性值，，，，}

var commodity = {
        id: 1,
        title: "商品一",
        price: 4999.0,
        launchTime: 2022 / 10 / 01,
        count: 500,
}

内置构造函数

// 内置构造函数
var emp = new Object()
emp.eid=1,
emp.ename='李四',
emp['salary']=50000.00
console.log(emp);

访问属性

 console.log(commodity.count) //推荐
 console.log(commodity['count'])  //特殊属性

遍历属性

格式

for（var i in person）{

获取属性值：person[i]

}

// 遍历属性
for (var i in person) {
    console.log(i,person[i])
}

检测属性

格式：

方案一对象.属性名!==undefined true->存在 false->不存在
方案二（推荐）对象.hasOwnProperty（‘属性名’） true->存在 false->不存在
方案三 console.log('属性名' in 对象);

模板字符串——``

允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。反引号之间的内容就是模板字符串

对象中方法

var person = {
        name: "Jary",
        // 获取
        getName: function (name) {
          console.log(this.name)
        },
        // 设置
        setName: function (name) {
          this.name = name
          console.log(this.name)
        },
}
      person.getName()
      person.setName('salary')

数据存储

原始类型，将数据存储在栈内存
引用类型，将数据存储在堆内存，如果把对象赋值给变量，
引用类型数据销毁，对象不被任何地址所引用就会自动销毁，设置为null。

内置对象：JS提供的，可直接使用

数组对象

使用单独的变量名来存储一系列的值，一个容器储存多个元素

修改 || 删除元素

var car = ["car1", "car2", "car3", "car4", "car5", "car6"]
      // car[5]='car001'
      // 推荐：修改数组下标为5的值
      car.splice(5, 1, "car002")
      car.splice(5, 1)    //delete
      car.push("car7")

添加元素

var phone = []
      // phone[phone.length] = "华为"
      // phone[phone.length] = "华为"
      // 推荐
      phone.push("三星", "华为", "外星人", "戴尔")

清空数组

 // phone.length = 0
 // 推荐
 phone.splice(0, phone.length)

内置构造函数

 var arr = new Array("01", "02", "03")
 var arr2 = new Array()
 arr2.push('a','b','c','d','e')

数组与对象

都是用于存储值，对象存在属性，数组存在元素
数组是有序数组，可以进行排序

遍历数组

 // 遍历对象
      for (var i in arr) {
        console.log(arr[i])
      }
      // 遍历数组（推荐）
      for (var i = 0; i < arr.length; i++) {
        temp = arr[i]
        console.log(temp)
      }

获取输入值渲染数据

HTML

 <input type="text" name="" id="text" placeholder="请输入姓名" />
    <button id="btn">添加</button>
    <ul id="list">
      <li></li>
    </ul>

 /* 1、创建空数组
      2、点击事件获取输入值，并将该值添加至数组开头
      3、遍历数组，模板字符串拼接，渲染数据，清空输入框值 */
      var arr = []
      btn.onclick = function () {
        arr.unshift(text.value)
        var str = ""
        for (var i = 0; i < arr.length; i++) {
          str += `<li>${arr[i]}</li>`
          list.innerHTML = str
        }
        text.value = ""
      }

宿主对象：执行js语言时提供的对象，如果在浏览器执行js，那么宿主对象就是浏览器对象。