ES6新语法(二)

Wesley13
• 阅读 653

1.解构

在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。

解构:自动解析数组或对象中的值,并赋值给指定的变量。、

1.1****数组解构

var arr = [3,4,5];
    var [a, b, c] = arr;
    console.log(a, b, c);
    
    //还可以忽略值 需要使用,占位
    var arr = [3,4,5];
    var [a,, c] = arr;
    console.log(a, c);

    //函数返回值为数组,进行解构
    function f5(){
        return [1,2,3];
    }
    var [a, b, c] = f5();
    console.log(a, b, c);

1.2对象解构

将对象中的成员值,取出并赋值给多个变量(变量名与对象成员名一致)

var person = {
    "nickname": "老三",
    "age": 30,
    "sex": "男"
};
//解构时 {}中的变量名,不能加引号
var {nickname, age, sex} = person;
console.log(nickname, age, sex);
//可以忽略值  直接忽略 不需要占位
var {nickname, sex} = person;
console.log(nickname, sex);

1.3函数参数与解构

函数参数使用解构数组或解构对象形式

//1.函数形参,使用解构数组形式,调用函数时需要传递数组实参
function f1([x,y,z]){
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);

//相当于
/*
function f1(a){
      var [x,y,z] = a;
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);
*/

//2.函数形参,使用解构对象形式,调用函数时需要传递对象实参
function f2({nickname,age,sex}){
      //变量名与对象成员名一致
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);

//相当于
/*
function f1(a){
      var {nickname, age, sex} = a;
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);
*/

1.4默认值与解构数组

函数参数使用解构数组 并设置默认值

<script>
//1.函数参数使用解构数组,调用函数不传参数会报错
function fn([x, y, z]){
      console.log(x, y, z);
}
fn(); //会报错
</script>

<script>
//2.函数参数使用解构数组,对整个数组设置默认值为空数组
function f1([x, y, z] = []){
      console.log(x, y, z);
}
f1(); //不报错  x y z 都是 undefined

//3.函数参数使用解构数组,对整个数组设置默认值,数组中每个变量对应一个默认值
function f2([x, y, z] = [1,2,3]){
      console.log(x, y, z);
}
f2(); //不报错  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6


//4.函数参数使用解构数组,对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值
function f3([x=1, y=2, z=3]=[]){
      console.log(x, y, z);
}
f3(); //不报错  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6
</script>

1.5默认值与解构对象

函数参数使用解构对象 并设置默认值

<script>
//1.函数参数使用解构对象,调用函数不传参数会报错
function fn({x, y, z}){
      console.log(x, y, z);
}
fn(); //会报错
</script>

<script>
//2.函数参数使用解构对象,对整个对象设置默认值为空对象
function f1({x, y, z} = {}){
      console.log(x, y, z);
}
f1(); //不报错  x y z 都是 undefined

//3.函数参数使用解构对象,对整个对象设置默认值,对象中每个变量对应一个默认值
function f2({x, y, z} = {"x":1,"y":2,"z":3}){
      console.log(x, y, z);
}
f2(); //不报错  x=1 y=2 z=3
f2({"x":4,"y":5,"z":6}); // x=4 y=5 z=6


//4.函数参数使用解构对象,对整个对象设置默认值为空对象, 在解构对象中对每个变量设置一个默认值
function f3({x=1, y=2, z=3}={}){
      console.log(x, y, z);
}
f3(); //不报错  x=1 y=2 z=3
f3({"x":4,"y":5,"z":6}); // x=4 y=5 z=6
</script>

2.Symbol数据类型

ES5数据类型:6种: string number boolean null undefined object

ES6新增了一种数据类型:Symbol,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名

var symbol1 = Symbol();

var symbol2 = Symbol("Alice");

console.log(symbol1, symbol2) // 输出:Symbol() Symbol(Alice)

                Symbol类型的值是一个独一无二的值,Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的。

var attr_name = Symbol();
var obj = {
    [attr_name]: "Alice"
};
console.log(obj[attr_name]);

var obj = {
      [Symbol()]:"Alice"
};
console.log(obj);

              注:Symbol值作为对象属性名时,不能用点运算符。由于点运算符后面总是字符串,所以不会读取attr_name作为标识名所指代的那个值。

使用[]方括号,里面的attr_name不带引号,表示attr_name是一个变量.

3.箭头函数

              ES6可以使用“箭头”(=>)定义函数,注意是普通函数,不要使用这种方式定义类(构造器)。

3.1****语法

具有一个参数并直接返回的函数

var f1 = a=>a;
//相当于  var f1 = function(a){ return a;};
console.log(f1('hello'));//'hello'

              没有参数的需要用在箭头前加上小括号

var f2 = () => '来了老弟';
console.log(f2());

              多个参数需要用到小括号,参数间逗号间隔

var f3 = (a, b) => a+b;
console.log(f3(3,4));//7

              函数体多条语句需要用到大括号

var f4 = (a, b) => {
      console.log('来了老弟');
      return a+b;
}
console.log(f4(5,6));//11

              返回对象时需要用小括号包起来,因为大括号被占用解释为代码块

var f5 = () => {
      return ({"name":"老弟", "age":40});
}

//var f5 = () => ({"name":"老弟", "age":40});
console.log(f5());

              直接作为事件处理函数

<input type="button" value="点击" id="btn">
<script>
    document.getElementById('btn').onclick = evt=>{
          console.log(evt);//evt 事件对象
    }
</script>

                 赋值为对象的方法

var obj = {};
obj.say = ()=>{return "hello,我是obj的say方法";}
console.log(obj.say());

                 作为回调函数

var f6 = (f)=>{
    console.log(f(100));
};
// f6(a=>a);
var f7 = a=>a;
f6(f7);

1.2注意点

typeof 判断箭头函数 结果为function

var f1 = a=>a;
console.log(typeof f1);//'function'

                 instanceof判断是否Function的实例,结果为true

var f1 = a=>a;
console.log(f1 instanceof Function);//true

                 箭头函数不绑定this, 内外this指向固定不变

var obj = {
      say:function(){
          //非箭头函数
          var _this = this;
          var f1 = function(){
              console.log(_this);//obj
            console.log(this);//window
        };
          f1();
          //箭头函数
        var f2 = ()=>{
            console.log(this);
        };
          f2();
      }
};
obj.say();

              箭头函数不能做构造函数,不能用new实例化,也没有prototype属性

var Person = ()=>{};
console.log(Person.prototype);//undefined
var p = new Person();//报错

                不能使用arguments

var f1 = ()=>{
    console.log(arguments);
};
f1(); //报错

                 箭头函数也支持默认参数、剩余参数、解构

var f1 = (x=1,y)=>{
      console.log(x, y); //3 4
};
f1(3,4);
var f2 = (...x)=>{
      console.log(x); //[3,4]
};
f2(3,4);
var f3 = ([x,y]=[])=>{
      console.log(x, y); //3 4
};
f3([3,4]);
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
盘点JavaScript中解构赋值,数组解构常用的数组操作
大家好,我是进阶学习者。前言解构赋值:是一种特殊的语法,它使可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。一、数组解构下面是一个将数组解构到变量中的。例://有一个存放了名字和姓氏的数组letarr现在就可以针对这些变量
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这