章节	地址
JavaScript教程_基础(一)	https://blog.csdn.net/weixin_46349544/article/details/124084866
JavaScript教程_ES6(二)	https://blog.csdn.net/weixin_46349544/article/details/124085873

1 对象的简化写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写更加简洁

let name = 'aaa';
let change = function(){console.log('change()执行了...');
}//未简化的完整写法
const school = {name: name,change: change,improve: function(){consolg.log('improve()执行了...');}
}//简化的写法
const school1 = {name,change,improve(){consolg.log('improve()执行了...');}
}

2 结构赋值

什么是解构赋值：
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

演示代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>解构赋值</title>
</head><body><script>// ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值； // 1、数组的解构赋值 const F4 = ["大哥", "二哥", "三哥", "四哥"];let [a, b, c, d] = F4;// 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"console.log(a + b + c + d); // 大哥二哥三哥四哥 // 2、对象的解构赋值 const F3 = {name: "大哥",age: 22,sex: "男",xiaopin: function () {// 常用console.log("我会演小品！");}}let { name, age, sex, xiaopin } = F3; // 注意解构对象这里用的是{}console.log(name + age + sex + xiaopin); // 大哥22男 xiaopin(); // 此方法可以正常调用 </script>
</body></html>

3 模板字符串

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><script>// 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）// 声明 let string = `我也一个字符串哦！`;console.log(string);// 特性 // 1、字符串中可以出现换行符let str = `<ul><li>大哥</li><li>二哥</li><li>三哥</li> <li>四哥</li></ul>`;console.log(str);// 2、可以使用 ${xxx} 形式引用变量 let s = "大哥";let out = `${s}是我最大的榜样！`;console.log(out); </script>
</body></html>

4 箭头函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>箭头函数</title>
</head><body><script>// ES6 允许使用「箭头」（=>）定义函数。//声明一个函数// let fn = function(){// }// let fn = (a,b) => {//     return a + b;// }//调用函数// let result = fn(1, 2);// console.log(result);//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);}//设置 window 对象的 name 属性window.name = '尚硅谷';const school = {name: "ATGUIGU"}//直接调用// getName();// getName2();//call 方法调用// getName.call(school);// getName2.call(school);//2. 不能作为构造实例化对象// let Person = (name, age) => {//     this.name = name;//     this.age = age;// }// let me = new Person('xiao',30);// console.log(me);//3. 不能使用 arguments 变量// let fn = () => {//     console.log(arguments);// }// fn(1,2,3);//4. 箭头函数的简写//1) 省略小括号, 当形参有且只有一个的时候// let add = n => {//     return n + n;// }// console.log(add(9));//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略// 而且语句的执行结果就是函数的返回值let pow = n => n * n;console.log(pow(8));</script>
</body></html>

5 函数参数默认值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数参数默认值</title>
</head>
<body><script>//ES6 允许给函数参数赋值初始值//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)// function add(a,c=10,b) {//     return a + b + c;// }// let result = add(1,2);// console.log(result);//2. 与解构赋值结合function connect({host="127.0.0.1", username,password, port}){console.log(host)console.log(username)console.log(password)console.log(port)}connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3306})</script>
</body>
</html>

6 模块化

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES6 模块化</title>
</head>
<body><script type="module">//1. 通用的导入方式//引入 m1.js 模块内容// import * as m1 from "./src/js/m1.js";// //引入 m2.js 模块内容// import * as m2 from "./src/js/m2.js";// //引入 m3.js // import * as m3 from "./src/js/m3.js";//2. 解构赋值形式// import {school, teach} from "./src/js/m1.js";// import {school as guigu, findJob} from "./src/js/m2.js";// import {default as m3} from "./src/js/m3.js";//3. 简便形式  针对默认暴露// import m3 from "./src/js/m3.js";// console.log(m3);</script><!-- <script src="./src/js/app.js" type="module"></script> -->
</body>
</html>

m1.js

//分别暴露
export let school = '尚硅谷';export function teach() {console.log("我们可以教给你开发技能");
}

m2.js

//统一暴露
let school = '尚硅谷';function findJob(){console.log("我们可以帮助你找工作!!");
}//
export {school, findJob};

m3.js

//默认暴露
export default {school: 'ATGUIGU',change: function(){console.log("我们可以改变你!!");}
}

JavaScript教程_ES6(二)相关推荐

JavaScript 教程（二）
面向对象编程实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识对象是什么面向对象编程(Object Orien ...
JavaScript 教程（二） 1
面向对象编程实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识对象是什么面向对象编程(Object Orien ...
JavaScript教程之快速入门
##JavaScript教程 #js简介 javaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛 ...
JavaScript教程--从入门到精通
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的.介于Java与HTML之间.基于对象事件驱动的编程语言,正日益受到全球的关注.因它的开发环境简单,不需要Java ...
SAP UI5 初学者教程之二十四 - 如何使用 OData 数据模型试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
[翻译]asp.net ajax xml-script教程（二）
原文地址:http://dotnetslackers.com/articles/atlas/xml_script_tutorial_part2.aspx asp.net ajax xml-script ...
菜鸟教程之 JavaScript 教程
From:菜鸟教程 JavaScript:https://www.runoob.com/ W3School JavaScript 教程:http://www.w3school.com.cn/js/in ...
html5游戏制作入门系列教程（二）
今天,我们继续html5游戏制作入门系列的系列文章.今天,我们将继续基础知识(也许甚至是高级技巧的基础).我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要 ...
ArcGIS Maritime Server 开发教程（二）ArcGIS 海图软件系列
ArcGIS Maritime Server 开发教程(二)ArcGIS 海图软件系列本章导读:ArcGIS 是一个成熟的 GIS 软件体系,无论是在海图的服务端管理.桌面软件使用还是海图功能定制方 ...

JavaScript教程_ES6(二)

目录

1 对象的简化写法

2 结构赋值

3 模板字符串

4 箭头函数

5 函数参数默认值

6 模块化

JavaScript教程_ES6(二)相关推荐

最新文章

热门文章