注意事项
代码中的注释有笔记如
// 1.变量不能重复声明
有一些错误示范代码,为了代码整体可运行,将其注释如
let star='jaychou';
// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared
当代码有输出是,通常将输出放在对应代码下一行,并注释如下
// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared
const TEAM = ['70KG','baisha'];
TEAM.push('MAZHE');
console.log(TEAM);
// ['70KG', 'baisha', 'MAZHE']
1.声明变量
<script>
let a;
let b,c,d;
let e=100;
let f=521, g='iloveyou', h=[];
// 1.变量不能重复声明
let star='jaychou';
// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared
// 2.块级作用域,全局,函数,eval
// if else while for
{
let girl='jollin';
}
// console.log(girl);
// Uncaught ReferenceError: girl is not defined
// 3.不存在变量提升
// console.log(boy);
// Uncaught ReferenceError: Cannot access 'boy' before initialization
let boy='jaychou';
// 4.不影响作用域链
{
let school='xxschool';
function fn(){
console.log(school);
}
fn();
}
</script>
2.定义常量
<script>
// 声明常量
const SCHOOL = 'xxschool'
// 1.一定要赋初始值
// const A;
// Uncaught SyntaxError: Missing initializer in const declaration
// 2.一般常量使用大写
// 3.常量的值不能修改
// SCHOOL='yyschool'
// Uncaught TypeError: Assignment to constant variable.
// 4.块级作用域
{
const PLAYER='70KG';
}
// console.log(PLAYER);
// Uncaught ReferenceError: PLAYER is not defined
// 5.对于数组和对象的元素修改,不算做对常量的修改,不会报错
const TEAM = ['70KG','baisha'];
TEAM.push('MAZHE');
console.log(TEAM);
// ['70KG', 'baisha', 'MAZHE']
</script>
3.解构赋值
<script>
// ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,称为解构赋值。
// 1.数组的解构
const F4 = ['A1','B2','C3','D4'];
let [A,B,C,D] = F4;
console.log(A,B,C,D);
// A1 B2 C3 D4
// 2.对象的解构
const zhou = {
name:'jaychou',
age:'40',
skill: function(){
console.log('我可以唱歌');
}
};
let {name,age,skill} = zhou;
console.log(name,age,skill);
// jaychou 40 ƒ (){
// console.log('我可以唱歌');
// }
</script>
4.模板字符串
<script>
// ES6引入新的字符串声明方式``
// 1.声明
let str1 = `这是一个字符串`;
console.log(str1);
// 这是一个字符串
// 2.内容中可以出现换行符
let str2 = `
<ul>
<li>A1</li>
<li>B2</li>
<li>C3</li>
<li>D4</li>
</ul>`
// 3.变量拼接
let star = '周杰伦';
let str3 = `我最喜欢听${star}的歌曲`
console.log(str3)
// 我最喜欢听周杰伦的歌曲
</script>
5.简化对象写法
<script>
// ES6允许在大括号里,直接写入变量和函数,作为对象的属性和方法
let name = 'jaychou';
let skill = function(){
console.log('i can sing');
}
const star = {
name,
skill,
age(){
console.log('40');
}
}
console.log(star);
// {name: 'jaychou', skill: ƒ, age: ƒ}
</script>
6.箭头函数
<script>
// ES6允许使用箭头(=>)定义函数
// 声明一个函数
let skill=function(a,b){
return a+b;
}
let skill2=(a,b)=>{
return a+b;
}
// 调用函数
let result = skill(1,2);
let result2 = skill(2,4);
console.log(result);
// 3
console.log(result2);
// 6
// 1.this是静态的,this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
// 设置window对象的name属性
window.name = 'name of window';
const star={
name:'jaychou'
}
// 直接调用
getName();
// name of window
getName2();
// name of window
// call 方法调用
getName.call(star);
// jaychou
getName2.call(star);
// name of window
// 2.不能作为构造实例化对象
let Person=(name,age)=>{
this.name=name;
this.age=age;
}
// let me=new Person('xiaoming','30');
// Uncaught TypeError: Person is not a constructor
// 3.不能使用arguments变量
// let fun=()=>{
// console.log(arguments);
// }
// fun(1,2,3);
// Uncaught ReferenceError: arguments is not defined
// 4.箭头函数的简写
// 1).省略小括号,形参只有一个的时候
let add=n=>{
return n+n;
}
console.log(add(3))
// 6
// 2). 省略花括号,当代码只有一条语句的时候,此时return必须省略,
// 而且语句的执行结果就是函数的返回值
let square = n => n*n;
console.log(square(4))
// 16
// 示例:从数组中返回偶数的元素
const arr=[1,6,9,100,10];
const even_result = arr.filter(function(item){
if (item%2===0){
return true;
}else{
return false;
}
})
console.log(even_result);
// [6, 100, 10]
const even_result2 = arr.filter(item=>item%2===0)
console.log(even_result2);
// [6, 100, 10]
</script>
箭头函数适合与this无关的回调,定时器,数组的方法回调
不适合与this有关的回调,时间回调,对象的方法
7.参数默认值
<script>
// ES6允许给函数的参数赋值初始值
// 1.形参初始值,具有默认的参数,一般位置要靠后
function add(a, b, c = 10) {
return a + b + c;
}
let result = add(1, 2)
console.log(result);
// 13
// 2.与解构赋值结合
function connect({host = '127.0.0.1', port, username, password}) {
console.log(host);
console.log(port);
console.log(username);
console.log(password);
}
connect({
host: 'localhost',
port: '3306',
username: 'username',
password: 'password',
})
// localhost
// 3306
// username
// password
</script>
8.rest参数
<script>
// ES6引入rest参数,用于获取函数的实参,用来代替arguments
// ES5获取实参的方式
function date(){
console.log(arguments);
}
date('girl1','girl2','girl3')
// Arguments(3) ['girl1', 'girl2', 'girl3', callee: ƒ, Symbol(Symbol.iterator): ƒ]
// rest参数
function date2(...args){
console.log(args);
}
date2('girl1','girl2','girl3')
// (3) ['girl1', 'girl2', 'girl3']
function fun(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fun(1,2,3,4,5,6);
// 1
// 2
// (4) [3, 4, 5, 6]
</script>
9.扩展运算符
<div></div>
<div></div>
<div></div>
<script>
// 扩展运算符能将数组转换为逗号分割的参数序列
const f4=['f1','f2','f3','f4']
function singer(){
console.log(arguments);
}
singer(...f4);
// Arguments(4) ['f1', 'f2', 'f3', 'f4', callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 应用1.数组的合并
const boys=['boy1','boy2'];
const girls=['girl1','girl2'];
const boysAndGirls=boys.concat(girls)
const boysAndGirls2=[...boys,...girls]
console.log(boysAndGirls);
// (4) ['boy1', 'boy2', 'girl1', 'girl2']
console.log(boysAndGirls2);
// (4) ['boy1', 'boy2', 'girl1', 'girl2']
// 应用2.数组的克隆
const fruits=['apple','banana','orange'];
const fruits2 = [...fruits]
console.log(fruits);
// 将伪数组转换成真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divs);
// NodeList(3) [div, div, div]
console.log(divArr);
// (3) [div, div, div]
</script>
10.Symbol
<script>
// 创建Symbol
let s=Symbol();
let s2 = Symbol('abcd');
let s3 = Symbol.for('ABCD');
console.log(s, typeof s);
// Symbol() 'symbol'
console.log(s2, typeof s2);
// Symbol(abcd) 'symbol'
console.log(s3, typeof s3);
// Symbol(ABCD) 'symbol'
// 不能与其他类型数据进行运算
// 数据类型巧记 USONB: YOU SO NB
// U: undefined
// S: String, Symbol
// O: Object
// N: null, Number
// B: Boolean
// Symbol创建对象属性
// 向对象中添加方法up down
let game = {
name:'俄罗斯方块'
}
let methods = {
up: Symbol('up'),
down: Symbol('down')
};
game[methods.up] = function(){
console.log('我可以改变形状');
}
game[methods.down] = function(){
console.log('我可以快速下降');
}
console.log(game);
// {name: '俄罗斯方块', Symbol(up): ƒ, Symbol(down): ƒ}
let game2 = {
name:'狼人杀',
[Symbol('say')]: function(){
console.log('我可以发言');
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
},
}
console.log(game2)
// {name: '俄罗斯方块', Symbol(up): ƒ, Symbol(down): ƒ}
</script>
11.生成器函数
<script>
// 生成器其实就是一个特殊的函数
function* gen() {
yield 'alpha';
yield 'bob';
yield 'charlie';
}
let iterator = gen();
console.log(iterator.next());
// {value: 'alpha', done: false}
console.log(iterator.next());
// {value: 'bob', done: false}
console.log(iterator.next());
// {value: 'charlie', done: false}
console.log(iterator.next());
// {value: undefined, done: true}
// 遍历
for (let v of gen()) {
console.log(v);
}
// alpha
// bob
// charlie
// 生成器函数实例
// 回调地狱
// setTimeout(() => {
// console.log(111);
// setTimeout(() => {
// console.log(222);
// setTimeout(() => {
// console.log(333);
// },3000)
// },2000)
// },1000)
function one() {
setTimeout(() => {
console.log(111);
iterator2.next();
},1000)
}
function two() {
setTimeout(() => {
console.log(222);
iterator2.next();
},2000)
}
function three() {
setTimeout(() => {
console.log(333);
iterator2.next();
},3000)
}
function * gen2(){
yield one();
yield two();
yield three();
}
let iterator2=gen2();
iterator2.next();
// 1秒后输出:111
// 2秒后输出:222
// 3秒后输出:333
</script>
12.Promise基本语法
<script>
// 实例化 Promise 对象
const p = new Promise(function(resolve,reject){
setTimeout(function(){
let data = '用户数据';
resolve(data);
// let err='错误信息';
// reject(err);
},1000);
});
// 调用 Promise 对象的then方法
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})
// 1秒后输出:用户数据
</script>
13.集合set
<script>
// set的声明
let s= new Set(['a','b','c']);
let s2 = new Set(['A','B','C','D','E'])
// 元素个数
console.log(s2.size);
// 5
// 添加新元素
s2.add('F');
console.log(s2);
// Set(6) {'A', 'B', 'C', 'D', 'E', …}
// 删除元素
s2.delete('A');
console.log(s2);
// Set(5) {'B', 'C', 'D', 'E', 'F'}
// 查询元素
console.log(s2.has('C'));
// true
console.log(s2.has('O'));
// false
// 清空
s2.clear();
console.log(s2)
// Set(0) {size: 0}
// 遍历
for(let v of s){
console.log(v)
}
// a
// b
// c
</script>
14.Map
<script>
// 声明Map
let m = new Map();
// 添加元素
m.set('name','jaychou');
m.set('skill',function(){
console.log('我可以唱歌!');
});
let key={
star:'jollin'
};
m.set(key,['value1','value2','value3']);
// size
console.log(m.size)
// 3
// 删除
m.delete('name');
// 获取
console.log(m.get('skill'));
// ƒ (){
// console.log('我可以唱歌!');
// }
console.log(m.get(key));
// (3) ['value1', 'value2', 'value3']
// 清空
m.clear();
</script>
15.类class
<script>
// 构造一个类
class MobilePhone{
// 构造方法,名字不能修改
constructor(brand,price){
this.brand = brand;
this.price = price;
}
// 方法必须使用该语法,不能使用ES5的对象完整形式
call(){
console.log('我可以打电话')
}
}
let onePlus = new MobilePhone("1+",2000);
console.log(onePlus);
// MobilePhone {brand: '1+', price: 2000}
</script>
16.数值扩展
<script>
// 0.Number.EPSILON 是JavaScript表示的最小精度
function equal(a,b){
if (Math.abs(a-b)<Number.EPSILON){
return true;
}else{
return false;
}
}
console.log(0.1+0.2===0.3);
// false
console.log(equal(0.1+0.2,0.3));
// true
// 1.二进制和八进制
let b=0b1010;
let o=0o177;
let d=200;
let x=0xff;
console.log(x);
// 255
// 2.Number.isFinite检查一个值是否为有限数
console.log(Number.isFinite(100));
// true
console.log(Number.isFinite(100/0));
// false
console.log(Number.isFinite(Infinity));
// false
// 3.Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt('312123123abc'));
// 312123123
console.log(Number.parseFloat('3.231232131dii'));
// 3.231232131
// 4.Number.isNaN检查一个数值是否为NaN
console.log(Number.isNaN(23));
// false
// 5.Number.isInteger 判断是否整数
// 6.Math.trunc 抹掉小数部分
// 7.Math.sign 判断一个数符号
console.log(Math.sign(100));
// 1
console.log(Math.sign(0));
// 0
console.log(Math.sign(-2000));
// -1
</script>
17.对象私有属性
<script>
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);
}
}
let girl=new Person('nana','23','45');
console.log(girl.name);
console.log(girl.age);
console.log(girl.weight);
// nana
// undefined
// undefined
girl.intro();
// nana
// 23
// 45
</script>
18.对象方法扩展
<script>
// 1.Object.is 两个值是否完全相等
console.log(Object.is(120, 120));
// true
console.log(Object.is(NaN, NaN));
// true
console.log(NaN === NaN);
// false
// 2.Object.assign对象的合并
const config1 = {
host: 'localhost',
port: 3306,
name: 'root',
pass: 'root'
};
const config2 = {
host: 'localhost',
port: 33060,
name: 'name',
pass: 'pass'
}
console.log(Object.assign(config1, config2));
// {host: 'localhost', port: 33060, name: 'name', pass: 'pass'}
// 3.Object.setPrototypeOf Object.getPrototypeOf
// Object.setPrototypeOf() 静态方法可以将一个指定对象的原型
// (即内部的 [[Prototype]] 属性)设置为另一个对象或者 null。
const obj = {};
const parent = { foo: 'bar' };
console.log(obj.foo);
// undefined
Object.setPrototypeOf(obj, parent);
console.log(obj.foo);
// bar
console.log(Object.getPrototypeOf(obj))
// {foo: 'bar'}
</script>
19.js文件模块化
ES6模块暴露数据,m1.js
// 分别暴露
export let star='jaychou';
export function skill() {
console.log('i can sing');
}
// 统一暴露
let movie='Titanic';
function category(){
console.log('romance')
}
export{movie,category};
// 默认暴露
export default{
music:'Scarborough Fair',
singer: function(){
console.log('sarah brightman');
}
}
ES6引入模块数据,html
文件
<script type="module">
// 1.通用导入方式
import * as m1 from './m1.js';
// 2.解构赋值方式
import {star,skill} from './m1.js';
import {movie as mv, category} from './m1.js';
import {default as dft} from './m1.js';
// 针对默认暴露
import dft2 from './m1.js';
console.log(dft2);
// {music: 'Scarborough Fair', singer: ƒ}
</script>
20.async和await
<script>
// 创建promise对象
const p = new Promise((resolve, reject) => {
// resolve("user data");
reject('error occured');
})
// await要放在async函数中
async function main() {
try {
let rst = await p;
console.log(rst);
} catch (e) {
console.log(e);
}
}
main();
// error occured
</script>
21.正则扩展-正向断言与反向断言
<script>
// 声明字符串
let str = 'js3232323hahaoo44gaga';
// 正向断言
const reg=/\d+(?=ga)/;
const rst = reg.exec(str);
console.log(rst);
// (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]
// 反向断言
const reg2=/(?<=o)\d+/;
const rst2=reg2.exec(str);
console.log(rst2);
// (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]
</script>
22.可选链操作符
<script>
// ?.
function main(config) {
const dbHost = config && config.db && config.db.host;
const dbHost2 = config?.cache?.host;
console.log(dbHost);
console.log(dbHost2);
}
main({
db: {
host: '192.168.1.1',
username: 'dbuser',
},
cache: {
host: '192.168.1.1',
username: 'cacheuser'
}
})
// 192.168.1.1
// 192.168.1.1
</script>
23.动态import
hello.js
文章来源:https://www.toymoban.com/news/detail-647218.html
export function ok(){
alert('nihao!');
}
m1.js
文章来源地址https://www.toymoban.com/news/detail-647218.html
const btn = document.getElementById('btn');
btn.onclick = function(){
import('./hello.js').then(module=>{
module.ok();
})
}
到了这里,关于【ECMAScript】ES6-ES11学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!