JS高级的第二天

JS高级的第二天

解构赋值

数组解构

解构: ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
数组解构: 将数组中的值一一对应的方式取出赋值给变量
数组解构本质: 将数组中的值获取到赋值给变量
数组解构语法: let [变量1, 变量2, 变量3] = 数组;
数组解构特点:

1. 数组解构是将数组中的值一一对应取出分别赋值给变量
2. 如果被赋值的变量个数大于数组中的值,则多余的变量值为undefined
3. 在数组解构中可以为变量设置默认值

1.基本使用


2.练习


3.需求 只想要数组中某个成员


小结 ：模仿结果 需要获取这个位置上值放入一个变量

对象解构赋值

对象解构: 将对象中的属性或方法取出赋值给变量
语法1: let {属性名:变量名1, 属性名:变量名2 …} = 对象
语法2: let {属性名,属性名} = 对象
对象解构总结

1. 对象解构中,属性名和对象中的属性必须保持一致,否则值为undefined
2. 对象解构中,如果属性名和变量名一样,则可以省略变量名,但属性名必须与对象中的属性一样

1.基本用法


2.简单 如果即将设置变量名，故意和属性名一样，缩写为一个单词


1.找到不存在属性，返回undefined


2.获取age属性，设置默认值


小结 模仿结构 对象键值部分先后，对应属性名一致


解构赋值-综合案例

1：获取数组的第二个成员

2：获取数组的第3个成员的age;

运行结果

创建对象

创建对象方式一: 通过内置构造函数创建对象
语法:
let 自定义对象名 = new Object();
自定义对象.属性 = 值;
自定义对象.方法 = function() {}
创建对象方式二: 通过自定义构造函数创建对象
function 函数名(参数1, 参数2) {
this.属性 = 参数1;
this.属性 = 参数2;
this.方法 = function(){}
}

问题：前边new到底让函数发生了什么
【加上new 相当于让函数内部创建空对象，并且返回 】

小结
1.函数，普通的函数
2.调用方式 现在 new Fn()
对象练习案例
需求： 点击按钮，数组中收集一个对象。
内容：name:“zs” score:99 info:“xxxxx”;
并打印数组
css样式




1.获取DOM节点

使用构造函数创建对象

创建一个空数组

2.添加监听事件

运行结果

实例成员

成员: 构造函数中的属性或方法都称为成员
实例成员: 在构造函数内部,通过this关键字设置的属性或方法,称为实例成员
实例:通过构造函数创建的对象称为实例
实例成员访问方式: 必须通过实例对象访问
function Person(uname) {
this.uname = uname;
this.eat = function() {}
}
let zs = new Perseon(‘张三’);
zs.uname;
zs.eat();

静态成员

静态成员: 通过构造函数设置的属性或方法称为静态成员
静态成员访问方式: 静态成员只能通过构造函数名点的方式访问
function Person(uname) {
this.uname = uname;
}
Person.age = 123;
Person.eat = function(){}

内置对象

1. 数组内置对象: Array()
2. Array中的实例方法

• reverse() 翻转数组
• 
• indexOf() 检索数组中的值
• lastIndexOf() 检索数组中的值
• splice()删除或其他数组中的值 新增修改
  
• concat()合并两个数组的值
• 
• join() 将数组中的值拼接为字符串
• forEach(function(item, index){}) 遍历数组
• 
• filter(function(item, index){}) 过滤筛选数组,返回一个新数组
  
• map(function(item, index){})迭代原数组,生成新数组

Array内置对象

1. Array内置对象中的静态方法
2. Array.from(对象) 将伪数组转换为数组

RegExp正则内置对象

1. 通过内置构造函数创建正则对象
2. 语法: let reg = new RegExp(‘正则’)
3. 注意事项:
   3.1 通过构造函数RegExp创建的正则表达式,如果使用元字符,则必须前面添加转义字符
   let test1 = new RegExp(’\d’);
   let test2 = new RegExp(’\d’);