1、let、const、var区别、解构赋值、新增字符串语法、数组方法、网址组成

一、let、const、var的区别*

1、let和var的区别

相同点：在全局声明的就是全局变量，在局部声明的变量是局部变量
不同点（4条）：
- let声明的变量不能提升
- let声明的变量名不能重复声明
- let声明的变量只在当前的块作用域中有效 { }
- let声明的变量会产生暂时性的死区，只能在当前块作用域中查找

if(false){var num = 20let num1 = 20
}
console.log(num)//undefined
console.log(num1)//报错   块作用域

2、const（6条）

const声明的变量必须赋初值
const name_1 = ''
const声明的变量是常量不能发生改变

const name_1  = ''
name_1 = "1s"
console.log(name_1)//会报错

const声明的变量不能提升
const声明的变量不能重复声明
const声明的变量只在当前块作用域有效
const声明的变量会产生暂时性的死区，只能在当前块作用域中查找

二、解构赋值

把数组中的元素，字符串中的字符，对象中的属性分解成一个一个变量

1、数组结构赋值

完全解构

let [x, y, z] = [10, 20, 30]
console.log(x, y, z)//10 20 30

不完全解构

let [m, n, l] = [40, 50]
console.log(m, n, l)//40 50 undefined

赋初值

let [m, n, l = 60] = [40, 50,10]//10的优先级高
console.log(m, n, l);//40 50 10

嵌套

let [q, w, [e, r, t = 't']] = ['q', 'w', ['e', 'r']]
console.log(q, w, e, r, t);// q w e r t

2、字符串的解构赋值

let str = '我们是web31期，我们都是好孩子'
let [a, b, c, d] = str
console.log(a, b, c, d);//我们是w
console.log(str[1]);//们
console.log(str.substr(1, 1));//们
console.log(str.substring(1, 2));//们
console.log(str.slice(1, 2));//们
console.log(str.charAt(1));//们

3、对象的解构赋值

let obj = {name: 'zs',age: 18,sex: '男'
}

完全解构

let { name, age, sex } = obj
console.log(name, age, sex);//zs 20 男

不完全解构

console.log(obj.age);//20
const { age } = obj
console.log(age);//20

赋初值

var { name, age = 20 } = { name: 'ls' }
console.log(name, age);//ls 20

4、解构赋值的作用（3条）

交换两个变量

var x = 10
var y = 20
var [y, x] = [x, y]

让函数有多个返回值

function fn(x, y){return [x, y]
}
var [x, y] = fn(10, 20)
console.log(x, y)//10  20

解决形式参数undefined的问题

自己的值优先级会高于形参的

function fn_1({ age = 20 }){console.log(age)
}
fn_1({ age: 30 })//30

三、ES6新增的字符串的语法

1、模板字符串

${变量/函数的调用}，用反引号包起来

let str_1 = `我叫${person.name}，我的性别是：${person.getSex()}`
console.log(str_1);//我叫zyf，我的性别是女

2、方法

let str1 = "web31期"

repeat( )函数

将目标字符串重复N次，返回一个新的字符串，不影响目标字符串。

let str2 = str1.repeat(3)
console.log(str2);//web31期web31期web31期

includes()

判断字符串中是否含有指定的子字符串，返回true表示含有和false表示未含有

console.log(str1.includes("1"));//true
console.log(str1.includes("2"));//false

startsWith()

判断指定的子字符串是否出现在目标字符串的开头位置

console.log(str1.startsWith("web"));//true
console.log(str1.startsWith("b"));//false

endsWith()

判断子字符串是否出现在目标字符串的尾部位置

console.log(str1.endsWith("期"));//true
console.log(str1.endsWith("1"));//false

String.raw()

返回字符串最原始的样貌，即使字符串中含有转义符，它都视而不见(了解)

let str3 = "hello\nword"
console.log(str3);  //换行输出
console.log(String.raw`hello\nword`);//不换行

四、ES6中新增的数组的用法

1、Array.of()

作用：将一组值，转换成数组。
与数组的解构赋值正好相反

var x = 1, y = 2, z = 3, m = 4
var arr1 = Array.of(x, y, z, m);
console.log(arr1);//输出数组

Array.from()

作用：以将类似数组的对象或者可遍历的对象转换成真正的数组。

var liList = document.getElementsByTagName("li")
console.log(liList);//伪数组 HTMLCollection(3) [li, li, li]
liList=Array.from(liList)
console.log(liList);//真正数组 [li, li, li]

find函数

：找出数组中符合条件的第一个元素。

let arr2 = [1, 2, 3, 4, 5]
var num1 = arr2.find(function (value) {return value > 4//布尔型
})
console.log(num1);//5

findIndex函数

作用：返回符合条件的第一个数组成员的位置。

var index = arr2.findIndex(function (value) {return value > 3;
})
console.log(index);//3

fill(x,y,z)

包括三个参数 x:所填充的数字 y:第几个开始 z:到第几个结束(不包括z）
作用：用指定的值，填充到数组。会改变原数组

var newArr2 = arr2.fill(6,1,2);
console.log(newArr2);// [1, 6, 3, 4, 5]
console.log(arr2);// [1, 6, 3, 4, 5]

entries()

作用：对数组的键值对进行遍历，返回一个遍历器
通过for of进行遍历

for (let [index, value] of arr3.entries()) {
console.log(`我是第${index + 1}个元素，我的值是${value}`);
console.log(arr3);}

keys()

作用：对数组的索引键进行遍历，返回一个遍历器。

for (let index of arr3.keys()) {console.log(index);
}

values()

作用：对数组的元素进行遍历，返回一个遍历器。

for (let value of arr3.values()) {console.log(value);
}

五、var let练习

//有2个div，遍历，给每个div添加点击事件，输出值,
for (var i = 0; i < list.length; i++) {list[i].onclick = function () {console.log(i);//2 2}
}
for (let i = 0; i < list.length; i++) {list[i].onclick = function () {console.log(i);//0 1}
}

六、数组练习

const list = [//数组内置对象{ id: 3, name: "张三丰" },{ id: 5, name: "张无忌" },{ id: 13, name: "杨逍" },{ id: 33, name: "殷天正" },{ id: 12, name: "赵敏" },{ id: 97, name: "周芷若" },
]
//所有姓杨的人
let arr_1 = list.filter(function (item, index) {return item.name.startsWith("杨")
})
console.log(arr_1);
//所有包含天这个字的人
let arr_2 = list.filter(function (item, index) {return item.name.includes("天")
})
console.log(arr_2);
//找到周芷若的id
let arr_4 = list.find(function (item, index) {return item.name === "周芷若"
}).id
console.log(arr_4);