HTML5+CSS3+ES5/6+TS+WebAPI前端入门/实习题库笔记

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准

注释

HTML

CSS

/*注释*/

JS

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体。

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

<!doctype> 声明必须位于 HTML5 文档中的第一行
header头部标签，nav导航标签

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

字符实体

有些时候，在HTML中不能直接书写一些特殊符号，如：

多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）
比如字母两侧的大于小于号（可能会被认为是标签并解析）
可使用html中的实体（转义字符）实体的语法：&实体的名字;，如：

更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册

meta标签

<meta charset="utf8" version='1'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

元数据（Metadata），又称中介数据、中继数据，为描述数据的数据（data about data）

基本标签

form表单标签

<form> 标签用于创建供用户输入的 HTML 表单。

<p> 标签定义段落。

<br>标签定义空格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>
<form action="demo-form.php">
username：<input type="text" name="FirstName" value="Mickey"><br>
password：<input type="password" value="nowcoder"><br>
<input type="checkbox" checked><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

table表格标签

<tr>=table row

<th>=table head 粗体并且居中

<td>=table data?左对齐文本

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

img图像标签

<img> 标签有两个必需的属性：src（链接）和 alt（当图像未显示时的替代文本）。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

a超链接标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

target 属性用来规定在何处打开链接文档
blank 这个属性是在你点击后使用新窗口打开

<a href="https://www.runoob.com" target="_blank">访问菜鸟教程!</a>

dl描述列表标签

列表(助记)

ol：ordered list

ul：unordered list

li：list

dl: define list

dt:define content

dd:define define

<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

<dl> 标签定义一个描述列表。

<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

媒体标签

audio音频标签

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg

controls具有控件功能

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>

video视频标签

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

CSS3

CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

div块级标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

div是块级元素，在页面中独占一行，自上而下排列

float：排列

position

position:fixed

定义id时需要使用#号

style.display= 'none'

<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>你好。这是一个 DIV 元素。</div>

<div id="div2">你好。这是一个 DIV 元素。</div>

</body>
</html>

CSS样式方式（按优先级高到低排序）

内联样式表（在标签内设置元素的样式）

写一次只能设置一个

<p style="background:red"></p>

嵌入样式表（在head标签内）

<head>

<title></title>

<style type="text/css">

p{

background-color:yellow;

}

</style>

</head>

外部样式表（在head标签内）

通过 link 进行对外部CSS样式文件的引用，也可以引用网上别人写好的样式

rel=relationship

href=hypertext Reference

<head>

<title></title>

<link href="xxx.css" rel="stylesheet" type="text/css"/>

</head>

选择器

标签、类、ID选择器

打开浏览器新页签搜索“在线取色器”；

2、找到“RGB网页颜色在线取色器”或者其他的也可以；

3、在如下图输入对应的rgb值进行转换得蓝色框内容复制粘贴到css中即可。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div{
                color:#ff0000;
                font-size:20px;
            }
            .green{
                color:#008000;
            }
            #black{
                color:#000000;
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

伪类和伪元素

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素

（DOM，document object model从HTML中解析出来的一棵树，DOM结构就是树结构。）

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素和伪类的区别总结

伪类选择器:nth-child(n)

nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            ul li:nth-child(even) {
                background-color: rgb(255,0,0);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

伪元素

<head>
  <meta charset=utf-8>
  <style type="text/css">
    /*补全代码*/
    div::after{
      content:"";
      width: 20px;
      height: 20px;
      background-color: rgb(255,0,0);
      display: block;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

html模块的div元素加一个后伪元素

<link rel="stylesheet" href="./style.css">
    .class_name a{

   }
    .class_name.sub_class_name:hover{

   }
    /*遍历ul标签下的li标签*/
    ul>li :last-child{
        margin-bottom: 10px;
    }
    
    ul>li:not(:last-child){
        /* 除最后一个都有下边距 */
        margin-bottom: 10px;
    }
    ul>li img{
        /* 这里任意只调整高度或宽度，图片可以保持原比例大小 */
        height: 25%;
    }

单位

常见：

px像素单位相对于屏幕宽高度而言

1 vw是当前屏幕宽度的百分之1，

1vh是当前屏幕高度的百分之1

这个可以作为一种响应式布局的方法。100vw就是宽度撑满整个屏幕

相对：

% 相对于父元素
em相对长度单位相对于当前元素的字体大小而言的，默认1em=16px
rem相对长度单位默认1rem=16px 相当于html元素的字体大小而言的

溢出转省略

指定元素内的空白处理：white-space:nowrap; 文本不进行换行；默认值normal

单行

overflow: hidden;
text-overflow:ellipsis;  //ellipsis;省略
white-space: nowrap;  //nowrap 不换行

多行

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
3.-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

IE不兼容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.text2{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
</style> 
	
</head>
<body>

<div class="text2">
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
</div>

</body>
</html>

盒模型

内容(content)、内边距/填充(padding)、外边距/边界(margin)、边框(border)；

content-box 内容盒模型（W3C盒）和 border-box 边框盒模型（IE 盒）

width = content宽度

width = content宽度 + padding + border

<div class="content-box"></div>
<div class="border-box"></div>

CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆 - 掘金

水平 & 垂直对齐

margin:0 auto时，并且父元素的宽度是确定的，
意思是这个元素处于其父元素的居中位置，并且这个元素的上下外边距为0
即:上下外边距为0，左右自动，实际效果为左右居中

水平居中：指在水平方向上处于中间的位置。

元素/图片：

margin: auto;

行内元素会占整行，看不出来水平居中，所以需要：width: 50%;

文本：

文本标签除了<p>都是行内元素，text-align=center

垂直居中：

元素：

padding: 10px;

单行文本:

line-height = height

图片:

vertical-align: middle;

absolute 定位:

top: 50%;

left: 50%;

transform: translate(-50%, -50%);
flex:

display:flex;

margin:auto(自由水平居中）

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

ES5

常用运算符

typeof 与 instanceof

typeof操作符：返回一个字符串

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

虽然typeof null为object，但这只是JavaScript 存在的一个悠久 Bug，不代表null就是引用数据类型，并且null本身也不是对象（object 和null在底层中存储均以00开头）
如果需要在 if 语句中判断是否为 null，直接通过===null来判断就好
引用类型数据，用typeof来判断的话，除了function会被识别出来之外，其余的都输出object
如果想要判断一个变量是否存在，可以使用typeof：(不能使用if(a)，若a未声明，则报错)

instanceof 运算符：返回Bool

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

object instanceof constructor
object为实例对象，constructor为构造函数

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false

原理：顺着原型链去找，直到找到相同的原型对象，返回true，否则为false

function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
        proto = Object.getPrototypeof(proto);
    }
}

小结：

instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
typeof 可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断
Object.prototype.toString通用检测数据类型

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

常用函数

Math.abs()

Math.pow()

Math.max()

Math.max(param1,param2,param3…)
Math.max(5,7,9,3,1,6)
不支持传递数组
Math.max.apply(null,array)
apply会将一个数组装换为一个参数接一个参数
null是因为没有对象去调用这个方法,只需要用这个方法运算

取整

Math.floor() 向下取一个整数

Math.round() 返回一个四舍五入的值

Math.trunc() 直接去除小数点后面的值

string.toUpperCase()

Array.filter

arr.filter(value=>{ return value != item }) return arr2}

array.splice(index,howmany,item1,.....,itemX)

array.slice(start,end)

array.unshift(item1,item2, ..., itemX)

array.flat(layer) #不写参数默认一维

array.map（el => Math.pow(el,2)）

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

parseInt()

parseInt(string, radix)

parseInt() 函数可解析一个字符串，并返回一个整数。

radix可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

常用类

伪数组对象

在调用函数时，浏览器每次都会传递进两个隐含参数

-上下文对象this

-封装实参的对象arguments

arguments是一个类数组对象

（arguments instanceof Array------>false

Array.isArray（arguments）------>false）说明arguments不是数组对象

arguments.length可以获得传入的实参的数目------>类数组对象可以通过索引来操作数据，也可以获取长度

Date

new Date(value);

date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()

正则表达式Regular Expression(RegExp)

单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

/正则表达式主体/修饰符(可选)

str.search() 返回子串的起始位置。

str.replace(str1,str2) 替换子串。

RegExp 对象是一个预定义了属性和方法的正则表达式对象

regexp.test(str)返回Bool

regexp.exec(str)返回匹配的子串或者 null

修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

属性

ignoreCase   返回一个布尔值，True代表正则表达式设置了 i 匹配规则(忽略大小写)
global     返回一个布尔值，True代表正则表达式设置了 g 匹配规则(全局匹配)
multiline   返回一个布尔值，True代表正则表达式设置了 m 匹配规则(多行匹配)
lastIndex   返回一个int值，表示下一次搜索开始的索引位置，只在设置了 g 匹配时才有意义。
source   返回一个字符串，字符串是正则表达式的字符串形式(不含斜线)

表达式

ES6

Generator函数

通过 yield 关键字，把函数的执行流挂起

在 function 后面，函数名之前有个 * ；
函数内部有 yield 表达式。

调用 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。

function* sendParameter(){
    console.log("start");
    var x = yield '2';
    console.log("one:" + x);
    var y = yield '3';
    console.log("two:" + y);
    console.log("total:" + (x + y));
}

var sendp1 = sendParameter();
sendp1.next();
// start
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}
next传参
var sendp2 = sendParameter();
sendp2.next(10);
// start
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}

