一、let和const
作用：声明变量和常量
①作用域是当前代码块（{}）
②作用域不会被提升
③在相同的作用域不能声明相同的变量
④for循环体现let的父子作用域
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<script>
// {
// var btn = document.querySelectorAll('button');
// for( var i=0; i< btn.length; i++){
// btn[i].onclick = function(){
// alert('点击了第' + i+'按钮')
// }
// }
// }
//for()是同步事件，onclick是个异步事件
// 解决：闭包
{
var btn = document.querySelectorAll('button');
for( var i=0; i< btn.length; i++){
(
function(i){
btn[i].onclick = function(){
alert('点击了第' + i+'按钮')
}
}
)(i)
}
}
</script>
es6:
{
let btn = document.querySelectorAll('button');
for( let i=0; i< btn.length; i++){
btn[i].onclick = function(){
alert('点击了第' + i+'按钮')
}
}
}
//for( let i=0; i< btn.length; i++)是一个作用域，{...}是一个作用域
⑤声明的常量必须赋值，常量不能修改。
如果常量是对象，对象的属性值可以修改。因为对象属性存储的是内存地址，修改对象的属性值，就是修改在内存地址里存储的值，地址不变
二、解构赋值
1.基本用法
es6允许按照一定的模式从数组和对象中提取值对变量进行赋值，这被称为解构赋值
let name = '张三', age = '18',sex = '男';
console.log(name)
console.log(age)
console.log(sex)
//等价于：
let [name,age,sex] = ['李四','20','男'];
name='zhang'; //可修改值
console.log(name)
console.log(age)
console.log(sex)
2.对象的解构赋值
//以key对应的形式
//左右key值要一样，右边的属性值也有是数组或对象
//左边有key，右边没有，则打印为undefined
let {name,age,sex，friends} = {name: 'zhang',age: '15', sex: '男'}
console.log(name)
console.log(age)
console.log(sex)
console.log(friends) //undefined
//以键值对的形式 错误
let {name: str} = {name: 'zhangsan'}
console.log(name) //打印为空
consolelog(str) //zhangsan
3.数组的解构赋值
let [name,age,sex] = ['李四','20','男'];
console.log(name)
console.log(age)
console.log(sex)
let [arr] = [];
console.log(arr) //undefined
//左右结构保持一致就可以解构出来
let [arr1,[arr2,arr3,[arr4,arr5,arr6]]] = [1,[2,3,[4,5,6]]];
console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)
console.log(arr5)
console.log(arr6)
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); //人
let [m,n,x,y] = 1234;
console.log(m) //报错
console.log(n)
console.log(x)
console.log(y)
三、数据集合set
1.特点：
①. 类似于数组，但是没有重复的元素（唯一的）
②.开发中用于去除重复数据
③.key和value都是相等的
//创建一个集合
let set = new Set(['zhang1','zhang2','zhang3','zhang1']);
console.log(set)
set.PNG
2.一个属性（size）
let set = new Set(['zhang1','zhang2','zhang3']);
console.log(set.size); //3
3.四个方法
常用的方法：
① add()，返回该set对象
let set = new Set(['zhang1','zhang2','zhang3']);
set.add('张三');
set.add('张三').add('李四'); //支持链式调用
set-add().PNG
②delete()，返回true/false
set.delete('张三');
③ has()
set.has('zhang1'); //ture
④clear()
set.clear(); //没有返回值
⑤keys(),values()
set.keys(); //拿到set的所有键
set.values(); //拿到set的所有值
//set的键和值是一样的
四、数据集合map
- 键值对的集合
object结构是‘字符串-值’的对应，map结构是‘值-值’，是一种hash结构的实现。在objec对象中，左边只能是字符串；在map里，左边的‘值’可以是字符串、数组、对象等
//创建一个Map
const map = new Map([
['name','zhang'],
['age','18'],
['sex','男']
])
console.log(map)
map.PNG
map的键可以是对象或数组
//创建一个Map
let obj = {}, obj1 = {a: 1}, obj2 = {b:2}
const map = new Map([
['name','zhang'],
['age','18'],
['sex','男'],
[obj1,'今天'],
[obj2,'明天'],
])
console.log(map)
map4.PNG
2.常用属性size
map.size;
3.常用方法
①set和get
set()，键可以是字符串、数组、对象，值可以是字符串，数组、对象，支持链式调用
map.set('friends',['aa','bb']).set(['ss','xx'],'李四')
get()，.get(key)
console.log(map.get('name'))
console.log(map.get(obj1));
console.log(map.get('friends'));
②delete() ， .delete(ley) 返回ture/false
map.delete('name')
map.delete(obj1)
③has() 返回ture/false
map.has('name')
④clear() 清空map
map.clear();
⑤keys()拿到所有的键
values()拿到所有的值
entries()拿到所有的键值
map.clear();
4.遍历
xx.forEach(function(value, index){}）
//遍历
map.forEach(function(value, index){
console.log(index + ':'+ value);
})
map5.PNG
5.注意事项
map.set({},'啊啊啊啊啊啊')
map.set({},'不不不不不不')
/以上操作的两个空对象，分别指向不同的存储空间，所有以上操作合理
五、模板字符串 “ ` ”符号
let html='<div><p>今天天气很好</p</div>';
//等价于
let html='<div>'+
'<p>今天天气很好</p>'+
'</div>';
// 等价于
let html1=`<div>
<p>今天天气很好</p>
</div>`
//等价于
let str = '今天天气很好';
let html1 = `<div>
<p class="">${str}</p>
</div>`;
//加类名：
let str = '今天天气很好';
let name = 'test';
//正确
let html1 = `<div>
<p class=${name}>${str}</p>
</div>`;
//错误
let html1 = `<div>
<p class=test“”>${str}</p>
</div>`;
六、数组的扩展
1.Array.from() 将伪数组转化为数组
要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
（1）该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
（2）该类数组对象的属性名必须为数值型或字符串型的数字
let array = {
0: 'name',
1: 'age',
2: 'sex',
3: ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array )
console.log(arr) // ['name','age','sex',['user1','user2','user3']]
let array = {
'name': 'name',
'age': 'age',
'sex': 'sex',
'user': ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array )
console.log(arr) // [ undefined, undefined, undefined, undefined ]
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
let liList = document.querySelectorAll('li')
console.log('前',liList) //伪数组
let arr_liList = Array.from(liList)
console.log('后',arr_liList)
</script>
Array.from().PNG
例子2——将Set解构的数据转换为数组:
let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set)) // [1,2,3,4,5,6,7,8,9]
例子3——将字符串转换为数组
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
例子4——将Map解构转为数组，最方便的做法就是使用扩展运算符(...)
const myMap = new Map().set(true, 7)
console.log(myMap); //Map(1) {true => 7}
console.log([...myMap]); //[true ,7]
- Array.of()
将零散的东西转成数组
console.log('例子1',Array.of(1,2,3,4));
console.log('例子2',Array.of('zhangsan','lisi',1,2));
数组的扩展.PNG
七、对象的扩展
1.对象的key和value一样的话，写一个就够了。
let obj1 = {
'name': '张三',
'age': 18
}
console.log('obj1',obj1)
let name = '张三';
let age = 18;
let obj2 = {
name: name,
age: age
}
console.log('obj2',obj2)
let obj3 = {
name,
age
}
console.log('obj3',obj3)
对象的扩展1.PNG
- Object.assign()
可将多个对象合并成一个对象
let obj1 = {'name': '张三'};
let obj2 = {'age': 18};
let obj3 = {'sex': '男'};
let obj = {};
Object.assign(obj,obj1,obj2,obj3);
console.log('obj',obj)
对象的合并.PNG
八、函数的扩展
1.形参设置默认参数
//设置默认参数
function sum(num1, num2){
num1 = num1 || 10;
num2 = num2 || 20;
console.log('sum',num1+num2)
}
sum();
sum(10,20);
//等价于
function sum(num1=10, num2=20){
num1 = num1;
num2 = num2;
console.log('sum',num1+num2)
}
sum();
sum(10,20);
2.参数形式， 结合延展操作符
function sum(){
let result= 0;
for(let value of arguments){
result += value;
}
return result;
}
console.log('sum',sum(10,20))
//等价于
function sum1(...nums1){
let result= 0;
console.log('nums',nums1)
for(let value of nums1){
result += value;
}
return result;
}
console.log('sum1',sum1(10,20))
//等价于
function sum2(arg1, arg2, ...nums2){
let result= 0;
console.log('nums',nums2)
for(let value of nums2){
result += value;
}
return result;
}
console.log('sum2',sum2('年龄','体重',10,20))
函数的扩展1.PNG
九、延展操作符 “...”
主要用于数据的传递
let string = '今天天气很好'
console.log('用了延展操作符',[...string])
延展操作符.PNG
面试题：去掉数组里重复的数
let arr = [1,2,'zhang','li','2','1'];
let arr1 = new Set(arr);
console.log('一',arr1)
console.log('二',...arr1)
console.log('三',[...arr1])
延展操作符1.PNG
十、箭头函数
() => {}
function sum(num1, num2){
return num1+num2;
}
//等价于
let sum = (num1, num2) => { return num1+num2};
//箭头函数
let arr = ['aa','bb','cc'];
arr.forEach((value, index) => {
console.log(index + ':' + value)
})
箭头函数里的this指向问题（自动绑定到调用它的那个对象身上）：
function demo(){
setTimeout(function() {
console.log('普通函数的this',this) //指向window，要另外做绑定
},1000);
setTimeout(() => {
console.log('箭头函数的this',this) //箭头函数的this自动绑定到调用它的那个对象
},1000);
}
let obj = {};
demo.call(obj); //obj来调用demo函数
网友评论