Web前端开发-基础知识总结[期末考试总结]

目录

1.JS 基础知识

2.变量、常量、数据类型

有 7 种基本数据类型和4种引用数据类型

运算符：

三元运算符

多个符号运算符

逗号运算符

逗号运算符用于对两个表达式求值，并返回后一个表达式的值。

易错题：

例题：

求模：

函数：定义

JavaScript 有三种定义函数的方法。

       2.函数表达式

       3.Function()构造函数 (不推荐)

参数及参数对象（arguments，rest）

REST ，多余的实参以数组的形式交给参数 rest

事件：类型

DOM：

节点关系

查找标签

操作样式

标签的 classList 属性（大力推荐）

时间对象：时间对象中0表示一月 0表示星期天

创建时间对象：

现在 let mydate2 = new Date();，指定时间点 let mydate1 = new Date( 2021, 0, 1 );

数组：

数组元素的增/删

（1）添加元素

数组的截取

数组的合并

（1）查找元素的索引位置 -从数组中查找

（2）判断有无某元素

---

1.JS 基础知识

让内容活起来的 JavaScript: 行为

JavaScript作用：增强交互，添加特效，实现数据交换

2.变量、常量、数据类型

声明变量可以使用 var 或者 let

一旦用const 定义了常量，常量的值就不可以更改

const PI = 3.1415; // 定义常量 PI

有 7 种基本数据类型和4种引用数据类型

基本数据类型( 值传递 )：Undefined，Null，Number，String，Boolean，Symbol（ES2015 新增）,BigInt（ES2015 新增）

number：NaN NaN === NaN false NaN，undefined Number.isNaN( x ) 判断x是否是 NaN

字符串："" '' ``

数据类型的转换：数值、布尔值、字符串 数值-->布尔值： Boolean( 100 )、!!100 --> 字符串： String(100)、 X.toString() 100+"" 、 ${100} 布尔值-->数值：Number( true ) -->字符串： String(true )、 X.toString() true +"" 、 ${true } 字符串-->数值：Number( '100' ) parseInt('100abc') parseFloat('100abc') -->布尔值：

运算符：

三元运算符

只有一个三元运算符，是条件运算符 ? : ，它将三个表达式合并成一个表达式。

if() 则 否则：

let a=20;

a > （判断符）19 ? true:false;

如果a大于19则 执行第一 否则 执行第二个

多个符号运算符

let x, y, z ; x = y = z = 10 ; // x,y,z 都赋值为 10 // 相当于： z = 10; y = z ; x = y ;

复合的赋值运算符，都是先进行指定运算，然后将得到的值返回给左边的变量

语句没有返回值

console.log(var a = 1); // SyntaxError: Unexpected token var

逗号运算符

逗号运算符用于对两个表达式求值，并返回后一个表达式的值。

在对非数值应用一元加运算符时，会调用Number()转型函数对这个值进行转换。

let s1 = '01'; let s2 = '1.1'; let s3 = 'z'; let b = false; let f = 1.1; let o = { valueOf:function(){ return -1; } }; s1 = -s1;//-1 s2 = -s2;//-1.1 s3 = -s3;//NaN b = -b;//0 f = -f;//-1.1 o = -o;//1

易错题：

let num1 = 2; let num2 = 20; let num3 = num1-- + num2;//22 let num4 = num1 + num2;//21

let x = '1'; ++x;//2 let x = '1'; x = x + 1;//'11' 相加的数据只要有一个是字符串，就会简单拼接成一个新的字符串

NaN 或则 undefined 参与任何运算的结果都是 NaN

如果进行算术运算，undefined转换为NaN，null转换为0，false转换为0，true转换为1。

例题：

console.log(undefined + undefined);// NaN console.log(null + null);//0 console.log(false + false);//0 console.log(true + true);//2

