定义变量

let

  1. 变量不能重复声明
  2. 有块级作用域（在一对大括号里面）
    1. var 的块级作用域只在函数里面
  3. 不存在变量提升，即只能在变量定义之后使用

  4. 不影响作用域链

    1. {
    2.   let school = '学校';
    3.   function fn(){
    4.       console.log(school);
    5.   }
    6.   fn();
    7. }

  5. 对比var ```javascript //获取div元素对象 let items = document.getElementsByClassName(‘item’);

//遍历并绑定事件 for(var i = 0;i<3;i++){ items[i].onclick = function(){ //修改当前元素的背景颜色 this.style.background = ‘pink’; } } for(let i = 0;i<3;i++){ items[i].onclick = function(){ //修改当前元素的背景颜色 items[i].style.background = ‘pink’; } } 若i用var定义，则i是window的属性，首次加载完成时被累加至3，则在点击修改颜色时，i为3 若i用let定义，则在块级作用域下，当点击修改颜色时，会查找该块中的i的值，且从内向外查找，所以i的值有效

  1. <a name="YNEMI"></a>
  2. ## const
  4. 1. 定义时必须赋初始值，且之后不能进行修改
  5. 1. 对数组和对象，其元素的值可以修改，指针指向不变
  6. ```javascript
  7. const NAKU = ['5t5','3u'];
  8. NAKU.push('2250');
  9. NAKU[0] = 'tokyo';

  1. 有块级作用域

    解构赋值

  2. 数组对应位置，对象对应名字

    1. let list = ["悠一","杉木", "福山"];
    2. let [you, sha, fu] = list;

  3. 对象的解构赋值，

    1. let human = {
    2.  name: "naku",
    3.  age: 42,
    4.  tv: function(){
    5.      console.log("kongnigiwa");
    6.  }
    7. }
    8. let { tv, age } = human;   // 只要名字一样就可以，不需要顺序
    9. tv();

模板字符串

  1. 内容中可以出现换行符

    1. let str = `<div></div>
    2.         <div></div>
    3.         <div></div>`;

  2. 变量拼接

    1. let zou = `诹防顺`;
    2. let en = `${zou}部一`;
    3. console.log(en);
    4. const LANGDU = {
    5.  en,   // 利用前文相同名字为对象的属性赋值
    6.  chuyian(){   // 省略chuyan: function(){}
    7.      console.log("出演朗读剧")
    8.  }
    9. }

    箭头函数

函数的定义方式：

  1. 一般

    1. const a = function() {
    2. }

  2. 对象字面量中

    1. const obj = {
    2.  b: function() {
    3. },
    4. c() {
    5. }
    6. }

  3. 箭头函数

    1. let fn = (a, b) => {
    2.  return a+b;
    3. }

  4. 箭头函数中 this 是静态的，this 始终指向函数声明时所在的最近作用域下的 this 的值，即使使用 .call 方式 也不改变

  5. 不能作为构造实例化对象，即箭头函数被new
  6. 不能使用 arguments 变量，arguments是传递给函数的由其参数组成的数组，可以访问与修改。

  7. 简写

    1. 当形参有且只有一个时，省略小括号
    2. 当代码体只有一条语句的时候，省略花括号，且同时省略return关键字，此时执行结果就是函数的返回值
    3. let double = a => a+a; 
      1. let box1 = document.getElementById("div1");
      2. box1.addEventListener("click", function(){
      3. let _this = this;  // 保存this
      4. setTimeout(function(){
      5.   // this.style.background = '#b7f79a'; 这个this指向的是window，因为最近的这个函数被调用时
      6.   _this.style.background = '#b7f79a';
      7. }, 2000);
      8. });
      9. let box2 = document.getElementById("div2");
      10. box2.addEventListener("click", function(){
      11. setTimeout(()=>{   // 箭头函数的this为声明时所在位置的this
      12.   this.style.background = '#b7f79a';
      13. }, 2000);
      14. })

  8. 箭头函数适合与 this 无关的回调，定时器、数组的方法回调

  9. 不适合与 this 有关的回调，事件回调、对象的方法
  10. js函数内部的this指向

