es6学习笔记(一)

2019-08-14 10:26:04来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

babel : 一个js编译器

一、let const 

js作用域:全局作用域  、 函数作用域 、块级作用域(新增)

  let/const:

  • 无变量提升
  • 不能重复定义
  • const的值如果是基本数据类型,则定义后不能改变;如果是引用数据类型,则可以改变其中的项
  • 存在暂时性死区(TDZ)
1 var arr=[]
2 for(var i=0;i<5;i++){
3     arr[i]=function(){
4         console.log(i);
5     }  
6 }
7 arr[3](); //6
for(let i=0;i<5;i++){
  arr[i]=function(){
      console.log(i);
  }  
}
arr[3]();  //3

Object.freeze()  冻结对象,冻结后无法改变

1 const arr = Object.freeze(['apple','banana'])
2 
3 arr.push('x'); //报错
4 
5 const arr1 = [1,2]
6 
7 arr1.push(3); //正确操作

二、解构赋值

let a=12,b=5,c=6;
let arr=[12,5,6]
//解构赋值将以上两者结合
let [a,b,c] = [12,5,6]
console.log(a); //12
console.log(b); //5
console.log(c); //6
//解构赋值左右两边格式要保持一致
let json={
    name:'x',
    age:18,
    job:'y'
}
let {name,age,job} = json;
console.log(name) //x
console.log(age) //18
console.log(job) //y

//别名
let {name,age,job:a}=json //a为job的别名
console.log(a) //y

//默认值
let [a,b,c=0] = [1,2]
console.log(a,b,c); //1,2,0

三、字符串模板 ``

优点:可以随意换行

1 let x=1,y=2;
2 console.log(`abcd${x}efdh${y}`); //'abcd1efdh2'

四、字符串新增

  • str.indexOf(item); 返回item在str的位置,没有则返回-1
  • str.includes(item)  查找str中是否存在item,返回true/false
  • str.startWidth(item) str是否以item开头,返回true/false
  • str.endWidth(item)  str是否以item结尾,返回true/false
  • str.repeat(count) 将str重复count次
  • str.padStart(len,'xx'),填充字符串,len为填充后字符串的长度,XX为填充元素,在字符串开头填充
  • str.padEnd(len,'xx'),填充字符串,同上,在字符串末尾填充
 1 //字符串查找
 2 let str="apple pear pitch";
 3 
 4 str.indexOf('apple'); //0
 5 
 6 str.includes('apple'); //true
 7 
 8 //判断浏览器是否为Chrome
 9 if(navigator.userAgent.includes('chrome')){
10   //……  
11 }
12 
13 str.startsWith('apple'); //true
14 
15 sre.endWidth('apple'); //false
16 
17 let a='x';
18 a.repeat(3); //'xxx'
19 
20 a='09';
21 a.padStart(5,'0'); //00009
22 a.padEnd(5,'0'); //09000

五、函数

 1 //默认参数
 2 function show(a,b){//es5
 3   a = a || 1
 4   b = b || 2
 5   //....  
 6 }
 7 function show(a=1,b=2){//es6
 8 //...
 9 }
10 function test({x=0,y=0}){
11     console.log(x,y)
12 }
13 test({}) //0 0
14 function test1({x=0,y=0}={}){
15 
16 }
1 //默认参数已定义的情况
2 function show(a=5){
3     let a=10  //报错
4     console.log(a);
5 }
//扩展运算符 ... 作用:[展开数组,剩余参数]
let arr = ['x','y','z']
console.log(...arr)  //展开x,y,z

//优化arguments转数组
function show(...a){
     console.log(a); //[1,2,3,4,5]
}
show(1,2,3,4,5)

//es5伪数组转数组
Array.prototype.slice.all(null,arguments)
//箭头函数
()=>{ //...  }
let json = {
    id:1,
    show:function(){
        setTimeout(function(){
            console.log(this.id);//this指向window
        },2000);      
    }
}

let json1 = {
    id:1,
    show:()=>{
        setTimeout(function(){
            console.log(this.id);//this指向定义时对象,window
        })
    }
}

箭头函数与普通函数的区别:

  • this指向调用函数对象
  • 无arguments。可用...args作为生于参数代替
  • 不能用作构造函数

六、数组

数组的循环方式:

  • arr.forEach()
  • arr.map()
  • arr.filter()
  • arr.some()
  • arr.every()
  • arr.reduce()
  • arr.reduceRight()
  • for

forEach  map  filter some  every的参数(handler,this指向)----handler(item,index,array)

reduce和reduceRight的参数:((prev,cur,index,arr)=>{})

  prev为上一次的返回值,cur为当前值

新增:

  • 幂运算 **
  • for...of循环
    • arr.keys() 索引
    • arr.values() 值
    • arr.entries()  实体

补充:剩余参数

//复制数组
let arr = [1,2,3]
let arr1 = [...arr]

//伪数组转数组
let arr2 = Array.from(fake)
let arr3 = [...fake]

//es5
[].slcie.call(fake)

Array上新增方法:

  • Array.from()  定义数组
  • Array.of()  将一组值转为数组
  • arr.find()   查找数组中第一个符合条件的成员,找不到返回undefined
  • arr.findIndex((val,index,arr)=>{...})  查找数组中第一个符合条件的索引,找不到返回-1
  • arr.fill(填充的东西,开始位置,结束位置)  填充数组
  • arr.includes(item) 数组书否包含item,返回true/false
let obj = {
  0:8,
  1:9,
  2:10,
  length:3
}
let a1 = Array.from(obj);
console.log(a1) //[8,9,10]

let a2 = Array.of(1,2,3,4,5); //[1,2,3,4,5]

a1.find((val,index,arr)=>{
    return val>8;
});//9

七、对象

 1 //对象的简洁语法
 2 let name = 'name';
 3 let age=18
 4 let obj = {
 5     name,
 6     age,
 7     showA(){//注意这里千万不要用箭头函数
 8         return this.name
 9     }
10 }
11 
12 //Object.is()  用于比较两个值是否相等
13 NaN == NaN //false
14 Object.is(NaN,NaN) //true
15 +0 == -0 //true
16 Object.is(+0,-0) //false
17 
18 //Object.assign()用于合并对象
19 Object.assign(target,source1,source2,...)

对于Object.assign(): 当属性重复时,后面的覆盖前面的

循环:Object.keys()  Object.values()  Object.entries()

解构赋值应用:let {keys,entries,values} = obj;


原文链接:https://www.cnblogs.com/qiyangliu/p/11299059.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:文件导入功能的前端实现

下一篇:前端笔记之React(七)redux-saga&amp;Dva&amp;路由