二木成林

ES学习笔记

本笔记来源于视频尚硅谷Web前端ES6教程，涵盖ES6-ES11

概述

ES

ES全称是EcmaScript，是脚本语言的规范，而平常编写的JavaScript是EcmaScript的一种实现，而ES新特性指的就是JavaScript的新特性。

为什么要学习新特性

语法简洁，功能丰富，编程实现更简单高效
框架开发应用
前端开发职位要求，是就业必备功能

前置知识

JavaScript基本语法
Ajax与Node.js

ES6

`let`变量声明及其特性

let关键字是用来声明变量的，而var也可以声明变量。使用let声明变量有如下几个特点：

不允许重复声明。即在同一作用域中不能存在使用let声明的同名变量，否则报错SyntaxError: Identifier 'xxx' has already been declared。
作用范围是块级作用域。即使用let声明的变量作用在大括号{}内，而在大括号之外是访问不到这个变量的。
不存在变量提升。在声明变量之前是访问不到变量的，也不会输出undefined，反而会报错ReferenceError: Cannot access 'a' before initialization。
不影响作用域链。即在函数外声明的变量，在函数内是可以使用的，不会因为函数的{}无法调用。

// 0.使用let关键字声明变量
let a;
let b, c, d;
let e = 100;
let f = 111, g = 'hello world', h = [], i = {}, j = true;

// 1.变量不能重复声明，但var声明的变量是可以重复声明的
let msg = 'ES6';
let msg = 'JavaScript';
console.log(msg);// 报错SyntaxError: Identifier 'msg' has already been declared

// 2.块级作用域，在if、else、while、for等{}块中声明的变量，只会在大括号块内有效
if (2 > 1) {
    let result = true;
}
console.log(result);// 报错ReferenceError: result is not defined

// 3.不存在变量提升，在变量声明之前是不能访问的
console.log(info);// 报错ReferenceError: Cannot access 'info' before initialization
let info = 'INFO';

// 4.不影响作用域链，即在函数外定义的变量，在函数内是可以访问的
{
    let test = 'T E S T';
    function print() {
        console.log(test);
    }
    print();
}

建议以后在JavaScript中声明变量使用let关键字。

`const`关键字声明常量及其特点

const关键字用来声明常量，使用const关键字声明有如下特点：

声明的同时必须赋初值。即const a;是错误的，必须是const a='xxx';赋予初值的。
一般常量名大写，潜规则。
也不允许重复声明。
值不允许修改。
块级作用域。

// 0.声明常量
const DATE = '2022-01-01';

// 1.声明必须赋初值
const A;
console.log(A);// 报错SyntaxError: Missing initializer in const declaration

// 2.一般常量名大写，潜规则
const MSG = 'hello world';

// 3.不允许重复声明
const NUM = 12;
const NUM = 15;// 报错SyntaxError: Identifier 'NUM' has already been declared

// 4.常量的值不允许修改
const NAME = '张三';
NAME = '李四';// 报错TypeError: Assignment to constant variable.

// 5.块级作用域
{
    const BOOL = true;
}
console.log(BOOL);// 报错ReferenceError: BOOL is not defined

// 6.对于数组和对象元组的修改，不算对常量的修改，因此不会报错
const ARRAY = [123, 456, 789];
ARRAY.push(963);
console.log(ARRAY);// [ 123, 456, 789, 963 ]

const OBJECT = {
    name: '张三',
    age: 18
};
OBJECT.name = '李四';
console.log(OBJECT);// { name: '李四', age: 18 }

建议声明对象类型使用const，非对象类型声明则使用let。

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

// 1.数组的解构
// 用[]中声明的变量一一对应数组中的值，如果[]中变量的个数与数组中元素个数不同，则以[]中的变量为准解构值
const ARRAY = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
let [ts, swk, zbj, ss] = ARRAY;
console.log(ts, swk, zbj, ss);// 唐僧 孙悟空 猪八戒 沙僧
let [a, b, c] = ARRAY;
console.log(a, b, c);// 唐僧 孙悟空 猪八戒

// 2.对象的解构
// 用{}来提取对象中的指定键名对应的值，{}中的变量名必须同对象中的键名相同才能解构到对应的值
const OBJECT = {
    name: '张三',
    age: 18,
    hello: function () {
        console.log('hello world');
    },
    hobbies: ['吃', '喝', '玩', '乐']
};
let {name, hello, hobbies} = OBJECT;
console.log(name);// 张三
hello();// hello world
console.log(hobbies);// [ '吃', '喝', '玩', '乐' ]

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串可以进行换行。
可以使用${xxx}方式输出变量。

// 1.`可以声明字符串，''和""也可以声明变量
let str = `hello world`;
console.log(str, typeof str);// hello world string

// 2.`可以直接换行
let str1 = '' +
    '张三
' +
    '李四
' +
    '王五
' +
    '
';// 是字符串拼接
let str2 = `
        
            张三
            李四
            王五
        
`;// 可读性更好，更简洁，不需要拼接字符串

// 3.可以在`中使用${xxx}形式引用变量的值
let name = '张三';
const hobbies = ['吃', '喝', '玩', '乐'];
const info = {
    age: 19,
    gender: 'm'
};
let msg = `${name}的${hobbies.length}个爱好：${hobbies[0]}、${hobbies[1]}等，今年${info.age}岁!`;
console.log(msg);

