注:
部分方法ES6语法有浏览器解析差异，所以暂且以了解为主
SET
//Set 本身是一个构造函数，用来生成 Set 数据结构
var s = new Set(['a','b','c']);
s.add('d')
s.add('d')
s.add('d')
s.add('NaN')
s.add('NaN')
console.log(s) //["a", "b", "c", "d", "NaN" ] 不会添加重复值
s.delete('a');
console.log(s) //[ "b", "c", "d", "NaN" ]
console.log(s.has('b')) //true
s.clear();
console.log(s) //[]
var s = new Set(['a','b','c']);
s.forEach(function(item,index,set){
console.log(item,index,set) // set中item与索引值相同
})
var s = new Set(['a','b','c']);
var keys = s.keys();
console.log(keys); //{"a", "b", "c"} 谷歌浏览器在 版本 71.0.3578.98（正式版本） （64 位）
//{ } 在火狐浏览器下，为空 版本64.0.2
var s = new Set(['a','b','c']);
var values = s.values();
console.log(values); //{"a", "b", "c"} 谷歌浏览器在 版本 71.0.3578.98（正式版本） （64 位）
//{ } 在火狐浏览器下，为空 版本64.0.2
应用范围，利用其不添加重复项目的特点，
例如：数组去重
var arr = [1,2,3,4,5,6,7,3,2,3,4,NaN]
var s = new Set(arr); //Set构造出来的是对象，但是不是数组
//console.log(arr instanceof Array);
arr = [...s] //将对象转化为数组，通过数据结构的方式完成
console.log(arr);
Map
var obj1 = {a:1};
var obj2 = {b:2};
var m = new Map([['a','b']]);
console.log(m)
console.log(m.get('a')) //b
m.set('a',1);
console.log(m.get('a')) //1
//m.delete('a')
m.has('a')
console.log(m.has('a')) //true
//m.clear();
m.set('a',1);
m.set('b',2);
m.set('c',3);
console.log(m)
m.forEach(function(item,index,map){
console.log(item);
})
var keys = m.keys();
console.log(keys.next()) //遍历出键名
console.log(keys.next()) //遍历出键名
console.log(keys.next()) //遍历出键名
console.log(keys.next()) //遍历出键名
https://www.babeljs.cn
//---函数参数默认值
function add(a,b=10){
return a+b;
}
---箭头函数 (一种简洁的书写方式)
var add2 = function add2(a, b) {
return a + b; //如果语句不复杂可以继续简写
};
var add2 = (a,b) => a+b //如果语句为1句，且返回值
//如果想返回一个对象
var add2 = (a,b) => ({c:1}) 需要额外添加一个小括号，包裹
var add2 = (a,b) => ([1,2,3]) 返回的一个数组
var add2 = (a,b) =>{
return a+b
}
//参数只有1个，则可以省略小括号
var add2 = a => a*200
//示例 数组筛选出大于20的项目
var arr = [1,5,151,5,15,35,40];
var result = arr.filter(function(item){
return item > 20;
})
console.log(result); //[ 151, 35, 40 ]
简写
var arr = [1,5,151,5,15,35,40];
var result = arr.filter(item => item > 20)
console.log(result);
var fn = () =>{
console.log(this) // this不管函数调用方式，都指向window
console.log(arguments) //箭头函数不支持arguments
}
fn()
//不支持arguments可以使用剩余参数模拟
var fn = (...r) => {
console.log(r) //[ 1, 2, 3, 4 ]
}
fn(1,2,3,4)
var a = new fn(); //报错 fn is not a constructor 箭头函数无法使用new
promise
var p = new Promise((res,rej)=>{
//你的逻辑，判断返回值以及返回函数参数
//res,rej只会执行一个，且立即执行，PromiseStatus 里面有三个状态 等待，成功，失败（resolved,rejected）
res('成功'); // return res，rej看具体需求
})
//写法1
p.then((data)=>{
//promise执行后的调用回调函数
console.log(data)
},()=>{
console.log('失败');
}) ///上面成功失败，也可写成另外一种方式
//写法2
p.then(()=>{
console.log('成功')
})
p.catch(()=>{
console.log('失败')
})
p.then(()=>{}) 是有返回值的，返回值还是promise
所以可以写成链式调用
p
.then(()={
console.log(1);
}) //then中再次调用函数中，成功失败取决于上一个函数返回值
.then(()={
console.log(2);
})
.catch((err)={
console.log(err)
})
JS文件之间的数据依赖，引入 module
//---javascript 外链引入 defer 属性
<script src='xxxxx' defer></script> //这个script标签会在其他没有defer属性的JS文件引入后，再执行
//---script模块化 (注：必须服务器环境下使用，否则报错)
<script src='xxxx' type='module' defer></script> //一旦使用module，默认增加defer属性
声明的变量，在模块内部是可以使用
从某路径下导入JS中的变量n
import {n,m} from 'xx/xx.js';
某JS文件中提供的对外接口
export {n,m};
//引入所有数据挂载在一个变量下
import * as tool from 'xxx/xxx.js';
console.log(tool.xx)
注：引入的变量是常量，无法修改，但是可以在常量导出文件内，可以对其添加方式，使其修改
----数组新增 方法
var arr = new Array(10,20,30);
var arr = Array.of(10,20,30);
var arr = Array.of(10); //创建一个数组，数组只有一项，值为10
var arr = new Array(10); //创建一个长度为10的数组
Array.isArray(arr); //判断是否为数组
var arr = Array.from(xxx) //将XXX转化为数组
arr.find(function(item){ //返回第一个符合的具体值
return item > 50;
})
arr.findIndex(function(item){ //返回第一个符合的索引
return item > 50;
})
----对象新增方法
Object.is(1,1) //true
Object.is(1,'1') //false
Object.is(NaN,NaN) //true 在ES5中 console.log(NaN === NaN) // false ，是很特殊的，ES6完善了这个判断方法
//-----对象默认值添加
var para = Object.assign(修改目标,设置值,默认值,新增项目);
例：
var para = {}
var ob1 = {a:1}
var ob2 = {a:55}
Object.assign(para,ob1,ob2,{b:2});
console.log(para); //{a: 55, b: 2}
网友评论