3.字符串
3-1模板字符串
let name = 'JiangWen';
let age = 28;
let result = `My name is ${name} . I am ${age} years old`;
3-2模板标签
### 自定义模板标签
export default class Ceshi extends React.Component {
render () {
let name = 'JiangWen';
let age = 28;
function tag(string) {
let arg = [...arguments].splice(1);
let result = '';
for (let key in arg){
result+=string[key]+`<span style="color:red">${arg[key]}</span>`;
}
result+=string[string.length-1]
return result
}
let result = tag`My name is ${name} . I am ${age} years old`;
return (
<div>
<div dangerouslySetInnerHTML={{
__html: result
}}></div>
</div>
)
}
}
3-3字符串新增方法
includes(),startsWith(),endsWith()这三个方法：
* 返回的都是boolean值；
* 都支持第二个参数；
1. includes（cha,startpostion）是否包含这个字符串
let str = 'www.baidu.com';
console.log(str.includes('w',6))
2.startsWith()//传入的字符串是否在原字符的头部；
let str ='http://www.baidu.com';
startsWith.startsWith('http')
3.endsWith()//传入的字符串是否在原字符的尾部；
let str ='banner.png';
startsWith.endsWith('png')
4.repeat() 将传入的字符串重复指定的次数，返回一个新的字符串；
let str = 'hand some';
str.repeat(3)
5.padStart(minleng,context)/padEnd(minleng,context) 前追加/后追加；
padStart和padEnd 共两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串
4.函数
4-1函数的默认值
let sum = (a={},b=1) => {
return{a,b}
}
4-2剩余运算符
let rest = function(a,...b){
console.log(a,b);
}
rest(1,2,3);
4-3箭头函数
箭头函数中没有this和arguments，this之向外层的代码块；
箭头函数的两种写法：
* 基本写法：第一行代码中大于一条语句，我们必须使用return和{}
* 简写方法：如果我们只返回一条语句，不必学return和{}
//基本写法：
const sum = (a,b) => {
a++;
return a+b
}
// 简写方法
const sum2 = (a,b) => a+b
4-4对象不是块级作用域
let result = {
fn: () => {
console.log(this)//这里面的this会指向result对象；向上查找
}
}
5.展开运算符
# 数组展开
let a= [1,2,3]
[...a,3,4,5]
# 对象展开
let a= {a:1}, b={b:1}
{...a, ...b}
let max = (...arg) => {
Math.max(...arg)
}
max(1,2,3,4,5)
6.对象的拷贝
6-1浅拷贝
let a = {a:1}, b ={b:1}, sum ={}
{...a, ...b} 或者
Object.assign(sum,a,b)
6-2深拷贝
let obj = {
name: 'zfpx',
home: ['1', 2, { name: 1 }],
address: { name: 'alive' }
}
function deepClone(parent, c) {
let child = c || {}
for (let key in parent) {
if (typeof parent[key] === 'object') {
child[key] = Object.prototype.toString.call(parent[key]) === '[object Array]' ? [] : {}
deepClone(parent[key], child[key])
} else {
child[key] = parent[key]
}
}
return child
}
let cloneObj = deepClone(obj);
console.log(cloneObj);
8.对象
1. 属性简写
let name = 'zfpx';
let person = {
name,
getName(){
console.log(this.name);
}
}
person.getName();
2. 判断两个值是否相等(===判断)
Object.is(NaN,NaN)对象的is判断两个值是否相同
Object.is({},{}) // false, 引用空间不同
Object.is('2',2) // false
3.Object.setPrototypeOf(objPrototy,obj)将指定的对象的原型指定为别的对象或者null；
let obj = { name: 'liy' }
let obj2 = {};
Object.setPrototypeOf(obj2, obj);// obj2的原型指向了obj
obj2.name //liy
或者
let obj3 ={
__proto__: obj
}
obj3.name
4.super可以调取到原型上的方法；
let obj ={age:12}
let result = {
__proto__: obj,
age: 10,
getage () {
return super.age
}
}
result.getage()
9.类的定义
类的定义通过class定义
class Parent {
constructor(name) {
this.name = name;
}
static a() {
console.log('abc')
}
getName() {
return this.name
}
}
class Child extends Parent {
constructor(name, age) {
super(name);//子类中没有this，需要super继承父级中的this
this.age = age
}
getAge() {
return this.age
}
}
let c = new Child('zfpx','9');
console.log(c.getName())
10.Generator
generator是一个特殊的函数，执行后返回一个Iterrators对象，通过遍历迭代器，Generator函数运行后会返回一个遍历器对象，而不是普通函数的返回值。
迭代器有一个next方法，每次执行的时候会返回一个对象 对象里面有两个属性，一个是value表示返回的值，还有就是布尔值done,表示是否迭代完成
在function后加*就可以声明一个Generator函数。
function* hiGenerator(){
yield 'hi';
yield 'ES5';
return '!';
}
var hi = hiGenerator();
console.log(hi); //hiGenerator {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(hi.next()); //Object {value: "hi", done: false}
console.log(hi.next()); //Object {value: "ES5", done: false}
console.log(hi.next()); //Object {value: "!", done: true}
generator函数返回的是一个遍历器对象，必须使用next方法才可以遍历到下一个状态，每次执行next()，遇到yield语句就暂停执行，且将yield后的表达式的值作为返回的对象的value值；如果没有遇到yield，则返回return语句作为返回对象的value值；如果没有return，则返回对象的value值为undefined。
function * readBook(books) {
for(let key in books){
yield books[key]
}
}
let it = readBook(['vue','angular','react']);
let flag = true
do {
let { done, value } = it.next();
console.log(value,done)
flag = done;
} while (!flag)
12.export和module实现模块化
### 第一种导出：
export{接口名}，export和import定义的变量名是对应的；
//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
console.log("fn0");
};
let fn1 = function() {
console.log("fn1");
};
export{ bar , foo, fn0, fn1}
//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
fn0();
fn1();
### 第二种导出：
在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了， 比如： closureFn as sayingFn，把closureFn名字改成sayingFn；
//lib.js文件
let fn0 = function() {
console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};
//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);
### 第三中导出：
直接export 函数名或者变量名
//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";
//main.js文件
import {foo, bar} from "./lib";
### 第四中导出：
如果一个js模块文件只有一个功能，我们可以直接使用export default默认导出，
这种导出的方式不需要知道导出的变量名，匿名导出，直接把开发的接口给export default；
//lib.js
export default "string";
//main.js
import defaultString from "./lib";
### 第五种导出：
export 可以默认导出函数，在import的时候，名字可以随便写，因为一个模块，默认接口只有一个；
//lib.js
let fn = () => "string";
export {fn as default};
//main.js
import defaultFn from "./lib";
### 第六种导出：
使用*通配符，表示重新导出其他模块的接口，
//lib.js
export * from "./other";
export {foo,fnFoo} from "./other";//如果只想导出部分接口， 只要把接口名字列出来
import * as obj from "./lib";//全部导入模块