简化对象写法

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

// 变量和函数
let name = '张三';
let hello = function () {
    console.log('hello world');
};

// 未简化的写法
const info1 = {
    name: name,
    hello: hello,
    print: function () {
        console.log('hello world');
    }
};
console.log(info1);

// 简化的写法
const info2 = {
    // 直接简化变量，只需要输入变量名即可
    name,
    hello,
    // 函数也直接写函数名和函数体即可，不需要写function关键字了
    print() {
        console.log('hello world');
    }
};
console.log(info2);

箭头函数

ES6允许使用箭头（=>）来定义函数，语法如下：

let 函数名 = ([参数列表]) => {
	函数体
}

箭头函数注意事项如下：

如果形参只有一个，则小括号可以省略。即arg => {}。
如果函数体只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果。即arg => conso.log(arg);。
箭头函数this指向声明时所在作用域下this的值。
箭头函数不能作为构造函数实例化。
不能使用arguments。

<script type="text/javascript">
    // 1.声明函数
    // 声明普通函数
    let fn1 = function (a, b) {
        return a + b;
    };
    // 声明箭头函数
    let fn2 = (a, b) => {
        return a + b;
    };

    // 2.this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值。箭头函数不会更改 this 指向，用来指定回调函数会非常合适
    function getName1() {
        console.log(this.name);
    }

    let getName2 = () => {
        console.log(this.name);
    };
    window.name = '唐僧';
    getName1();// 唐僧
    getName2();// 唐僧

    const obj = {
        name: 'tangseng'
    };
    getName1.call(obj);// tangseng
    getName2.call(obj);// 唐僧

    // 3.不能作为构造实例化对象
    let Person = (name, age) => {
        this.name = name;
        this.age = age;
    };
    // let person = new Person('张三', 15);
    // console.log(person);// 报错Uncaught TypeError: Person is not a constructor

    // 4.不能使用arguments变量
    let fn = () => {
        // console.log(arguments);// 报错Uncaught ReferenceError: arguments is not defined
    };
    fn(1, 2, 3);

    // 5.箭头函数的省略
    // 5.1 当只有一个形参时，可以省略小括号
    let add = n => {
        return n * 2;
    };
    // 5.2 当函数体只有一条语句时，可以省略花括号，此时return必须省略
    let pow = n => n * n;
script>

函数参数默认值

ES6允许给函数参数赋予默认值，语法如下：

// 定义带有参数默认值的函数，例如：
function 函数名(参数名, 参数名=默认值, 参数名[,...]) {
	// 函数体
}
// 调用函数，可以选择传入值覆盖默认值，也可以选择不传入而使用默认值
fn(1, 2, 3);
fn(1, 3);

例如：

// 1.设置带有默认值的参数，一般默认值参数放到最后
function add(a, b, c = 5) {
    return a + b + c;
}

let result1 = add(1, 2);// 使用默认值参数
console.log(result1);// 8
let result2 = add(1, 2, 3);// 覆盖默认值参数
console.log(result2);// 6

// 2.与解构赋值相结合
function connect({host = '127.0.0.1', username, password, port}) {
    console.log(host, username, password, port);// www.baidu.com root root 8888
}

connect({
    host: 'www.baidu.com',
    username: 'root',
    password: 'root',
    port: 8888
});// 传入一个对象，该函数的参数体会利用解构赋值

rest参数

ES6引入了rest来获取函数传入的实参，用来代替arguments，语法如下：

// 单个rest参数
function 函数名(...rest参数) {
	函数体
}

// 普通参数与rest参数结合使用，则rest参数必须放到参数列表的最后，一个函数中只能有一个rest参数
function 函数名(参数, 参数, ...rest参数) {
	函数体
}

例如：

// 1.arguments参数
function add() {
    console.log(arguments);// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
}
add(1, 2, 3, 4, 5);// 即使函数没有形参，但只要传入了实参，那么就可以通过 arguments 来进行获取所有的实参，是一个对象

// 2.rest参数
function print(...args) {
    console.log(args);// [ '唐僧', '孙悟空', '猪八戒', '沙僧' ]
}
print('唐僧', '孙悟空', '猪八戒', '沙僧');

function hello(a, b, ...args) {
    console.log(a);// 1
    console.log(b);// 2
    console.log(args);// [ '唐僧', '孙悟空', '猪八戒', '沙僧' ]
}
hello(1, 2, '唐僧', '孙悟空', '猪八戒', '沙僧');

扩展运算符

扩展运算符也是三个点（...），可以讲一个数组转换为逗号分隔的参数序列，可以用来对数组进行解包。

// 0.扩展运算符（...）可以将数组转换为逗号分隔的序列，如 [1,2,3] => 1,2,3
const array = [1, 2, 3, 4];

function add() {
    console.log(arguments);// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
}

add(...array);// 等价于 add(1, 2, 3, 4);

