《从零到一:鸿蒙原生应用开发实战》第5篇:ArkTS 基础语法速成(下)—— 数组、对象、解构、扩展运算符

你好，我是华鸿技术栈的作者。

上一篇我们过了 ArkTS 基础语法的前半部分——数据类型、变量声明、函数、箭头函数。那篇没有 UI，全是代码片段，但那些是后面写组件的地基。

今天接着往下，把剩下的几个高频语法点扫完：数组操作、对象、解构、扩展运算符。这几样东西在写界面的时候会反复出现，比如列表渲染、接口数据处理、组件传参，碰到就讲，用不上的一笔带过。

5.1 数组操作：列表渲染的基础

数组就是用来存一组数据的容器。在鸿蒙开发里，文章列表、收藏列表、菜单选项，背后都是数组。

声明数组

两种写法，效果一样，第一种更常用：

typescript

const list: string[] = ['鸿蒙', 'ArkTS', 'ArkUI']; const list2: Array= ['鸿蒙', 'ArkTS', 'ArkUI'];

string[] 表示这个数组里装的都是字符串。如果是数字数组就写 number[]，对象数组写 Article[]。

数组的常用操作

这些方法在实际开发里用到飞起，每一个都可能在某个场景里出现：

typescript

const arr: number[] = [1, 2, 3, 4, 5];

// 长度arr.length;  // 5

// 访问某个位置（索引从 0 开始）arr[0];  // 1

// 末尾加一个arr.push(6);  // arr 变成 [1, 2, 3, 4, 5, 6]

// 末尾删一个arr.pop();  // 删掉 6，arr 变回 [1, 2, 3, 4, 5]

// 前面加一个arr.unshift(0);  // arr 变成 [0, 1, 2, 3, 4, 5]

// 前面删一个arr.shift();  // 删掉 0，arr 变回 [1, 2, 3, 4, 5]

// 查找某个值的位置arr.indexOf(3);  // 2

遍历数组：forEach 和 for...of

遍历就是挨个访问数组里的每一项：

typescript

map 和 filter：数据处理的核心

map 把一个数组映射成另一个数组，filter 从数组里筛出一部分：

这两个方法在数据转换场景里经常用到。接口返回了一堆文章数据，你要取前 10 条、或者只取某个分类的，就靠 filter。你要把接口返回的字段名转换成页面需要的格式，就靠 map。

5.2 对象：描述结构化数据

对象就是把一组相关的数据打包在一起。一篇文章有标题、作者、阅读量，这三个东西散着传很乱，打包成一个对象就清晰多了：

typescript

const article = {

  title: '鸿蒙开发入门',

  author: '华鸿技术栈',

  readCount: 1280

};

访问对象属性

typescript

console.log(article.title);       // '鸿蒙开发入门' console.log(article['author']);   // '华鸿技术栈'

点号访问最常用，括号访问用在属性名是变量或包含特殊字符的时候。

修改和添加属性

typescript

type 定义对象的结构

用 type 给对象定义一个“固定形状”，后面用这个类型的时候，属性和类型都会受到约束，写错会报编译错误：

typescript

type Article = {  title: string;  author: string;  readCount: number;};

const article: Article = {  title: '鸿蒙开发入门',  author: '华鸿技术栈',  readCount: 1280};

这种写法在接口数据处理、组件传参时非常常用。后面讲网络请求和 JSON 解析时，第一步就是先定义接口返回的数据模型，用的就是这个语法。

对象套对象：嵌套结构

实际开发中数据很少是扁平的，经常一层套一层。比如一个人的信息里包含一个“背包”对象：

typescript

type Bag = {size: string;color: string;};

type Person = {name: string;mine: Bag;};

const person: Person = {name: '张三',mine: {size: '大',color: '蓝色'}};

console.log(person.mine.color); // '蓝色'

后面讲 @ObservedV2 和 @Trace 的时候，嵌套对象的响应式监听就是在这个基础上展开的。

5.3 解构：把对象和数组拆开用的简便写法

解构就是把对象或数组里的值“拆”出来，直接赋值给变量。不用每次都写 对象.属性 这种啰嗦写法。

对象解构

typescript

const article = {

  title: '鸿蒙开发入门',

  author: '华鸿技术栈',

  readCount: 1280

};

// 把三个属性分别取出来

const { title, author, readCount } = article;

console.log(title);      // '鸿蒙开发入门'

console.log(author);     // '华鸿技术栈'

数组解构

typescript

const list: string[] = ['鸿蒙', 'ArkTS', 'ArkUI'];

const [first, second, third] = list;

console.log(first);   // '鸿蒙'

console.log(second);  // 'ArkTS'

实际开发中的用法

解构最常用的两个场景：

场景一：处理接口返回的数据。 接口通常返回一大坨 JSON，但你只需要其中几个字段：

这种写法在组件封装时很常见，传参清晰，不用记参数顺序。

5.4 扩展运算符：合并、复制、传参都用它

扩展运算符用三个点 ... 表示，能把数组或对象“展开”到另一个数组或对象里。记住，扩展运算符是浅拷贝，只复制对象的第一层属性，嵌套对象仍然是共享引用。

合并数组

typescript

复制数组

typescript