web前端——JS——高级js+es6

 基础知识 

面向过程编程：是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

面向对象编程：面向对象是把事物分解成为一个个对象，然后由对象之间分工与合作。面向对象是以对象功能来划分问题，而不是步骤。

面向对象的特性：封装性、继承性、多态性

面向过程和面向对象：

类和对象

对象：js中的对象是一组无序的相关属性和方法的集合，所有的事物都是对象。

• 属性：事物的特征，有属性值。（名词）
• 方法：事物的行为，可以有返回值，操作功能。（动词）

对象是类的实例，类时对象的抽象。类抽象了对象的公共部分，泛指大类，对象特指某个。

创建类：

类的继承 

继承中的属性和方法查找原则：就近原则。

继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的。

继承中，如果子类里面没有，就对查找父类有没有这个方法，如果有，就执行父类的这个给方法（就近原则）。

• ES6中类没有变量提升，所以必须先定义类，才能通过实例化对象。
• 类里面的共有的属性和方法一定要加this使用。
• constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者。

对象前后插入元素：element.insertAdjacentHtml(positon,text)

双击禁止选定文字

设置文本框的文字处于选定状态

文本框变量名.select()。

---

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里面。

注意事项：

1. 构造函数用于创建某一类对象，其首字母要大写。
2. 构造函数要和new一起使用才有意义。

new在执行时做的事情：

1. 在内存中创建一个新的空对象。
2. 让this指向这个新的对象。
3. 执行构造函数里面的代码，给这新对象添加属性和方法。
4. 返回这个新对象（所以构造函数不需要return）

实例成员和静态成员：

原型链

字符串和对象

var strNew=str.trim()   ：去除字符串两侧空格。

---

对象属性操作

1、获取：Object.keys(obj)用于获取对象自身所有的属性名。结合数组的forEach（）遍历出每一个。

2、定义和修改属性：Object.defineProperty()。

 

 

函数进阶 

1、利用new Function()来定义函数

2、立即执行函数

3、this指向问题 

4、apply方法和bind方法

5、严格模式：严格条件下运行js代码

 语义更改：

• 消除了js语法的一些不合理、不严谨之处，减少怪异行为。
• 消除代码运行的不安全之处，保证代码运行的安全。
• 提高编译器效率，增加运行速度。
• 禁用了es可能会定义的一些语法，如保留字不能作为变量名。

使用方法：声明"use strict"

严格模式下this指向问题

 严格模式下函数变化

• 函数不能有重名的参数。
• 函数必须声明在js的顶层，不允许在非函数的代码块内声明函数。（比如循环内）

6、高阶函数——函数可以放在函数体里作为参数传递

7、闭包——有权访问另一个函数作用域中变量的函数

• 一个作用域可以访问另外一个函数的局部变量。
• fn函数外面的作用域可以访问fn内部的局部变量。
• 闭包作用：延伸了变量的作用范围。

利用闭包的方式的到当前小li的索引号：

7、递归——函数内部自己调用自己

• 递归函数的作用和循环效果一样。
• 由于递归很容易出现“栈溢出”错误，所以必须加退出条件return

8、浅拷贝和深拷贝。

• 浅拷贝只是拷贝一次，更深层次对象级别的只引用拷贝对象地址，一起改变。
• 深拷贝拷被数据多层，每一级别的数据都会被拷贝。

es6新增浅拷贝方法：Object.assign(target,source)。

深拷贝方法：封装函数

ES6

1、let和const

let

• let声明的变量只在所处于的块级作用域有效。（var无块级作用域）
• 不存在变量提升（定义完，后面再使用）。
• 暂时性死区

 const

• 具有块级作用域
• 声明常量时必须赋值。
• 常量赋值后，值不能修改

2、解构赋值

        按照一定模式，从数组中或对象中提取值，将提取出来的值给另外的变量。

对象解构：

 3、箭头函数

es6新增的定义函数的方式

•  函数体只有一句代码，且代码的执行结果是返回值，可以省略大括号。
• 如果形参只有一个，可以省略小括号
• 如果形参只有一个，可以省略小括号

 4、剩余参数

• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
• 剩余参数和解构配合使用

 5、Array的扩展方法

 扩展运算符（展开语法）

•  扩展运算符可以将数组或者对象转为逗号分隔的参数序列。（...ary将原数组的中括号去掉，内容保留）
• 扩展运算符可以应用于合并数组。
• 扩展运算符将伪数组转换为真正的数组。

Array.from()

• 将类数组或可遍历的对象转换为真正的数组
• 可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理好的值放入返回的数组。

find（）方法

        用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

findIndex（）方法

        用于找出第一个符合条件的数组成员的位置，如果没有则返回-1.

includes（）方法

        表示某个数组是否包含给定的值，返回布尔值。

 6、String的扩展方法

模板字符串

• ES6新增的创建字符串的方式，使用反引号定义。
• 模板字符串中可以解析变量，
• 模板字符串中可以换行

startsWith（）方法和endsWith（）方法

        startsWith（）：表示参数字符串是否在原字符串的头部，返回布尔值。

        endsWith（）：表示参数字符串是否在原字符串的尾部，返回布尔值。

repeat（）方法

        repeat方法表示将原字符串重复n次，返回一个新字符串。

7、Set数据结构

         ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

• Set本身是一个构造函数，用来生成Set数据结构。
• Set函数可以接受一个数组作为参数，用来初始化。
• set.size返回该set对象的数组长度。
• add（value）：添加某个值，返回对象结构本身。
• delete（value）：删除某个值，返回一个布尔值，表示删除是否成功。
• has（value）：返回一个布尔值，表示该值是否为该Set数组的成员。
• clear（）：清除所有成员，没有返回值。
• 遍历：同数组一样，拥有forEach方法，用于对每个成员执行某种操作，没有返回值。