13518219792
网站建设资讯

NEWS

网站建设资讯

es6比es5新增了哪些内容

这篇文章主要讲解了“es6比es5新增了哪些内容”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“es6比es5新增了哪些内容”吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、雅安服务器托管、营销软件、网站建设、磁县网站维护、网站推广。

新增内容：1、let、const关键字，用于声明变量，支持块级作用域，拥有暂时性死区；2、解构赋值，是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值的意思；3、展开运算符，可用于将集合和数组中的元素扩展为单个单独的元素；4、Set对象，一种新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值；5、构造函数的方法Array.from()、Array.of()。

ES6比ES5新增的特性

let、const：

let和const支持块级作用域，拥有暂时性死区（必须先声明，再使用，不支持变量提升）；

const是常量，声明时必须赋值，当赋值为基本类型时，不能改变它的值；当赋值为引用类型时，不能改变它的引用，但是可以对引用类型进行操作，如数组的push、对象的属性增删改

解构赋值：

es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。

解构赋值在代码书写上简单易懂，语义清晰明了，方便对复杂对象中数据字段的获取。

对象的解构赋值：

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

数组的解构赋值：（字符串一样）

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出：
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

展开运算符：

由三个点 ( ...) 表示，JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。

扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。

扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：

console.log(...arr);

数组：

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出：
// ['a', 'b', 1, 2, 3, 4, 'c']

对象：

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出：
// {a: 1, b: 2, c: 3, d: 4}

剩余参数处理：

数组：

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: [3, 4, 5]

对象：

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制（不是传地址）
let obj2 = {...obj};

Set对象：

Set是ES6提供的一种新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。

  • Set 本身是一个构造函数，用来生成 Set 数据结构。

  • Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

  • Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

  • 另外，NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（尽管 NaN !== NaN）。

  • Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

数组去重：

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

Set方法：

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项，返回集合本身的引用
s.add('b');

Map对象：

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

Map 特征：

  • Map 对象保存键值对，并且能够记住键的原始插入顺序。

  • 任何值(对象或者原始值) 都可以作为一个键或一个值。

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 3}

Map方法：

// 清空Map
m.clear();
// 删除某一项，返回操作是否成功
m.delete(key);
// 获取某一项的值，返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项，返回Map本身的引用
m.set(key, val);

函数新增内容：

  • 箭头函数：没有this和arguments

  • 参数默认值

数组新增方法：

构造函数的方法：

  • 把一个类数组转换成真正的数组：Array.from(arrLike [, mapFunc, mapThis]);

    参数：

    另一种方法：let arr = [...arrLike];

    • arrLike:类数组

    • mapFunc:对类数组每一项的操作函数

    • mapThis:替换mapFunc的this指向

  • 将参数列表转换为数组：

    Array.of(...items);

  • 检测一个对象是否是一个数组：

    Array.isArray(obj);

对象的方法：

  • arr.find(callback [, thisArg])：查找数组中满足条件的第一个元素的值

    let arr = [1, 2, 3, 4];
    let val = arr.find((item, index) => item >= 3);
    // val: 3
    let val = arr.find((item, index) => item >= 5);
    // val: undefined

  • arr.findIndex(callback [, thisArg])：查找数组中满足条件的第一个元素的索引

  • 数组扁平化：

    • arr.flat([depth])

      参数：depth：指定要提取嵌套数组的结构深度，默认为1，当depth = infinity时，无论数组多少层，都提取为一维数组。

    • arr.flatMap(callback[, thisArg])

      参数：callback：对原数组的每个元素进行操作，返回新数组的元素；

      该函数值支持深度为1的扁平化

  • 数组元素填充：arr.fill(value[, start[, end]]);

    用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引；不会改变数组长度

    参数：

    • value：用来填充数组元素的值；

    • start：起始索引，默认值为0；

    • end：终止索引，默认值为 arr.length ；

  • arr.includes(valueToFind[, fromIndex])：判断数组中是否包含一个指定的值

    参数：

    • valueToFind：需要查找的值

    • fromIndex：从 fromIndex 处开始向后查找

字符串新增方法：

  • str.startsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串开头

    参数：

    • searchString：要搜索的字符串

    • position：在 str 中搜索 searchString 的开始位置，默认为0，也就是真正的字符串开头处

  • str.endsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串结束

    参数：

    • searchString：要搜索的字符串

    • position：在str中反向搜索的开始位置，默认为 str.length

  • str.repeat(times)：返回重复str字符串times次的字符串

模版字符串：

反引号：``，可以换行

插值表达式：${}

对象新增方法：

  • 简洁表示法：

    let a = 1, b = 2;
    // 原来的表示方法：
    let obj = {
     a: a,
     b: b,
     c: function() {}
    };
    // 简洁表示法：
    let obj = {
     a,
     b,
     c() {}
    };

    属性名表达式：

  • let name = "小明";
    let obj = {
     [name]: 111
    };
    console.log(obj);
    // 输出：
    // obj: {'小明': 111}

    // 等价于：
    let obj = {};
    obj[name] = 111;

  • Object.assign(obj1, obj2, ...)：将第二个参数即之后的参数对象合并到第一个参数对象中

    let obj1 = {a: 1, b: 2};
    let obj2 = {c: 3, d: 4};
    Object.assign(obj2, obj1);
    // 等价于
    obj2 = {
     ...obj1,
     ...obj2
    }
    // 等价于
    obj2 = Object.assign({}, obj1, obj2);

  • Object.is(value1, value2)：判断两个值是否相等（强类型）

    和===的区别：

    +0 === -0;	// true
    Object.is(+0, -0);	// false

    NaN === NaN; // false
    Object.is(NaN, NaN); // true

babel编译器：

将es6语法编译为es5语法

感谢各位的阅读，以上就是“es6比es5新增了哪些内容”的内容了，经过本文的学习后，相信大家对es6比es5新增了哪些内容这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


名称栏目：es6比es5新增了哪些内容
URL链接：http://cdweb.net/article/ihshhc.html

其他资讯