什么是ECMAScript?

ECMAScript是浏览器脚本语言的规范,而我们熟知的js语言,如JavaScript则是规范的具体实现。es6就好比Java的jdk。

一、es6语法详解:let声明变量

1、var声明的变量往往会越域;let声明的变量有严格局部作用域

    {
var a = 1;
let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined

2、var 可以声明多次;let只能声明一次

 	var m = 1;
var m = 2;
let n = 1;
let n = 2;
console.log(m) //2
console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared

3、var会变量提升;let不存在变量提升

  	console.log(x);
var x = 10; // undefined
console.log(y);
let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

注意:以后要习惯使用let声明变量

二、es6语法详解:const声明变量 相当于声明了一个常量

1、声明之后不允许改变

	const a = 1;
console.log(a) //1
a = 2;
console.log(a) // Uncaught TypeError: Assignment to constant variable.

2、一旦声明必须初始化,否则会报错

  const a;
a = 1;
console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

三、es6语法详解:解构表达式

1、数组解构

 let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3

2、对象解构

    const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
    const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
//从person里解析出name的值在赋值给abc
const { name:abc, age, language } = person
console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

四、es6语法详解: 字符串扩展

 	let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith("vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) //true

五、es6语法详解: 字符串模板

let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

六、es6语法详解: 字符串插入变量和表达式。变量写在${}中,${}中可以放入js表达式

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
   function fun() {
return "这是一个函数";
}
let info = `我是${abc},今年${age + 10},我想说:${fun()}`
console.log(info) //我是qiyue,今年33,我想说:这是一个函数

七、es6语法详解: 函数优化

1、函数默认值:直接给参数写上默认值,没传就会自动使用默认值

function add(a, b = 1) {
return a + b;
}
console.log(add(10)) //11

2、不定参数:不定参数用了表示不确定的参数个数,形如...变量名,由...加上要给具名参数标识符组成。具名参数只能放在参数列表的最后,并且有且只有一个不定参数

 function fun(...params) {
console.log(params.length)
}
fun(1, 2) // 2
fun(1, 2, 3, 4) //4

3、箭头函数

//以前
var sum = function (a, b) {
c = a + b
return c
}
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6

4、箭头函数结合解构表达式

    //以前
function hello(person) {
console.log("hello" + person.name)
}
hello(person); //helloqiyue
//箭头函数
let hello2 = params => console.log("hello" + person.name)
hello2(person) //helloqiyue
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person) //helloqiyue

八、es6语法详解: 对象优化

1、es6给Object扩展了许多新的方法,如

  • key(obj):获取对象的所有key形成的数组
  • value(obj):获取对象的所有value形成的数组
  • entries(obj):获取对象所有的key和value形成的二维数组
  const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"]
}
console.log(Object.keys(person)) //["name","age","language"]
console.log(Object.values(person)) // ["qiyue",23,Array(3)]
console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]

2、Object.assign方法的第一个参数是目标对象,后面的参数都是源对象;将源对象的属性赋值到目标对象中

	onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}

3、 声明对象简写

	//以前
const name = 'sanyue'
const age = 21
//将属性值name,age分别赋给person1对象的name,age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21} //es6:属性名和属性值变量名一样,可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}

4、对象的函数属性简写

 let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数中this不能使用,用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
person3.eat("苹果") //qiyue在吃苹果
person3.eat2("香蕉") // qiyue在吃香蕉
person3.eat3("西瓜") //qiyue在吃西瓜

5、对象的扩展运算符

扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象

    //拷贝对象(深拷贝)
let p1 = { name: "qiyue", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "qiyue", age: 23} //合并对象
let age1 = { age: 24 }
let name1 = { name: "qiyue" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "qiyue"}
//如果p2中原本有name,age属性会被覆盖

九、es6语法详解:map和reduce方法

1、map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回

 let arr = ["1", "3", "4", "23"]
arr = arr.map(item => item * 2)
console.log(arr) //[2, 6, 8, 46]

2、reduce():为数组中的每一个元素依次执行回调函数,不包括数组中被删除或未被赋值的元素

语法:arr.reduce(callbace,[initialValue])

