关于es6新语法的一些特性

99年的小白
951 阅读5分钟

有关let，const，var三种声明变量方式的不同和相同之处

  • var声明的变量会挂载到window上，而let和const声明的变量不会

  • var 存在变量提升，而let和const不存在变量提升，let和const上面的区域称为“暂时性死区”，在定义之前不可以使用

  • let和const的声明会形成块级作用域

  • 在同一个作用域下，let和const不能再次声明同一个变量，而var可以

  • let定义变量之后可以修改，而const表面上像是声明一个“常量”。const并不是保证变量的值不得改动，而是指变量指向的内存地址不得改变。对于简单数据类型（Number、String、Boolean），值就保存在变量指向的内存地址，因此等同于常量；而对于复合数据类型（主要是对象和数组），变量只是保存了指向堆内存的地址，至于堆内的数据是不是可变的，就不能控制了。

解构赋值和扩展运算符

  • 解构赋值 左右两边结构必须一样 右边必须有值 声明和赋值不能分开

    let [a,b,c] = [1,2,3];

    let {name,sex,age} = {name:'zhangsan',sex:'女',age:'19'};

    let [one,two,three,four] = [{a,b,c},[1,23],'8','zhangsan'];

    let [{x,y,z},[c,d],two,name] = [{a,b,c},[1,23],'8','zhangsan'];

  • 扩展运算符

    ...三点运算符 展开数组 默认参数

    let arr1= [1,2,3] let arr2 = [4,5,6]

    let arr = [...arr1,7,8,9,...arr2,'zhangsan','lisi'];

    function show(a,b,c) { console.log(a); console.log(b); console.log(c); } let arr = [1,2,3]

    show(...arr);

    function demo(a,b,...args){ console.log(args); }

    demo(1,2,3,4,5,6);

新增模板字符串

 startsWith    判断以什么字符串开头
 endsWith      判断以什么字符串结尾

  • 模板字符串
    模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

    let title = '黄天不负有心人'; let slogen = '成就自己的只需要一套精品';

    let jsx = <h1>${title}</h1><b>学习努力</b><div><i>${slogen}</i></div>

Proxy

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

箭头函数和this的指向问题

  • ES6 允许使用“箭头”（=>）定义 不需要参数或需要多个参数，就用圆括号代 代码块部分多于一条语句，就用大括号括起来，并且用return返回 箭头函数返回对象时，必须在对象外面加上括号 箭头函数使得表达更加简洁 箭头函数能够简化回调函数

  • 关于箭头函数中的this的指向

    普通函数的this：指向它的调用者，如果没有调用者则默认指向window. 箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

    综上：箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。

  • function换成=>放在参数和函数体中间

    1、如果没有参数，或有多个参数时，就需要使用()来定义参数列表; 2、如果只有一个参数，可以不用(); 3、如果函数体中只有一条语句，可以不用{}，语法中会自动加入return 4、箭头函数在返回对象时，必须在对象外面加上()才可以

    const fun= (x) =>{ console.log(x); return x*x }; console.log(fun(100));

  • 箭头函数与普通函数对象实例 1、定义一个div，设置他的样式 2、获取他的id，然后给他一个点击事件 3、 const box= document.getElementById('box'); box.onclick=function (){ //重新定义this，此时的对象才是box对象，因为里层调用一个函数，会 默认为Windows对象 const obj=this; setTimeout(function (){ obj.className= 'color'; console.log(obj); },1000)} 4、箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。 box.onclick=function (){ setTimeout(() =>{ console.log(this); this.className= 'color'; // console.log(obj); },1000) }

数组中新加的高级函数

  • 过滤函数filter

  • 映射函数map

  • 汇总函数reduce

  • 出一个实例 有一个商品列表 1、将大于10元以上的商品打折，取出大于10元以上的商品； 2、将10元以上的商品打5折； 3、打完折的商品总价是多少;

1、定义一个数组let goods = [12,30,34,60,20,25]

2、使用过滤函数filter取出大于10的数
let goods1 = goods.filter(function (n){
    return n>=10;
})
3、使用映射函数map直接返回一般的数字
console.log(goods1);
let goods2 = goods1.map(function (n){
    return n*0.5;
})
4、使用汇总函数reduce求和
let sum = goods2.reduce(function (s,n){
    return s+n;
},0)

 //第一次，s 参数是0，n是数组中的第一个元素6
//第二次，s 参数是第一次回调函数的返回值，n是数组中的第二个元素15
//第三次，s 参数是第二次回调函数的返回值，n是数组中的第三个元素17
//第四次，s 参数是第三次回调函数的返回值，n是数组中的第三个元素30

简单的方法，使用链式编程，直接实现题目

let goods = [12,30,34,60,20,25]
let sum =goods.filter( n => n=>10).map( n=> n*0.5).reduce((s,n)=>s+n);

es6新增的数据结构map和set

image.png

  • 2.Map函数的作用

    json的键(key)只能是字符串，map的key可以是任意类型。

    map.set(key,value) 设置一个值
    map.get(key) 获取一个值
    map.delete(key) 删除一项
    map.has(key) 判断有没有key
    map.clear( ) 清空

  • 极速更新中.............

avatar
文章
阅读
粉丝