// 1.扩展运算符的应用
// 1.1 合并数组
const arrayA = [1, 2, 3, 4];
const arrayB = [9, 8, 7, 6];
const arrayC = [...arrayA, ...arrayB];// 合并两个数组为一个新的数组
console.log(arrayC);
// 1.2 克隆数组
const oldArray = ['A', 'B', 'C', 'D'];
const newArray = [...oldArray];// 将一个数组的所有元素克隆到另外一个数组中
console.log(newArray);
// 1.3 将伪数组转换成真正的数组
function fun() {
    console.log(arguments);// 伪数组，[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
    console.log([...arguments]);// 真正的数组，[ 1, 2, 3, 4, 5 ]
}
fun(1, 2, 3, 4, 5);

Symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。Symbol特点如下：

Symbol 的值是唯一的，用来解决命名冲突的问题。
Symbol 值不能与其他数据进行运算。
Symbol 定义的对象属性不能使用 for...in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

// 1.创建Symbol
// 1.1 查看Symbol类型
let s = Symbol();
console.log(s, typeof s);// Symbol() symbol
// 1.2 创建带值的Symbol
let s1 = Symbol('张三');
let s2 = Symbol('张三');
console.log(s1, s2);// Symbol(张三) Symbol(张三)
// 1.3 使用Symbol.for创建
let s3 = Symbol.for('张三');
let s4 = Symbol.for('张三');
console.log(s3, s4);// Symbol(张三) Symbol(张三)

// 2.不能与其他数据进学校运算
console.log(s + 100);// 报错TypeError: Cannot convert a Symbol value to a number
console.log(s > 100);
console.log(s + s);

由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。Symbol 作为对象属性名时不能用.运算符，要用方括号[]。

// 让Symbol作为对象的属性名
let sym = Symbol('key');
// 写法一：利用中括号为对象添加属性并且赋值
let obj = {};
obj[sym] = 'value';// 为对象添加属性并且赋值
console.log(obj);
// 写法二：直接在花括号中设置属性名
let obj = {
    [sym]: 'value'
};
console.log(obj);

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in 、 for...of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

let sym = Symbol('key');
let obj = {};
obj[sym] = 'Symbol';
obj['name'] = '张三';

for (let i in obj) {
    console.log(i);// name
}
console.log(Object.keys(obj));// Object.keys(obj)
console.log(Object.getOwnPropertySymbols(obj));// [ Symbol(key) ]
console.log(Reflect.ownKeys(obj));// Reflect.ownKeys(obj)

迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可完成遍历操作。

实现了Iterator接口的数据可以通过for...of命令来进行遍历。而原生就具备Iterator接口并且可用for...of遍历的数据有：

Array
Arguments
Set
Map
String
TypedArray
NodeList

Iterator接口的原理：

创建一个指针对象，指向当前数据结构的起始位
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
每调用 next 方法返回一个包含 value 和 done 属性的对象

// 使用for...of遍历数组
const array = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
for (let item of array) {
    console.log(item);
}

// 使用迭代器来遍历数组
let iterator = array[Symbol.iterator]();// 获取数组的迭代器对象
console.log(iterator.next());// 调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());// 当遍历完之后再调用next方法则值为undefined，{ value: undefined, done: true }

js中对象分为可迭代和不可迭代如果是可迭代哪它就会有一个Symbol.iterator函数，如果想要让对象拥有属于自己的迭代器，只需要为该对象添加一个Symbol.iterator函数即可。例如：

const obj = {
    ts: "唐僧",
    swk: "孙悟空",
    zbj: "猪八戒",
    ss: "沙僧"
};
// 为对象添加一个Symbol.iterator方法
obj[Symbol.iterator] = function () {
    let keys = Object.keys(obj);// 取到对象的每个key值返回一个数组
    let len = keys.length;// 取到key值组成数组的长度
    let index = 0;// 循环变量
    // 返回对象，每次迭代都会自动调用next方法
    return {
        next: function () {
            // 返回值是一个对象，对象中有value和done，当done为true时跳出循环
            if (index < len) {
                const result = {value: obj[keys[index]], done: false};
                index++;
                return result;
            } else {
                return {value: undefined, done: true};
            }
        }
    }
};
// 使用for...of循环遍历迭代器对象
for (let k of obj) {
    console.log(k);
}

生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

    <script>    
        //生成器其实就是一个特殊的函数
        //异步编程  纯回调函数  node fs  ajax mongodb
        //函数代码的分隔符
        function * gen(){
            // console.log(111);
            yield '一只没有耳朵';
            // console.log(222);
            yield '一只没有尾部';
            // console.log(333);
            yield '真奇怪';
            // console.log(444);
        }

        let iterator = gen();
        console.log(iterator.next());// 第一次调用返回第一个yield后面的值
        console.log(iterator.next());// 第二次调用返回第二个yield后面的值
        console.log(iterator.next());
        console.log(iterator.next());

        //遍历
        // for(let v of gen()){
        //     console.log(v);
        // }

    script>

代码说明：