10+30 // 40 10+"30" // 1030, 相加的数据只要有一个是字符串，就会简单拼接成一个新的字符串 10+20+"30" // 3030 , why? 4 + [1,2,3] // "41,2,3" 第一个数组 是字符串，其余输出原数 （加法可以）（减法为NaN）

'a', 'b' // "b" let x = 0; let y = (x++, 10); x // 1 y // 10

求模：

console.log(5 % 2); //1

console.log(5.5 % 2); //1.5

console.log(5 % -2); //1 console.log(-5 % 2); //-1 console.log(-5 % -2); //-1

== 等于，约等于

=== 绝对等于（值和类型均相等）

!= 不等于

!== 不绝对等于（值和类型有一个不相等，或两个都不相等）

易错：NaN和任何值不相等，包括其自身。因此，判断某个数据是否是NaN，应该使用 Number.isNaN(x) 方法。

console.info( 0 == -0 ); // true console.info( 0 === -0 ); // true console.info( +0 == -0 ); // true

易错：

let a = 42;let b = "abc"; let c = null; a || b; // 42 ||如果第一个为true 则返回第一个 a && b; // "abc" 如果第一个为true，则返回第二个 c || b; // "abc" c && b; // null

&& 和 ||的短路运算：

let flag = true;if(flag) { console.log(1); } // 等于 let flag = true; flag &&( console.log( 1) ); //

let a = 5; let b; if(a > 10) { b = 10; }else { b = 5; } console.log(b); // 等于 let a = 5; let b; b = a > 10 && 10 || 5;

if else=? :

函数：定义

JavaScript 有三种定义函数的方法。

        1.使用function 关键词

       2.函数表达式

function 关键词定义函数的时候，可以不写函数的名，没有名称的函数称为匿名函数，也叫函数表达 式。

       3.Function()构造函数 (不推荐)

参数及参数对象（arguments，rest）

JavaScript 函数有个内置的参数对象， arguments对象 。所有的实参都存储在了 arguments 对象 里，该对象类似于数组。 实参个数不足，其实就是 arguments 元素未定义，未定义的值就是 undefined 。 实参个数多余，形参虽然得不到这个实参的值，但是依然可以在 arguments 里获取它。 arguments.length ，可以轻松获取函数实参的个数。 arguments[ 索引 ]，可以获得具体的参数值。

function myFun(a,b){ console.info(arguments.length , arguments[1]); 索引从0开始arguments[0] }; myFun(); //输出： 0 undefined myFun(10); //输出： 1 undefined myFun(10,20,300); //输出： 3 20

REST ，多余的实参以数组的形式交给参数 rest

rest参数前面有三个点 ... 。这是 解构符，可以把数组变成逗号分隔的数据序列。

function exm(a, b, ...rest) { console.info('a = ' + a); console.info('b = ' + b); console.info(rest); } exm(1, 2, 3, 4, 5);

exm(1); // a = 1 // b = undefined // Array []

默认值

Return:

函数的执行可能会有返回值，需要使用 return 语句将结果返回。 return 语句不是必需的。如果没有，该函数就不返回任何值，或者说返回 undefined

事件：类型

点击（click），鼠标触碰（mouseenter），鼠标离开 （mouseleave），键盘按下（keydown）, 开始触摸（ touchstart），触摸移动（touchmove） 等。

找标签document.getElementById()

document.getElementByClassName()

事件监听：添加、取消

addEventListener添加事件("事件（点击、触碰、离开、按下、触摸、移动"，函数调用) removeEventListener()

DOM：

节点关系

DOM 图中，节点之间主要有三种关系： 父节点 parentNode： 标签的上一级节点。 parentNode 前面的 DOM 树中： div 就是 a 标签的父节点。 子节点 childNodes：标签的下一级节点。 childNodes 前面的 DOM 树中： a 就是 div 的子节点。但是， a 不是 body 的子节点，是孙节点，因为中间 隔了一层 div 。 兄弟节点 sibling ：平级的节点。 sibling ☆ 前面的 DOM 树中： meta 和 title 就是平级节点。

查找标签

