ES6学习
兼容性
ie10+,chrome,firefox,移动端,nodejs
编译,转换
- 在线转换
- 提前编译
babel==browser.js
ES6:
- 变量
- 函数
- 数组
- 字符串
- 面向对象
- Promise
- generator,现在一般用async/await
- 模块化=>组件化=>原件
变量
var
1. 可以重复声明
2. 无法限制修改
3. 没有块级作用域({ } ,if(){ }, for(){ })
let 变量–可以修改,
1. 没有变量提升
2. 不可以重复声明
3. 不会给window增加属性
4. 变量私有
const 常量–不能修改,
1. 一旦声明必须赋值
2. 不能重复声明
3. 可以添加属性
函数–>箭头函数
function 名字(){};
()=>{};
1. 如果只有一个参数,()可以省略;
2. 如果只有一个return,{}可以省略;
3. 函数的参数:参数扩展/数组展开;默认参数;
4. 通常函数当做参数的时候使用箭头函数;(回调);
5. 里面的this指向是上一级;
6. 箭头函数没有arguments;//…parameter
7. 箭头函数不可以作构造函数,英文不可以使用new执行;
参数扩展
- 收集剩余的参数
*Rest parameter 必须放在最后; - 展开数组
展开后的效果,跟直接把数组的内容写在这儿一样;
默认参数
function show2(a,b=2,c=8){//默认参数
console.log(a,b,c);
}
show2(4,5,6);
解构赋值
1. 左右两边解构必须一样;
2. 右边必须是合法的数据解构;
3. 声明和赋值不能分开(必须在一句话里完成);
4. 如果变量名和属性名一样的,可以直接省略写法;
(let {name:name,age:age}={name:“小明”,age:12}
let {name,age}=={name:“小明”,age:12});
5. 使用数组的解构赋值的形式,如果等号右边不是一个数组,默认将其转换为类数组(类似数组的对象,必须有一个length属性);
6. 使用对象的解构赋值的形式,如果等号右边不是对象默认转换为对象;
字符串
两个新方法
- startWidth:以什么开始
- endsWidth:以什么结束
- padStart按照字符串补全字符串的指定长度;参数:1.长度2.指定字符;会自动截取(往前补)
- padEnd同上补全作用,(往后补)
- repeat(num)将字符串重复num次,(num小数会取整但不可以是负数或者Infinity)
反单引号
- 字符串连接
a${变量}
数组
map 映射–>一个对一个
[12,51,60,77,85]
[不及格,不及格,及格,及格,及格]
reduce 汇总
filter 过滤器
forEach 循环(迭代)
所有数组上的实例方法,参数是从索引n到索引m的,都是包含n不包含m;顾头不顾尾
let obj = {
_name: "ES5",
get name(){
//只要通过obj获取name属性就会触发这个函数;
//可以通过return 返回值;
return this._name;
},
set name(val){
// 只要通过obj给name属性设置值就会触发这个函数;
// val:设置的值
this._name = val;
}
}
console.log(obj.name);
obj.name = "ES6";
1. console.log(Array(7));
// [empty × 7] 七个空数组
2. console.log(Array.of(7));
// [7]; 解决了上述问题
3. Array.from(数组/类数组);
console.log(Array.from([1,2,3]));//[1,2,3]
console.log(Array.from("123"));//["1","2","3"],可以用于获取dom列表
4. copyWithin;
// 从原数组中读取内容替换数组的指定位置的内容
// 参数(替换的目标起始位置target,查找的起始位置begin,查找的结果位置end[不包括])
// 原数组长度不变,超出部分自动截取
5. fill;
// 按照指定字符填充数组,将数组的每一项都变成指定字符
6. filter;
// 遍历数组,根据返回值去过滤原数组
// let arr.filter(function(item,index){//处理并return;})
// 返回的新数组
7. find;
// 传入函数的;先遍历数组,一旦参数返回true停止查找,返回当前项;
findIndex;
// 同find,只是返回的是索引;
8. includes;
// 判断数组中有没有某一项
// 第二个参数可以指定查找的位置的索引
9. every
// 遍历数组,如果遍历每一项都返回true,最后结果为true,否则为false;
10. some
// 遍历数组,只要有一项为true,最后结果就是true
11. reduce
// 迭代(使用用function);参数(上一次的返回值,当前项)
12. reduceRight
// 跟reduce一样只是顺序是从右开始
13. keys
// 遍历每一项索引的接口,使用for...of 遍历
// for...of遍历不适用keys时遍历每一项的值
14. entries
// 遍历接口,可以遍历到索引和每一项;返回的是数组(索引,当前项)
for(let [index,item] of arr.entries()){console.log(index,item)}
扩展运算
1. 将非数组变成数组;let arr=“123”;[…arr]
2. 将数组变成非数组;let arr1=[1,2,3];let arr2=[4,5,6];//[…arr1,…arr2];
3. 求数组最大值;let arr=[5,6,84,563];//Math.max.apply(null,arr);//Math.max([…arr]);
对象Object
1. Object.is(n,m);判断两个值是否相等;
2. Object(true);//将参数变为对象;
3. Object.assign(obj1,obj2);合并对象;将obj2合并到obj1上并返回obj1;
4. ES7提供了对象的扩展运算符:let ALL={…obj1,…obj2};
5. Object.getOwnPropertyDescriptor;//获取一个对象某个属性的描述;(configurable是否可配置,是否可以删除这个属性,enumerable是否可枚举,value,writable是否可修改);
6. Object.keys();//返回值是一个数组,里面放着所有可枚举的属性;
7. Object.values();返回值是一个数组,里面放着所有可枚举的属性的键值;
8. Object.entries();返回值是一个数组,里面每一项也是一个数组[键,值];
Object中的set和get
ES6的面向对象
- class关键字,构造器和类分开了
- class里面直接加方法
继承:
- super–超类==父类
面向对象应用–React
react
- 组件化–class
- JSX
JSXbabelbrowser.js
JSON
JSON中的方法直接写,可以不写:function
Symbol
1. 是一个新的基本数据类型,而且是一个值类型;
2. 使用Symbol函数执行得到一个Symbol数据类型;
3. Symbol跟字符串差不多,但是使用Symbol函数得到一个数据是独立的每一个都是完全不同的;
4. let sy1 = Symbol();console.log(typeOf sy1);//symbol
5. Symbol可以接收一个参数,是对这个symbol数据的描述;
6. 即使描述一样,但是值也是不同的;
7. 一般当做对象的属性;任意一个Symbol()得到的值都是不同的;
8. Symbol值不可以跟其他值进行计算;不可以转换为数字;不可以进行字符串拼接;但是可以转换为boolean值;
9. 可以toString变成显示字符串;
10. Symbol.for() 如果之前有相同参数的Symbol的值,找到这个值并返回,如果没有就创建一个新的Symbol值;
11. Symbol.keyFor(symbol值);//找到使用Symbol.for创建的值的描述;如果使用的事Symbol创建的值是获取不到的;
Set
1. 类似数组,只有value没有键key;
2. 通过构造函数方式创建一个Set实例;new Set();
3. 参数是一个数组(或者类似数组只要是有iterable接口);
4. 有interable接口:数组,arguments,元素集合,Set,Map,字符串;
5. 会默认去重;
6. 属性size,Set实例的大小;
7. 属性add,增加;如果之前没有加上,有就不加,返回增加后的Set实例;可以使用链式写法;参数一次加一个
8. 属性delete,删除,返回Boolean值;true删除成功,false没有此项删除失败;
9. 属性clear,清空,没有返回值 undefined,不需要参数;
10. 属性has,判断有没有此项,返回Boolean值;
11. 属性forEach,遍历
-
Set的用法
-
数组去重
-
let arr1 = [4,2,5,8,3,9]; let arr2 = [5,7,6,3,4]; //两个数组的并集 function add(arr1,arr2){ return [...new Set([...arr1,...arr2])]; } console.log(add(arr1,arr2)); //交集 function common(arr1,arr2){ return arr1.filter(item=>arr2.includes(item)); } console.log(common(arr1,arr2)); //差集 function different(arr1,arr2){ return add(arr1,arr2).filter(item=>!common(arr1,arr2).includes(item)); } console.log(different(arr1,arr2));
-
Map
- Map用法
- 构造函数方式创建一个Map实例
- 参数是一个数组,数组每一项也是一个数组,有两项key和value;
- 一个对象属性名必须是字符串或symbol,如果你写的不是字符串也默认转为字符串;
- Map实例的key可以是任意数据类型;
Proxy
- 对目标对象默认操作的拦截/改写
- new Proxy({目标对象target},{拦截的方法})
- get只要是获取,例如:(proxy.name)就会触发
- 拦截操作参考 阮一峰教程;
Promise
- 异步:操作之间没啥关系,同步进行多个操作
- 同步:同时只能做一件事
- 异步:代码更复杂
- 同步:代码简单
Promise怎么用
模块化
- node 自带模块化,规范commonjs
- 三种 (一个js就是一个模块)
- 导入 require
- 导出 module.exports{x,x,x}或者exports.xx=xxx;
- 引用自定义模块时(放到node_modules中或者使用./)
- cmd sea.js/amd require.js
- 民间的
- 代码写入define
- umd 为了做一个兼容处理(综合各种规范的处理)
- ESmodule 是ES6提供的
- 如何定义模块 (一个js就是一个模块)
- 如何导出模块 (export)
- 如何引入模块 (import)
自己创建Npm包(nodeJS)
- 创建一个包信息npm init
- 将包直接复制到node_modules
- 在要引入的地方require(‘包的名字’);
ES6转换工具
- babel
- 全局安装npm i -g babel-cli
- npm init创建package.json
- 创建.babelrc文件(复制官网)
- “build”: “babel (要编译的文件名字) -d (生成的文件名)”
- webpack—一站式开发
http
- form最重要
- action提交到哪
- method–get/post/put/delete/head
- name–名字
- enctype
- application/x-www-form-urlencoded 名字=值&名字=值&…/默认,小数据
- multipart/form-data 分块/文件上传,大数据
- ajax,jsonp都是模拟
- websocket–双工,跨域
7324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