* 的位置没有限制
生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到
yield 语句后的值
yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next
方法，执行一段代码
next 方法可以传递实参，作为 yield 语句的返回值

    <script>
        function * gen(arg){
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');// 整体传参
        console.log(iterator.next());
        //next方法可以传入实参
        console.log(iterator.next('BBB'));// 第二次调用next方法传入的参数将作为第一个yield的返回结果
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
        
    script>

实例：

    <script>
        // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
        // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
        // 回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

        function two(){
            setTimeout(()=>{
                console.log(222);
                iterator.next();
            },2000)
        }

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    script>

实例：

   <script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据';
                iterator.next(data);
            }, 1000)
        }

        function getGoods(){
            setTimeout(()=>{
                let data = '商品数据';
                iterator.next(data);
            }, 1000)
        }

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();
    script>

Promise

参考：Promise学习笔记

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用扩展运算符和for...of进行遍历。Set集合常用属性和方法如下：

size：属性，返回集合中元素个数。
add(ele)：添加一个新元素，返回当前集合。
delete(ele)：删除一个元素，返回布尔值。
has(ele)：检测集合中是否包含某个函数，返回布尔值。
clear()：清空集合，返回undefined。

// 1.创建集合
// 1.1 创建空集合
let s1 = new Set();
// 1.2 创建带值集合
let s2 = new Set(['唐僧', '孙悟空', '猪八戒', '沙僧']);

// 2.常用属性和方法
// 2.1 size属性，获取元素个数
console.log(s2.size);
// 2.2 add方法，向集合中添加元素
s2.add('唐三藏');
console.log(s2);
// 2.3 delete方法，删除集合中的元素
s2.delete('沙僧');
console.log(s2);
// 2.4 has方法，检测集合中是否包含某元素
let has = s2.has('唐僧');
console.log(has);
// 2.5 遍历集合
for (let v of s2) {
    console.log(v);
}
// 2.6 清空集合
s2.clear();
console.log(s2);

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用扩展运算符和for...of进行遍历。Map 的属性和方法：

size：属性，返回Map中的元素个数。
set(key, value)：方法，增加一个新元素，返回添加后的Map。
get(key)：方法，返回键名对象的键值。
has(key)：判断Map中是否包含某个元素，返回布尔值。
clear()：方法，清空Map集合，返回undefined。

// 1.创建Map
let m = new Map();

// 2.set方法，添加元素，键可以是任意类信息
m.set('name', '张三');
m.set('hello', function () {
    console.log('hello world');
});
m.set({
    name: 'hobby'
}, ['吃', '喝', '玩', '乐']);

// 3.size属性，获取Map的长度
console.log(m.size);

// 4.delete方法，删除元素
m.delete('name');

// 5.get方法，获取元素
m.get('hello')();

// 6.遍历Map
for (let v of m) {
    console.log(v);
}

// 7.清空
m.clear();

class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class声明类与constructor定义构造函数

基本语法如下：

class 类名 {
    // 构造方法，方法名必须是constructor
    constructor([参数列表]) {
        // 初始化参数
    }

    // 类中的普通方法，必须使用下面的语法，不能使用ES5的对象完整形式，即不能使用name:function(){}这样的形式
    函数名([参数列表]) {
        函数体
    }
}

例如：

// 1.ES5定义类和初始化构造函数
// 创建构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 添加方法
Person.prototype.hello = function () {
    console.log('Hello, I am ' + this.name);
};

// 实例化对象
let person = new Person('张三', 18);
person.hello();
console.log(person);// Person { name: '张三', age: 18 }


// 2.使用class关键字创建类
class Phone {
    constructor(brand, price) {
        this.brand = brand;
        this.price = brand;
    }

    call() {
        console.log('呼叫...');
    }
}

let phone = new Person('华为', 3999);
console.log(phone);// Person { name: '华为', age: 3999 }

静态成员

在类中声明静态属性和静态方法的语法如下：

class 类名 {
	// 静态属性
	static 变量名 = 变量值;
	// 静态方法
	static 方法名([参数列表]) {
		函数体
	}
}

// 调用静态属性
类名.静态属性名
// 调用静态方法
类名.静态方法名()

示例如下：

// 1.ES5语法中函数对象的属性和实例对象的属性是不共通的
function Person() {

}

Person.name = '张三';
Person.hello = function () {
    console.log('hello world');
};
Person.prototype.age = 22;

let person = new Person();
console.log(person.name);// 事实上，实例对象无法访问函数对象上的属性
person.hello();
console.log(person.age);


// 2.类中声明静态属性
class Phone {
    // 静态属性
    static brand = '华为';

    // 静态方法
    static call() {
        console.log('呼叫...');
    }
}

let phone = new Phone();
console.log(phone.brand);
phone.call();
console.log(Phone.brand);// 类中的静态成员只能通过类名来进行访问
Phone.call();

对象继承

在ES5中继承的示例如下：

// 定义父类构造函数初始化参数
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}

// 声明父类的方法
Phone.prototype.call = function () {
    console.log('呼叫...');
};

// 定义子类并初始化参数
function SmartPhone(brand, price, color, size) {
    Phone.call(this, brand, price);
    this.color = color;
    this.size = size;
}

// 设置子类构造函数的原型
SmartPhone.prototype = new Phone();
SmartPhone.prototype.constructor = SmartPhone;

// 声明子类的方法
SmartPhone.prototype.photo = function () {
    console.log('拍照...');
};

// 测试
const huawei = new SmartPhone('华为', 3999, '黑色', '5.5');
huawei.call();
huawei.photo();

