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. pandas 学习 第十一篇:处理缺失值

    Pandas中的缺失值是指nan.None和NaT.如果需要把inf 和 -inf视为缺失值,需要设置 pandas的选项: pandas.options.mode.use_inf_as_na = T ...

  2. -Shell 教程 Bash 脚本 基础语法 MD

    目录 目录 Shell 简介 Shell 脚本 Shell 环境 第一个shell脚本 Shell 变量 定义变量 使用变量 只读变量 删除变量 Shell 字符串 单引号 双引号 字符串基本操作 S ...

  3. easyui-datagrid 加载数据 的两种方法

    var start_date_entered=$('#start_date_entered').val(); //创建时间 var stop_date_entered=$('#stop_date_en ...

  4. APS.NET MVC + EF (01)---Linq和Lambda表达式

    1.1 Linq介绍 LINQ全称 Language Integrated Query(语言集成查询).为我们提供一种统一的方式来查询和操作各种数据. LINQ to Object:是针对实现了IEn ...

  5. 图像上划矩形(cv.line()函数)

    在图像上划矩形 import numpy as npimport cv2 as cvimg=np.zeros((400,400),np.uint8)cv.line(img,(100,100),(350 ...

  6. 2019 花椒直播java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.花椒直播等公司offer,岗位是Java后端开发,因为发展原因最终选择去了花椒直播,入职一年时间了,也成为了面 ...

  7. 关于银企直连中银行通信类 配置篇 EPIC_PROC

    简单介绍:SAP银行企业直连,英文全称:Electronic Payment Integration(For China),简称EPIC,是SAP中国为本地化的需求开发的一款产品,以银企直连为支撑,主 ...

  8. Vue学习之路由vue-router小结(九)

    一.路由: 1.后端路由: 对于普通网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 2.前端路由: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页 ...

  9. Java 之 匿名对象

    一.匿名对象 创建对象时,只有创建对象的语句,却没有把对象地址赋值给某个变量. 虽然是创建对象的简化写法,但是应用场景非常有限. 匿名对象:没有变量名的对象. 语法格式: new 类名(参数列表): ...

  10. java 获取当前方法的被调用信息(被那个方法那个类那一行调用)

    public void testMethod(){ Test1 t1 = new Test1(); t1.my(); } public static void main(String[] args) ...