next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值。

除了使用 next ，还可以使用 for... of 循环遍历 Generator 函数生产的 Iterator 对象。

require和import

本质，加载时间，位置

async和await

函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。

await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西，

如果是promise则会等待promaise 返回结果，否则，就直接返回对应的值，

只能在async函数中出现, 普通函数直接使用会报语法错误SyntaxError

await必须和async一起使用才行，async配合await使用是一个阻塞的异步方法

await语句后的Promise对象变成reject状态时，那么整个async函数会中断，后面的程序不会继续执行

class语法糖

JavaScript中，生成实例对象的传统方法是通过构造函数。由于这种语法与c++，java相差有点大，故ES6引入了class这个语法糖(编程语言为开发者提供的实现某个操作的更简便的方法)。

class的功能在ES5中大部分都能做到，新的class写法让对象原型的写法更加清晰，更像面向对象的编程。

但是由于JavaScript的面向对象都是基于原型的，所以虽然ES6新增了class但是并不是意味着JavaScript就支持class了，也就是说。class的本质还是构造函数+原型。

class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class和let，都存在暂时性死区，即没声明，就不能用

它的本质就是一个函数，类本身就指向一个构造函数

ES5继承

function Parent() {
    this.name = 'parent';
    this.arr = [1,2,3,4];
}
Parent.prototype.say = function () {
    console.log('say');
};
function Child(age) {
    Parent.call(this);
    this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var c = new Child(12);
console.log(c.name); //输出parent
c.say(); //输出say
console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

1.创建子类的实例对象，

2.将父类的方法添加到this上（Parent.apply(this)），

3.原型链继承。Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

extends

1.创建父类的实例对象this（在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数，才可使用this关键字，否则报错。），

2.用子类的构造函数修改this实现继承。

静态属性

静态属性只能写在class外，声明：类名.属性名 = 属性值

静态方法

静态方法里的this指向Dog本身，而不是实例
静态方法不在原型链上，而在构造函数本身上面
实例不能调用静态方法，而是通过class本身来调用：Dog.walk()
父类的静态方法，可以被子类继承
静态方法和实例方法可以重名

箭头函数

相当于匿名函数

箭头函数本身没有作用域（无this）
箭头函数的this指向上一层，上下文决定其this
基本语法：参数 => 函数体
箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。在函数定义的时候就已经决定了

() => return 'hello'



(a, b) => a + b



(a) => {

  a = a + 1

  return a

}

ES6新特性箭头函数语法、如何正确使用箭头函数_Hayley2016的博客-CSDN博客_箭头函数

`${}`

反单引号(``)完成拼接字符串而不是单引号（‘’）

let str=`I love ${a}, because he is handsome.`;

let [a, b, c] = [1, 2, 3];// a = 1，b = 2，c = 3 相当于重新定义了变量a,b,c，取值也更加方便

// , = 占位符
let arr = ["小明", "小花", "小鱼", "小猪"];
let [,,one] = arr; // 这里会取到小鱼

// 解构整个数组
let strArr = [...arr];// 得到整个数组
console.log(strArr);

解构赋值是对赋值运算符的扩展
针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
都2021年了，再不学ES6你就out了 —— 一文搞懂ES6_欧阳呀的博客-CSDN博客

解构赋值

赋值运算符的扩展，针对数组或者对象，对其中的变量进行赋值

//可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

let [a = 1, b] = []; // a = 1, b = undefined

扩展运算符...

将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用

console.log(...[3, 4, 5])

新增数据结构

Set，Map

基本数据类型 Symbol

表示独一无二的值，最大的用法是用来定义对象的唯一属性名

let sy = Symbol("key1");
 
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

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

let syObject = {};
syObject[sy] = "kk";
console.log(syObject);
 
for (let i in syObject) {
  console.log(i);
}    // 无输出
 
Object.keys(syObject);                     // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]
Reflect.ownKeys(syObject);                 // [Symbol(key1)]

Iterator，for in，for of，forEach，map循环遍历

Iterator

一种接口，为各种不同的数据结构提供统一的访问机制

例如Array.prototype[@@iterator]()

Array 对象的 @@iterator 方法实现了迭代协议，并允许数组被大多数期望可迭代的语法所使用，例如展开语法和 for...of 循环。它返回一个迭代器，生成数组中每个索引的值。

for in

["a", "b", "c", "d"];for…in 循环读取键名 // 0 1 2 3

适用于遍历对象的可枚举属性

无法遍历 symbol 属性可以遍历到公有中可枚举的

使用 for…in 遍历时，还需要使用 hasOwnProperty() 方法来判断属性是否来自对象本身，并避免遍历原型链上的属性。

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// Expected output: true

console.log(object1.hasOwnProperty('hasOwnProperty'));
// Expected output: false

for of

["a", "b", "c", "d"];for…of 循环读取键值// a b c d

支持迭代协议的数据结构（数组、字符串、Set、Map 等），不包括对象。

对于字符串，类数组，类型数组的迭代，循环内部调用的是数据结构的Symbol.iterator方法。

for...of 不能循环普通的对象，需要通过和 Object.keys()搭配使用

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]

