es6-es11系列1-2基本语法

EECMA 组织每年都会更新一个版本
Es6对应 es2015
Es11 对应 es2020
以此类推

比较典型的es6新特性

可选链

list  =  res?.data?.list

使用SymboSymbo 消除魔法字符

const ls ={
        running:Symbol(),
        finish:Symbol ()
}
function  a (state){
        switch (state)
        case ls.running:
          console.log  r
        case ls.finish:
        ...
a(ls)

类数组转数组

Array.from(noteList)

利用nrm命令 快速切换源地址

npm i -g nrm  
nrm ls
nrm test taobao 
nrm  use  taobao

基本语法

作用域

delete  只能删除属性  不能删除变量
let定义的变量不会像var那样被挂到window对象上
let  不会像var那样重复声明
let  不存在变量提升 ,变量定义之前不能被打印出来
let  会形成暂时性死区,变量未声明之前不能被使用
let有块级作用域

es5 中如何定义常量

使用Object.definepropert方法
Const定义的引用类型  可以被添加新的属性
可以通过object.freeze  冻结对象,仅能对对象做浅冻结
结构赋值可以设置默认值,例如  let [  a,  b,  c  =2 ]  =  arr

es5 的数组遍历方法

forEach 方法不支持  break和  continue  无法终止循环
map 可以返回数组中的每一项组成一个新 的数组  例如  item +  1
filter  返回满足条件的数组项  例如  return item >2
some  判断数组中的值只要有一个满足条件则返回ture
every  要求没一项都满足条件才返回ture
reduce 第一个参数是上次的返回值,第二个参数是当前的值,适合做累加,求最大值,去重
for in 遍历数组时会把隐式原型的值也遍历出来

es6 数组新增特性

find  可以返回数组中满足条件的数组项
findIndex  返回满足条件的数组项下标
for  of  可以遍历数组的index  和  value
for(  [index,value]  of arr.entries() )
Array.of(1,2,3) //通过参数创建数组 [1,2,3]
arr.copyWithin(1,3) 下标为1的值替换下标为3开始到末尾的所有值
[1,2,3].fill(‘a’,0,2) // [‘a’, ‘a’, 3] 将数组中下标0到2的值填充为 ‘a’
arr.includes(1,2) 数组中是否包含1和2
indexOf 不能检测到 NaN includes则可以

类数组相关

html collectionname: get elements  by tag name
nodelist :   query selection
判断是否是数组
instanceOf array
调用对象的push方法  如果报错则不是数组
arguments 是对象不是数组
es5遍历类数组使用Array. prototype. forEach. call(arguments)
Es6 新增Array.from方法来转换对象为数组

函数的参数
es6的参数可以设置默认值
有默认值的参数建议放到最后,意味着可以省略
函数的length 返回的是为指定默认值的参数的数量
参数作用域的特性,如果参数设置了默认值则会形成作用域

let x=1
fun foo(x, y=x){
    console.log(y) // 2
}
foo(2) 

函数有name属性 如果new Function 则name值为anonymous ,如果使用了foo.bind({}) 则name值为bond

扩展运算符和rest参数

扩展运算符
打散…arr
合并 […arr1,…arr2] 或arr1.push(…arr2)
剩余参数

fn foo(x,...y) // 1 [2,3]
foo(1,2,3)

let [x,...y] =[1,2,3]

箭头函数特性
没有this
不能被new
没有arguments对象,可以使用…args代替

对象的扩展

Object.is(NaN,NaN) // true
console.log(NaN == NaN) // false
Object.is(Obj1,Obj2) // false
console.log(Obj1 == Obj2) // false 

因为引用类型的对象指向的内存地址不一样

Object.assign(a, b)
console.log(‘name’ in Person) // ture
let arr = [1,2,3]
2 in arr // 数组对象的in 判断的是下标处是否有值

对象的几种遍历方式

for(let key in obj){
	let value = obj[key}
}
Object.keys(Obj).forEach(key =>{
	let value = obj[key}
})
Object.getOwnPropertyNames(obj).forEach(key =>{
	let value = obj[key}
})
Reflect.ownKeys(obj).forEach(key =>{
	let value = obj[key}
})

深拷贝和浅拷贝
浅拷贝

JSON.stringify(obj)
JSON.parse(str)

弊端:
Date 对象变为字符串
RegExp、Error 对象变为空对象 {}
函数、undefined、Symbol 属性丢失
NaN、Infinity、-Infinity 变为 null
enumerable 为 false 的属性丢失
循环引用的对象不能正确拷贝

深拷贝网络上自行搜索吧,很常用

判断是对象还是数组 除了instanceOf 也可以用

Object.prototype.toString.call(data).slice(8,-1)
本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:318 次浏览