JS的ES6

1.let

let age = 12;

(1). 作用:

  • 与var类似, 用于声明一个变量

(2). 特点:

  • 在块作用域内有效

  • 不能重复声明

  • 不会预处理, 不存在提升

(3). 应用:

  • 循环遍历加监听

  • 使用let取代var是趋势

2.const

const sex = '男';

(1). 作用:

  • 定义一个常量

(2). 特点:

  • 不能修改

  • 其它特点同let

(3). 应用:

  • 保存不用改变的数据

3.解构赋值

(1)对象的解构赋值:从对象的属性中取到想要的属性值

     let obj = {name : 'kobe', age : 39};
//对象的解构赋值
let {name,age,xxx} = obj; //定义的变量要与属性key相同,使用大括号{}
console.log(age,name,xxx); //39 "kobe" undefined

(2)数组的解构赋值

     let arr = ['abc', 23, true];
let [, b, c, d] = arr; //使用中括号[],可以使用占位空的,还是按顺序获得数组下标对应的值
console.log(b, c, d); //23 true undefined

用处:简化传参

     let obj = {name : 'kobe', age : 39};

     function person1({name, age}) {
console.log(name, age);
}
person1(obj);

4.模版字符串

模板字符串必须用 `` 包含,变量用${xxx}

     let obj = {
name : 'anverson',
age : 41
};
console.log('我叫:' + obj.name + ', 我的年龄是:' + obj.age); //我叫:anverson, 我的年龄是:41 console.log(`我叫:${obj.name}, 我的年龄是:${obj.age}`); //我叫:anverson, 我的年龄是:41

5.简写的对象写法:

  • 省略同名的属性

  • 省略方法function以及前面的:

     let x = 3;
let y = 5;
//普通额写法
// let obj = {
// x : x,
// y : y,
// getPoint : function () {
// return this.x + this.y
// }
// };
//简化的写法
let obj = {
x, //为外部的x
y, //为外部的y
getPoint(){ //省略:function
return this.x
}
};
console.log(obj, obj.getPoint()); //Object 3

6.三点运算符

又称:rest参数

作用:用来取代arguments 但比arguments灵活

限制:

  • 只能是最后部分形参参数。

  • 只能遍历数组,不能遍历对象。

     //作为形参,是真实的数组可以遍历
function fun(...values) {
console.log(arguments);
// arguments.forEach(function (item, index) {
// console.log(item, index); //报错,arguments是伪数组不能遍历
// });
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3); //将一个数组插入到另一个数组
let arr = [2,3,4,5,6];
let arr1 = ['abc',...arr, 'fg'];
console.log(arr1); //'abc' 2 3 4 5 6 'fg'

7.形参的默认值

作用:当不传入参数的时候默认使用形参里的默认值

     //定义一个点的坐标
function Point(x=12, y=12) {
this.x = x;
this.y = y;
}
let point = new Point(25, 36);
console.log(point); //25 36
let point2 = new Point();
console.log(point2); // 12 12

8.箭头函数

又称:lambda表达式[和Java的差不多,但符号是=>]

         //1.普通写法
let fun = function () {
console.log('fun()');
};
fun();
//2.没有形参,并且函数体只有一条语句
let fun1 = () => console.log('fun1()');
fun1();
console.log(fun1());
//3.一个形参,并且函数体只有一条语句
let fun2 = x => x;
console.log(fun2(5));
//4.形参是一个以上
let fun3 = (x, y) => x + y;
console.log(fun3(25, 39)); // //5.函数体有多条语句
let fun4 = (x, y) => {
console.log(x, y);
return x + y;
};
console.log(fun4(34, 48)); //

特殊点在this:

箭头函数的this看外层的是否有函数,
  • 如果有,外层函数的this就是内部箭头函数的this.
  • 如果没有,则this是window。

箭头函数在定义时就确定了!!!使用call,apply,bind都不能绑定this。

