node01-认识node和ES6的新语法

1.浏览器的组成

浏览器的组成

1.用户界面

2.浏览器的引擎

3.js解析器

4.网络平台

5.渲染引擎

6.ui后端

7.数据存储 localStorage 、 sessStroage、 cookie

主流的渲染引擎
Chrome浏览器: Blink引擎（WebKit的一个分支）。

​ Safari浏览器: WebKit引擎，windows版本2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发Windows版的Safari。

​ FireFox浏览器: Gecko引擎。

​ Opera浏览器: Blink引擎(早期版使用Presto引擎）。

​ Internet Explorer浏览器: Trident引擎 。

​ Microsoft Edge浏览器: EdgeHTML引擎（Trident的一个分支）。

2.浏览器的工作原理

页面在浏览器的执行过程

1.首先浏览器解析html标签和css样式表，生成dom树

2.根据html的标签和css样式表中的样式一一对应，生成渲染树

3.对渲染树进行布局

4.根据布局和渲染树的样式绘制页面

渲染引擎执行的过程.png

回流：

定义：当前页面的元素的布局，大小，尺寸等发生改变，影响整个页面的时候，就会发生回流。

正确表达为：当前render tree（渲染树）的元素，因位置、尺寸、大小发生改变，而需要页面重新绘制时，就会产生回流

回流产生的条件：

1.添加或删除可见的DOM元素

2.元素的位置发生改变

3.元素的尺寸发生改变 边距填充

4.元素的内容发生改变 字体大小，行高，图片的尺寸的改变

5.页面渲染初始化

6.浏览器窗口发生改变时（产生重绘和回流的最多的）

重绘：

定义：当前render tree(渲染树)的一些需要更新的元素，而这些属性只是影响元素的外观、风格、而不影响布局的

回流和重绘的关系是：

1.每个页面加载时，至少执行一次回流+重绘

2.回流必将引起重绘

3.但是重绘不一定引起回流

如何提高性能优化：

根本的原因是减少回流和重绘的次数

1.直接使用class类名修改样式，少用style的直接样式

2.将元素‘离线处理’

​ 元素的“离线处理”的方式：

​ 1.设置代码片段 ，相当于一个对象，将设置样式添加到这个‘对象’上，设置完成后，再将这个对象赋值到元素身上，这样只会产生一次回流+重绘

​ 2.将元素设置为display：none，修改完样式后，再将该元素设置display：block，这样会产生两次重绘与回流

3.将需要多次回流和重绘的元素，设置postion设置为absolute或则设置为fixed，脱离了标准流，它的变换不会影响到其他的元素

浏览器与服务器的交互过程

即：在浏览器的地址栏中输入一个域名，会发生哪些事？

​ 1.浏览器通过地址栏中发出请求

​ 2.首先会在本地找host文件解析域名，如果没有对应的ip，那么浏览器会继续找DNS服务器解析，得到对应域名的ip地址

​ 3.根据ip地址访问服务器具体的某个文件

​ 4.服务器根据浏览器的请求，将对应的数据响应给浏览器

​ 5.浏览器解析服务器的响应内容

3.认识node

什么是node：node是基于javascript实现的服务端的程序

解释2：是一个基于chrome V8引擎的javascript的运行环境

解释3：本质上不是一门新的编程语言，node.js是javascript运行在服务端的运行环境，编程语言还是javascript

前端使用node的原因是：

​ 1.降低编程语言的切换成本，node.js本质还是js

​ 2.nodejs是前端项目的基础设施，前端项目中用的大量工具，都是node.js实现的

nodejs和浏览器的区别：

​ 相同点：nodejs和浏览器都是javascript的运行环境，都能够解析js程序，ES的语法都能适应

​ 不同点：浏览器不能使用node中的功能，nodejs也不能使用浏览器中的功能

nodejs执行js内容的方式：

1.REPL：Read-Eval-Print-Loop

​ 实质相当于在浏览器的控制台执行js的代码

2.使用node软件执行js文件，有两种方式打开node

​ 2.1在命令提示框内输入node命令

​ 2.2在vs中直接打开node控制台

4.ES6的语法

let/const

​ var 的缺点：

​ 1.var声明的变量会有预解析，代码执行的逻辑和数据逻辑不一致，可读性差

​ 2.会有全局和函数作用域

let 的特点：

1.会产生一个块级的作用域，

2.变量不会被提升，不会预解析

3.变量不能重复定义

const的特点：

1.使用const定义常量，声明的同时必须赋值，并且赋值之后，不能再修改

2.变量不会被提升，不会预解析

3.变量不能重复定义

4.会产生一个块级的作用域，

操作字符串的新方法

startsWith()

语法：字符串.startsWith('字符A');

功能：查询当前字符串是否以字符A开头的，如果是返回true，否则返回false

let str = "chang jie love wang ting"

// console.log(str.indexOf('chang'))
// console.log(str.indexOf('jie'))
// console.log(str.indexOf('ting'))

console.log(str.startsWith('chang'))
console.log(str.startsWith('ting'))
console.log(str.startsWith('love'))

endsWith()

语法：字符串.endsWith('字符B');

功能：查询当前字符串是否以字符B结尾的，如果是返回true，否则返回false

console.log(str.endsWith('chang'))
console.log(str.endsWith('ting'))
console.log(str.endsWith('love'))

includes

字符串.includes('字符c')

功能：查询当前字符串是否存在字符c，如果是返回true，否则返回false

console.log(str.includes('love'))

操作数组的新方法

forEach：遍历数组，将数组中的每一个元素，交给回调函数处理，没有返回值

let arr = ['11','22','33','44','55']

//forEach
 let arr1 = []
arr.forEach(function (v) {
    arr1.push(v*2)
})
console.log(arr1)

map：遍历数组,将数组中的每一项，交给回调函数，并且将处理后的数据保存到一个新的数组中，返回值是一个回调函数处理后的新数组

//map
 let arr2 = arr.map(function (v) {
   return v *2
 })
 console.log(arr2)

filter：遍历数组，将数组中符合条件的元素保存到一个新的数组中，返回值一个符合条件的数组

let arr3 = arr.filter(function (v) { 
  return v >20
})
 console.log(arr3)

some：遍历数组，将数组中的每一项与条件比较，任意一项满足条件，这个数组的返回值是true

//some
let f1 = arr.some(function (v) {
   return v > 36  
 })
 console.log(f1)

every：遍历数组，只有数组中的所有项均满足条件，才会返回一个true，否则，返回一个false

//every
 let f2 = arr.every(function (v) {
   return v > 34
})
 console.log(f2)

find：遍历数组，查找当前数组，是否包含某一项，如果找到，返回第一个符合条件项

//find

 let v1 = arr.find(function (v) { 
   return v > 12
 })
 console.log(v1)

findIndex：遍历数组，查找当前数组，是否包含某一项，如果找到，返回第一个符合条件项的下标

//findIndex
let v2 = arr.findIndex(function (v) {
  return v > 12
})
console.log(v2)

对象的简写

1- 在对象中，如果属性名和变量名相同的话，可以省略一个

2- 在对象中，方法也可以简写， 不写 : function

let name = '春哥';
let age = 18;
let hobby = '敲代码';

// let obj = {
//     name: name,
//     age: age, 
//     sex: '男',
//     say: function () {
//         console.log('代码三遍敲完了吗？');        
//     }
// }

let obj ={
  name,
  age,
  sex:'男',
  say:function () { 
    console.log('哈哈，最后一遍了')
     
  }
}

console.log(obj)

函数的默认参数

函数在声明的时候可以设置形参的默认值，如果有传参，则取实参，否则使用默认值

// 函数在定义同时，可以给形参赋默认值， 如果有参数，取实参值， 没有参数就去默认值 
// 默认参数就是备胎

function add(num1=1,num2=1) {
  return num1+num2
}
console.log(add())
console.log(add(10))
console.log(add(10,10))

箭头函数

​ 1-要用箭头来定义函数
2-箭头函数是一个函数表达式
let 变量名 = function (参数类表) {函数体 }
let 变量名 = (参数类表) => {函数体 }

// 箭头函数 
// 1-要用箭头来定义函数
// 2-箭头函数是一个函数表达式  
// let 变量名 = function (参数类表) {函数体 }
// let  变量名 = (参数类表) =>  {函数体 }


// let add = function (n1, n2) {
//     console.log(n1 + n2);    
// }

let add =  (n1,n2) =>{
  console.log(n1+n2)
}

add(100, 1000);

箭头函数参数的优化：如果参数列表只有一个参数，小括号可以省略

// function say() {
//     console.log('春哥又帅了！');    
// }
let say = () =>'春哥又帅了！'
// function big(num) {
//     console.log(num * 10);    
// }

let big = num =>num * 10

// function add(n1, n2) {
//     console.log(n1 + n2);    
// }
let add = (n1,n2)=>n1+n2
// 箭头函数参数列表优化 ：
// 如果只有一个参数，（）可以省略 
// let big = (num) => {
//     console.log(num * 10);    
// }
console.log(say())
console.log(big(10))
console.log(add(1,3))

箭头函数的函数体的优化：如果函数体只有一行代码，可以省略大括号和return

// function big1(num) {
//     console.log(num * 10);    
//     return num * 10;
// }

// function add1(n1, n2) {
//     console.log(n1 + n2);  
//     return n1 + n2;
// }

// function add(n1, n2) {
//     return n1 + n2;
// }
// function big(num) {
//     return num * 10;
// }
// 在箭头函数中 ，如果函数体只有一行代码， {} 和 return 都可以省略 

let big1 = num => {
  console.log(num * 10);    
  return num * 10;
}

let add1 = (n1, n2) => {
  console.log(n1 + n2);  
  return n1 + n2;
}
// let big = num => {
//     return num * 10;
// }
let big = num => num * 10;

// let add = (n1, n2) => {
//     return n1 + n2;
// }
let add = (n1, n2) => n1 + n2;

console.log(big(3));

console.log(add(1, 2));