JS的ES6的基础语法
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是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的基础语法的更多相关文章
- 关于JS脚本语言的基础语法
JS脚本语言的基础语法:输出语法 alert("警告!"); confirm("确定吗?"); prompt("请输入密码");为弱 ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
- 9.12 开课第9天 (JS脚本语音:基础语法、语句)
全称JavaScript 网页里面使用的脚本语音 非常强大的语言 基础语法:1.注释语法 单行注释// 多行注释/**/ 2.输出语法 alert(信息); 弹出信息 ...
- 前端学习笔记--js概述与基础语法、变量、数据类型、运算符与表达式
本篇记录js的概述与基础语法.变量.数据类型.运算符与表达式 1.概述与基础语法 2.变量 举例: 3.数据类型 4.运算符与表达式
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- JS基础语法(二)
目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...
- 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点
css3拓展: <display:none> 将某个元素隐藏 <visibility:hidden> 也是将某个元素隐藏 <display:block&g ...
- 让 Node.js 支持 ES6 的语法
为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
随机推荐
- pandas 学习 第十一篇:处理缺失值
Pandas中的缺失值是指nan.None和NaT.如果需要把inf 和 -inf视为缺失值,需要设置 pandas的选项: pandas.options.mode.use_inf_as_na = T ...
- -Shell 教程 Bash 脚本 基础语法 MD
目录 目录 Shell 简介 Shell 脚本 Shell 环境 第一个shell脚本 Shell 变量 定义变量 使用变量 只读变量 删除变量 Shell 字符串 单引号 双引号 字符串基本操作 S ...
- easyui-datagrid 加载数据 的两种方法
var start_date_entered=$('#start_date_entered').val(); //创建时间 var stop_date_entered=$('#stop_date_en ...
- APS.NET MVC + EF (01)---Linq和Lambda表达式
1.1 Linq介绍 LINQ全称 Language Integrated Query(语言集成查询).为我们提供一种统一的方式来查询和操作各种数据. LINQ to Object:是针对实现了IEn ...
- 图像上划矩形(cv.line()函数)
在图像上划矩形 import numpy as npimport cv2 as cvimg=np.zeros((400,400),np.uint8)cv.line(img,(100,100),(350 ...
- 2019 花椒直播java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.花椒直播等公司offer,岗位是Java后端开发,因为发展原因最终选择去了花椒直播,入职一年时间了,也成为了面 ...
- 关于银企直连中银行通信类 配置篇 EPIC_PROC
简单介绍:SAP银行企业直连,英文全称:Electronic Payment Integration(For China),简称EPIC,是SAP中国为本地化的需求开发的一款产品,以银企直连为支撑,主 ...
- Vue学习之路由vue-router小结(九)
一.路由: 1.后端路由: 对于普通网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 2.前端路由: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页 ...
- Java 之 匿名对象
一.匿名对象 创建对象时,只有创建对象的语句,却没有把对象地址赋值给某个变量. 虽然是创建对象的简化写法,但是应用场景非常有限. 匿名对象:没有变量名的对象. 语法格式: new 类名(参数列表): ...
- java 获取当前方法的被调用信息(被那个方法那个类那一行调用)
public void testMethod(){ Test1 t1 = new Test1(); t1.my(); } public static void main(String[] args) ...