es6的新特性分析

1.字符串扩展

includes():返回布尔值,表示是否找到了参数字符串。

var str ='hello.vue';str.inclides('v');//返回true

startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。

var str='hello.vue';str.startsWith('hello');//返回true

endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

var str ='hello.vue';str.endswith('vue');//true

2.解构表达式

数组解构

let arr = [1,2,3]const [x,y,z] = arr;// x,y,z将与arr中的每个位置对应来取值// 然后打印console.log(x,y,z);//1 2 3

对象解构

const person = { name:"jack", age:21, language: ['java','js','css']}// 解构表达式获取值const {name,age,language} = person;// 打印console.log(name); //jackconsole.log(age); //21console.log(language);['java','js','css']

3.函数优化

函数参数默认值

function add(a , b = 1) { return a + b;}// 传递一个参数console.log(add(10));//11

箭头函数

var sum3 = (a,b) => { return a + b;}

对象的函数属性简写

let person = { name: "jack", // 以前: eat: function (food) { console.log(this.name + "在吃" + food); }, // 箭头函数版: eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this // 简写版: eat3(food){ console.log(this.name + "在吃" + food); }}

箭头函数结合解构表达式

const person = { name:"jack", age:21, language: ['java','js','css']}var hi = ({name}) => console.log("hello," + name);

4.map和reduce

map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。

reduce():接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:

const arr = [1,20,5,30];//未给初始值arrnum.reduce((a,b)=>a+b);//输出所有数的和,56,arrnum.reduce((a,b)=>a*b);//输出所有输的乘积,3000,//给一个初始值arrnum.reduce((a,b)=>a+b,5);//输出所有数的和,61,arrnum.reduce((a,b)=>a*b,-1);////输出所有输的乘积,-3000,

5.promise

const promise = new Promise(function(resolve, reject) { // ... 执行异步操作 if (/* 异步操作成功 */){ resolve(value);// 调用resolve,代表Promise将返回成功的结果 } else { reject(error);// 调用reject,代表Promise会返回失败结果 }});# 如果我们想要等待异步执行完成,做一些事情,我们可以通过promise的then方法来实现,语法:# 如果想要处理promise异步执行失败的事件,还可以跟上catch:promise.then(function(value){ // 异步执行成功后的回调}).catch(function(error){ // 异步执行失败后的回调})

6.set和map

set

// Set构造函数可以接收一个数组或空let set = new Set();set.add(1);// [1]// 接收数组let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

set.add(1);// 添加set.clear();// 清空set.delete(2);// 删除指定元素set.has(2); // 判断是否存在set.keys();// 返回所有keyset.values();// 返回所有值set.entries();// 返回键值对集合// 因为set没有键值对,所有其keys、values、entries方法返回值一样的。set.size; // 元素个数。是属性,不是方法。

map

7.模块化

模块功能主要由两个命令构成:export和import。

export命令用于规定模块的对外接口,import命令用于导入其他模块提供的功能。

export

const util = { sum(a,b){ return a + b; }}export util;

export const util = { sum(a,b){ return a + b; }}

export不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。

var name = "jack"var age = 21export {name,age}

import

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

// 导入utilimport util from 'hello.js'// 调用util中的属性util.sum(1,2)

或者

import {name, age} from 'user.js'console.log(name + " , 今年"+ age +"岁了")

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200814A0RKOB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券