函数参数默认值

  1. 形参初始值，一般位置靠后

    1. function(a,b,c=10){
    2. }

  2. 与解构赋值结合

    1. function connect({host='127', username, password, port}){
    2.  console.log(host,username,password, port)
    3. }
    4. connect({
    5.  // host: 1,
    6.  username: 'root',
    7.  password: '123',
    8.  port: 3300
    9. })

对象的字面量

定义对象时，直接使用const obj = { }
字面量的增强：

  1. 属性的增强写法：

    1. const name = 'ldf';
    2. const age = 23;
    3. const height = 1.60;
    4. const I = {
    5.  name,
    6. age, 
    7. height
    8. }

  2. 函数的增强写法：

    1. const obj = {
    2. // 普通写法
    3.   run: function () {
    5. },
    6. // 增强
    7. eat(){
    8. }
    9. }

rest参数

  1. 代替arguments

    1. function date(...args){
    2.  console.log(args);   // 输出的是数组
    3. }
    4. date("悠一","杉田","樱井");

  2. 必须放在参数的最后

  3. 当不确定函数的参数个数时，这样比较方便

    扩展运算符

  4. 函数调用时 ... ，将数组转换为逗号分隔的参数序列

    1. function date(){
    2.  console.log(args);   // 输出的是数组
    3. }
    4. const arr = ["悠一","杉田","樱井"];
    5. date(...arr);  // =>> date("悠一","杉田","樱井");

  5. 可用于数组的合并

    1. let names=['jojo','dio'];
    2. let shengyou = ["悠一","杉田","樱井"];
    3. const zuhe = [...names, ...shengyou];

  6. 可用于数组的克隆

  7. 将伪数组转为真正的数组

    1. const divs = document.querySelectorAll("div");
    2. const divArr = [...divs];

    Symbol

  8. symbol 是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：”new Symbol()”。

  9. 创建
    1. let s = Symbol("123");
    2. let s = Symbol.for("123");
  10. Symbol 的值不能与其他数据进行运算
  11. Symbol 的值是唯一的，用来解决命名冲突
  12. Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

    全部数据类型

    USONB
    u undefined
    s string symbol
    o object
    n null number
    b boolean

Symbol的应用

  1. Symbol是独一无二的，为对象添加属性与方法

    1. let game = {
    2.  name: "els",
    3.  up(){
    4.      console.log("hhh");
    5.  }
    6. }
    7. let methods = {
    8.  up: Symbol()
    9. }
    10. game[methods.up] = function(){    // 方式一
    11.  console.log("sss");
    12. }
    13. let youxi = {
    14.  name: 'zhuque',
    15.  [Symbol("zq")]: function(){    // 方式二
    16.      console.log("zhuque game");
    17.  }
    18. }

    迭代器

  2. 迭代器（iterator），是一种接口，为各种不同的数据结构提供统一的访问机制

  3. 原生具备迭代器的数据有：Array，Arguments，Set，Map，String，TypeArray，NodeList

    1. 可用 for of 遍历
      1. let shengyou = ["悠一", "梶裕贵","润","樱井"];
      2. for(let s of shengyou){
      3. console.log(s);
      4. }
      5. // 使用 for in 输出的是下标

  4. 应用，自定义遍历数组，Symbol.iterator 为每一个对象定义了默认的迭代器。

    1. const banji = {
    2.  name: "暗杀教室",
    3.  stuts: ["杀老师", "小蓝","小绿","sense"],
    4.  [Symbol.iterator](){
    5.      let index = 0;     // 定义索引
    6.      let _this = this;  // 保存this指向
    7.      return {
    8.          next: function(){
    9.              if(index < _this.stuts.length){
    10.                  const result = {value: _this.stuts[index], done: false};
    11.                  index++;
    12.                  return result;
    13.              }else{
    14.                  return {value: undefined, done: true};
    15.              }
    16.          }
    17.      }
    18.  }
    19. };
    20. for(let i of banji){
    21.  console.log(i);
    22. }

