ES6基本语法

ES6基本语法（考点为ECMAScript2018）

---

字符串扩展

为String扩展了几个新API

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

  /**
   * @description: String.includes(searchString: string, position?: number): boolean
   * @param {searchString} string 待搜索字串
   * @param {position} number 从第几位起搜索，默认0
   * @return: boolen
   */
  // example
  let str = "testabc123";
  console.log(str.includes('ta'));// true
  console.log(str.includes(123));// true，自动识别string中的number
  console.log(str.includes('x'));// false
  console.log(str.includes('test',3));// false 
  

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

  /**
   * @description: String.startsWith(searchString: string, position?: number): boolean
   * @param {searchString} string 待搜索字串
   * @param {position} number 从第几位起搜索，默认0
   * @return: boolen
   */
  // example
  let str = "testabc123";
  console.log(str.startsWith('test',0));// true
  console.log(str.startsWith('test',1));// false
  

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

  /**
   * @description: endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
   * @param {searchString} string 待搜索字串
   * @param {position} number 搜索长度，默认this.length
   * @return: boolen
   */
  // example
  let str = "abcdefg123";
  console.log(str.endsWith(3));// true，校验字串"abcdefg123"
  console.log(str.endsWith('e',5));// true，校验字串"abcde"
  console.log(str.endsWith('f',5));// false，校验字串"abcde"
  

字符串模板

用`作为标记，很适合需要模板化的数据

// example
let str = 
`Hello
World!`;
console.log(str);
// 打印内容 
// Hello
// World!

---

数组解构

用指定变量解构数据来访问指定元素

// example
let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z);// 1 2 3

对象解构

将对象中的各个属性解构出来，默认变量名相同，也可以指定别名

// example
let person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
};
let {name, age, language} = person;// 直接沿用person对象里的属性名
let {name: n, age: a, language: l} = person;// 指定别名
console.log(name);
console.log(age);
console.log(language);
console.log(n);
console.log(a);
console.log(l);
// jack
// 21
// [ 'jack', 'js', 'css' ]

---

函数参数默认值

ES6以前只能采用变通写法，类似workspace项目service层中对每个请求options的处理。

option = option || {};

现在可直接在函数头中加默认值。

// example
function add(a, b = 1) {
		return a + b;
}

箭头函数

ES6定义的函数简写方式

// example
// 一个参数
var print = function (obj) {
    console.log(obj);
}
// 简写为：
var print2 = obj => console.log(obj);

// 多个参数
// 两个参数的情况：
var sum = function (a , b) {
    return a + b;
}
// 简写为：
var sum2 = (a,b) => a+b;
// 函数执行代码块可用{}包括起来（JS的一个特性，块作用域）

对象的函数属性简写

个人感觉这种简写对于代码可读性来说不是很友好

// example
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);
		}
}

箭头函数结合解构表达式

// example
// 以前实现
const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
    console.log("hello," + person.name)
}

// 现在实现
var hi = ({name}) => console.log("hello," + name);

---

数组中新增了map和reduce方法（map方法在开发过程中已经使用）

map

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

// example
let arr = [1, 2, 3];
console.log(...arr);// 1 2 3
arr = arr.map(ele => ++ele;);
console.log(...arr);// 2 3 4

reduce

/**
 * @description: reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数
 * @param {function(prev, next)} prev -> 上一次reduce处理的结果 next -> 数组中要处理的下一个元素
 * @param {value} 起始值
 * @return: 
 */

reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例：

// example
const arr = [1, 20, -5, 3];
// 没有初始值
arr.reduce((a, b) => a + b);// 19
arr.reduce((a, b) => a * b);// -300
// 有初始值
arr.reduce((a, b) => a * b), 0);// -0，虽然是0但是因为-单数，还是会显示-
arr.reduce((a, b) => a + b), 1);// 20

---

promise

用于存放未来结束的事件的结果，通常是一个异步操作，在工作中经常使用，下发一个Ajax请求后需要等待后端返回结果。

// example
const promise = new Promise (function(resolve, reject) {
	// ...执行异步操作

	if (/* 异步操作成功 */) {
		resolve(value);
	} else {
		reject(error);
	}
}).then (function(data) {
	// 异步执行成功后的回调
}).catch(function(error) {
	// 异步执行失败后的回调
});

工作实现可以参考service层中的代码，比较方便。

---

set/map

和其他语言的set/map用法类似，介绍一下js常用的api

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

---

模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。

而JS中没有包的概念，换来的是 模块。

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

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

export

举例：

// export单个对象
export const util = {
	sum: (a, b) => a + b
}
// export 多个值
let name = "jack";
let age = 21;
export {name, age};

省略名称

上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

因此js提供了default关键字，可以对导出的变量名进行省略

export default {
	sum: (a, b) => a + b
}

这样，当使用者导入时，可以任意起名字

import

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

例如我要使用上面导出的util：

// 导入util
import util from 'path'
// 调用util中的属性
util.sum(1, 2);

要批量导入前面导出的name和age：

import {name, age} from 'path'

---

对象扩展

• keys(obj)：获取对象的所有key形成的数组
• values(obj)：获取对象的所有value形成的数组
• entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],…]
• assian(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。

注：浅拷贝深层理解可参考各种原理解释，可以简单理解为覆盖式拷贝。

// example
let obj = {
    age: 22
};
let p1 = {
    name: "jack",
    age: 21
};
let p2 = {
    name: "jack",
    age: 25,
    sex: "男"
};
console.log(Object.assign(obj,p1));// { age: 21, name: 'jack' }
console.log(Object.assign(obj,p1,p2));// { age: 25, name: 'jack', sex: '男' }

数组扩展

• find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素

  let arr = ['a','b','c'];
  console.log(arr.find(value => value == 'a'));// a
  

• findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引

  let arr = ['a','b','c'];
  console.log(arr.findIndex(value => value == 'a'));// 0
  

• includes（callback）：与find类似，如果匹配到元素，则返回true，代表找到了。

  // includes(searchElement: T, fromIndex?: number): boolean;
  let arr = [1,2,3];
  console.log(arr.includes(1));// true
  // 类似字符串扩展里的includes方法，可代替之前使用的indexOf()
  

扩展运算符

• … 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开，说白了就是把衣服脱了，多层嵌套就比较吃力。

  let arr = ['a', 'b', 'c'];
  console.log(...arr);// a b c
  console.log([...arr]);// ['a', 'b', 'c']