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

一、let、const、var的区别*

1、let和var的区别

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

if(false){
  var num = 20
  let 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);

七、网址的组成

• 协议( http https )
• 主机 ( 域名 ip（公网ip 局域网ip）)
• 端口号（80 8080）
• 路径
• 参数