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什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
随机推荐
- 从nsurlsession、Alamofire到moya
更好的理解(抽象).更少的构建(配置).更方便的表达(语言) 一.iOS系统的网络编程(DSL概念) ios缺省的网络编程只是给出了网络编程的基本概念: urlsession.request.resp ...
- InstantiationAwareBeanPostProcessor 分析
Cglib之Enhancer创建动态代理https://blog.csdn.net/yaomingyang/article/details/82762697 https://blog.csdn.net ...
- SAP SD 信用检查相关
SAP系统信用管理功能的介绍: R/3系统具有强大的信用管理功能.系统可将来自于FI.SD的财务及销售信息进行汇总, 提供即时的信用数据;并可依据信用政策对订单及发货进行管理,有效地降低风险;并 ...
- C# 进程 与 线程
C#多线程和线程池1.0.线程的和进程的关系以及优缺点windows系统是一个多线程的操作系统.一个程序至少有一个进程,一个进程至少有一个线程.进程是线程的容器,一个C#客户端程序开始于一个单独的线程 ...
- hibernate Criteria中多个or和and的用法 and ( or or)
/s筛选去除无效数据 /* detachedCriteria.add( Restrictions.or( Restrictions.like("chanpin", &qu ...
- Redux 和React 结合
当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...
- 剑指前端(前端入门笔记系列)——BOM
BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...
- Qt 使用QLabel、QMovie加载gif图片实现动态等待窗口
新建基于Widget的应用程序,在ui的窗口中添加QLabel,对象名label,调整整个窗口大小. 准备loading.gif图片 Widget.cpp 12345678910111213141 ...
- 汽车行业MES系统在产品追溯方面的应用分析
一.追溯系统定义及分类 追溯系统是指根据或利用已记录的标识,这种标识对每一批产品都具有唯一性,即标识和被追溯对象间是一一对应关系. 追溯系统早期因先后发生多起食品安全事件,比如1996年英国疯牛病,丹 ...
- Android Studio 导入 Android 系统模块并编译和调试
FAQ: AS导入系统模块源码,并且能够编译调试,正常查看java doc ???? Android AOSP基础(五)Android Studio调试系统源码的三种方式http://liuwangs ...