而ES6继承的语法如下：

class 父类 {
    constructor([参数列表]) {
        初始化父类参数
    }

    方法名() {
        方法体
    }
}

class 子类 extends 父类 {
    constructor([参数列表]) {
        super([参数列表]);// 给父类初始化参数
        初始化子类参数
    }

    方法名() {
        方法体
    }
}

示例如下：

// 定义父类
class Phone {
    // 父类的构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    // 父类的成员方法
    call() {
        console.log('呼叫...');
    }
}

// 定义子类
class SmartPhone extends Phone {
    // 子类的构造方法
    constructor(brand, price, color, size) {
        super(brand, price);
        this.color = color;
        this.size = size;
    }

    photo() {
        console.log('拍照...');
    }

    // 可以重写父类方法
    call() {
        console.log('视频呼叫...');
    }
}

// 测试
let phone = new SmartPhone('华为', 3999, '黑色', '5.5');
phone.call();
phone.photo();

set&get

可以通过set和get关键字为属性赋值和得到属性的值。因为方法可以对属性值进行一些处理。

class Phone {

    get price() {
        console.log('price属性被读取了...');
        return 3999;
    }

    set price(newVal) {
        console.log('价格属性被修改了...')
    }
}

// 实例化对象
let phone = new Phone();
console.log(phone.price);
phone.price = 1999;

数值扩展

ES6为Number类型的数据提供了一些方法，扩展了其功能：

0b前缀：二进制数值的新写法。
0o前缀：八进制数值的新写法。
Number.isFinite()：检查一个数值是否是有限的。
Number.isNaN()：检查一个值是否为NaN。
Number.parseInt()：转换成整数。
Number.parseFloat()：转换成浮点数。
Math.trunc()：用于去除一个数的小数部分，返回整数部分。
Number.isInteger()：用来判断一个数值是否为整数。
Math.sign()：判断一个数到底为正数、负数还是零。

// 二进制数值
let b = 0b1010;
console.log(b);

// 八进制数值
let o = 0o11;
console.log(o);

// 检查一个数值是否是有限的
console.log(Number.isFinite(100));// true
console.log(Number.isFinite(1 / 0));// false

// 检查一个值是否为NaN
console.log(Number.isNaN(123));// false

// 转换成整数
console.log(Number.parseInt("123.12"));// 123

// 转换成浮点数
console.log(Number.parseFloat("12.12"));// 12.12

// 用于去除一个数的小数部分，返回整数部分
console.log(Math.trunc(12.34));// 12

// 用来判断一个数值是否为整数
console.log(Number.isInteger(12.34));// false

// 判断一个数到底为正数、负数还是零
console.log(Math.sign(-12), Math.sign(0), Math.sign(123));// -1 0 1

对象方法扩展

ES6 新增了一些 Object 对象的方法：

Object.is()：判断两个值是否完全相等。
Object.assign()：对象的合并，将源对象的所有可枚举属性，复制到目标对象。
Object.setPrototypeOf()：设置原型对象。
Object.getPrototypeof()：获取原型对象。

// 判断两个值是否完全相等
console.log(Object.is(12, 12));// true
console.log(Object.is('abc', "abc"));// true
console.log(Object.is(NaN, NaN));// true
console.log(NaN === NaN);// false

// 对象的合并，将源对象的所有可枚举属性，复制到目标对象
const obj = {
    name: '张三',
    age: 19
};
const dest = {
    gender: 'm',
    hello: function () {
        console.log('hello world');
    }
};
console.log(Object.assign(dest, obj));// { gender: 'm', hello: [Function: hello], name: '张三', age: 19 }
console.log(obj);// { name: '张三', age: 19 }
console.log(dest);// { gender: 'm', hello: [Function: hello], name: '张三', age: 19 }

// 设置原型对象和获取原型对象
const person = {
    name: '张三'
};
let say = function () {
    console.log('hello world');
};
Object.setPrototypeOf(person, say);// 设置原型对象
console.log(Object.getPrototypeOf(person));// [Function: say]

模块化

概述

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。模块化的优势有以下几点：

防止命名冲突
代码复用
高维护性

ES6的模块功能主要由两个命令组成：export和import。

export：用于规定模块对外接口。
import：用于导入其他模块提供的功能。

基本使用

创建一个js文件，该js文件是一个模块，里面使用export关键字向外暴露变量和方法：

// 暴露属性
export let msg = 'hello world';

// 暴露方法
export function hello() {
    console.log('hello world!');
}

然后在html中引入使用：


<html lang="en">
<head>
    <meta charset="UTF-8">
head>
<body>

<script type="module">
    // 使用import引入模块内容
    import * as test from './test.js';
    // 调用模块内的属性和方法
    console.log(test.msg);
    test.hello();
script>
body>
html>

暴露的几种情况

分别暴露。每个待暴露的变量和方法都使用export关键字声明。

// 暴露属性
export let msg = 'hello world';

// 暴露方法
export function hello() {
    console.log('hello world!');
}

统一暴露。我们可以将需要暴露出去的变量和方法都放到对象中，统一暴露出去。

// 暴露属性
let msg = 'hello world';

// 暴露方法
function hello() {
    console.log('hello world!');
}

