详解JavaScript(ECMAScript与DOM)(中)

简介: 详解JavaScript(ECMAScript与DOM)(中)

九.数组

9.1数组的创建方式

①通过new关键字创建数组

代码演示如下:

//创建数组arrs
var arrs=new Array();

ps:

不必担心数组的长度限制问题,以及数组的数据类型问题,你往数组里加多少元素,它的长度就有多少个且它可以存放任意类型的元素,不局限单一元素类型

②通过[]创建数组(常用)

代码演示如下:

//创建数组arrs并同时添加元素
var  arrs=[10,"java",12.5,true];

9.2 数组的基本操作

①添加数据

代码演示如下:

arrs[0]=10;
arrs[1]="java";
//压入数据
arrs.push(12);
arrs.push("mysq1");

②取值

//打印数组arrs[0]的值
console.log(arrs[0]);

③获取数组长度

//获取数组arrs的长度
arrs.length;

④遍历数组

代码演示如下:

for(var i=0;i<arrs.length;i++){
  console.log(arrs[i]);
}

⑤数组的反转

语法:

数组名.reverse();

其返回值是一个数组

代码演示如下:

console.log("arrs反转如下:")
 var reverse = arrs.reverse();
 console.log(reverse);

⑥数组元素的拼接

语法:

arrs.join(分割符);

代码演示如下:

console.log(arrs)
 //以"-"作为拼接符拼接数组arrs的所有元素并返回string类型的结果
 var s = arrs.join("-");
 console.log(s);

⑦数组元素的删除

语法:

//在数组arrs中从位序为start的位置开始删,删count个元素,并返回删去元素后的数组
arrs.splice(start,count);

代码演示如下:

//打印数组arrs的信息
 console.log(arrs)
 //在数组arrs中从位序为1开始,删除2个元素(自1开始且包含1)并返回一个数组
 var splice = arrs.splice(1,2);
 //打印返回结果,返回结果是个数组
 console.log(splice);


十. JSON

用途:

跨平台数据传输

JSON的格式:

  • JSON数据两端要么是{},要么是[]
  • {}定义JSON对象
  • [] 定义JSON数组

10.1 创建JSON对象

语法:

{key:value,key:value,...,key:value}

①创建简单json对象

代码演示如下:

//创建简单的json对象
var jsone1={
id:103,
name:"王五",
age:18,
address:"北京"
}
console.log(json01.id)
console.log(json01.name)
console.log(json01.age)
console.log(jsone1.address)

②创建稍微复杂的json对象

代码演示如下:

//创建稍微复杂的json对象
   var json2 = {
            id: 103,
            name: "王五",
            age: 18,
            address: "北京",
            computer: {
                id: 501,
                brand: "联想",
                price: 5000
            }
        };
        console.log(json2.name);
        console.log(json2.computer.id);
        console.log(json2.computer.brand);
        console.log(json2.computer.price);
}

10.2 创建JSON数组

语法:

[value,value,...,value]

①创建json数组

代码演示如下:

var json3=[1,"hsj",45.78,true];
for (var i = 0; i < json3.length ; i++) {
    console.log(json3[i])
}

②创建稍微复杂的json数组

代码演示如下:

var json4=[
    {
        id: 1,
        name: "jack",
        age: 34
    },
    {
        id: 2,
        name: "rose",
        age: 31
    },
    {
        id: 3,
        name: "tom",
        age: 35
    }
    ];
for (var i = 0; i <json4.length ; i++) {
    console.log("第"+(i+1)+"位员工信息:");
    console.log(json4[i].id);
    console.log(json4[i].name);
    console.log(json4[i].age);
}

③创建复杂的json数组(对象数组)

代码演示如下:

var json5={
    id:1234,
    name:"张三",
    age:12,
    Computer:[
        {
            id:1,
            brand:"华为",
            price:5000
        },
        {
            id:2,
            brand:"华硕",
            price:6000
        }
    ]
}
console.log(json5.id);
console.log(json5.name);
console.log(json5.age);
console.log("-----------------------------------------")
for (var i = 0; i < json5.Computer.length; i++) {
    console.log("第"+(i+1)+"个电脑的详细信息:");
    console.log(json5.Computer[i].id);
    console.log(json5.Computer[i].brand);
    console.log(json5.Computer[i].price);
}

json对象如何转成json字符串(符合json格式的字符串)?

代码演示如下:

//定义json对象
var jsonObj = {"stuName":"tom","stuAge":20};
//将其转换为json字符串jsonStr
var jsonStr = JSON.stringify(jsonObj);
console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

json字符串如何转换成json对象?

代码演示如下:

//将刚才的json字符串jsonStr转换为json对象parse
var parse = JSON.parse(jsonStr);
console.log(parse);


相关文章
|
20天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
6天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
7天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
23天前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
30天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
41 4
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
19 5
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
27 4
|
29天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
32 0
|
1月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
22 0
|
1月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
29 0