常量变量 let and const

先说说常量和变量的概念吧,

常量是说那种进行一次赋值后不会更改的值,比如说游戏账户的 ID,

变量是说赋值后有更改的需求的,比如游戏名,游戏密码。

在之前的 JavaScript 中是不区分常量和变量的统统使用 var 来定义全局变量,

var userId = 666;
var userPassword = "mimabunengshuo";

现在 ES6 中使用 let 定义局部变量,const 定义局部常量

const userId = 666;
let userPassword = "wobuzidao";

为什么需要使用局部变量与常量

//我希望重复打印 0 到 9 ,打印10次
//使用 var
function varI(){
for(var i = 0;i < 10;i++){
for(var i = 0;i < 10;i++){
console.log("varI:"+i);
}
}
}
//使用 let
function letI(){
for(let i = 0;i < 10;i++){
for(let i = 0;i < 10;i++){
console.log("letI:"+i);
}
}
}
varI();//结果打印只有一次 0 到 9
letI();//顺利完成

如果非要使用 var 完成这个需求的话可以使用闭包

关于闭包本次不多做讨论

function varI() {
for (var i = 0; i < 10; i++) {
function test() {
for (var i = 0; i < 10; i++) {
console.log("varI:" + i);
}
}
test(); }
}
varI();//顺利完成

结构赋值

  1. 左右两边必须是一样的数据类型,或者转换后是一样的类型;
  2. 等号右边的值应该是数组或对象,不是对象或数组,就先将其转为对象;
  3. 定义和赋值必须同步完成

例如声明变量

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

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

常用实例

1.交换变量的值

let x = 1;
let y = 2; [x, y] = [y, x];

2.提取 JSON 数据

解构赋值对提取 JSON 对象中的数据,尤其有用。

let jsonData = {
status: true,
data: ["nicai", "wobuzhidao"]
}; let { status, data } = jsonData; console.log(status, data);// true ["nicai", "wobuzhidao"]

箭头函数

在 ES6 之前定义函数是这样写

var f = function (i){
return i + 5;
}

有了箭头函数可以这样写(去掉 function 关键词,在"()"后面加"=>")

let f = (i) => {
return i + 5;
}

好像没有太大区别?

  • 箭头函数只有一个参数时,可以省略"()",只写参数;当只有一条返回语句时,可以省略"{}",以及 return 语句

上面的可以这样写

let f = i => return i + 5;

箭头函数的 this 是固定不变的,就是指向定义时所在的对象,而不是使用时所在的对象

假如将 ES6 的箭头函数转换为 ES5 的普通函数,可以看到,箭头函数的 this 是在引用外层的 this

// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
} // ES5
function foo() {
var _this = this; setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}

字符串模板

  • 字符串模板主要用来处理变量和字符串混合的情况
  • 字符串使用反引号(字符串)来包裹字符串,用$符加大括号 ( ${JavaScript}) 来包裹任意的 JavaScript 表达式
  • 字符串模板中可以使用回车

比如用 JavaScript 来生成 HTML 元素,元素的文本想使用自己 JavaScript 运算后的结果

ES5 中比较麻烦

$('#dom').append(
'<div>你的用户名是:' + userName + '<br> ' +
'你已经注册了 ' + oNumber +'年</div>'
);

ES6中相对简单

$('#dom').append(
`<div>你的用户名是:${userName}<br>你已经注册了${oNumber}年</div>`
);

面向对象

  • class 用来定义一个类
  • extends 用来表示继承哪个类
  • constructor 构造函数可以定义私有方法和属性,此函数外的为共享的
  • super() 在 constructor 使用该方法继承父类的 this 对象

代码示例

class user {
constructor() {
this.name = '用户1';
}
sayHello(say) {
console.log(`${this.name},有人对你说:${say}`);
}
} let user1 = new user();
user1.sayHello('你好'); //用户1,有人对你说:你好 class xiaoming extends user {
constructor() {
super();
this.name = '小明';
}
} let xiaoming1 = new xiaoming();
xiaoming1.sayHello('你好'); //小明,有人对你说:你好
let user2 = new user();
user2.sayHello('你好')//用户1,有人对你说:你好

函数

  • 参数默认值

在 JavaScript 传统语法中如果想设置函数默认值一般我们采用判断的形式

function example (a,b,c) {
a = a||'string';
b = b||'number';
c = c||'json';
console.log(a);
console.log(b);
console.log(c); // 'string' 'number' 'json'
}

在新的语法中我们可以在参数声明的同时赋予默认值

function example (a = 'string',b = 'number',c = 'json') {
console.log(a);
console.log(b);
console.log(c); // 'string' 'number' 'json'
}
  • 参数展开

在 JavaScript 传统语法中如果不确定参数的数量,并且想获取所有的参数,一般使用 arguments (函数自带的变量,数组类型,存放所有的参数)

function example (){
console.log(arguments);
}

在新的语法中我们可以使用三个点 ... 表示接收全部参数

function example (...oVar){
console.log(oVar);
}

还可以结合解构赋值,实现不用按顺序传递参数

function (...opaction){
let {url,type,succ,err} = opaction;
if(!url){
return false;
}else{
console.log(url);
console.log(type);
console.log(succ);
console.log(err);
}
}

