2.JavaScript技术学习

二.JavaScript技术学习

1.什么是JavaScript

2.node.js简介

3.js的简易语法

4.js简易语法重点

二.JavaScript技术学习

1.什么是JavaScript

• 前端：页面布局 html+css
• 前端：脚本编写交互 javascript（也叫ECMAScript）

2.node.js简介

①node.js是什么？

• node.js集成了javascript引擎的运行环境，扩展了很多模块
  文件模块：完成文件输入输出流。
  HTTP模块：完成服务器监听功能

②node.js和浏览器的关系。

• 两者都集成了JavaScript的引擎
• 浏览器端有Dom引擎，用来解析html和css，来渲染页面
• node.js可以用来写后端服务器（平台）

③node.js的运行场景

• 前端学习过程中需要后端知识，用node.js开发简易后端来联调
• 前端与后端直接交互，数据封装过难。可以加入BFF交互的node.js中间层，让前端->node.js->后端，此BFF层可以封装好数据返回给前端。

3.js的简易语法

①Let声明变量

• 特点
  let变量不能重复，var可以重复变量
  let变量有块级作用域和函数作用域，var只有函数作用域。
  let没有变量提升（声明变量直接放在代码首行），var有变量提升。
• 练习

//1. 变量不能重复声明
let name = 'Helen'
let name = 'hellen1'
//报错：SyntaxError: Identifier 'name' has already been declared

//2. 存在块儿级作用域
// if else while for 
{
   let star = 5
}
console.log(star)
//报错：star is not defined

//3. 不存在变量提升
console.log(song)
//报错：Cannot access 'song' before initialization
let song = '依然爱你';

②const声明常量

• 特点
  必须有初始值，有初始值后不能改变。
  常量数组地址不变，可以追加内容
• 练习

//声明常量
const SCHOOL = '尚硅谷'
console.log(SCHOOL)

//1. 一定要赋初始值
const A
//报错：SyntaxError: Missing initializer in const declaration

//2. 一般常量使用大写(潜规则)
const a = 100

//3. 常量的值不能修改
SCHOOL = 'ATGUIGU'
//报错：TypeError: Assignment to constant variable.

console.log(PLAYER)
//报错：ReferenceError: PLAYER is not defined

//4. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
const TEAM = ['康师傅','海狗人参丸','雷神','阳哥']
TEAM.push('环') //常量地址不变，不会报错
TEAM = 100 //报错：TypeError: Assignment to constant variable.

③解构赋值

• 特点
  直接能够将批量变量得到数组或对象内的值
• 练习

//1. 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)

//2. 对象的解构
const zbs = {
    username: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("演小品");
    }
}

let {username, age, xiaopin} = zbs
console.log(username)
console.log(age)
console.log(xiaopin)
xiaopin()

//3. 根据名字自动解构
let {xiaopin} = zbs
xiaopin()

④模板字符串

• 特点
  字符串写成什么格式，输出什么格式。
  用反引号而不是单引号。
  变量拼接用${}而不是+
• 练习

// ES6 引入新的声明字符串的方式 『``』 '' ""
//1. 声明
let str = `我也是一个字符串哦!`
console.log(str, typeof str)

//2. 内容中可以直接出现换行符
let list = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
            </ul>`
console.log(list)

//3. 变量拼接
let lovest = '贾玲'
let out = `我喜欢${lovest}`
console.log(out)

⑤声明对象简写

• 特点
  变量和属性名前后一致。
  声明对象时直接使用不需要赋值
• 练习

let username = 'Tom'
let age = 2
let sing = function () {
  console.log('I love Jerry')
}

// 传统
let person1 = {
  username: username,
  age: age,
  sing: sing,
}
console.log(person1)
person1.sing()

// ES6：这样的书写更加简洁
let person2 = {
  age,
  username,
  sing,
}

⑥定义方法简写

• 特点
  不需要写function，直接写函数名即可。
• 练习

let person1 = {
  sayHi: function () {
    console.log('Hi')
  },
}
person1.sayHi()

// ES6
let person2 = {
  sayHi() {
    console.log('Hi')
  },
}
person2.sayHi()

⑦参数默认值

• 特点
  JS没有方法重载，后面方法覆盖前面方法。
  方法形参不定义为undefined。
  方法形参可以有默认值，不传递参数时用默认值
• 练习

function add(a, b, c = 0) {
  return a + b + c
}

⑧对象扩展运算符

• 特点
  不是引用传递，而是拷贝一个新对象
• 练习

//展开对象(拷贝对象)
let person = { name: '路飞', age: 17 }
// let someone = person //引用赋值
let someone = { ...person } //拷贝
someone.name = '索隆'
console.log(person)
console.log(someone)

⑨箭头函数

• 特点
  方便函数简写.
  前面的()变量为参数，后面的{}为函数体
• 练习

//声明一个函数
let fn = function(a){
  return a + 100
}

//箭头函数
let fn = (a) => {
  return a + 100
}

⑩Promise语法

• 特点
  Promise用于异步操作（IO，调用接口），有初始状态，失败状态，成功状态。
  Promise可以改变状态来将处理成功失败的代码解耦。
• 练习

const fs = require('fs')

//实例化 Promise 对象：
//Promise对象有三个状态：初始化、成功、失败
const p = new Promise((resolve, reject) => {
  //调用readFile方法读取磁盘文件：异步操作
  fs.readFile('./他.txt', (err, data) => {
    //当文件读取失败时，可以获取到err的值
    if (err) reject(err) //reject将Promise对象的状态设置为失败

    //当文件读取成功时，可以获取到data的值
    resolve(data) //resolve将Promise对象的状态设置为成功
  })
})

//调用 promise 对象的方法
//then：当 Promise状态成功时执行
//catch：当 Promise状态失败时执行
p.then(response => {
  console.log(response.toString())
}).catch(error => {
  console.log('出错了')
  console.error(error)
})

4.js简易语法重点

①解构赋值

• 作用
  前端获得后端的数据，只需要部分，此时解构
• 练习

const zbs = {
    username: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("演小品");
    }
}

let {username} = zbs

②Promise的使用

• 作用
  异步获取后端数据后来解决错误或者展示成功的数据
• 具体使用
  new Promise 定义promise的初始态，通过promise内置resolve函数参数来设定状态为成功，通过promise内置的reject函数参数来设定状态为失败。（可以利用resolve和preject封装好成功或失败的数据）。
  外部利用具体对象调用then方法来执行成功后的操作，可以获得封装的成功数据。利用具体对象调用catch方法来执行失败后的操作，可以封装失败的数据。
• 例子

//引入fs的库
const fs = require('fs')

//实例化 Promise 对象：
//Promise对象有三个状态：初始化、成功、失败
const p = new Promise((resolve, reject) => {
  //调用readFile方法读取磁盘文件：异步操作
  fs.readFile('./他.txt', (err, data) => {
    //当文件读取失败时，可以获取到err的值
    if (err) reject(err) //reject将Promise对象的状态设置为失败

    //当文件读取成功时，可以获取到data的值
    resolve(data) //resolve将Promise对象的状态设置为成功
  })
})
//调用 promise 对象的方法
//then：当 Promise状态成功时执行
//catch：当 Promise状态失败时执行
p.then(response => {
  console.log(response.toString())
}).catch(error => {
  console.log('出错了')
  console.error(error)
})

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新