[JavaScript知识库]JS进阶 学习笔记 day24 2021-5-11 2021-5-12

JS进阶 学习笔记 day24 2021-5-11

this指向问题

  //1.普通函数 this指向window
  function fn() {
    console.log('人生的巅峰')
  }
  fn()
  fn.call()

  //2.对象的方法 this指向的是对象o
  var o = {
    sayhi:function () {
      console.log('人生的巅峰')
    }
  }
  o.sayhi()
  //3.构造函数 this指向ldh这个实例 原型对象里面的this 指向的也是 ldg这个实例
  function Star() {
Star.prototype.sing = function () {

}
  }
  var ldh = new Star()
  //4.绑定时间函数 指向的是函数的调用者
  btn.onclick = function () {

  }
  //5.定时器函数 指向window
  setInterval(function () {

  },1000)
  //6.立即执行函数 this指向window
      (function () {
        console.log('人生的巅峰')
      })()

call方法

//改变函数内this指向 js提供了三种方法 call() apply() bind()
//1.call()
var o = {
  name:'andy'
}
function fn(a,b) {
  console.log(this)
  console.log(a+b)
}
fn.call(o,1,2)
//call 第一个可以调用函数 第二个可以改变函数内的this指向
//call的主要作用可以实现继承
function Father(uname,age,sex) {
  this.uname = uname
  this.age = age
  this.sex =sex
}
function Son(uname,age,sex) {
  Father.call(this,uname,age,sex)
}
var son = new Son('刘德华',18,'male')
console.log(son)

apply方法

//改变函数内this指向 js提供了三种方法 call() apply() bind()
//2.apply() 应用 运用的意思
var o = {
  name: 'andy'
}
function fn(arr) {
  console.log(this)
  console.log(arr)
}
fn.apply(o,['pink'])
//1.也是调用函数 第二个可以改变函数内部的this指向
//2.但是他的参数必须是数组(伪数组)
//3.apply的主要应用
var arr = [1,66,3,99,4]
console.log(Math.max.apply(Math, arr));
console.log(Math.min.apply(Math, arr));

bind方法

JS进阶 学习笔记 day25 2021-5-12

3.5.用户名验证

//量词是设定某个模式出现的次数
var reg = /^[a-zA-Z0-9_-]{6,16}$/ //这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选一
//{6,16} 中间不能有空格
console.log(reg.test('a'))
console.log(reg.test('8'))
console.log(reg.test('18'))
console.log(reg.test('aa'))
console.log('------')
console.log(reg.test('aaaaaaa'))
console.log(reg.test('andy-red'))

3.6 预定义类

\d 匹配0-9之前的任意数字，相当于[0-9]

\D 匹配所有0-9之外的字符，相当于[^0-9]

\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_-]

\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_-]

\s 匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]

\S 匹配非空格的字符，相当于[^\t\r\n\v\f]

4.2正则表达式参数

switch（也称为修饰带）按照什么样的模式来匹配 有三种值：

• g：全局匹配
• i：忽略大小写
• gi：全局匹配＋忽略大小写

ES6

let

ES6中新增的用于声明变量的关键字

• let声明的变量只在所处于的块级有效

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性

• 不存在变量提升

• 暂时性死区

var

变量i是全局的，函数执行是输出的都是全局作用域下的i值

let

每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是子级上一级（循环产生的块级作用域）作用域下的i值

const

作用：声明常量，常量就是值（内存地址）不能变化的量

• 具有块级作用域

• 声明常量时必须赋初始值

• 常量复制后，值不能修改

  对于简单数据类型：常量值不可以更改

  对于复杂数据类型：常量值不能更改地址 数据结构内部的值可以更改

解构赋值

//数组结构允许我们按照对应的关系从数组中提取值 然后将值赋值给变量
let ary = [1,2,3]
let [a,b,c] = ary
console.log(a)
console.log(b)
console.log(c)

//对象结构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {name: 'lisi', age: '30', sex: 'male'}
let {name, age, sex} = person
console.log(name)
console.log(age)
console.log(sex)

let {name: uname, age: uage, sex: usex} = person
console.log(uname)
console.log(uage)
console.log(usex)

箭头函数

//箭头函数是用来简化函数定义语法的
const fn = () => {
  console.log(123)
}
fn()

//在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
const sum = (n1, n2) => n1 + n2

const result = sum(10, 20)
console.log(result)
//在箭头函数中，如果形参只有一个 形参外侧的小括号也是可以省略的
const fn = v => {
  alert(v)
}
fn(20)

//箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数在使用this this关键字将指向箭头函数定义位置中的this
function fn() {
  console.log(this)
  return () => {
    console.log(this)
  }
}

const obj = {name: 'zhangsan'}
const resFn = fn.call(obj)
resFn()

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

Array 扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

• 扩展运算符可以应用于合并数组

• 将类数组或可遍历对象转换为真正的数组

实例方法：findIndex()

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

实例方法：includes()

模板字符串：

模板字符串中可以解析变量

模板字符串可以换行

startsWith 和 endsWith

// 判断字符串是否以某一个字符开头或者结尾
let str = 'hello emcascript 2015'
let r1 = str.startsWith('hello')
console.log(r1)
let r2 = str.endsWith(2015)
console.log(r2)

repeat()

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

console.log('y'.repeat(5))

Set 数据结构

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

Set数据结构

实例对象

• add（value）：添加某个值，返回Set结构本身
• delete（value）：删除某个值，返回一个布尔值，表示删除是否成功
• has（value）：返回一个布尔值，表示该值是否为Set的成员
• clear（）：清除所有成员，没有返回值

Node

Node是一个基于Chrome V8引擎的JavaScript代码运行环境

1.1 JavaScript开发弊端

JavaScript在使用时存在两大问题，文件依赖和命名冲突

1.4 Node.js中模块化开发规范

• Node规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认在外部无法得到
• 模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块

const greeting = name => {
  return `hello ${name}`
}
const x = 100
exports.x = x
module.exports.greeting = greeting
//当exports对象和module.exports对象指向的不是同一个对象时 以module.exports为准
module.exports = {
  name: 'zhangsan'
}
exports = {
  age: 20
}

const a = require('./04-module.exports')
console.log(a.greeting('张三'))