数组

  • map() 方法创建一个新数组,然后每次从开始给回调函数传递一个原来数组的成员,直到结束

    let oArray = [5, 7, 1, 56];

    const oMap = oArray .map(x => x * 3);

    console.log(oMap);// Array [15, 21, 3, 168]

    //映射: 一个对一个

  • reduce() 方法接收一个函数作为累加器(升序执行),最终计算为一个值

    var numbers = [1, 2, 3, 4];

    function getSum(total, num) {

    return total + num;

    }

    console.log(numbers.reduce(getSum)); // 10

    //汇总:一堆 返回 一个

  • filter() 方法创建一个新的数组,新数组中的元素是回调函数中符合条件的所有元素。

    var ages = [95, 59, 18, 21];

    function checkAdult(age) {

    return age >= 60;

    }

    console.log(ages.filter(checkAdult));// 95

    //过滤:一堆 返回 部分

  • forEach() 方法调用数组的每个元素,并将元素传递给回调函数

    //遍历: 以上的都可以通过 forEach() 来手动实现,并且可以实现更加个性的自定义操作

    var array1 = ['a', 'b', 'c'];

    array1.forEach(element => {

    console.log(element);

    });// a b c

  • Array.from() 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象

    //常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的 arguments 对象

    // NodeList对象

    let ps = document.getElementsByClassName('p');//所有取到的 dom 元素都是 NodeList 格式,不是真正意义上的数组

    Array.from(ps).filter(p => {

    return p.textContent.length > 9;//先用 from() 将所有取到的 p 标签转换为真正的数组 然后过滤掉前十个

    });

    // arguments对象

    function foo() {

    var args = Array.from(arguments);

    // arguments 也不是真正意义上的数组

    }

json JavaScript对象字面量

关于什么是 json 这里不过多介绍,主要看看 ES6 里 json JavaScript对象字面量 是怎样的

很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects)包括我自己

在这里推荐一篇文章,感谢那些帮我指出错误并告诉我正确知识的人,谢谢

  • key and value

当键名和键值是一样的情况下可以只写一个,在引入组件与库中特定方法时,可以看到(关于如何引入其他文件,将在之后的文章写)

//传统
{
name: name,
} //ES6
{
name
}
  • function

如果在之前了解过微信小程序,vue ,或者将要学习那么应该会经常看到这两种函数的写法

{
onLoad() {
butClick() {
return false;
}
} methods: {
butClick() {
return false;
}
}
}

但是如果不用框架,写这样的代码,会报错

这是因为框架其实可以看做一个函数,上面这种代码是传递给函数的参数(这个参数的接收方法在本篇文章的开头)

这个参数是以 json 对象的形式传递的,

而 ES6 中当 value 旳值是一个函数时可以省略冒号和 function 关键字

//传统
{
butClick: function (){
return false;
}
} //ES6
{
butClick() {
return false;
}
}

快速掌握ES6语法的更多相关文章

  1. es6语法快速上手(转载)

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  2. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  3. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  4. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  5. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  6. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  7. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  8. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  9. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

随机推荐

  1. MySQL通过POIN数据类型查询指定范围内数据

    情况一: 数据库:只有point类型的location字段 实体类:有经纬度字段(double).originLoction字段(存放string类型的数据库location字段:POINT(123. ...

  2. nginx系列(七)静态文件合并combo

    根据雅虎性能优化准则,可以将大量的小型JS文件进行合并,用来提高WEB服务器的性能.下面就是笔者的一个实践. 目前必须安装在1.4.+才可以 官方:http://wiki.nginx.org/Http ...

  3. 吴恩达《深度学习》-课后测验-第一门课 (Neural Networks and Deep Learning)-Week 2 - Neural Network Basics(第二周测验 - 神经网络基础)

    Week 2 Quiz - Neural Network Basics(第二周测验 - 神经网络基础) 1. What does a neuron compute?(神经元节点计算什么?) [ ] A ...

  4. [LeetCode] 139. 单词拆分(DP)

    题目 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典中没 ...

  5. [Spark快速大数据分析]阅读笔记

    第2章 Spark分布式执行涉及的组件 每个Spark应用都由一个驱动程序来发起集群上的各种并行操作,驱动程序通过一个SparkContext对象访问Spark:驱动程序管理多个执行器节点,可以用Sp ...

  6. js-正则表达式的初步应用(一)

    一.正则表达式是使用单个字符串来描述.匹配一系列符合某个句法规则的字符串搜索模式.注:搜索模式也可用于文本替换 例子1 输出结果  注:(我为了方便在控制台输出,所以结果如下) 例子2 输出结果 上面 ...

  7. JVM运行时数据区划分

    Java内存空间 内存是非常重要的系统资源,是硬盘和cpu的中间仓库及桥梁,承载着操作系统和应用程序的实时运行.JVM内存布局规定了JAVA在运行过程中内存申请.分配.管理的策略,保证了JVM的高效稳 ...

  8. 纯java代码在控制台运算电话本(不使用数据库)

    分享学习 Task_08 package cn.rzpt; import java.util.List; import java.util.Scanner; public class Task_08 ...

  9. kafk学习笔记(一)

    kafka消费模式 1.点对点模式:消费者主动拉取消息,消费之后删除数据. 2.发布/订阅模式:如果生产者推给消费者,可能会有些消费者消费比较慢,直接爆炸.或者有些消费者消费很快,资源浪费:一般是消费 ...

  10. 跟我一起学.NetCore之Swagger让前后端不再烦恼及界面自定义

    前言 随着前后端分离开发模式的流行,接口对接.联调成为常事,前端同事会经常问:我需要调哪个接口?这个接口数据格式是啥?条件都传啥? 对于一些紧急接口可能会采取沟通对接,然后补文档,其他的都会回一句:看 ...