0、webpack配置、安装
<Option key={'全部'} value= {''} >全部</Option>
es6:
块级作用域:{}, let
常量:const ,分配后的值的过程不能改变
解构数组:let [v1, v2, v3] = function(){
return [1, 2, 3];
}();
console.log(v1, v2, v3);
解构对象:let {v1:v1, v2:v2, v3:v3} = function(){
return {
v1:2,
v2:4,
v3:6
}
}();
console.log(v1, v2, v3);
模版字符串:`dddd,${变量名}` 反单引号之间可以任意换行
带标签模版字符串:
let dessert = 'xx',
drink = 'ddd';
let bf = kitchen `今天早餐是\n ${dessert} 与 ${drink}!`;
function kitchen(string, ...values) {
let result = '';
for(var i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
console.log(bf);
startsWith|endsWith|includes字符串是否开头|结束|包含
函数参数的默认值:function aa(d = 'd', w = 'w'){};
...:展开数组
传递多个参数形式:function cc(arg1,arg2,...args)
解构对象参数
函数名字属性[name]:保存的是函数的名字
箭头函数:
let 函数名 = (参数列表) => {语句块}
对象表达式:{
dessert,
drink,
show(){}
}
两个值是否相等:Object.is();
复制对象值到另一个对象:Object.assign(om1,oy2);
设置|获取对象的prototype: Object.set|getPrototypeOf();
创建一个对象:Object.create(o);
es6的__proto__可以修改设置 <=> prototype 继承了指定对象(属性、方法);
super:拿到父类的对象;
Iterators:迭代器 => {value:x, done:true|false}; next(value, done); Generators迭代生成器
手动创建迭代器:
function iterators(arr) {
let i = 0;
return {
next() {
let done = (i >= foods.length);
let value = !done ? foods[i++] : undefined;
return {
value:value,
done:done
}
}
}
}
function* iitt(arr) {
for(var i=0; i<arr.length; i++) {
yield arr[i];
}
}
var iterator = iitt([1,3,5]);
类:class Chef{
constructor(food) {
this.food = food; //类属性
}
cook() { //类方法
console.log(111);
}
get 方法() {
return 属性之类的
}
set 方法() {
设置操作
}
}
console.log(对象.方法 = 值) //通过set方法,设置值
console.log(对象.方法) //通过get方法,获取值
类中的静态方法:在方法名加个关键字static。既可, 静态方法不能访问对象方法
继承:extends
class Person {
constructor(name, birthday) {
this.name = name;
this.birthday = birthday;
}
intro() {
return `${this.name},${this.birtyday}`;
}
}
class Chef extends Per
constructor(name, birthday) {
super(name, birthday);
}
}
Set:内对容不能重复 add|size|has|delete|clear|forEach(val)
Map: key-value形式 set|size|has|delete|clear|forEach
Module:模块 通过export导出变量、函数等模块:export {属性、方法名}
模块默认导出:在函数名称前加入export default; export {default as 方法|属性}
import [模块[as 模块别名]...]| * as 名称 from 模块路径 导出具体模块|所有模块
导入、导出都可以取别名;
webpack配置:
npm init 生存json文件
npm install -g 包名| 包名 --save-dev
npm update 包名
npm uninstall 包名
安装webpack : npm install -g webpack 模块加载器兼打包工具,支持AMD、CMD语法
打包命令:webpack 源码js文件地址 输出js文件地址
模块加载器:(各种不同文件类型的资源,webpack都有对应的模块加载器[loader]).
安装loader: npm install xxx-loader[] ... ]--save-dev
require('style-loader!css-loader!../css/style.css');
webpack配置文件说明:
module.exports = {
entry: 打包入口文件路径([]),
output: { //配置打包结果
path: __dirname + //定义输出文件路径,
filename: //指定打包文件名称,
},
module: { //定义对模块的处理逻辑
loaders: [{ //定义一系列加载器
test: //正则,
loader: string|array,处理匹配到的文件,
include: string|array 包含的文件夹,
exclude: string|arge|array 排除的文件夹,
}
},
resolve: {
extensions: ['', '.js', '.css', '.jsx'] //自动补全识别后缀
}
};