ECMAScript学习记录

最后简单学点这个。


# ECMAScript

let变量及特性:

// 声明变量
let a;
let b, c, d;
let f = 2, g = 'sdsdc', h = [];

// 1.变量不能重复声明
let a = 1;
let a = 2; //将会报错,因为变量不能重复声明

// 2.块级作用域
{
    let a = 'test';
}
console.log(a); //将会报错,a只在{}内有效

// 3.不存在变量提升
console.log(a);
let a = 'test'; //将会报错,log的时候a还没有声明

// 4.不影响作用域链
{
    let a = 'test';
    function fn() {
        console.log(a);
    }
    fn(); //是可以的
}

const常量及特性:

// 声明const常量
const a = 1;

// 1.一定要赋初始值
const aNumber = 1 //否则会报错

// 2.常量的值不能修改
// 3.也是块级作用域
// 4.对于数组和对象元素的修改,不算做对常量的修改,不会报错
const Team = ['a', 'b', 'c'];
Team.push('d'); //因为没有修改常量地址,所以不会报错

变量解构与赋值:

// ES6允许按照一定模式从数组和对象中提取值,或对变量进行赋值。这被称为解构赋值。
// 1.数组的解构
const F4 = ['a', 'b', 'c', 'd'];
let [wa, wb, wc, wd] = F4; //这时wa wb wc wd就分别等于"a" "b" "c" "d"

// 2.对象的解构
const zhao = {
    name: 'a';
    age: 0;
    xiaopin: function () {
        console.log("演小品");
    }
};
let { name, age, xiaopin } = zhao;//同名赋值,name现在就是"a"

模板字符串:

// ES6引入新的声明字符串的方式,反引号
// 1.声明
let str = `string`;
// 2.内容可以直接出现换行符
let str = `
            <ul>
                <li>a</li>
                <li>b</li>
            </ul>`;
// 3.变量拼接
let stra = `a`;
let pinjie = `${stra}bcd`;

对象的简化写法:

// ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样写更简洁
let name = `test`;
let fun = function () {
    console.log(`testtest`);
};

const school = {
    name,
    fun,
    newfun(){ // 创建了一个新方法,不用写成 newfun = function(){};
        console.log(`testtesttest`);
    }
};

箭头函数及声明特点:

// ES6中允许使用箭头来定义函数
// 声明函数
let fun = function(a, b) {

};
// 使用箭头声明函数
let jFun = (a, b) => {
    return a + b;
};
// 调用函数
let result = jFun(1, 2);

// 特性
// 1.this是静态的,始终指向函数声明时所在作用域下的this的值
getName.call(school); //this的作用域就在school里面了

// 2.不能作为构造实例化对象
let newA = new A(); //这个是无效的

// 3.不能使用arguments变量
let fn = () => {
    console.log(arguments);
}
console.log(fn(1, 2, 3)); //无效的,因为箭头函数里面不能使用arguments

// 4.箭头函数简写
// 4.1当形参有且只有一个的时候,可以省略小括号
let addFn = n => {
        return n++;
    }
    // 4.2当代码体只有一条语句的时候,可以省略大括号,且return必须省略
let powFn = n => n * n;

练习:

// 创建数组
const arr = [0,1,2,3];

函数参数的初始值:

// ES6 允许给函数赋初始值
// 1.形参初始值。具有初始值的参数,一半位置要靠后
function add(a, b, c = 10) {
    return a + b + c;
}
// 2.与解构赋值结合
function connect({ host=`127.0.0.1`, username, password, port }) {
    console.log(host); // 如果host属性没有传,则就用默认值127.0.0.1
    console.log(username);
    console.log(password);
    console.log(port);
}
connect({
    host: `localhost`,
    username: `root`,
    password: `root`,
    port:`1080`
})

REST参数:

// ES6 引入rest参数,用于获取函数的实参,用来代替arguments
// rest参数,必须放到所有参数最后
function date(a, b, ...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}
date(1, 2, 3, 4, 5, 6, 7);

扩展运算符及其应用:

// 三个点...叫做扩展运算符,能将数组转换为逗号分隔的参数序列
const arr = [`a`, `b`, `c`];
function chaikai() {
    console.log(arguments);
}
chaikai(...arr); // 和chaikai('a','b','c'); 一样