生成器

  1. 生成器（Generator）是一个特殊的函数，应用于异步编程，可以解决一定的回调地域问题
  2. 定义时，需要在function和函数名之间加一个 *

  3. field 语句将函数体分成多个块，定义对象的时候返回一个迭代器对象

    1. function * gen(){
    2.  console.log("块一");
    3.  yield 'y1';
    4.  console.log("块二");
    5.  yield 'y2';
    6.  console.log("块三");
    7.  yield 'y3';
    8. }
    9. let iter = gen();   // 返回一个迭代器对象
    10. // 通过它的next方法执行生成器的内容
    11. console.log(iter.next());    // 块一  {done: false,value: "y1"}.先执行第一个块的语句，再返回迭代器的next的返回值
    12. console.log(iter.next());    // 块二  {done: false,value: "y2"}
    13. for(let v of iter){
    14.  console.log(v);   // 每一次返回结果为yield语句的内容  y1  y2  y3，<--这个搞不懂
    15. }

  4. 可以在next方法中传参，其作为相应位置的前一个yield语句的返回结果

    1. function * gen(){
    2.  console.log("块一");
    3.  let a = yield 'y1';
    4.  console.log(a);   // aa
    5.  console.log("块二");
    6.  yield 'y2';
    7.  console.log("块三");
    8.  yield 'y3';
    9. }
    10. let iterator = gen();   // 返回一个迭代器对象
    11. iterator.next();
    12. iterator.next("aa");    // 传给第一个yield

    生成器在计时器的示例

    1. function one(){
    2.  setTimeout(() => {
    3.      console.log(111);
    4.      ite.next();
    5.  }, 1000);
    6. }
    7. function two(){
    8.  setTimeout(() => {
    9.      console.log(222);
    10.      ite.next();
    11.  }, 2000);
    12. }
    13. function three(){
    14.  setTimeout(() => {
    15.      console.log(333);
    16.      ite.next();
    17.  }, 3000);
    18. }
    19. function * gen(){
    20.  yield one();
    21.  yield two();
    22.  yield three();
    23. }
    24. let ite = gen();
    25. ite.next();

Promise

  1. 用于异步编程，可以解决回调地狱问题，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
  2. 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
    • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
    • 已兑现（fulfilled）: 意味着操作成功完成。 ？ resolved ?
    • 已拒绝（rejected）: 意味着操作失败。 ```javascript // 简单例子 const p = new Promise(function(resolve, reject){ // 模拟一个异步操作 setTimeout(() => { // let data = “数据库中的数据”; // resolve(data); // 执行这个则表示成功 let err = “获取数据失败”; reject(err); // 执行这个则表示失败 }, 1000); }); p.then(function(data){ // 第一个是返回成功的回调函数 console.log(data); }, function(reason){ // 第二个是返回失败的回调函数 console.error(reason); })

// 或者 p.then((data) => {成功时}).catch((err) => {失败时})

  2. 2. 定义`Promise`对象时需要使用一个函数作为参数，这个函数也拥有两个参数  都是函数   用来改变该Promise对象的状态（pending -> resolved 或 pending -> rejected）。如果改变已经发生了，你再对`Promise`对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
  3. 2. Promise对象拥有一个 `then` 方法，为Promise实例添加状态改变时的回调函数。`then`方法的返回结果也是一个Promise对象，这个对象状态由回调函数的执行结果决定
  4.    1. 若then的回调函数的返回结果是 非promise类型的属性，则状态为成功，且返回值为对象成功的值
  5.    1. 若then的回调函数的返回结果是 promise类型的属性，则这个返回的promise对象的状态决定了then方法返回的promise对象的状态
  6.    1. 若then的回调函数的返回结果为抛出错误，则状态为失败
  7. 4. 有了`Promise`对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，`Promise`对象提供统一的接口，使得控制异步操作更加容易。
  8. 4. `catch`方法，专门写返回失败的回调函数，就是相对于`then`不写第一个回调函数
  10. 当需要多层 Promise 对数据进行处理时，比如 第一层拿到数据，处理，返回数据处理结果1；第二层对结果1做处理，得到结果2；第三层对2进行处理，得到3。二三层的 Promise 并没有异步操作。则可以简写
  11. ```javascript
  12. new Promise((resolve, reject) => {
  13.     setTimeout(() => {
  14.     resolve('aaa');
  15.   }, 1000) 
  16. }).then(res => {
  17.     ...处理1
  18.   return new Promise(resolve => {
  19.       resolve(res+'111')
  20.   })
  21. }).then(res => {
  22.     ...处理2
  23.   return new Promise(resolve => {
  24.       resolve(res+'222')
  25.   })
  26. }).then(res => {
  27.     ...处理3
  28.   return new Promise(resolve => {
  29.       resolve(res+'333')
  30.   })
  31. })
  33. // 简写：
  34. new Promise((resolve, reject) => {
  35.     setTimeout(() => {
  36.     resolve('aaa');
  37.   }, 1000) 
  38. }).then(res => {
  39.     ...处理1
  40.   return Promise.resolve(res + '111')          // return  res + '111'
  41. }).then(res => {
  42.     ...处理2
  43.   return Promise.resolve(res + '222')          // return  res + '222'
  44. }).then(res => {
  45.     ...处理3
  46.   return Promise.resolve(res + '333')          // return  res + '333'
  47. })
  49. 出错时 return Promise.reject('错误信息')  // 或者 throw '错误信息'
  50. 最后 .catch(err => {
  51.     ... 处理
  52. })

