web前端--ES6补充


1、let 与const:暂时性死区
• 指向内存地址而不是变量,基本数据类型变量在内存地址中的位置不变,故不变;
• 引用数据类型(如对象,数组),可变化;
2、声明变量的6种方法
• let,const,
• var function
• import,class
3、模板字符串
• 模板字符串中嵌入变量,需要将变量名写在${}之中 this is ${user.name}.
• 可以使用字符串,若变量不存在则报错
4、函数扩展
• 参数可以有默认值
5、ES6遍历对象得到key的5种方法
• for … in
• Object.keys(obj) 返回数组
• Object.getOwnPropertyNames(obj) 返回数组,前三个都不包含symbol属性
• Object. getOwnPropertySymbols(obj)返回数组,包含symbol属性的key
6、Symbol第七种数据类型
• 用途:用于object对象的属性,保证属性唯一;
• 属性名遍历:Symbol变量作为属性,不是私有,但是for in ,Object.keys()等方式不能拿到Symbol的属性名,只能通过Object.getOwnPropertySymbols获取属性名;
• 第七种数据类型,相同参数的symbol值不相同 symbol(abc)===symbol(abc) //false
• toString()可以转为字符串;let sym = Symbol(); sym.toStriing(); //“Symbol()”
• symbol值不相同,可以作为对象的属性来区分同名对象;如
• let obj={};
obj[sym1]=’hello’; //相当于key:value,即sym1:‘hello’
let obj2={
[sym2]:’world’
}
7、WeakSet
• 与set作用相同,只是weakset只能用于对象(obj或数组)去重;
• weakset是弱引用,不能进行遍历,可以通过创建weakset,让Foo实例方法只能在实例中使用,foos对实例的引用,不会被计入内存回收机制
8、promise
• promise().then().catch
• 第一个参数是resolve,回调成功进入第一个then;
• rejected:失败进入catch或第二个then;
9、async await
• async表明函数中有异步操作,async返回一个prmise,
• 根据promise的resolve或reject执行await,reject报错则则进入catch,resolve成功则接着执行await后面;
• await放入try-catch,捕捉错误
async function asyncPrint(ms) {
try {
console.log(‘start’);
await timeout(ms); //这里返回了错误
console.log(‘end’); //所以这句代码不会被执行了
} catch(err) {
console.log(err); //这里捕捉到错误error
}
}
asyncPrint(1000);
10、class
• 类定义属性和方法class,constructor,method1方法
• get,set方法待查
11、数组各种方法
12、字符串方法
• includes 返回true/false 数组和字符串都支持
• startsWith 和endsWith: 返回是否以某字符(或某几个)开头或结尾,true/false。 str1.startsWith(‘hello’)
• startsWith 和endsWith(第二个参数):str1.startsWith(‘hello’, 0)0参数是开始位置
• repeat :str.repeat(3)str重复3遍
• 前后补全:padStart(5,ab)–用ab把字符串补全到5个字符;padEnd()
• 前后去除空格:trimStart(),trimEnd() const newStr = str.trim();去除前后,返回新字符串;
13、数值方法Number
• Number.isInteger(true/25/‘25’) false/true/false 判断整数,是数值才为true
• Number.parseInt() Number.parseFloat()判断
• let y = 0; y = y || 100(y为空时,赋值100); y值为100;
14、BigInt第八种数据类型
• 大整数无位数限制,末尾加n,12n, typeof 12n(bigint)
• 大整数和整数不相等:1n==1– false
• 通过Number可转换大整数为整数,数值过大则显示不准;
• BigInt构造函数思路:先转为Number,再转为BigInt; BigInt(1) BigInt(‘1’) 都可以, BigInt(‘1n’)报错(字符串’1n’不能转为数字);
15、函数扩展语法
(1)参数默认值
function(x, y = 1) [undefined, 1]
(2)参数解构赋值
• function({x, y = 1}) 传入参数为对象,进行解构赋值
• function({x, y = 1} = {} ) 未传入参数,默认为空对象,使用【undefined,1】
• (function({x, y = 1} = {} )).length = 1 length值为没有默认值的参数个数;
• (function(…args)).length = 0;
(3)name属性
• const fun1 = function add(){} fun1.name // add
• function add(){} add.name // add
(4)箭头函数
• 省略写法:var sum = (num1,num2) => num1+ num2; 只有一行语句时省略{}和return;
• var sum = function(num1, num2) { return num1 + num2};
• rest剩余参数:const Number = (…num) => num; Number(1,2,3) //[1,2,3]
• this指向:一直指向定义时的this,即在参数中使用的this;箭头函数创建一个新的内存,指向新内存,即指向定义;
• function foo(){ setTimeout(()=>)}
• 柯里化currying:将多参数变为单参数形式;
• catch在ES2019中:try{} catch(err){} 或catch{}都可以;
16、 数组方法
find、findIndex
• find返回符合条件的第一个值,arr.find(i => i <0); 不存在符合条件的-> undefined
• findIndex返回第一个index,没有则-1;
• includes方法返回true/false,相比indexOf(返回第一个位置或-1)优势:语义明显,不用和-1 比较
(1)改变原数组
• pop():删除数组最后一个元素,并返回该元素
• push():在数组尾部添加元素,并返回更新后的数组长度
• shift():删除数组的第一个元素,并返回该元素
• unshift():在数组第一位添加元素,并返回更新后的数组长度
• sort():对数组排序(按字符ASCII进行排序),也可添加回调函数按照想要的规则排序
• reverse():数组反转
• splice(index, 个数, 新数据):返回被删除元素所组成的数组。
(2)不改变原数组
map,reduce,foreach,indexof findindex,some,every,concat
• map返回一个新数组
• reduce
let res = args.reduce((sum,i)=>{
return sum += i;
},0);
//或者
结果:
四个参数:
累计值:必需
当前值:必需
当前索引:可选
当前值所在数组:可选
作用:
1、数组求和:return args.reduce((a,b)=> a+b);
2、扁平化flat:arr.reduce((res,i)=> res.concat(i), []);
• concat:返回新数组
let newArr = [].concat(1,[2,3],[4]);// 是否有扩展符…不影响
• 其他
17、对象
(1)对象简写
let num =’1’;
let obj1 = {num}; //定义对象,属性名就是num,值是1
等价于: let obj1 = {
num:num,
method(){…},}
(2)5种方法对象遍历 Object.getOwnPropertyNames(obj1)