// 统一暴露一个对象，对象中是待暴露的属性和方法
export {msg, hello}

默认暴露。使用export default暴露对象，对象中要默认暴露出去的属性和方法，但注意使用方式有所不同。

// 默认暴露
export default {
    msg: 'hello world',
    hello: function () {
        console.log('hello world!');
    }
}

使用方式如下，需要default：


<html lang="en">
<head>
    <meta charset="UTF-8">
head>
<body>

<script type="module">
    // 使用import引入模块内容
    import * as test from './test.js';
    // 调用模块内的属性和方法
    console.log(test.default.msg);
    test.default.hello();
script>
body>
html>

导入的几种情况

通用导入方式。语法是import * as 模块别名 from "js模块路径"。

<body>

<script type="module">
    // 使用import引入模块内容
    import * as test from './test.js';
    // 调用模块内的属性和方法
    console.log(test.msg);
    test.hello();
script>
body>

解构赋值导入方式。语法如下：import {变量名, 方法名, ...} from "js模块路径".

<body>

<script type="module">
    // 解构赋值方式导入
    // 引入普通暴露中的变量和函数，{}中是暴露出的变量名和函数名
    import {msg, hello} from './test.js';
    // 引入普通暴露中的变量和函数，可以使用as为暴露出的变量和函数起别名
    import {msg as m, hello} from "./test.js";
    // 引入默认暴露对象，default就是默认暴露的对象，as是起别名
    import {default as test} from './test.js';

    console.log(test.print());
script>
body>

简便形式，针对默认暴露。语法格式是import 模块名 from "模块路径"。

<body>
<!--导入test.js模块-->
<script type="module">
    // 简便形式，针对默认暴露
    import test from './test.js';

    test.hello()
</script>
</body>

注意还可以专门将引入模块的代码写在一个js文件中，然后使用如下代码来专门引入这个js文件：

<body>

<script src="./app.js" type="module">
    
script>
body>

ES7新特性

Array.prototype.includes

includes 方法用来检测数组中是否包含某个元素，返回布尔类型值。例如：

const array = [1, 2, 3, 4, 5, 6];
let result = array.includes(3);
console.log("数组是否包含 3：", result);// 数组是否包含 3： true

指数操作符

在 ES7 中引入指数运算符 **，用来实现幂运算，功能与 Math.pow(x, n) 结果相同。例如：

// ** 操作符等价于 Math.pow(x, y)
console.log(2 ** 3);// 8
console.log(Math.pow(2, 3));// 8

ES8新特性

`async` 和 `await`

请阅读Promise学习笔记 - async和await。

对象方法扩展

为对象增加了一些新的方法：

Object.values() 方法返回一个给定对象的所有可枚举属性值的数组。
Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组。
Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。

例如：

// 先声明一个对象
const person = {
    name: '张三',
    age: 18,
    hobbies: ['阅读', '音乐', '学习']
};

// 获取对象的所有键
console.log(Object.keys(person));// [ 'name', 'age', 'hobbies' ]

// 获取对象的所有值
console.log(Object.values(person));// [ '张三', 18, [ '阅读', '音乐', '学习' ] ]

// 获取对象的所有键值对，以 entry 的形式
console.log(Object.entries(person));
/*
[
  [ 'name', '张三' ],
  [ 'age', 18 ],
  [ 'hobbies', [ '阅读', '音乐', '学习' ] ]
]
 */

// 可以利用Map集合将entry转换成键值对的形式，然后使用get方法进行访问
const map = new Map(Object.entries(person));
console.log(map.get('name'));// 张三

// 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: { value: '张三', writable: true, enumerable: true, configurable: true },
  age: { value: 18, writable: true, enumerable: true, configurable: true },
  hobbies: {
    value: [ '阅读', '音乐', '学习' ],
    writable: true,
    enumerable: true,
    configurable: true
  }
}
 */

ES9新特性

Rest/Spread 属性

rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。

例1 - rest参数：

// rest 参数
function connect({host, port, ...user}) {
    console.log(host);// 127.0.0.1
    console.log(port);// 3306
    console.log(user);// { username: 'root', password: 'root' }
}

connect({
    // 注意，调用的时候传的对象的属性名必须跟函数的参数中的属性名一致，而剩下的所有属性都被传给rest参数
    host: "127.0.0.1",
    port: 3306,
    username: 'root',
    password: 'root'
});

例2 - 对象合并：

// 对象合并
const obj1 = {
    name: '张三',
    age: 18
};
const obj2 = {
    gender: 'm'
};
const obj3 = {
    score: 18.8
};
const obj4 = {
    hobbies: ['阅读', '音乐', '学习']
};
const newObj = {...obj1, ...obj2, ...obj3, ...obj4};// 合并多个对象
console.log(newObj);
/*
{
  name: '张三',
  age: 18,
  gender: 'm',
  score: 18.8,
  hobbies: [ '阅读', '音乐', '学习' ]
}
 */

正则表达式命名捕获组

ES9 允许命名捕获组使用符号 ?，这样获取捕获结果可读性更强。例如：

let str = '百度';// 待匹配的字符串