一般函数得看谁调用他,this就是谁,可以使用call,apply,bind。

     <button id="btn">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>
         setTimeout(() => {
console.log(this); //window
}, 1000) let btn = document.getElementById('btn');
//没有箭头函数
btn.onclick = function () {
console.log(this); //btn
};
//箭头函数
let btn2 = document.getElementById('btn2'); let obj = {
name: 'kobe',
age: 39,
getName: () => {
btn2.onclick = () => {
console.log(this);
};
}
};
obj.getName(); //window function Person() {
this.obj = {
showThis: () => {
console.log(this);
}
}
}
let fun5 = new Person();
fun5.obj.showThis(); //Person
         var name = "windowname";
var oo = {
name:"outname",
ll :{
inname : "inname",
f : () => console.log(this),
ff(){
console.log(this);
}
}
} var obj4 = {
name : "name"
} oo.ll.f(); //window
oo.ll.ff(); //调用它的ll ==> Object {inname: "inname"}
oo.ll.ff.call(obj4); //obj4 ==>Object {name: "name"}
oo.ll.f.call(obj4); //绑定不了还是window

JS的ES6的基础语法的更多相关文章

  1. 关于JS脚本语言的基础语法

    JS脚本语言的基础语法:输出语法  alert("警告!");  confirm("确定吗?");   prompt("请输入密码");为弱 ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. 9.12 开课第9天 (JS脚本语音:基础语法、语句)

    全称JavaScript    网页里面使用的脚本语音      非常强大的语言 基础语法:1.注释语法   单行注释//    多行注释/**/ 2.输出语法   alert(信息);  弹出信息  ...

  4. 前端学习笔记--js概述与基础语法、变量、数据类型、运算符与表达式

    本篇记录js的概述与基础语法.变量.数据类型.运算符与表达式 1.概述与基础语法 2.变量 举例: 3.数据类型 4.运算符与表达式

  5. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  6. JS基础语法(二)

    目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...

  7. 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点

    css3拓展: <display:none>  将某个元素隐藏       <visibility:hidden>  也是将某个元素隐藏 <display:block&g ...

  8. 让 Node.js 支持 ES6 的语法

    为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...

  9. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

随机推荐

  1. 从nsurlsession、Alamofire到moya

    更好的理解(抽象).更少的构建(配置).更方便的表达(语言) 一.iOS系统的网络编程(DSL概念) ios缺省的网络编程只是给出了网络编程的基本概念: urlsession.request.resp ...

  2. InstantiationAwareBeanPostProcessor 分析

    Cglib之Enhancer创建动态代理https://blog.csdn.net/yaomingyang/article/details/82762697 https://blog.csdn.net ...

  3. SAP SD 信用检查相关

    SAP系统信用管理功能的介绍:    R/3系统具有强大的信用管理功能.系统可将来自于FI.SD的财务及销售信息进行汇总, 提供即时的信用数据;并可依据信用政策对订单及发货进行管理,有效地降低风险;并 ...

  4. C# 进程 与 线程

    C#多线程和线程池1.0.线程的和进程的关系以及优缺点windows系统是一个多线程的操作系统.一个程序至少有一个进程,一个进程至少有一个线程.进程是线程的容器,一个C#客户端程序开始于一个单独的线程 ...

  5. hibernate Criteria中多个or和and的用法 and ( or or)

    /s筛选去除无效数据 /*      detachedCriteria.add( Restrictions.or( Restrictions.like("chanpin", &qu ...

  6. Redux 和React 结合

    当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...

  7. 剑指前端(前端入门笔记系列)——BOM

    BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...

  8. Qt 使用QLabel、QMovie加载gif图片实现动态等待窗口

    新建基于Widget的应用程序,在ui的窗口中添加QLabel,对象名label,调整整个窗口大小. 准备loading.gif图片  Widget.cpp  12345678910111213141 ...

  9. 汽车行业MES系统在产品追溯方面的应用分析

    一.追溯系统定义及分类 追溯系统是指根据或利用已记录的标识,这种标识对每一批产品都具有唯一性,即标识和被追溯对象间是一一对应关系. 追溯系统早期因先后发生多起食品安全事件,比如1996年英国疯牛病,丹 ...

  10. Android Studio 导入 Android 系统模块并编译和调试

    FAQ: AS导入系统模块源码,并且能够编译调试,正常查看java doc ???? Android AOSP基础(五)Android Studio调试系统源码的三种方式http://liuwangs ...