// 1.数组的合并
const arr1 = ['a', 'c', 'b'];
const arr2 = [9, 0];
// const arr12 = arr1.concat(arr2); 这是一种方法
const arr12 = [...arr1, ...arr2];

// 2.数组的克隆
const arr1 = ['a', 'b', 'c'];
const arr2 = [...arr1]

// 3.将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];  //将会转换成真正的数组

Symbol 数据类型:

Symbol是全新的原始数据类型,表独一无二的值。特点如下:

  • Symbol值是唯一的,用来解决命名冲突的问题
  • Symbol的值不能与其它数据进行计算
  • Symbol定义的对象属性不能使用for…in…遍历循环。但可以使用Reflect.ownKeys来获取对象的所有键名
// 创建Symbol
let s = Symbol();

// 用Symbol给对象安全高效地添加方法
let game = {
    // 假设里面有很多方法
}
let methods = {
    up: Symbol(),
    down: Symbol()
};
game[methods.up] = function () {
    //添加独一无二的方法
}
game[methods.down] = function () {
    
}

// 还可以给game这样添加方法
let game = {
    name: `lalala`;
    [Symbol(`date`)]: function () {
        console.log(`date someone`);
    },
    [Symbol(`hug`)]: function () {
        console.log(`hug someone`);
    }
}

迭代器:

const arr = [`a`, `b`, `c`, `d`];
// 使用 for...of 遍历数组
for (let t of arr) {
    console.log(t); // 用for...of 得到的是值
}

for (let index in arr) {
    console.log(index); // 用for...in得到的是index
}
// 迭代器原理。创建一个指向数据结构初始位置的指针。第一次调用对象的next方法,指针自动指向数据结构的第一个成员。接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员。每调用next方法返回一个包含value和done属性的对象

模块化:

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。

// ES6 模块化语法
// 模块功能主要由两个命令构成:export 和 import
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

export:

//export 用法:js该怎么写怎么写
//分别暴露
export let a = `1a1a`;
export function putA() {
    console.log(a);
}
//统一暴露
let a = `1a1a`;
function putA() {
    console.log(a);
}
export { a, putA };
//默认暴露
export default {
    a: '1a1a',
    putA: function () {
        console.log(a);
    }
}

import:

<script type="module">
    // 1.通用的导入方式
    // 引入m1.js模块内容
    import * as m1 from "./js/m1.js";

    // 2.解构赋值形式
    import { a, putA } from "./js/m1.js"; //导入分别、统一暴露的模块
    import { a as a2, putA as putA1 } from "./js/m2.js"; //发生重名的解决办法,加上别名
    import { default as m3 } from "./js/m3.js"; //导入默认暴露的模块

    // 3.简便形式,只针对默认暴露
    import m3 from "./js/m3.js";
</script>

如果觉得这样不美观,可以把这些import代码写在一个js文件里,然后再引用这个文件,只需要一行代码
<script src="./js/main.js" type="module"></script> 注意要加type="module"

模块化引入NPM包:

<script type="module">
    import $ from 'jquery'; // const $ = require("jquery");
    $('body').css('background','pink');
</script>

动态import:

    <script type="module">
        // 动态import 要用到的时候才导入
        btn.onclick = function(){
            import('./hello.js').then(module => {
                module.hello();
            });
        }
    </script>

Promise介绍与应用:

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。

  • Promise构造函数:Promise(excutor){}
  • Promise.prototype.then 方法
  • Promise.prototype.catch 方法
// 实例化Promise对象,该对象有三个状态,初始化、成功、失败
const p = new Promise(function (resolve, reject) {
    let data = '数据';
    resolve(data); // 当调用完resolve后,这个promise函数将变为“成功”状态
    reject(data); // 当调用完reject后,这个promise函数将变为“失败”状态。二选一
 });

 // 调用promise的then方法。成功的参数一般写value,失败的参数一般写reason。该Promise函数若为成功,则调用回调函数的第一个函数。若为失败,则调用第二个。
p.then(function (value) {
     
}, function (reason) {
    
 })
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments