ES6 新特性
ES6 是什么?
1.ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。
2.ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言 。
3.ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现。
let 声明变量
演示 let 的基本使用
let name = "xxx"; //1. console.log("name=", name); //使用, 可以输出对象的完整信息 //2. console.log("name="+ name); // 使用+, 字符串的拼接, 如果 name 是一个对象, 会输出 object, 而不会输出对象的完整信息
let注意事项和使用细节
- 1.let 声明的变量有严格的局部作用域
let和var的作用域区别 // (1) let 声明的变量, 在代码块中，则作用域在代码块中超出代码块则无法识别 // (2) var 声明的变量, 在代码块中，作用域没有限制 { var name = "hhh"; let job = "java 工程师"; console.log("name=", name); console.log("job=", job); } console.log("name=", name); //console.log("job=", job); //job is not defined
2.let 只能声明一次, var 可以声明多次
var num1 = 100; var num1 = 200; console.log(num1); //正常输出 let num2 = 600; let num2 = 900; console.log(num2); //Syntax => 语法错误 //Uncaught SyntaxError: redeclaration of let num2
- 3.let 不存在变量提升, var 存在变量提升
console.log("x=", x);//var 是弱类型，未定义默认为undefined var x = "tom"; console.log("z=", z);//can't access lexical declaration 'z let z = "mary";
const 声明常量/只读变量
- 1.常量在定义时，需要赋值
- 2.常量赋值后不能修改
解构赋值
- 1.解构赋值是对赋值运算符的扩展
- 2.是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
- 3.主要有两种形式：和对象解构
- 数组解构：
<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)；
对象解构：
细节说明：
- 1.对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致
- 2.也可解构对象部分属性，比如 let{age} 这样就只取出 age 属性
//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; onsole.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);
模板字符串
1.模板字符串使用反引号 ` 将字符串包裹
2.可作为普通字符串
3.可用来定义多行字符串，即可以将换行字符串原生输出
let str1 = `for(int i = 0;i < 10;i++){ System.out.println("i="+i); }`; console.log("str1=", str1);
4.字符串插入变量和表达式, 使用 ${}
//${} 中可以放入 JavaScript 表达式。 let name = "好好读书"; //(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);
5.字符串中调用函数
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);
对象相关新特性
1.定义对象属性
const age = 100; const name = "白骨精"; // 传统 声明/定义对象 let monster = {name: name, age: age}; // ES6 声明/定义对象 //1. {name, age} : 表示对象的属性名是 name 和 age //2. 属性 name 的值是从变量/常量 name 来的 let monster02 = {name, age}; console.log("monster02=>", monster02);
2.定义对象属性函数
// 传统-对象方法定义 let monster = { name: "红孩儿", age: 100, sayHi: function () { console.log("信息: name=", this.name, " age=", this.age); //this表示当前对象属性 } } monster.f10 = function () { console.log("哈哈"); }; monster.sayHi(); monster.f10();
// ES6-对象方法定义 let monster2 = { name: "红孩儿~", age: 900, sayHi() { console.log("信息: name=", this.name, " age=", this.age); }, f1() { console.log("f1()"); } } monster2.sayHi(); monster2.f1();
对象拓展运算符
let cat = {name: "小花猫", age: 2}; // let cat2 = cat; //表示cat2指向cat的内存空间，改变cat2，cat也会改变 // cat2.name = "大花猫"; // console.log("cat=>", cat);//大花猫 // console.log("cat2=>", cat2);//大花猫 // 拷贝对象(深拷贝) let cat2 = {...cat}; //cat2从cat的内存空间复制了一份内容放在另一个内存空间，改变cat2，cat不会改变 cat2.name = "中花猫"; console.log("cat=>", cat);//小花猫 console.log("cat2=>", cat2);//中花猫 // 合并对象[深拷贝] let monster = {name: "复古风格", age: 100}; let car = {brand: "奔驰", price: 600000}; let monster_car = {...monster, ...car} monster_car.name = "狐狸精"; console.log("monster=>", monster); console.log("monster_car=>", monster_car);
注意事项和使用细节
对象拓展运算符是比较新的特性，低版本的浏览器不支持. 火狐/谷歌浏览器没有问题
箭头函数
1.箭头函数提供更加简洁的函数书写方式。
2.基本语法是：(参数列表) => { 函数体 }
3.箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
4.箭头函数函数体有多行语句，用 {} 包裹起来，表示代码
5.函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
6.箭头函数多用于匿名函数的定义
// 传统定义函数 var f1 = function (n) { return n * 2 } console.log("传统= " + f1(2)) // ES6 , 箭头函数使用 let f2 = (n) => { return n * 2; } console.log("f2() 结果= ", f2(100));//200 //上面的 es6 函数写法，还可以简化，一个参数, 可以省略() let f3 = n => n * 3; console.log("f3() 结果=", f3(100));//300 //函数也可以传给一个变量=> 看看 java 基础匿名内部类 function hi(f4) { console.log(f4(900)); } hi((n) => { return n + 100 })；
箭头函数使用
// 传统 var f1 = function (n, m) { var res = 0 for (var i = n; i <= m; i++) { res += i } return res } console.log("传统= " + f1(1, 10)) // ES6 , 箭头函数使用 let f2 = (n, m) => { var res = 0 for (var i = n; i <= m; i++) { res += i } return res }; console.log(f2(1, 10))
箭头函数+解构使用
const monster = { name: "红孩儿", age: 1000, skill: ['红缨枪', '三位真火'] } //要求：在方法形参取出 monster 对象的 skill 属性 //传统方式 function f1(monster) { console.log("skill=", monster.skill); } f1(monster); //箭头函数 let f2 = ({skill}) => { console.log("skill=", skill); } //1. f2 传入对象 monster //2. f2 形参是 {skill} , 所以 es6 的对象解构特性, 会把 monster 对象的 skill 属性赋给skill //3. 对象解构的前提就是 {skill}的 skill 和 monster 的 skill 属性名是一致 f2(monster); //箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致. let f3 = ({age, name, skill}) => { console.log("skill=", skill, " age=", age, " name=", name); } f3(monster);
注意事项和使用细节
1 箭头函数+对象解构, 注意参数是({属性名})
2.({属性名}) 是由{} 包括的，属性名需要和对象属性名一致，使用到了对象解构