all

当需要多个请求结果时，可以用 Promise 的 all 方法，对多个p的结果进行判断，同时判断他们是否都得到。

  1. let p1 = new Promise(  )
  2. let p2 = new Promise(  )
  4. Promise.all([p1, p2]).then(results => {
  5.     results[0]   第一个 p 的结果
  6.   results[1]   第二个 p 的结果
  7. })

Set

  1. Set集合，成员值唯一（自动去重），实现了iterator接口，可以使用扩展运算符和for of。
  2. 集合的本质是对象
  3. 常用属性与方法：
    1. 元素个数： s.size
    2. 添加新的元素： s.add('newElement')
    3. 删除元素： s.delete('元素3')
    4. 检测： s.has('元素2')返回true或false
    5. 清空： s.clear()
    6. 进一步使用： ```javascript
  4. 数组去重 let arr = [1,2,3,2,3,4,5,6,5,4]; let result = […new Set(arr)];
  5. 交集 let arr2 = [2,3,2,4,5] let result2 = […new Set(arr)].filter(item => { let s2 = new Set(arr2); if(s2.has(item)) return true; else return false; })
  6. 并集 let result3 = […new Set([…new Set(arr), …new Set(arr2)])];
  7. 差集，交集取反 let result4 = […new Set(arr)].filter(item => { let s2 = new Set(arr2); return !s2.has(item); }) ```

Map

  1. 键值对的集合，但是其键不限于字符串。也实现了iterator接口。
  2. 常用属性与方法： let m = new Map();
    1. 添加元素： m.set(,)
    2. 大小： m.size
    3. 删除：m.delete(键)
    4. 获取： m.get(键)
    5. 清空： m.clear()

class类

  1. 比ES5更简洁
  2. 构造方法为constructor(){}，类的方法写法：名字(){}

静态属性方法

  1. 函数对象中

    1. function Phone(){}  
    2. Phone.name = "nokia";   // 这个name属于函数对象，而不属于实例对象
    3. Phone.propotype.size = '5.5inch';   // 原型对象
    4. let nokia = new Phone();   
    5. nokia.name;  // undefined
    6. nokia.size;  // 5.5inch   实例对象与原型对象想通

  2. 面向对象中

    1. class Phone{
    2.  static name = "手机";  // 静态对象
    3. }
    4. let nokia = new Phone();
    5. nokia.name;  // undefined，此属性属于类，而不属于实例对象

继承

1. function

  1. // 使用function实现继承
  2. function Flower(name, color){
  3.     this.name = name;
  4.     this.color = color;
  5. }
  6. Flower.prototype.say = function(){
  7.     console.log("I am a flower");
  8. }
  9. function Lily(name, color, place, time){
  10.     Flower.call(this, name, color);
  11.     this.place = place;
  12.     this.time = time;
  13. }
  14. // 设置子级构造函数的原型
  15. Lily.prototype = new Flower;
  16. Lily.prototype.constructor = Lily;
  17. // 声明子类的方法
  18. Lily.prototype.boom = function(){
  19.     console.log("boom...");
  20. }
  21. Lily.prototype.fall = function(){
  22.     console.log("fall...");
  23. }
  24. const you = new Lily('百合花','白色','中国','春天');
  25. console.log(you);

