es6+和css3新增的特性有哪些

一：ECMAScript 新特性（ES6+）

ES6 (2015) - 革命性更新

1，记住的方法，从一个方法里面用到了哪些技术

• 1，let /const块级作用域声明
• 2，**默认参数**：函数参数可以设置默认值。
• 3，**解构赋值**：从数组或对象中提取值。
• 4，**剩余参数和扩展运算符**：`...`用于收集参数或展开数组/对象。
• 5，Promise异步编程，（asyn await）语法糖
• 6，可选链式操作符?.避免访问深层属性时出错。
• 7，**模板字符串**：使用反引号`` ` ``和`${}`嵌入表达式。
• 8，箭头函数**：`() => {}`，简化函数写法，不绑定自己的this。
• 9，**空值合并运算符**：`??`，提供默认值。

2，数组的方法，

• 1，includes方法，判断数组是否包含某元素。
• 2，flat()，flatMap()，多维数组扁平化处理
• 3，at()，通过索引获取数组元素（支持负索引）
• 4，.findLast()和findLastIndex()从数组末尾开始查找。

3，字符串的方法，

• 1，**字符串填充**：`padStart()`和`padEnd()`。
• 2，trimStart() / trimEnd()**：去除字符串两端空白。
• 3，replaceAll()**：替换所有匹配的子串。

4，对象的方法，

• 1，**Object.values() / Object.entries()**：获取对象的值或键值对数组。
• 2，Object.FromEntries，将键值对列表转为对象
• 3，Object.hasOwn()，判断属性是否属于当前对象的属性。

5，Promise的异步编程

• 1，Promise.prototype.finally，异步函数链式调用的最终操作。
• 2，Promise.allSettled，无论Promise成功或失败都返回结果。
• 3，**Promise.any()**：任意一个Promise成功即返回。

6，新增的类型

• 1，**Symbol**：新的原始数据类型。唯一值
• 2，**BigInt**：大整数类型。

7，其他

• 1，Proxy代理和Reflect映射 
• 2，**Set和Map数据结构**：新的集合类型。
• 3，**指数运算符**：`**`，如`2**3`表示2的3次方。
• 4，**异步迭代**：`for await...of`。
• 5，**动态导入**：`import()`函数，按需导入模块。

二：CSS3是一个大的模块集合，包含多个模块，每个模块独立升级。主要特性包括： 

1，选择器（支持属性选择器，伪类和伪元素）

2，盒模型，（标准和模型，content就是宽高；IE盒模型）

3，背景样式升级，边框升级，

• 1，背景属性增强：`background-size`、`background-origin`、`background-clip`。
• 2，边框支持圆角，，支持边框图片，支持盒子阴影等

4，渐变（文本效果）

• 1，支持线性渐变（背景和文字渐变）
• 2，文字阴影 text-shadow（盒子阴影）好记住 
• 3，文字溢出用...省略号替代text-overflow

5，布局（Flexbox，Grid） 

• 1，弹性盒子布局（Flexbox）
• 容器属性：`display: flex`、`flex-direction`、`justify-content`、`align-items`等。
• 项目属性：`flex-grow`、`flex-shrink`、`flex-basis`等。
• 2，网格布局（Grid）

6，2D/3D转换,过渡，动画等

• 1，- 变换：`transform`（旋转、缩放、移动、倾斜）。
• 2，- 3D变换：`transform-style`、`perspective`。
• 3，- `transition`：在状态改变时平滑过渡。
• 4，@keyframes`规则和`animation`属性。

6，其他

• 1，`calc()`：动态计算值。 
• 2，`@font-face`：自定义字体。
• 3，支持定义变量，
• - 定义：`--variable-name: value;`
• - 使用：`var(--variable-name)`