-
let,const,var
var:没有作用域一说,且存在作用域提升的问题
letconst: 只能在当前作用域下,且不能被重复声明.let的变量可以被修改,const的变量不能被修改,新的ES6标准中let完全可以替代var
const使用注意:1.错误的书写方式:const修饰的变量是不能被修改的 const name; name = 'zhangsan'; console.log(name); 2.正确的书写方式 const name = 'zhangsan';; console.log(name); 3.数组或者字典:可以修改内部的值 const obj = {name:'zhangsan'}; // obj: {name:'zhangsan'} obj.name = 'lisi'; console.log(obj); // {name: "lisi"} -
结构赋值
- 基本使用
let [name, age, sex] = ['张三', 20, '男']; console.log(name); //张三 console.log(age); //20 console.log(sex); // 男 name = '李四'; console.log(name); //李四 - 对象的结构赋值
let {name, age, sex} = {name: '张三', age: 20, sex: '男'}; console.log(name); // 张三 console.log(age); // 20 console.log(sex); // 男 - 数组的结构赋值:只要结构匹配上即可
简单数组 let [name, age, sex] = ['张三', 20, '男']; console.log(name, age, sex); // 张三 20 男 复杂数组 let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]]; console.log(arr1, arr2, arr3, arr4, arr5); // 1 2 3 4 5 空数组 let [arr] = []; console.log(arr); // undefined 特殊情况 let [a, , , c] = [1, 2, 3]; console.log(a); // 1 console.log(c); // undefined - 基本类型的结构赋值
字符串本身带有结构器 let [a, b, c, d, e] = '我是中国人'; console.log(a); // 我 console.log(b); // 是 console.log(c); // 中 console.log(d); // 国 console.log(e); // 人 Number类型不带有结构器,则会报错,Uncaught TypeError: 12306 is not iterable let [a, b, c, d, e] = 12306; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e);
- 基本使用
-
数据集合 (Set)
特点:
①.类似于数组,但没有重复的元素(唯一的);
②.开发中用于去除重复数据;
③.key和value都是相等的1. 创建一个集合
let set = new Set(['张三', '李四', '王五', '张三', '李四']); console.log(set); // {"张三", "李四", "王五"}2. 一个属性 (size)
集合长度 :
set.size
比如上面的集合:console.log(set.size);长度是33. 四个方法
- add
set.add('刘德华'); console.log(set); // {"张三", "李四", "王五", "刘德华"} 并支持链式调用 set.add('刘德华').add('周星星'); console.log(set); // {"张三", "李四", "王五", "刘德华", "周星星"}- delete
console.log(set.delete('张三')); // 如果返回true,则删除成功; false,则删除失败 console.log(set); // {"李四", "王五"}- has
console.log(set.has('张三')); // true console.log(set.has('张三2')); // false- clear
set.clear(); // 他是没有返回值的,undefined console.log(set); // Set(0) {}- keys() 和 values()
console.log(set.keys()); // SetIterator {"张三", "李四", "王五"} console.log(set.values()); // SetIterator {"张三", "李四", "王五"} -
数据集合 (Map)
特点:
① - 类似于对象,本质上是键值对集合;
② - "键"不局限于字符串,各种类型的值(包括对象,数组)都可以当做键;
③ - 对象"字符串 - 值",Map"值 - 值",是一种更加完善的Hash结构实现;1. 创建一个Map
- key值为字符串
const map = new Map([ ['name','张三'], ['age', 18], ['sex','男'] ]); console.log(map); // Map(3) {"name" => "张三", "age" => 18, "sex" => "男"} - key值也可以是对象或数组
let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '张三'], ['age', 18], ['sex', '男'], [obj1, '今天天气不错'], [obj2, '适合敲代码'], [[1, 2], '哈哈哈'] ]); console.log(map); // Map(6) {"name" => "张三", "age" => 18, "sex" => "男", {…} => "今天天气不错", {…} => "适合敲代码", …}key值也可以是对象或数组 -- 打印结果 -
去重 , 当key值是字符串时可以去重,若果是对象或者数组时,不可以去重!
let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '张三'], ['age', 18], ['sex', '男'], [obj1, '今天天气不错'], [obj2, '适合敲代码'], [obj2, '适合敲代码222'], [[1, 2], '哈哈哈'], [[1, 2], '哈哈哈333333'], ['name', '李四'], ['age', 22], ['sex', '女'] ]); console.log(map);key值是字符串,去重 -
map的方法
map的方法- set 和 get
set, 第一个参数是key,第二个参数是value
get 通过map.set('friend', ['赵六', '李七']).set(['dog'], '小花');key值去getconsole.log(map.get('name')); // 张三 console.log(map.get(obj1)); // 今天天气不错 - delete 通过
key删除map.delete('name'); - has 是否有某个值,通过
key查询console.log(map.has('name')); // 存在为true, 不存在为false - clear 清空
map.clear(); // 清空 console.log(map); // Map(0) {} - keys() , values() , entries()
map.keys(); // 获取所有的key map.values(); // 获取所有的值 map.entries(); // 获取 key-value - forEach 遍历
map.forEach(function (value, index) { console.log(index + ':' + value); })
forEach 遍历结果- map注意事项,添加多个空对象
map.set({}, '哈哈哈哈哈'); map.set({}, '呵呵呵呵呵'); console.log(map); console.log({} === {}); // false
- set 和 get
map注意事项,添加多个空对象 - key值为字符串
-
Symbol
应用场景: ES5的对象属性名都是字符串,容易造成属性名称冲突,ES6引入新的原始数据类型Symbol,表示独一无二的值;
对象的属性名可以有两种类型: ①:字符换 ②: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 不相等
使用
let obj = {};
obj.name = '张三';
obj.name = '李四';
console.log(obj); // {name: "李四"}
obj[Symbol('name')] = '张三';
obj[Symbol('name')] = '李四';
console.log(obj);
Symbol()使用打印结果
-
class
ES5 时,要实现面向对象是通过构造函数实现的
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
print() {
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
}
let person = new Person('张三', 12);
console.log(person);
person.print(); // 调用方法
ES6 是通过class来实现面向对象
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 方法
print() {
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
}
let person = new Person('张三', 12);
console.log(person);
person.print();
class的继承
1.创建小球类
// 小球类
class Ball{
/**
* 构造器
*/
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
/**
* 绘制小球
*/
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();
}
}
2.创建移动的小球类,并继承自上面的小球类 (extends)
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color); // 调用父类的属性,并把参数传递给父类
/*****儿子自己的属性*****/
// 量的变化
this.dX = _.random(-5, 5);
this.dY = _.random(-5, 5);
this.dR = _.random(1, 3);
}
// 儿子的方法
upDate(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
- 创建
MoveBall对象
new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)]);
可以参考叶建华老师的绚丽小球代码
- 随机数
Math.random(-5, 5); // 产生的是-5到5的随机数(包含边界值) -
数组的扩展
- Array.from 将伪数组或可迭代对象(包括arguments,Array,Map,Set,String...)转换成数组。
// 获取界面上的所有li标签 let allLis = document.querySelectorAll('li'); console.log(allLis); // 是个伪数组 console.log(Array.isArray(allLis)); //打印下看看是不是数组,结果为: false // 转化为真的数组 let newArray = Array.from(allLis); console.log(newArray); console.log(Array.isArray(newArray)); // 打印结果为true 是真数组 - Array.of 零零散散的东西转换成数组
let nums = Array.of(1, 2, 3, 4); console.log(nums); let names = Array.of('张三', '李四', '王五'); console.log(names);
- Array.from 将伪数组或可迭代对象(包括arguments,Array,Map,Set,String...)转换成数组。
-
对象的扩展
key和value是一样的,写一个就够了
①.最原始写法
let obj = {
'name': '张三',
'age': 18
}
②.外边传值
let name = '张三',
age = 18;
let obj = {
'name': name,
'age': age
}
③.ES6简写法 key和value是一样的,写一个就够了
let name = '张三',
age = 18;
let obj = {
name,
age
}
-
Object.assign() 对象合并
let obj1 = {name: '张三'};
let obj2 = {age: 18};
let obj3 = {sex: '男'};
let obj4 = {friends: '李四'};
let obj = Object.assign({}, obj1, obj2, obj3, obj4);
console.log(obj);
Object.assign() 对象合并
-
... 展开运算符 (延展运算符)
- ①. 把字符串拆分放到数组
let str = '今天天气很好!'; let strArray = [...str]; console.log(strArray);把字符串拆分放到数组 - ②.数据传递,把对象的数据展开传递
let student = { name: '张三', age: 18, sex: '男' } // 传递数据的时候,把student中的数据展开传递下去 <Person {...student}> - ③.结合Set() 去重
let myArr = [1, 2, 10, '张三', 20, 2, 1]; // 使用集合去重 let set = new Set(myArr); // 把集合转成数组,用展开运算符展开 let arr = [...set]; console.log(arr);
- ①. 把字符串拆分放到数组
结合Set() 去重 结果
-
函数设置默认值
- ES5做法
// 形参设置默认值 function sum(num1, num2) { num1 = num1 || 10; //默认值10 num2 = num2 || 10; //默认值10 console.log(num1 + num2); } sum(10, 20); // 30 sum(); // 用户传空,调用默认值结果为 20- ES6做法:简单粗暴
function sum(num1 = 10, num2 = 10) { console.log(num1 + num2); } sum(10, 20); // 30 sum(); // 用户传空,调用默认值结果为 20- 多种类型参数传递 ...也可用于解构赋值,
...nums代表剩下的内容,注意:...nums不能放在第一个位置!!!
function sum(name, sex, ...nums) { console.log(nums); // 打印发现 nums为一个数组 console.log(name); // 张三 console.log(sex); // 男 let result = 0; for (let value of nums) { result += value; } return result; } console.log(sum('张三', '男', 10, 20, 30, 50)); // 输出结果为 110 -
箭头函数
- 普通函数
let resulet = function (num1, num2) { return num1 + num2; } console.log(resulet(100, 300)); // 400- 箭头函数
let resulet = (num1, num2) => { return num1 + num2; } console.log(resulet(100, 300)); // 400- 函数中this的指向问题,箭头函数内部会自动绑定
function demo() { setTimeout(function () { console.log(this); // 打印结果为:Window 指的是窗口 }, 1000); // 箭头函数内部会自动绑定 setTimeout(() => { console.log(this); // 打印结果为{},指的下面的obj对象 }, 1000); } let obj = {}; demo.call(obj);