// 不使用分组命名
const reg1 = /(.*?)<\/a>/g;// 正则表达式
const result1 = reg1.exec(str);// 用正则表达式匹配字符串
console.log(result1);
console.log(result1[1]);// http://www.baidu.com
console.log(result1[2]);// 百度

// 使用分组命名
const reg2 = /(?.*?)<\/a>/g;// 为分组进行了命名的正则表达式，其中 url 为第一个分组的名字，而 text 为第二个分组的名字
const result2 = reg2.exec(str);// 用正则表达式匹配字符串
console.log(result2);
console.log(result2.groups.url);// http://www.baidu.com
console.log(result2.groups.text);// 百度

正则表达式反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

//声明字符串
let str = 'JS5211314你知道么555啦啦啦';

// 正向断言
const reg1 = /\d+(?=啦)/;
const result1 = reg1.exec(str);
console.log(result1);// [ '555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined ]

// 反向断言
const reg2 = /(?<=么)\d+/;
const result2 = reg2.exec(str);
console.log(result2);// [ '555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined ]

正则表达式 dotAll 模式

正则表达式中点 . 匹配除回车外的任何单字符，标记 s 改变这种行为，允许行终止符出现。

//dot  .  元字符  除换行符以外的任意单个字符
let str = `
        
            
                肖生克的救赎
                上映日期: 1994-09-10
            
            
                阿甘正传
                上映日期: 1994-07-06
            
        
`;
//声明正则
// const reg = /\s+(.*?)<\/a>\s+(.*?)<\/p>/;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
//执行匹配
// const result = reg.exec(str);
let result;
let data = [];
while (result = reg.exec(str)) {
    data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);
/*
[
  { title: '肖生克的救赎', time: '上映日期: 1994-09-10' },
  { title: '阿甘正传', time: '上映日期: 1994-07-06' }
]
 */

ES10

Object.fromEntries

// 会将二维数组转换成对象，二维数组中的每一行都是一个键值对，其中第一列是键名，第二列是键值
const result = Object.fromEntries([
    ['name', '张三'],
    ['hobbies', '阅读, 学习, 音乐']
]);
console.log(result);// { name: '张三', hobbies: '阅读, 学习, 音乐' }

// Map，其中Map的键是键名，Map的值是键值
const m = new Map();
m.set('age', 18);
const result2 = Object.fromEntries(m);
console.log(result2);// { age: 18 }

// 对象，会将对象转换成二维数组
const arr = Object.entries({
    name: "张三",
    age: 18,
    gender: 's'
});
console.log(arr);// [ [ 'name', '张三' ], [ 'age', 18 ], [ 'gender', 's' ] ]

trimStart 和 trimEnd

清除字符串左侧或右侧的空白。

// 清除字符串左右两侧的空白
let str = '   i love you   ';

console.log(str);//   i love you   
console.log(str.trimStart());//i love you   
console.log(str.trimEnd());//   i love you

Array.prototype.flat 与 flatMap

//flat 平 将多维数组转化为低位数组
// const arr = [1,2,3,4,[5,6]];
const arr1 = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];
console.log(arr1.flat(2));// 参数为深度 是一个数字，默认值是1
/*
[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]
 */

// flatMap 对迭代的每一项进行处理
const arr2 = [1, 2, 3, 4];
const result = arr2.flatMap(item => [item * 10]);
console.log(result);// [ 10, 20, 30, 40 ]

Symbol.prototype.description

获取 Symbol 的描述信息。

//创建 Symbol
let s = Symbol('xxx');

console.log(s.description);// xxx

ES11

类的私有属性

在类中在属性名的前面加上 # 可以将该属性声明为私有属性，注意私有属性只能在本类中使用，通过实例对象是无法访问私有属性的。

class Person {
    //公有属性
    name;
    //私有属性
    #age;
    #weight;

    //构造方法
    constructor(name, age, weight) {
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }

    intro() {
        console.log(this.name);
        console.log(this.#age);
        console.log(this.#weight);
    }
}

//实例化
const girl = new Person('晓红', 18, '45kg');

// console.log(girl.name);
// console.log(girl.#age);
// console.log(girl.#weight);

girl.intro();

Promise.allSettled

该 Promise.allSettled() 方法返回一个在所有给定的promise都已经 fulfilled 或 rejected 后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

//声明两个promise对象
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('商品数据 - 1');
    }, 1000)
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('商品数据 - 2');
        // reject('出错啦!');
    }, 1000)
});

//调用 allSettled 方法
const result = Promise.allSettled([p1, p2]);
console.log(result);

const res = Promise.all([p1, p2]);
console.log(res);

String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

let str = `百度`;

//声明正则
const reg = /<a href="(.*?)">(.*?)<\/a>/sg;

//调用方法
const result = str.matchAll(reg);

// for(let v of result){
//     console.log(v);
// }

const arr = [...result];

console.log(arr);
/*
[
  [
    '百度',
    'http://www.baidu.com',
    '百度',
    index: 0,
    input: '百度',
    groups: undefined
  ]
]
 */

可选链操作符

对象类型参数时使用。而不需要去判断这个对象是否存在。

// ?. 操作符
function main(config) {
    // const dbHost = config && config.db && config.db.host;
    const dbHost = config?.db?.host;

    console.log(dbHost);
}

