JavaScript学习笔记（3）

加油加油，状态越来越好，薪资越来越高！

—— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— ——

Let命令

ES6新增了Let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

let块级作用域（花括号级别的）

for循环的计数器，就很适合使用let命令

let不存在变量提升

var命令会出现“变量提升”现象，变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才能使用

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定在声明后使用，否则报错。

let不能重复声明

let不允许在相同作用域内，重复声明同一个变量。

const命令

const声明一个只读的常量。一旦声明，常量的值就不可改变

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const只在声明所在的块级作用域内有效

const不存在变量提升

const不能重复声明

对象解构赋值

<script>
    var user = {
    name : "iwen",
    age : 20
}

    //利用解构赋值方法简化
    const { name,age} = nser;
    console.log(name,age);

</script>

温馨提示：对象的属性没有次序，变量必须与属性同名，才能取到正确的值

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

字符串扩展

字符串Unicode表示法

ES6允许采用\nxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。

Unicode

统一码，也叫万国码，单一码是计算机科学领域里一项业界标准，包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

字符串遍历接口

for....of循环遍历

for(let i of str){
    console.log(i);
}

模板字符串

是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

字符串新增扩展

传统上，JS只有indexof方法，可以用来确定一个字符串是否包含在另一个字符串中，ES6又提供了三种新方法：includes（），startsWith（），endWith()

includes():返回布尔值，表示是否找到了参数字符串

startsWith():返回布尔值，表示参数字符串是否在原字符串的头部

endsWith():返回布尔值，表示参数字符串是否在原字符串的 尾部

这三个方法都支持第二个参数，表示开始搜索的位置

repeat（）

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

padStart(),padEnd()

如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

trimStart(),trimEnd()

消除头部或者尾部的空格，他们返回的都是新的字符串，不会修改原始字符串。

at()

at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

温馨提示：如果参数的位置超出了字符串范围，返回undefined

数组扩展

扩展运算符

扩展运算符是三个点（...）。将一个数组转为用逗号分隔的参数序列

代替函数的apply方法

由于扩展运算符可以展开数组，所以不在再需要apply方法，所以将数组转为函数的参数了。

新增方法

Array.from()方法用于将类数组转换为真正的数组

类数组、伪数组只能使用数组的读取方法和length属性，不能使用数组方法。

常见的类数组有三类：arguments、元素集合、类似数组的对象

        arguments

function add(){
    let collection = Array.from(arguments);
    collection.push(40);
    console.log(collect);
}
add(10,20,30)

        元素集合

let divs = document.querySelectorAll('div');
console.log(Array.from(divs));

        类似数组的对象

let arrayLike = {
    '0':'a',
    '1':"b",
    '2':'c',
    length:3
};
let arr = Array.from(arrayLike);
console.log(arr);

array.of()方法用于将一组值，转换为数组

Array.of(3,11,8); //[3,11,8]

对象的扩展

ES6允许在大括号里面，直接写入变量和函数，作为对象的 属性和方法。这样的书写更加简洁。

let name = "iwen"
const user = {
    name,
    age:20
}

属性名和属性值是同样的变量名称，就可以省略；

除了属性简写，方法也可以简写；

这种写法用于函数的返回值，将会非常方便

属性名表达式

用表达式作为对象的属性名，即把表达式放在方括号内

var ib = "itbaizhan";
var user = {
    [ib] : "c, java, python",
    age : 13
}
console.log(user);

对象的扩展运算符

var z = {a:10,b:20}
var n = {...z}
console.log(n); //a:10,b:20

函数的扩展——箭头函数

 普通

function fn1(){

}

 赋值方式声明函数

var fn2 = function(x,y){
    return x+y;
}

箭头函数

多个参数

var fn3 = (x,y) => x+y

一个参数

var fn4 = x =>x

没有参数

var fn5 = () => {}

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

使用注意点：

对于普通函数来讲，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。他没有自己的this对象，内部的this就是定义时上层作用域中的this。

温馨提示：如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

var name = " itbaizhan "
var user = {
    name:"iwen",
    getName(){
        setTimeout(() => {
            console.log(this.name);//iwen
        })
    }
}
user.getName();

var name = "ime"
var user = {
    name : "iwen",
    age : 20,
    getName(){
        setTimeout(function(){
            console.log(this.name); //ime
        })
    }
}
user.getName();

箭头函数里面没有自己的this，而是引用外层的this

Set数据结构

它类似于数组，但是成员的值都是唯一的，没有重复的值。

set本身是一个构造函数，用来生成set数据结构。

const = new Set();
[2,3,4,5,6,2,2].foreach(x => s.add(x));

for(let i of s){
    console.log(i);
}
//2 3 4 5 6

通过add()方法向set解构加入成员，结果表明set解构不会添加重复的值。

set函数可以接受一个数组作为参数 