2. class，继承+重写父类方法

  1. // class
  2. class Phone{
  3.     constructor(brand, price){
  4.             this.brand = brand;
  5.             this.price = price;
  6.     }
  7.     call(){
  8.         console.log("call me by your name");
  9.     }
  10. }
  11. // 继承
  12. class SmartPhone extends Phone{
  13.     constructor(brand, price, color, size){
  14.         super(brand, price);
  15.         this.color = color;
  16.         this.size = size;
  17.     }
  18.     phone(){
  19.         console.log("拍照？");
  20.     }
  21.     playGame(){
  22.         console.log("玩游戏？");
  23.     }
  24.     // 重写，完全重写
  25.     call(){
  26.         // 不能用 super() 调父类同名方法
  27.         console.log("call you");
  28.     }
  29. }
  30. let onePlus = new SmartPhone("1+", 1999,"白色","5.4inch");
  31. console.log(onePlus);

get set

简单使用

  1. class Game{
  2.     get price(){
  3.         console.log("get get get");
  4.         return "属性值";  // 返回的就是这个属性(price)的值
  5.     }
  6.     set price(newVal){   // 设置属性值，必须有一个参数
  7.         console.log("set set set");
  8.     }
  9. }
  10. let g = new Game();
  11. console.log(g.price);  // 使用该属性时，调用get方法，得到其返回值
  12. g.price = 'free';      // 调用set方法

数值扩展

1. Number.EPSILON

  • Number.EPSILON 的值接近一个极小值（2.22E-16），当两个浮点数的差值小于
    1. // 当两个浮点数的差值小于这个值时，判断他俩相等
    2. function equal(a, b){
    3.   return Math.abs(a-b) < Number.EPSILON;
    4. }

2. 二、八、十、十六进制

  • 二进制，以0b开头，如0b1010
  • 八进制，以0o开头，如0o777
  • 十进制
  • 十六进制，以0x开头，如0xfff

3. 检测是否为某个数
Number.isNaN( 数 ) 是否为NaN
Number.isFinite(数) 是否为无限
Number.isInteger(数) 是否为整数
Math.sign(数) 判断数为 整数（返回1） 0 负数（返回-1）

4. Number.parseInt Number.parseFloat
截取字符串中的数值部分

5. Math.trunc
将数字的小数部分抹掉

对象方法的扩展

Object.is
判断两个值是否完全相等，与===有点区别，比如在判断两个NaN是否相等
Object.assign
对象的合并，将前者同名属性覆盖，Object.assign(o1, o2)
Object.setPropotypeOf Object.getPropotypeOf
设置、获取原型对象

模块化

  1. 模块化是指将一个大的程序文件 拆成许多小的文件，然后将小文件组合起来。
  2. 优点：防止命名冲突，可以代码复用，有高维护性

export 和 import

  1. 除了默认导出外，都需要导入时的名字与导出时的名字一样

暴露的方法

分别暴露

  1. export let school = "ESM";
  2. export function learn(){
  3.     console.log("goooood!");
  4. }

统一暴露

  1. let school = "ESM";
  2. function learn(){
  3.     console.log("goooood!");
  4. }
  5. export {school, learn};

默认暴露

  1. export default {
  2.     name: 'nakamura',
  3.     job: function(){
  4.         console.log("声优");
  5.     }
  6. }

引入的方法

通用的引入

  1. import * as m1 from "./m1.js";
  2. // 使用
  3. m1.func()...

解构赋值形式

  1. import {school, learn, default as mm} from './m1.js';
  3. import aaan from './m.js';    // 默认导出的一个东西，不加 {}

引入的变量重名时，使用 as 建立别名。引入default时也使用别名

简便形式

  • 只能引入默认暴露的内容
    1. import m1 from './m1.js';  // m1.js里面只有默认暴露的东西
    2. m1.job();

引入安装的包

  • 比如引入jquery包
  1. 安装 npm i jquery
  2. 引入使用 import $ from ‘jquery’;
    1. 这种方式，如果直接在项目中使用（不打包）,好像会出错‘Relative references must start with either “/“, “./“, or “../“.’。

项目打包

  • 为了支持大多数浏览器的运行，需要用babel将源js文件转化为ES5格式，再打包
  1. 安装工具 babel-cli babel-preset-env browserify(webpack)
  2. 执行转化 npx babel js（原文件夹） -d dist/js（目标文件夹）
  3. 打包 npx browserify dist/js/app.js(输出文件) -o(输出) dist/bundle.js