5.web基础知识 Es6
安装cnpm镜像:npm install -g cnpm --registry=https://registry.npmmirror.com
Babel转码器：将Es6代码转换为Es5代码,避免浏览器无法运行最新的代码
1.ECMAScript 6简介：
和Javascript的区别，ECMAScript 6是Javascript的规范，后者是前者的一种实现。
目标：使Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
2.命令行工具：CMD命令行工具、PowerShell命令行工具
3.let命令（声明变量）所声明的变量只在let命令所在的代码块内有效
let关键字：1.let是块级作用域（只在花括号里面生效）
2.let不存在变量提升（先定义再打印）
3.let不允许在相同作用域内重复声明一个变量
//var关键字
var a = [];
for (var i = 0; i
4.const：（声明变量）（一旦声明，不可改变）
常量（const）：1.const声明之后不允许重新赋值
2.必须声明时直接初始化
3.const是块级作用域
4.const不存在变量提升
5.const不允许在相同作用域内重复声明一个变量
const PI=3.14;
5.对象解构赋值
var user={
name:"zxcv",
age:20,
}
//利用解构赋值方式简化
const{name,age}=user
console.log(name,age);//zxcv 20
const{log}=console;
log(name,age)//zxcv 20
const{abs,ceil,floor,random}=Math;
log(random());
6.字符串扩展
字符串Unicode表示法
console.log("\u0061");//a
字符串遍历器接口（for…of循环遍历）
模板字符串（字符串中可嵌入变量）
var herf="https://www.baidu.com/";
var text="百度";
//字符串模板
var baidu=`${text}`
console.log(baidu);
7.字符串新增方法
这三个方法都支持第二个参数，表示开始搜索的位置
var allstr="helloworld";
var str="hel";
var str1="rld";
console.log(allstr.includes(str));//true
console.log(allstr.startsWith(str));//true
console.log(allstr.startsWith(str1));//false
console.log(allstr.endsWith(str));//false
console.log(allstr.endsWith(str1));//true
repeat（）：返回一个新字符串，表示将原字符串重复n次
var str="hel";
console.log(str.repeat(2));//helhel
padStart（）、padEnd（）如果某个字符串不够指定长度，会在头部或者尾部补全
var str="zxc";
console.log(str.padStart(6,"as"));//asazxc
console.log(str.padEnd(6,"as"));//zxcasa
trimStart（）、trimEnd（）选择性去掉前面或者后面的空格
var str=" zxc ";
console.log(str.trim());
console.log(str.trimStart());
console.log(str.trimEnd());
at（）接受一个整数作为参数，返回参数指定位置的字符，支持负索引
var str="hezro"
console.log(str.at(3));//r
console.log(str.at(-2));//r
8.数组扩展之扩展运算符
var arr=[10,20,30,40];
console.log(...arr);//10 20 30 40
替代函数的apply方法
var arr=[10,20,30,40];
//求数组中的最大值
console.log(Math.max.apply(null,arr));//40
//求数组中的最大值
console.log(Math.max(...arr));//40
合并数组
var arr=[10,20,30,40];
var arr2=[50,60,70];
//合并数组
console.log(arr.concat(arr2));//[10, 20, 30, 40, 50, 60, 70]
//合并数组
console.log([...arr,...arr2]);[10, 20, 30, 40, 50, 60, 70]
9.数组扩展_新增方法
Array.from（）：将类数组转换为真正的数组
Array.of（） ：将一组值转换为真正的数组
console.log(Array.of(10,20,30,40));//[10, 20, 30, 40]
Array（）：开辟空间
console.log(Array(3));//[empty × 3]
10.对象的扩展
属性的简洁表示法（*）
var name="zxcv";
//属性名与属性值是同样的变量名称，就可以省略
var user={
name,
age:20,
}
console.log(user.name);//zxcv
属性名表达式
var id="name";
var user={
[id]:"zxcv",
age:20,
}
console.log(user);//{name: 'zxcv', age: 20}
对象的扩展运算符
var z={
a:10,
b:20
}
var n={...z};
console.log(n);//{a: 10, b: 20}
11.函数扩展
箭头函数（Es6允许使用箭头（=>）定义函数）----简化回调函数
1. var fn3=(x,y)=>x+y;
console.log(fn3(10,20));//30
2.//用箭头函数改写
var fn4=(x,y)=>{
var z=10;
return x+y+z;
}
如果箭头函数直接返回一个对象，必须在对象外面加上括号
1.var fn5=function(){
return{
x:20,
y:10,
}
}
2.//用箭头函数改写
var fn6=()=>({ x:20, y:10,})
console.log(fn6);//()=>({ x:20, y:10,})
1. var arr=[10,20,30];
arr.map(function(element,index){//map 会遍历数组 [10, 20, 30] 的每个元素
console.log(element); // 对每个元素调用回调函数，打印该元素
})
2. //用箭头函数改写
arr.map((element,index)=>{
console.log(element);
} )
箭头函数里面根本没有自己的this，而是引用外层的this
12.Set数据结构（类似于数组，成员值没有重复值）
set本身是一个构造函数，用来生成set数据结构
var s=new Set();
var arr=[10,20,30,30];
arr.forEach(x=>s.add(x));//把arr的元素一次赋值给x，用add函数依次添加到集合s中
console.log(s);//{10, 20, 30}
set函数可以接受一个数组作为参数
var s=new Set([10,20]);
console.log(s);//{10, 20}
数组去除重复成员的方法
var arr=[10,20,30,30];
var s=new Set(arr);
console.log(s);//集合{10, 20, 30}
//set也可以使用扩展运算符来读取数据
console.log([...s]);//数组[10, 20, 30]
console.log(...s);//10 20 30
console.log([...new Set(arr)]);//[10, 20, 30]
字符串去重
console.log([...new Set("asdfsdf")]);// ['a', 's', 'd', 'f']
向set加入值时，不会发生类型转换
var s=new Set();
s.add(5);
s.add(5);
s.add("5");
console.log(s);//{5, '5'}
size属性（得到集合长度）
var s=new Set([5,"5"]);
console.log(s.size);//2 得到集合长度
13.set数据结构方法
add（）：添加
delete（）：删除
has（）：返回布尔值，表示是否有该元素
clear（）：清除所有元素
var s =new Set();
//添加
s.add(100);
console.log(s);//{100}
//判断是否有该元素
var flag= s.has(100);
console.log(flag);//true
//删除该元素
s.delete(100)
console.log(s);//size: 0}
s.add(200);
console.log(s);
//清除所有元素
s.clear();
console.log(s);//{size: 0}
14.promise对象
promise是异步编程的一种解决方案，简单来说就是一种容器，里面保存某个未来才会结束的事情
promise对象是一个构造函数，用来生成promise实例
//Promise函数的两个参数为resolve、reject
var id=document.getElementById("box");
function loadImageAsync(url){
const promise=new Promise(function(resolve,reject){
//异步处理
const image=new Image();//创建image对象
image.src=url;
image.onload=function(){
resolve(image);
}
image.onerror=function(){
reject(new Error("could not load image at"+url));
}
})
return promise;
}
const promise=loadImageAsync("")
promise.then(function(data){
//成功
box.appendChild(data);
},function(error){
//失败
box.innerHTML="图片加载失败"
})
15.Promise对象_Ajax实操
16.Async函数（使异步操作变为同步操作）
17.Class的基本语法
constructor（）方法是类的默认方法，一个类必须有 constructor（）方法
生成类的实例的写法，使用new命令
类不存在提升（必须先定义后使用）
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
getName(){
console.log(this.name);
}
}
var p=new Person("zxcv",20);
p.getName();//zxcv
18.Class的属性和方法
19.Class的继承（extends）（子类继承父类的子类和方法）
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
getName(){
console.log(this.name);
}
static getInfo(){
console.log("我很好");
}
}
class student extends Person{
constructor(name,age,school){
super(name,age);
this.school=school;
}
getSchool(){
console.log("文本");
console.log(this.school);
}
}
var s=new student("zxcv",20,"学校");
s.getName();//zxcv
// s.getInfo();//报错
student.getInfo();//我很好
s.getSchool();//文本 学校
20.Module语法
export 命令(export命令导出变量)
export var firstName = 'sxt';
export var lastName = 'itbaizhan';
export var year = 2000;
//export命令导出函数
export function add(x, y) {
return x + y;
};
import 命令(使用`export`命令定义了模块的对外接口以后，其他 JS 文件就可以通过`import`命令加载这个模块)
// name.js
export var firstName = 'sxt';
export var lastName = 'itbaizhan';
export var year = 2000;
// main.js
import { firstName, lastName, year } from './profile.js';
如果想为输入的变量重新取一个名字，`import`命令要使用`as`关键字，将输入的变量重命名
// value.js
export var value = 1;
// main.js
import { value as val } from './value.js';
除了指定加载某个输出值，还可以使用整体加载，即用星号（`*`）指定一个对象，所有输出值都加载在这个对象上面
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// main.js
import { area, circumference } from './circle';
// 可以修改如下
import * as circle from './circle';
export default 命令（用到`export default`命令，为模块指定默认输出）
// export-default.js
export default function () {
console.log('foo');
}
其他模块加载该模块时，`import`命令可以为该匿名函数指定任意名字
// import-default.js
import customName from './export-default';
customName(); // 'foo'