var s = new Set([10,20,30]);
console.log(s); // Set(3) {10,20,30}

可以利用Set函数做数组去重的方法

var arr = [10,20,30,40,10,20];
var s = new Set(arr);
//set也可以使用扩展运算符来读取数据
Console.log([...s]);

字符串去重

[...new Set('abbacc')].join('')
// "abc"

向Set加入值的时候不会发生类型转换，所以5和“5”是两个不同的值。

var s = new Set();
s.add(5);
s.add("5");
console.log(s); // Set(2){5,"5"}

Size属性

返回Set实例的成员总数

s.size

Set数据结构的方法

add():set添加方法

delete()：删除某个值，返回一个布尔值，表示删除是否   s.delete("x")

has():返回一个布尔值，表示该值是否为Set的成员

clear(): 清除所有成员，没有返回值 s.clear()

Promise对象

基本概念

是异步编程的一种解决方案，传统的解决方案--回调函数和事件。

简单来说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

基本语法

Promise对象是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve（value）;
    }else{
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resole和reject。它们是两个函数，由JS引擎提供，不用自己部署。

Promise实例生成后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

Ajax实操

Promise封装Ajax,让网络请求的异步操作变得更简单

const getJSON = function(url){
    const promise = new Promise(function(resolve,reject){
        //异步操作：网络请求代码

        const handler = function(){
            if(this.readyState !== 4){
                //0 1 2 3 4
                return;
            }
            if(this.status === 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
        const client = new XMLHttpRequest();
        client.open("GET",url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept","application/json");
        client.send();
    })
    return promise;
}
getJSON("https://images.app.goo.gl/VE9hu5ZyTEJqUB426")
.then(function(data){
    console.log(data);
},function(error){
    console.log(error);
})

Async函数

使得异步操作变得更加方便

async函数可以将异步操作变为同步操作

把具有异步操作的代码前面放入：await

示例代码

function print(){
    setTimeout(() => {
        console.log("定时器");
    },1000)
    console.log("Hello")；
}
print()

基本语法

function timeout(ms){
    return new Promise((resolve) => {
        setTimeout(resolve,ms);
    });
}

async function asyncPrint(value,ms){
    await timeout(ms);
    console.log(value);
}

asyncPrint('hello world',50);

异步应用

function ajax(url){
    return new Promise(function(resolve,reject){
        $.getJSON(url,function(result){
            resolve(result)
        },function(error){
            reject(error)
        })
    })
}

async function getInfo(){
    let ids = await ajax("http://iwenwiki.com/api/generator/list.php")
    let names = await ajax("http://iwenwiki.com/api/generator/id.php?id ="+ids[0])
    let infos = await ajax("http://iwenwiki.com/api/generator/name.php?name="+names.name)
    console.log(infos);    
}

getInfo();

class的基本语法

实例方法

class People{
    say(){
        console.log("Hello");
    }
}
var p = new People();
p.say()

实例属性

实例属性指的是类的实例对象可调用的属性

class People{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name,this.age);

    }
}
var p  = new People("iwen",20);
p.say()
console.log(p.name,p.age);

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”

class Person{
    static classMethod(){
        console.log("Hello");
    }
}
Person.classMethod()              //Hello


var p = new Person();
p.classMethod()                   //p.classMethod is not a function

如果静态方法包含关键字this，这个指向的是当前类而不是实例对象

class People{
    static getSay(){
        this.say();
    }
    static say(){
        console.log('Hello');
    }
    say(){
       console.log('world'); 
    }
}
People.getSay()   //Hello

静态属性

指的是Class本身的属性，即Class.propName

Module的语法

ES6模块是通过export命令显示指定输出的代码，再通过import命令输入。

export var Hello = "hello"      //hello.js文件
import {Hello}  from"./hello.js"       //index.js文件

测试方法

采用Nodejs方式进行测试Module语法

但是nodejs采用的是CommanJS的模块化规范，使用require引入模块；而import是ES6的模块化规范关键字。想要使用import，必须引用babel转义支持，通过babel进行编译，使其变成node的模块化代码。

第一步：全局安装babel-cll           npm insall -g babel-cll

第二步：安装babel-preset-env     npm install -D babel-preset-env

第三步：运行代码                          babel-node --preset env index.js

export命令

导出变量

export var firstName = 'sxt';
export var lastName = 'itbaizhan';
export var year = 2000;

导出函数

export function add(x,y){
    return x+y;
}

import命令

使用了export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

除了指定加载某个输出值，还可以使用整体加载，即用*指定一个对象，所有输出值都加载在这个对象上面

import {Hello,firstName,getName as getMyName} from "./hello.js"
                 ||
                 \/
import * as MyHello from "./hello"

export default命令

在使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。

为了给用户提供方便，就要用到export default 命令，为模块指定默认输出。

一个文件只能有一个export default