ES6 常见用法归纳

巧迎莹科技

已于 2024-12-12 18:12:37 修改

阅读量549

点赞数 5

CC 4.0 BY-SA版权

文章标签： es6

于 2024-12-12 17:47:25 首次发布

本文链接：https://blog.csdn.net/t1223091701/article/details/144431279

1.名称

JavaScript 的正式名称是 ECMAScript，当前普遍使用的是ES5,ES6是为了解决ES5中的一些问题。比如新增了类的定义。

2.搭建环境

一般使用webpack来将ES6转为ES5以方便运行在各大主流浏览器。比如REACT JS中。

3.变量

新增了let与const，let局部生效，var全局生效。const修饰number等基本变量是表示常量，定义需要赋值。修饰object时只能保证保存的对象地址不变，不能保证对象内容。

4.ES6中Map的常见用法

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
    console.log(key + " = " + value);
}
myMap.forEach(function(value, key) {
    console.log(key + " = " + value);
}, myMap)
//合并两个map
var merged = new Map([...first, ...second]);

5.ES6中Set的常见用法

let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
//可以去重
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

//取并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
//取交集
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
//取差集
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

6.ES6中的解构赋值常见用法。主要记住与扩展运算符...的结合使用

    5.1 基本用法，取对象属性值
        let obj = {a:1,b:2};
        let {a,b} = obj; //a=1,b=2
    5.2 拼接数组
        let a = [1,2,3];
        let b = [0,...a]; //将0添加到a数组最前面
        let[first,...rest] = [1,2,3];//first = 1,取数组的第一个值，剩下的放入新数组rest
    5.3 展开对象
        let obj = {name:'albert',age:18};
        <MyComponent {...obj}/>;//在REACT,父组件向子组件传值时可以将对象展开为name='albert',age=18

7.ES6 新增字符串常用处理方法

以下三个方法都可以接受两个参数，需要搜索的字符串（不要传入正则表达式），和可选的搜索起始位置索引。

    let string = "apple,banana,orange";
    string.includes("banana");     // true
    string.startsWith("apple");    // true
    string.endsWith("apple");      // false