forEach

arr.forEach（value[，index，默认隐藏参数arr]）

适用于需要知道索引值的数组遍历，但是不能中断（ break 和 return ）

如果需要跳出循环可以使用 some() 或 every() 方法


const isBelowThreshold = (currentValue) => currentValue < 30;

const array1 = [1, 30, 39, 29, 10, 13];

array1.forEach(element => console.log(element));

console.log(array1.every(isBelowThreshold));
// Expected output: false

//是不是至少有 1 个元素
console.log(array1.some(isBelowThreshold));//空数组,则返回false。
// Expected output: true

map

map 方法，基本用法与 forEach 一致

forEach()方法不会返回执行结果，而是undefined
map()方法会得到一个新的数组并返回
同样的一组数组，map()的执行速度优于 forEach()（map() 底层做了深度优化）

var，let 和 const关键字

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

变量提升，即变量可以在声明之前调用

在js中声明之前未定义，会在js的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名

var：没有块的概念，可以跨块访问, 不能跨函数访问，允许重复声明，变量提升
let：ES6新增，用于声明变量，有块级作用域（由大括号包裹，比如：if(){},for(){}等），不允许在相同作用域中重复声明，不存在变量提升
const ：声明一个只读的常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，一旦声明，常量的值就不能改变，（即，栈中的值不能变，引用类型，内存地址不能修改，可以修改里面的值。）。不允许在相同作用域中重复声明，不存在变量提升

js模块化规范

模块：实现特定功能的一组方法，把不同函数（以及记录状态的变量）放到一起，就算一个模块。

函数模块化：”污染“了全局变量，无法保证不与其他模块发生命名冲突，而且模块之间并看不出直接关系

对象模块化：会暴露所有模块成员

模块规范很好地解决变量污染问题，每个模块具有独立空间，互不干扰。

模块规范支持引入和导出功能，这样可以顺畅地连接各个模块，实现彼此间的依赖关系。

CommonJS规范更适合服务器端，AMD、CMD、ES6则更好的适用于浏览器端。

ECMAScript 和 JavaScript 的关系：前者是后者的语法规格

CommonJS

暴露模块使用module.exports和exports，有一个全局性方法require()，用于加载模块。

CommonJS加载模块是同步的：

同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；

如果将它应用于浏览器呢？

浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；
那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；
所以在浏览器中，我们通常不使用CommonJS规范：

当然在webpack中使用CommonJS是另外一回事；

因为它会将我们的代码转成浏览器可以直接执行的代码；

在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD：

但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ESModule代码的转换；

AMD和CMD已经使用非常少了

AMD

Asynchronous Module Definition

异步加载，就是指同时并发加载所依赖的模块，当所有依赖模块都加载完成之后，再执行当前模块的回调函数。

require.js 实现了 AMD 规范。

CMD

Common Module Definition

异步加载，

CMD则是依赖就近，用的时候再require。

sea.js实现的规范，

AMD和CMD最大的区别是对依赖模块的执行时机处理不同
AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；
CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块

牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

ES6

import 和 export 的形式来导入导出模块

TS

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。

相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。

WebAPI

元素操作

动态创建节点

document.getElementById()

getElementsByClassName()

document.querySelector()获取当前页面首个标签元素。

document.createElement()创建标签

innerHTML或innerText设置li标签内容

appendChild()方法将li添加在ul中

function createLi(array) {
    var ul = document.querySelector('ul')
    for(let i=0 ; i<array.length ; i++) {
        let li = document.createElement('li')
        li.innerHTML = array[i]
        ul.appendChild(li)
    }
}

绑定事件

阻止事件

let li = document.getElementsByTagName("li")[0]; 
阻止传播（冒泡）事件
li.addEventListener('click', function(e) { e.stopPropagation(); }

阻止默认事件
event.preventDefault()

地址栏

 window.location.href; //获取当前页面的url

参考链接

课程链接：【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通_哔哩哔哩_bilibili

笔记参考：https://blog.csdn.net/qq_35925558/category_11061834.html

CSS中的margin、border、padding区别 - 你也很优秀 - 博客园

面试官：说说 typeof 与 instanceof 区别?_动感超人，的博客-CSDN博客

参宿7

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3+ES5/6+TS+WebAPI前端入门/实习题库笔记

菜鸟教程，尚硅谷，牛客
复制链接

扫一扫

专栏目录