es6新增的方法有哪些

张开发
2026/4/7 17:27:00 15 分钟阅读

分享文章

es6新增的方法有哪些
一、变量声明let /const1. let作用声明块级作用域变量解决 var 变量提升、污染全局的问题。{ let a 10; } console.log(a); // Uncaught ReferenceError: a is not defined特点块级作用域{}内有效存在暂时性死区声明前不能用不能重复声明可以重新赋值2. const作用声明只读常量地址不可修改。const obj { name: zs }; obj.name ls; // 可修改内部属性 console.log(obj); // { name: ls } obj {}; // 不能修改地址 TypeError: Assignment to constant variable二、解构赋值1. 数组解构作用快速从数组中按位置提取值简化赋值。const [a, b, c] [10, 20, 30]; console.log(a); // 10 console.log(b); // 20 console.log(c); // 302. 对象解构作用按属性名快速提取对象值。const user { name: 张三, age: 18 }; const { name, age } user; console.log(name); // 张三 console.log(age); // 183. 函数参数解构作用函数接收对象类型参数时直接在参数位置解构取值不用在函数内部再写.属性获取。function print({ name, age }) { console.log(name, age); // 李四 20 } print({ name: 李四, age: 20 });三、模板字符串 作用支持换行、变量插值替代字符串 拼接。const name 小明; const age 18; const str 我叫${name}今年${age}岁; console.log(str);四、函数增强1. 参数默认值作用不传参数时使用默认值避免 undefined。function add(a 1, b 2) { return a b; } console.log(add()); console.log(add(5)); console.log(add(5, 5));2. rest 剩余参数 ...args作用接收所有剩余参数转成真数组替代 arguments。function sum(...args) { return args.reduce((total, item) total item, 0); } console.log(sum(1, 2, 3)); // 63. 扩展运算符 ...作用展开数组 / 对象实现浅拷贝、合并。const arr [1, 2, 3]; const newArr [...arr]; console.log(newArr);4. 箭头函数作用简化函数写法无自己 this继承外部 this。const add (a, b) a b; console.log(add(2, 3));五、数组新增方法重点1. Array.from()作用把类数组、可迭代对象转为真正数组。console.log(Array.from(hello)); // [h,e,l,l,o]2. Array.of()作用创建数组避免 new Array (3) 产生空位数组。console.log(Array.of(3)); // [3] console.log(Array.of(1, 2, 3)); // [1,2,3]3. find()作用查找数组中第一个满足条件的元素找到返回元素找不到返回 undefined。const arr [1, 2, 3, 4]; const res arr.find(item item 2); console.log(res); // 34. findIndex()作用查找第一个满足条件的索引找不到返回 -1。const arr [1,2,3,4]; const idx arr.findIndex(item item 2); console.log(idx); // 25. includes()作用判断数组是否包含某个值返回布尔能识别 NaN。const arr [1, 2, NaN]; console.log(arr.includes(2)); // true console.log(arr.includes(NaN)); // true6. fill()作用用固定值填充数组。console.log(new Array(3).fill(0)); // [0,0,0]7. flat(要拉平几层)作用数组扁平化拉平嵌套数组。console.log([1, [2, [3]]].flat(2)); // [1,2,3]六、对象新增1. 对象简写作用属性名和变量名相同时可简写。const name zs; const obj { name }; console.log(obj); // { name: zs }2. 计算属性名作用用变量作为对象的 keyconst key age; const obj { [key]: 18 }; console.log(obj); // { age: 18 }3. Object.assign()作用浅拷贝、合并多个对象。const obj1 { a: 1 }; const obj2 { b: 2 }; const newObj Object.assign({}, obj1, obj2); console.log(newObj);4. Object.is()作用精确判断两个值是否相等长得一模一样就相等。修复 对 NaN、±0 的错误。console.log(Object.is(NaN, NaN)); // true console.log(Object.is(0, -0)); // false5. Object.keys()作用返回对象自身可枚举键名数组。const obj { a:1, b:2 }; console.log(Object.keys(obj)); // [a,b]6. Object.values()作用返回对象值数组。console.log(Object.values(obj)); // [1,2]7. Object.entries()作用返回键值对数组[[key,val], ...]。console.log(Object.entries(obj)); //[[a,1], [b,2]]七、Symbol作用生成独一无二的值用作对象私有属性防冲突。const s1 Symbol(name); const s2 Symbol(name); console.log(s1 s2); // false八、Set 集合作用存储不重复的值常用于数组去重、判断存在。const s new Set([1,2,2,3]); console.log(s); // Set(3) {1,2,3} console.log([...s]); // [1,2,3]常用方法add(val)添加delete(val)删除has(val)判断是否存在clear()清空九、Map 映射作用键可以是任意类型对象 / 函数比对象更灵活的键值对结构。const map new Map(); map.set(name, 张三); console.log(map.get(name)); // 张三十、class 类作用ES6 面向对象语法糖更清晰的构造函数写法。class Person { constructor(name) { this.name name; } say() { return this.name; } } const p new Person(小明); console.log(p.say()); // 小明extends 继承作用实现类的继承。class Student extends Person {} const s new Student(小红); console.log(s.name); // 小红十一、Promise作用解决回调地狱处理异步操作。new Promise((resolve) { setTimeout(() resolve(成功), 1000); }).then(res { console.log(res); // 1 秒后输出 成功 });Promise.all()作用等待所有 promise 完成返回结果数组。const p1 Promise.resolve(1); const p2 Promise.resolve(2); Promise.all([p1, p2]).then(res console.log(res)); //[1,2]十二、for…of 循环作用遍历数组、Set、Map、字符串直接拿到值。const arr [1,2,3]; for (let val of arr) { console.log(val); // 1,2,3 }十三、import /export 模块化作用实现 JS 文件模块化避免全局污染。// a.js export const a 10; export default function fn() {} // index.js import fn, { a } from ./a; console.log(a); // 10

更多文章