main({
    db: {
        host: '192.168.1.100',
        username: 'root'
    },
    cache: {
        host: '192.168.1.200',
        username: 'admin'
    }
});

动态import

可以按需加载。

// import * as m1 from './hello.js';

const btn = document.getElementById('btn');// 获取元素
btn.onclick = function () {// 当点击按钮时才加载
    // 按需加载
    import('./hello.js').then(module => {
        console.log(module);
    })
};

Bigint

大数值运算。

//大整形
// let n = 521n;
// console.log(n, typeof(n));

//函数
// let n = 123;
// console.log(BigInt(n));
// console.log(BigInt(1.2));

//大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max);
console.log(max + 1);
console.log(max + 2);

console.log(BigInt(max))
console.log(BigInt(max) + BigInt(1))
console.log(BigInt(max) + BigInt(2))

globalThis 对象

都有一个 globalThis 对象，无论是浏览器还是Node.js。

console.log(globalThis);

你可能感兴趣的:(学习笔记,学习,javascript)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首张三叨
你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
mongodb3.03开启认证 21jhf mongodb
下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下：（百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
【Spark103】Task not serializable bit1129 Serializable
Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1. package spark.exampl
你所熟知的 LRU(最近最少使用) dalan_123 java
关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法 a、查询出最近最晚使用的项 b、给最近的使用的项做标记通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现你如何能够快速在链表定位对应的该项？这时候多
Javascript 跨域周凡杨 JavaScript jsonp 跨域 cross-domain
linux下安装apache服务器 g21121 apache
安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi 1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache：下载之后上传到linux的相关目录，这里指定为/home/apach
FineReport的JS编辑框和URL地址栏语法简介老A不折腾 finereport web报表报表软件语法总结
JS编辑框： 1.FineReport的js。作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
根据STATUS信息对MySQL进行优化墙头上一根草 status
mysql 查看当前正在执行的操作，即正在执行的sql语句的方法为: show processlist 命令 mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
本文介绍如何给Spring的Bean配置文件的Bean定义别名？原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
高性能mysql 之性能剖析 annan211 性能 mysql mysql 性能剖析剖析
1 定义性能优化 mysql服务器性能，此处定义为响应时间。在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。这是一个陷阱。资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
主外键和索引唯一性约束百合不是茶索引唯一性约束主外键约束联机删除
目标;第一步;创建两张表用户表和文章表第二步;发表文章 1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
线程的调度 bijian1013 java 多线程 thread 线程的调度 java多线程
1. Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。 2. 多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a)
查看日志常用命令 bijian1013 linux 命令 unix
一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log 二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。样例数据本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查 CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
【Hadoop十五】Hadoop Counter bit1129 hadoop
1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会再次出现无法登录的情况。今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。简单分析了一
java-75-二叉树两结点的最低共同父结点 bylijinnan java
import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
行业垂直搜索引擎网页抓取项目 carlwu Lucene Nutch Heritrix Solr
公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！这是详细需求：（1）通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。（2）程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。 &nbs
Java时区转换及时间格式 Cwind java
本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。问题描述：向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
readonly,只读，不可用 dashuaifu js jsp disable readOnly readOnly
readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事：使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）
LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com js Web
LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
[应用结构]入口脚本 dcj3sjt126com PHP yii2
入口脚本入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
haoop shell命令 eksliang hadoop hadoop shell
cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
MultiStateView不同的状态下显示不同的界面 gundumw100 android
只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
jQuery实现页面内锚点平滑跳转 ini JavaScript html jquery html5 css
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
kafka offset迁移 kane_xie kafka
在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
android > 搭建 cordova 环境 mft8899 android
1 , 安装 node.js http://nodejs.org node -v 查看版本 2, 安装 npm 可以先从 https://github.com/isaacs/npm/tags 下载源码解压到
java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
记录一些函数用法 .Aky. 位运算 PHP 数据库函数 IP
高手们照旧忽略。想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧）当然用到了ip2long()函数把字符串转为整型数
sublime text 3 rust wudixiaotie Sublime Text
1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl

ES学习笔记

概述

ES

为什么要学习新特性

前置知识

ES6

let变量声明及其特性

const关键字声明常量及其特点

变量的解构赋值

模板字符串

简化对象写法

箭头函数

函数参数默认值

rest参数

扩展运算符

Symbol

迭代器

生成器

Promise

Set

Map

class类

class声明类与constructor定义构造函数

静态成员

对象继承

set&get

数值扩展

对象方法扩展

模块化

概述

基本使用

暴露的几种情况

导入的几种情况

ES7新特性

Array.prototype.includes

指数操作符

ES8新特性

async 和 await

对象方法扩展

ES9新特性

Rest/Spread 属性

正则表达式命名捕获组

正则表达式反向断言

正则表达式 dotAll 模式

ES10

Object.fromEntries

trimStart 和 trimEnd

Array.prototype.flat 与 flatMap

Symbol.prototype.description

ES11

类的私有属性

Promise.allSettled

String.prototype.matchAll

可选链操作符

动态import

Bigint

globalThis 对象

你可能感兴趣的:(学习笔记,学习,javascript)

`let`变量声明及其特性

`const`关键字声明常量及其特点

`async` 和 `await`