一、let和var
1、作用域只局限于当前模块
let声明变量
var是全局作用域变量,在代码块中和代码块外面都有效果
2、使用let声明的变量作用域不会被提升
{
let str1='var1';
var str2= 'var2';
}
console.log(str2);//undefined,var方式声明
console.log(str1);//报错,let方式声明
var str1 = 'var1'
分解为两步:
var str1;
console.log(str1);
str1='var1'
而let则不会将作用域提升,直接报错。
3、在相同的作用域下不能重复声明
{
var str1 = 'var1';
var str1 = 'var2'; //最终为var2
let str2 = 'var3';
let str2 = 'var4';//会报错,重复定义
}
4、for循环体现let的父子作用域
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
var btns = document.querySelectorAll('button');
for(var i=0; i<btns.length; i++){
btns[i].onclick = function () {
alert('点击了第' + i + '个按钮'); //都是第5个按钮
}
}
let btns = document.querySelectorAll('button');
for(let i=0; i<btns.length; i++){
btns[i].onclick = function () {
alert('点击了第' + i + '个按钮'); //0-4个按钮,是我们所需要的
}
二、const声明变量
1、只有在当前代码块中才有效。
{
const a = 'zhangsan'
console.log(a);
}
console.log(a);//错误
2、作用域不会提升
{
const a = 'zhangsan'
}
console.log(a);//错误
3、不能重复声明
{
const a = 'zhangsan'
const a = 'lisi' //错误
}
4、声明的常量一开始就必须赋值,否则会报错
{
const a;
a='zhangsan'; //语法错误
}
三、解构赋值
ES6允许按照一定模式从数组或对象中提取值,对变量进行赋值,被称之为解构赋值。类似python的解包。可迭代类型都可以解包。
数组解构:要一一对应
let [name, age, sex] =['李四', 20, '女'];
let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
对象解构:key的解包
let {name, age, sex} = {name: '张三', age: 55, sex: '男'};
let {name: str} = {name: '张三'};
字符串解构:可迭代对象才能解构
let [a, b, c, d, e] = '我是中国人';
一一对应即可。
四、集合set
目的是去重,和python里面的集合是一样。
let set = new Set(['张三', '李四', '王五', '张三', '李四']);
集合1个属性,4个方法
属性:set.size
方法:add、delete、clear、has
set.has
set.add()
set.delete()
set.clear()
五、集合map
引入原因:常规情况下对象的key只能是可哈希的,如果对象的key是对象的话,它会默认把对象转换为相同的内容。
let obj1 = {a: 1}, obj2 = {b: 2}, obj = {};
obj.name = '张三';
obj[obj1] = '天空';
obj[obj2] = '大海';
console.log(obj);
console.log(obj1.toString());
console.log(obj2.toString());
console.log(obj1.toString() === obj2.toString()); //true
在内部,obj1和obj2都转换成了字符串对象,是相等的。
解决方法就是使用map!
// 1. 创建一个Map,类似python中的字典,但是可以去重,且key可以为非哈希类型,比如key可以是对象、列表。
let obj1 = {a: 1}, obj2 = {b: 2};
const map = new Map([
['name', '张三'],
['age', 18],
['sex', '男'],
[obj1, '今天天气很好'],
[obj2, '适合敲代码'],
[[1,2], 'hhh']
]);
2、方法:set、get、delete、has、clear、keys()、values()、entries()
map.set('pet','小花狗').set('friend','美国佬') //设置值
mat.get('pet') //获取值
map.delete('friend') //删除值
map.has('pet') //返回true或false
map.clear() //清空
map.keys() //所有keys,可迭代对象
map.values() //所有values,可迭代对象
map.entries() //所有条目,可迭代对象
3、遍历
map.forEach(function (value, index) {
console.log(index + ':' + value);
})
或者
map.forEach( (value, index) =>{console.log(index + ':' + value);})
4、注意事项
// 注意事项
map.set({}, '呵呵呵呵呵');
map.set({}, '哈哈哈哈');
// console.log(map);
// console.log({} === {}); //false,虽然都是空对象,但是他们在内存中的地址是不一样的,map针对对象,也是hash方式的。
六、Symbol
用途:用于解决命名冲突的问题,有时候可能2个变量的名称是一样的,但是我们还是希望使用,就需要使用Symbol了。
const obj = {};
obj[Symbol('name')] = '张三';
obj[Symbol('name')] = '李四';
七、class
1、通过构造函数构造对象
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
print(){
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
};
2、通过class面向对象(es6),更加对象化,本质上还是一个函数!
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
print(){
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
}
let person = new Person('张三', 19);
console.log(person);
person.print();
绚丽小球实例(class和class继承)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 150px;
}
#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 = 600;
canvas.style.backgroundColor = '#000';
// 2.小球类
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();
}
}
// 3.会移动的小球类
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;
}
}
}
// 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);
});
// 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. 模板字符串
let str = '适合敲代码!';
let className = 'test';
let html = `<html>
<head></head>
<body>
<p>今天的天气很好!</p>
<div class="${className}">${str}</div>
</body>
</html>`;
2. 数组的扩展
Array.from
let allLis = document.querySelectorAll('li');
console.log(Array.isArray(allLis));
console.log(Array.from(allLis));
console.log(Array.isArray(Array.from(allLis)));
Array.of
console.log(Array.of(1, 2, 3, 4));
console.log(Array.of('张三', '李四', '王五'));
3. 对象的扩展
1、key 和 value是一样的,写一个就够了
let name = '张三';
let age = 18;
let person = {
'name':name,
'age':age
};
等价于:
let person = {
name,
age
};
4、对象的合并
// Object.assign()
let obj1 = {name: '张三'};
let obj2 = {age: 18};
let obj3 = {sex: '男'};
let obj4 = {friends: '李四'};
let obj = {};
Object.assign(obj, obj1, obj2, obj3, obj4);
// console.log(obj);
5、延展操作符
主要用于数据传递,父子传值的时候使用!
let str = '今天的天气很好!';
let strArr = [...str];
console.log(strArr); // ['今','天','天','气','很','好','!']
let student = {
name: '张三',
age: 18,
sex: '男'
}
案例2:
let myArr = [1, 2, 10, '张三', 20, 2, 1];
console.log([...new Set(myArr)]);
九、函数扩展
1. 形参设置默认值
function sum(num1, num2) { num1 = num1 || 10; num2 = num2 || 10; console.log(num1 + num2); } function sum(num1 = 20, num2 = 10) { console.log(num1 + num2); } sum(10, 30); sum();
2. 参数形式 延展操作符
function sum() { let result = 0; for(let value of arguments){ result += value; } return result; } function sum(name, sex, ...nums) { let result = 0; for(let value of nums){ result += value; } return result; }
console.log(sum('张胜男', '男', 10, 20, 30, 50));
3、箭头函数
() => {} let sum = (num1, num2)=>{ return num1 + num2;}; console.log(sum(100, 300)); let nameArr = ['张三', '李四', '王五']; nameArr.forEach((value, index)=>{ console.log(index + ':' + value); }); function demo() { setTimeout(function () { console.log(this); }, 1000); setTimeout(()=>{ console.log(this); }, 1000); } let obj = {}; demo.call(obj);
箭头函数2个优点:
1、书写简单
2、作用域保护机制,this在本对象内。