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));//

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

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

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

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]);

ES6新语法(二)的更多相关文章

  1. ES6入门五:箭头函数、函数与ES6新语法

    箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...

  2. ES6新语法

    ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...

  3. ES6新语法的介绍

    对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring

  4. ES6新语法之let关键字;有别于传统关键字var的使用

    ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...

  5. ES6 | ES6新语法 在编码实践中的应用

    本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了  ...

  6. 总结常见的ES6新语法特性

    前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

  7. 总结常见的ES6新语法特性。

    前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

  8. es6新语法系列,查找字符串,模板字符串

    一.模板字符串: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与 ...

  9. es6 新语法分享给爱前端的伙伴

    相信es6大家并不陌生,那么我还是简单介绍一下es6,es是15年发布的,可以用babel转化成es5可以支持低端浏览器,es6是一种新的语法,流行的库基本都是基于es6开发的.所以小伙伴要掌握哦!而 ...

随机推荐

  1. 【CV现状-3.2】纹理与材质

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  2. .netcore实现一个读写分离的数据库访问中间件

    在实际业务系统中,当单个数据库不能承载负载压力的时候,一般我们采用数据库读写分离的方式来分担数据库负载.主库承担写以及事务操作,从库承担读操作. 为了支持多种数据库我们先定义一个数据类型字典.key为 ...

  3. 在 Spring Boot 项目中使用 activiti

    新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...

  4. 弹性盒子中的order

    order order 属性 设置或检索弹性盒模型对象的子元素出现的順序.. 注意:如果元素不是弹性盒对象的元素,则 order 属性不起作用. <!DOCTYPE html> <h ...

  5. PMBOK 指南 第二章 项目运行环境

    2.1概述 事业环境因素(EEF)源于项目外部(往往企业外部) 组织过程资产(OPA)源于企业内部 2.2 事业环境因素 项目团队不能控制 2.2.1 组织内部的事业环境因素 组织文化.结构和治理 设 ...

  6. Java之缓冲流(字节/字符缓冲流)

    概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...

  7. C语言函数调用过程,汇编角度查看

    C语言函数调用过程,汇编角度查看 把函数的参数按照调用约定压栈或者存储到寄存器中 调用要使用的函数,先把调用者的地址入栈,方便回来 跳转到函数 把函数使用到的一些寄存器压栈,避免修改寄存器的值 执行函 ...

  8. 5.Ansible Jinja2 模板

    1.jinja2渲染NginxProxy配置文件 jinja2 房屋建筑设计固定的 jinja2模板与Ansible关系 Ansible如何使用jinja2模板 template模块 拷贝文件? te ...

  9. vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

  10. JDK 安装与环境配置配置——Android开发第一步

    什么是JDK? JDK 即 Java Development Kit,Java开发工具包,用来编译 Java 程序.JRE 在接触JDK的过程中,同时了解到 JRE,JRE 即 Java Runtim ...