javascript ES6新增特性

本文深入探讨了ES6(ECMAScript 6)引入的重要新特性,包括变量声明方式如let和const,解构赋值,模板字符串,箭头函数,this数据场景,数组和函数的扩展,以及新数据类型Symbol的使用。通过具体示例,读者可以全面了解这些新特性的语法和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

声明变量

var 变量名 = 变量值; // 声明变量,函数作用域

let 变量名 = 变量值; // 声明变量,块级作用域 (ps. 作用域内不能重复定义、能修改

const 变量名 = 变量值; // 声音常量,块级作用域(ps. 作用域内不能重复定义、不能修改

解构赋值

let [变量名=默认值, 变量名=默认值, 变量名=默认值]= [‘神龙教主’, 18]

let {uname:变量名,…,sex:变量名,键:变量名=默认值} = {uname:‘webopenfather’, age: 18}

模板字符串

语法说明**

反引号 英文状态 1 左边的键 或者 esc下面的键

遇到变量 ${变量名}

`内容… ${变量名} 内容… `

函数的扩展

this数据场景

1、this数据场景!!!

A普通函数调用 this => window对象 function 函数名() { this }

B对象函数调用 this => 对象自身 var obj = {say: function() { this }}

C事件处理函数调用 this => this事件源 标签对象.事件类型 = function(){ this }

D定时器调用 this => window对象(新

E箭头函数中调用 this => 父function中的this 没有父就是window对象(新

箭头函数

【ES5】function 函数名(形参,…,形参n) {}
↓ 去掉 function 函数名 接着 在() 后面加 =>
【ES6】(形参,…,形参n) => {}

function 函数名(形参) {
var 变量名 = 形参 || 默认值
}

数组的扩展

成员查找find()、findIndex()

数组.find(实战)

let 变量名 = 数组.find(function(item) { // item就是数组中的值,会挨个赋值给item
return 判断条件 // 条件成立 就会终止遍历 将当前item赋值给变量
})

let 变量名 = 数组.find((item) => { // item就是数组中的值,会挨个赋值给item
return 判断条件 // 条件成立 就会终止遍历 将当前item赋值给变量
})

let 变量名 = 数组.findIndex((item) => {
return 条件
})

新Symbol数据类型

数据结构(Set 、Map)

■语法说明

增:m.set(键,值)

获取/删除/检测:m.get/delete/has(键)

清除:m.clear()

获取所有键:m.keys()

获取所有值:m.values()

循环

forof (既可以遍历字符串、数组等 还可以遍历新的数据结构 主要用来就是遍历心的数据结构

### ES6 新增特性 ECMAScript 2015(简称 ES6)是 JavaScript 的一次重大更新,引入了许多新特性和语法改进,提升了语言的表现力和开发效率。以下是其中一些核心新增特性: #### 1. 类(Class) ES6 引入了 `class` 关键字,使得面向对象编程更加直观和规范。类支持继承、构造函数、方法定义等特性。 ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } say() { console.log(this.name + ":" + this.age); } } class Student extends Person { constructor(name, age, sex) { super(name, age); this.sex = sex; } } var student = new Student("tom", 18, "male"); student.name; // 'tom' student.sex; // 'male' student.say(); // 'tom:18' [^2] ``` #### 2. Symbol 数据类型 Symbol 是一种新的基本数据类型,用于创建唯一值,通常用作对象属性名以避免命名冲突。 ```javascript let sym1 = Symbol(); let sym2 = Symbol("description"); // 可选的描述字符串 [^1] ``` #### 3. 模块化(Module) ES6 原生支持模块化编程,通过 `import` 和 `export` 实现模块的导入和导出,增强了代码的可维护性和复用性。 ```javascript // math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.js'; console.log(add(2, 3)); // 5 ``` #### 4. 箭头函数(Arrow Function) 箭头函数简化了函数表达式的写法,并且不绑定自己的 `this`,而是继承外层作用域的 `this`。 ```javascript const numbers = [1, 2, 3]; const squares = numbers.map(n => n * n); // [1, 4, 9] ``` #### 5. 默认参数(Default Parameters) 函数参数可以设置默认值,当未传入或值为 `undefined` 时使用默认值。 ```javascript function greet(name = "Guest") { console.log(`Hello, ${name}`); } greet(); // Hello, Guest greet("Alice"); // Hello, Alice ``` #### 6. 解构赋值(Destructuring Assignment) 解构允许从数组或对象中提取值并赋给变量,语法简洁明了。 ```javascript const person = { name: "Alice", age: 25 }; const { name, age } = person; console.log(name); // Alice console.log(age); // 25 ``` #### 7. 扩展运算符与剩余参数(Spread and Rest Operators) 扩展运算符(`...`)可用于展开数组或对象,而剩余参数则用于收集多余参数。 ```javascript const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] function sum(...args) { return args.reduce((acc, val) => acc + val, 0); } sum(1, 2, 3); // 6 ``` #### 8. Promise 对象 Promise 提供了一种更清晰的异步编程解决方案,替代传统的回调嵌套方式。 ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` #### 9. Map 与 Set Map 是一种键值对集合,支持任意类型的键;Set 是一种只存储唯一值的集合。 ```javascript const map = new Map(); map.set('key', 'value'); console.log(map.get('key')); // value const set = new Set([1, 2, 2, 3]); console.log([...set]); // [1, 2, 3] ``` #### 10. 迭代器与生成器(Iterators and Generators) 迭代器提供了一种统一的遍历接口,生成器是一种返回迭代器的函数,使用 `function*` 定义。 ```javascript function* generator() { yield 1; yield 2; yield 3; } const gen = generator(); console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 ``` #### 11. 数组的 `entries()`、`keys()`、`values()` 方法 这些方法分别返回索引、键、值的迭代器,适用于 `for...of` 循环。 ```javascript const arr = ['a', 'b', 'c']; for (const [index, value] of arr.entries()) { console.log(index, value); // 0 'a', 1 'b', 2 'c' [^3] } ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值