1. document.getElementById( xID ) 通过id获取某一元素
2. xEl.getElementsByClassName( cName ) 通过类名获取元素（数组）
3. xEl.getElementsByTagName( tagName ) 通过标签名获取元素（数组）
4. document.getElementsByName( name ) 通过name取得元素（数组），主要用在表单和表单 元素

操作样式

xEle.getAttribute( attrName ) 获取标签属性值，包含原生属性和自定义属性，返回字符 串。

xEle.setAttribute( attrName, 设置标签属性值，包含原生属性和自定义属性。 value )

xEle.hasAttribute( attrName ) 判断标签是否包含指定属性。包含 true，否则 false。

xEle.removeAttribute( attrName 移除指定属性，没有返回值。 )

标签的 classList 属性（大力推荐）

add( c1, c2, ... ) 在元素中添加一个或多个类名。 如果指定的类名已存 在，则不会添加。

let mydiv = document.getElementById("mydiv");

mydiv.classList.add( "c4","c3" ); // c3 已经存在，不会重复添加

remove(c1, c2, ...) 移除元素中一个或多个类名。 注意： 移除不存在的类 名，不会报错。

时间对象：时间对象中0表示一月 0表示星期天

创建时间对象：

现在 let mydate2 = new Date();，指定时间点 let mydate1 = new Date( 2021, 0, 1 );

获取时间：年，月，日，时，分，秒，星期 显示时间，让时间走动

setInterval

let i = 1; let timer = setInterval(function() { i++; console.info(i); if( i>=10 ){ // 计时器终止条件判断 clearInterval(timer); } }, 1000);

setTimeout函数的写法跟 setInterval 完全一样，唯一的区别是它不会反复执行代码，而只是会把代 码推迟执行，会在多少毫秒之后执行代码。它也被称为超时调用。

let i = 0 ; function goFun(){ i++; console.info(i); }; let timer = setTimeout( goFun, 1000); 延时1秒后执行

数组：

创建数组对象

有两种方式：

1. new 关键词 let arr1 = new Array(); // 创建一个空数组

let arr2 = new Array(1, 2, "哈哈",true ); // 带有4个元素的数组

2 字面量（推荐） 用 [ ] 表示一个数组。

let arr1 = [ ]; // 创建一个空数组

console.info( !!arr1 ); // true。对象转为 布尔值，都是 true

数组长度

arr1.length、

元素

数组的每一个元素，都有一个索引值。数组索引从 0 开始，直到 length-1 为止

易错点：

let arr = [1, 2, "哈哈", true]; arr[6] = 200 ; console.info( arr ); // [1, 2, "哈哈", true, undefined, undefined, 200] console.info( arr.length ); // 7

遍历（for，for-of）

let arr = [1, 2, "哈哈", true]; for(let item of arr ){ console.info( item ); // 元素 }

数组元素的增/删

（1）添加元素

arr.unshift( ) 头部添加元素，arr.push( ) 尾部添加元素。

它们可以同时添加多个元素，多个元素在（）用逗号隔开。

arr.unshift( e1, e2, e3 .... ); arr.push( e1, e2, e3 .... );

arr.splice( )中间

arr.splice( deleteIndex, n , e1,e2,e3... )

deleteIndex：要删除元素的起始索引位。 n：要连续删除 n 个元素。为 0，就不删除，只添加。 e1,e2...eN：要添加的元素。如果省略，就只删除。

数组与字符串的转换 数组类似于列表(相反！！！！) 想象python的列表（相反！）

字符串→列表 split

列表→字符串 join

数组的截取

arr.slice( start, end )

数组的合并

arr.concat( arr1 , arr2 …. arrN ) 多个数组合并

（1）查找元素的索引位置 -从数组中查找

arr.indexOf ()从前向后搜索直到第一个被找到

arr.lastIndexOf 从后向前搜

（2）判断有无某元素

arr.includes 返回布尔值

数组逆序 arr.reverse()