callback(执行数组中每个值的函数,包含四个参数)

  • previousValue(上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • currentValue(数组中当前被处理的元素)、
  • index(当前元素在数组中的索引)
  • array(调用reduce的数组)

initialValue(作为第一次调用callback的第一个参数)

    let arr1 = [2, 40, -10, 6]
let result = arr1.reduce((a, b) => {
return a + b
}, 10)
console.log(result)//48

十、es6语法详解:模块化

什么是模块化:模块化就是把代码进行拆分,方便重复利用。类似Java中的导包,要使用一个包,必须先导包。二Js中没有包的概念,换来的就是模块

模块的功能主要有两个命令构成:export和import

  • export命令用于规定模块的对外接口,export不仅可以导出对象,一切js变量都可以导出。比如:基本类型变量、函数、数组、对象
  • import命令用于导入其他模块提供的功能

es6语法详解的更多相关文章

  1. Velocity魔法堂系列二:VTL语法详解

    一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...

  2. Hive笔记--sql语法详解及JavaAPI

    Hive SQL 语法详解:http://blog.csdn.net/hguisu/article/details/7256833Hive SQL 学习笔记(常用):http://blog.sina. ...

  3. Hadoop Hive sql语法详解

    Hadoop Hive sql语法详解 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件 ...

  4. Thymeleaf3语法详解和实战

    Thymeleaf3语法详解 Thymeleaf是Spring boot推荐使用的模版引擎,除此之外常见的还有Freemarker和Jsp.Jsp应该是我们最早接触的模版引擎.而Freemarker工 ...

  5. Xpath语法详解

    1.简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chrome浏览器 ...

  6. mysql用户授权、数据库权限管理、sql语法详解

    mysql用户授权.数据库权限管理.sql语法详解 —— NiceCui 某个数据库所有的权限 ALL 后面+ PRIVILEGES SQL 某个数据库 特定的权限SQL mysql 授权语法 SQL ...

  7. Java8的Stream语法详解(转载)

    1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel agg ...

  8. [持续交付实践] pipeline使用:语法详解

    一.引言 jenkins pipeline语法的发展如此之快用日新月异来形容也不为过,而目前国内对jenkins pipeline关注的人还非常少,相关的文章更是稀少,唯一看到w3c有篇相关的估计是直 ...

  9. Java 8系列之Stream的基本语法详解

    本文转至:https://blog.csdn.net/io_field/article/details/54971761 Stream系列: Java 8系列之Stream的基本语法详解 Java 8 ...

  10. spring AspectJ切入点语法详解 记录以便查阅

    AspectJ切入点语法详解 6.5.1  Spring AOP支持的AspectJ切入点指示符 切入点指示符用来指示切入点表达式目的,,在Spring AOP中目前只有执行方法这一个连接点,Spri ...

随机推荐

  1. TE9手机微信场景

    HTML <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  2. Android DES AES MD5加密

    AES加密: <span style="font-size:18px;">package com.example.encrypdate.util; import jav ...

  3. ACdream 1064 完美数

    数位dp. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #incl ...

  4. laravel5.7 前后端分离开发 实现基于API请求的token认证

    最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...

  5. (转)Android 只开启一个Activity实例

    在一个Activity中,多次调用startActivity()来启动另一个Activity,要想只生成一个Activity实例,方法有两种. 方法一:设置起动模式 一个Activity有四种启动模式 ...

  6. Node JS 8 如何在浏览器上在线调试

    0:为何专门针对Node8写这个 从nodejs8开始,node去掉了_debugger , 内部集成了inspect , 以往使用node-inspect实现的在线调试不再可用.node8开始要用新 ...

  7. build high performance server 转载

    http://blog.ci123.com/wobushizhanghua/entry/246311 先后查看了haproxy,l7sw和lighttpd的 相关源码,无一例外,他们一致认为多路复用是 ...

  8. 在Ubuntu14.04上编译Android4.0.1出现的几个问题

    一. 工具 sudo apt-get install git-core gnupg flex bison gperf build-essential \       zip curl libc6-de ...

  9. Json.NET Deserialize时如何忽略$id等特殊属性

    由于$id.$ref等是默认Json.NET的特殊属性,在反序列化时不会将其对应的值填充,例如: [DataContract] public class MyObject { [DataMember( ...

  10. 8VC Venture Cup 2016 - Elimination Round F - Group Projects dp好题

    F - Group Projects 题目大意:给你n个物品, 每个物品有个权值ai, 把它们分成若干组, 总消耗为每组里的最大值减最小值之和. 问你一共有多少种分组方法. 思路:感觉刚看到的时候的想 ...