ES6 基本介绍
ES6 是什么?
1. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布
2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言
3. ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是ECMAScript 的一种实现
演示 let 的基本使用
1. console.log("name=", name); //使用, 可以输出对象的完整信息
使用+, 字符串的拼接, 如果name是一个对象, 会输出object, 而不会输出对象的完整信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>let 基本使用</title> <script type="text/javascript"> let name = "xxxxxxx"; //解读 //1. console.log("name=", name); //使用, 可以输出对象的完整信息 // 使用+, 字符串的拼接, 如果name是一个对象, 会输出object, 而不会输出对象的完整信息 //2. console.log("name="+ name); console.log("name=", name); </script> </head> <body> </body> </html>
注意事项和使用细节
1. let 声明的变量有严格局部作用域
2. let 只能声明一次 var 可以声明多次
3. let 不存在变量提升,var 存在变量提升
代码演示 :
let 细节1
(1) let 声明的变量, 在代码块中，则作用域在代码块中
(2) var声明的变量, 在代码块中，作用域没有限制
let 细节2
1. var 可以声明多次
2. let 只能声明一次
let 细节3
1. let 不存在变量提升
2. var 存在变量提升
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>let 使用注意事项和细节</title> <script type="text/javascript"> // let 细节1 // (1) let 声明的变量, 在代码块中，则作用域在代码块中 // (2) var声明的变量, 在代码块中，作用域没有限制 { var name = "xxxxxx"; let job = "java"; console.log("name=", name); console.log("job=", job); } console.log("name=", name); //console.log("job=", job);//job is not defined // let 细节2 // 1. var 可以声明多次 // 2. let 只能声明一次 var num1 = 100; var num1 = 200; console.log(num1); let num2 = 600; //Syntax => 语法 //let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2 console.log(num2); // let 细节3 // 1. let 不存在变量提升 // 2. var 存在变量提升 console.log("x=", x);//undefined var x = "tom"; //can't access lexical declaration 'z' console.log("z=", z); let z = "mary"; </script> </head> <body> </body> </html>
const 声明常量/只读变量
应用实例
1. 常量在定义时，需要赋值
2. 常量赋值后不能修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>const常量/只读变量的使用</title> <script type="text/javascript"> //const 基本使用 => 想一想java基础[语言语法很多是相通] /** 解读 1. 常量在定义时，需要赋值 2. 常量赋值后不能修改 */ //常量 const PI = 3.14; //invalid assignment to const 'PI' //PI = 3.1415926; console.log("PI=", PI) </script> </head> <body> </body> </html>
注意事项和使用细节
常量在定义时，需要赋值
常量赋值后不能修改
解构赋值
基本介绍
1. 解构赋值是对赋值运算符的扩展
2. 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
3. 主要有两种形式： 数组解构和对象解构
应用实例-数组解构
需求: 演示 ES6 数组解构用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组解构赋值</title> <script type="text/javascript"> let arr = [1, 2, 3]; //如果要看某个变量的类型 console.log("arr=>", arr); //数组解构[取出元素] //1.传统 let x = arr[0], y = arr[1], z = arr[2]; console.log(x, y, z); //2. ES6风格 let [a, b, c] = arr; console.log("=================================="); console.log(a, b, c); let [num1, num2, num3] = [100, 200, 300]; console.log(num1, num2, num3); </script> </head> <body> </body> </html>
应用实例-对象解构
需求: 演示 ES6 对象解构用
对象解构细节说明
1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致
2. 也可解构对象部分属性，比如 let{age} 这样就只取出age 属性
3. 还有其它的形式,比如方法上使用对象解构
ES6对象解构解读
1. 把monster对象的属性, 赋值给{name,age}
2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致
3. 使用{} 包括, 不要使用[]
4. {name,age} 顺序是无所谓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象解构</title> <script type="text/javascript"> //对象解构 /** * let monster = {name: '牛魔王', age: 800} * 细节说明 * 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致 * 2. 也可解构对象部分属性，比如 let{age} 这样就只取出age 属性 * 3. 还有其它的形式,比如方法上使用对象解构 */ //monster是一个对象 let monster = {name: '牛魔王', age: 800}; //传统方式取出属性-解构 对象名.属性名 console.log(monster.name, " ", monster.age); //ES6对象解构 //解读 //1. 把monster对象的属性, 赋值给{name,age} //2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致 //3. 使用{} 包括, 不要使用[] //4. {name,age} 顺序是无所谓 let {name, age} = monster; console.log("========================"); console.log("name=", name, " age=", age); //下面这个写法也可以 //let {name, age} = {name: '牛魔王', age: 800}; //还有其它的形式,比如方法上使用对象解构 //如果这样使用，仍然要保证名称和对象的属性名一致 function f1({name, age}) { console.log("f1-name=", name, " ", "f1-age=", age) } f1(monster); </script> </head> <body> </body> </html>
模板字符串
基本介绍
1 模板字符串使用反引号 ` 将字符串包裹
2 可作为普通字符串
3 可用来定义多行字符串，即可以将换行字符串原生输出
4 字符串插入变量和表达式, 使用 ${}
5 字符串中调用函数
应用实例
1. 需求: 演示模板字符串用法
2. 代码演示
1、字符串，换行会原生输出
2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
(1) 当解析 ${name}, 就找最近的name遍历, 进行替换
(2) 然后可以得到最后解析的字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板字符串的使用</title> <script type="text/javascript"> //1、字符串，换行会原生输出 let str1 = `for(int i = 0;i < 10;i++){ System.out.println("i="+i); }`; console.log("str1=", str1); //2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。 let name = "java"; //解读 //(1) 当解析 ${name}, 就找最近的name遍历, 进行替换 //(2) 然后可以得到最后解析的字符串 let str2 = `编程名称=${name}`; let str3 = `1+2=${1 + 2}`; let n1 = 80; let n2 = 20; let str4 = `${n1}+${n2}=${n1 + n2}`; console.log("str2=", str2); console.log("str3=", str3); console.log("str4=", str4); //3. 字符串中调用函数 function sayHi(name) { return "hi " + name; } let name2 = "tom"; let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`; let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`; console.log("str5=", str5); console.log("str6=", str6); </script> </head> <body> </body> </html>
