ES6部分新增知识点（一）
1、变量/常量声明新语法
let：用于声明一个变量 let str = 'hello world';
const：用于声明一个常量 const PI = 3.14;常量声明时必须赋值
相对于var声明的变量，let声明的变量和const声明的常量有以下特点
a.作用域只局限于当前代码块
b.变量/常量作用域不会被提升
c.在相同的作用域下不能申明相同的变量/常量
2、解构赋值
2.1、数组解构赋值
例2.1.1（一维数组）：
let arr = ['李四', 20, '女']; let [name, age, sex] = arr; //变量名对应数组下标，相当于let name = arr[0], age = arr[1], sex = arr[2]; //效果等同于： let name = '张三', age = 18, sex = '男';
例2.1.2（一维数组）：
let arr = [] let [arr1] = arr; //空数组，变量arr1找不到对应下标，相当于arr1 = arr[0] console.log(arr1); //undefined
例2.1.3（一维数组）：
let arr = [1, 2, 3]; let [a, ,c] = arr; //变量a对应arr[0],变量c对应arr[2] console.log(a);//1 console.log(c);//3
例2.1.4（多维数组）：
let arr = [1, [2, 3, [4, 5]]]; let [arr00, arr01] = arr;//变量名数组结构与原数组结构匹配，相当于let arr00 = arr[0], arr01 = arr[1]; console.log(arr00); //1 console.log(arr01); //[2, 3, [4, 5]] let [arr10, [arr11, arr12, [arr13, arr14]]] = arr;//变量名数组结构与原数组结构匹配，相当于let arr10 = arr[0], arr11 = arr[1][0], arr12 = arr[1][1], arr13 = arr[1][2][0], arr14 = arr[1][2][1]; console.log(arr10, arr11, arr12, arr13, arr14); //1 2 3 4 5
2.2、对象的解构赋值
例2.2.1：
let obj = {name: '张三', age: 55, sex: '男'};
let {name, age, sex} = obj;//变量名对应对象中的属性名，相当于let name = obj['name'], age = obj['age'], sex = obj['sex'];
例2.2.2：
let person = { name: '张三', age: 55, friends: ['李四', '王五'], pet: {name: '大黄', age:3} }; let {name, age, friends, pet} = person;//变量名对应对象中的属性名，相当于let name = person.name, age = person.age, friends = person.friends, pet = person.pet;
例2.2.3：
let person = {name: '张三'};
let {str} = person; //person对象中没有str属性，默认把person.str赋值给str变量，相当于let str = person.str
console.log(str); //结果是undefined
例2.2.4：
let person = {name: '张三'};
let {name: str} = person; //person中依然没有str属性，但可以指定name属性值赋给str变量，相当于let str = person.name
console.log(str); //结果是张三
2.3、基本类型的解构赋值
let [a, b, c, d, e] = 'hello'; console.log(a);//h console.log(b);//e console.log(c);//l console.log(d);//l console.log(e);//o
3、新增数据类型：Set
集合类似一种没有重复元素的数组
创建一个集合
let arr = ['张三', '李四', '王五', '张三', '李四'] let set = new Set(arr); console.log(set); //Set(3){"张三", "李四", "王五"}
获取集合元素个数：
console.log(set.size); //3
新增集合元素：使用add方法，返回新增元素后的set对象，故支持链式调用
console.log(set.add('赵六').add('钱七')); //Set(5){"张三", "李四", "王五", "赵六", "钱七"}
console.log(set); //Set(5){"张三", "李四", "王五", "赵六", "钱七"}
删除集合元素：使用delete方法，返回true或false，因此不支持链式调用
console.log(set.delete('张三')); //true console.log(set.delete('王四')); //false console.log(set); //Set(4) {"李四", "王五", "赵六", "钱七"}
判断元素存在性：使用has方法，返回true/false
console.log(set.has('李四'));
清空集合元素：使用clear方法，没有返回值
console.log(set.clear()); // undefined console.log(set); //Set(0){}
获取key/value值：使用keys()/values()方法，返回一个SetIterator对象，集合的key和value是相同的
console.log(set.keys()); //SetIterator{"王五", "赵六", "钱七"} console.log(set.values()); //SetIterator{"王五", "赵六", "钱七"}
4、新增数据类型：Map
一般的对象中键值对中的键只能是整数或字符串，但在Map类型数据中，键值对中的键可以是任意数据类型
// 1. 创建一个Map let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '张三'], [obj1, 'hello'], [[1,2], 'hhh'] ]); console.log(map); //Map(3){"name" => "张三", {…} => "hello", Array(2) => "hhh"} console.log(map.size); //获取Map元素个数：3 //新增键值对 map.set('friends', ['李四', '王五']).set(['dog'], '大黄'); console.log(map); //Map(5){"name" => "张三", {…} => "hello", Array(2) => "hhh", "friends" => Array(2), Array(1) => "大黄"} //根据'键'获取'值' console.log(map.get('name')); //张三 console.log(map.get(obj1)); //hello //根据'键'删除元素 console.log(map.delete(obj1)); //true console.log(map.delete('xxxx'));//false console.log(map); //Map(4){"name" => "张三", Array(2) => "hhh", "friends" => Array(2), Array(1) => "大黄"} //判断'键'存在性 console.log(map.has(obj1)); //false console.log(map.has('name')); //true //获取键/值/键值对： keys() values() entries() console.log(map.keys()); console.log(map.values()); console.log(map.entries()); // 遍历 map.forEach(function (value, index) { console.log(index + ':' + value); }) //清空Map对象 console.log(map.clear()); //undefined console.log(map); //Map(0){} // 注意事项 map.set({}, '呵呵呵呵呵'); map.set({}, '哈哈哈哈'); console.log(map); //Map(2){{…} => "呵呵呵呵呵", {…} => "哈哈哈哈"} //原因：空对象不等于空对象 console.log({} === {}); //false
5、新增数据类型：Symbol
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。主要用于解决属性名同名的冲突，它是一种基本数据类型
//定义 //不传参 let str1 = Symbol(); let str2 = Symbol(); console.log(str1 === str2); //false console.log(typeof str1); //symbol console.log(typeof str2); //symbol //传参 let str3 = Symbol('name'); let str4 = Symbol('name'); console.log(str3); //Symbol(name) console.log(str4); //Symbol(name) console.log(str3 === str4); //false /作为对象的属性名，不能使用点运算符 const obj = {}; obj[Symbol('name')] = '张三'; obj[Symbol('name')] = '李四'; console.log(obj); //{Symbol(name): "张三", Symbol(name): "李四"}
6、新增语法糖：Class
普通面向对象对象写法
// 1. 构造函数 function Person(name, age) { this.name = name; this.age = age; } //2.公共属性/方法 Person.prototype = { constructor: Person, print(){ console.log('我叫' + this.name + ',今年' + this.age + '岁'); } };
使用class写法
class Person{ constructor(name, age){ this.name = name; this.age = age; } print(){ console.log('我叫' + this.name + ',今年' + this.age + '岁'); } }
例：绚丽小球-面向对象版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #canvas{ box-shadow: 0 0 10px #000; } </style> </head> <body> <canvas id="canvas">当前的浏览器不支持该版本!</canvas> <script src="js/underScore.min.js"></script> <script> // 1. 获取当前的画布 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 1000; canvas.height = 500; canvas.style.backgroundColor = '#000'; // 2.小球类 class Ball{ /** * 构造器 */ constructor(x, y, color){ this.x = x; this.y = y; this.color = color; this.r = 20; } /** * 绘制小球 */ render(){ ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } // 3.会移动的小球类 class MoveBall extends Ball{ constructor(x, y, color){ super(x, y, color); // 量的变化 this.dX = _.random(-4, 4); this.dY = _.random(-2, 2); this.dR = _.random(1, 2); } upDate(){ this.x += this.dX; this.y += this.dY; this.r -= this.dR/3; if(this.r < 0){ this.r = 0; } } } // 4. 实例化小球 let ballArr = []; let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange']; // 5. 监听鼠标的移动 //canvas.addEventListener('mousemove', function (e) { // ballArr.push( new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)])); // console.log(ballArr); //}); setInterval(function(){ ballArr.push( new MoveBall(_.random(0, 1000), _.random(0, 500), colorArr[_.random(0, colorArr.length-1)])); },50) // 6.开启定时器 setInterval(function () { // 清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制 for(let i=0; i<ballArr.length; i++){ ballArr[i].render(); ballArr[i].upDate(); } }, 50); </script> </body> </html>优质内容筛选与推荐>>
1、Reinforcement Learning: An Introduction读书笔记(3)--finite MDPs
2、WireMock和Spring MVC模拟器
3、初始化的坑，不够细心!
4、E版2005vs.net下载
5、delphi 终极教程