一、JavaScript(JS)

JavaScript被 ECMA组织更名为 ECMAscript(ES)。JavaScript是一门轻量级、基于面向对象的、即时编译的一门解释型语言。

JS的基本语法特点:js严格区分大小写;每一行代码应该以分号结尾,但是可以省略;js代码的执行顺序,从上往下依次执行。

js的引用有三种方式:

<!-- 方式一 行内式 通过 on+事件名 的形式书写js代码 不推荐 了解即可 -->
<button onclick='alert(123)'>按钮</button>
<!-- 方式二  内部引入式  (通过html中script标签)-->
<script>console.log('dys')
</script>
<!-- 方式三 外部js引入  script标签 通过该标签的src属性去指定js文件的路径 -->
<!-- 注意:在该方式中,不能在script的内容区写额外的js代码,写上了也是无效的!不会执行 -->
<script src="./day01/demo.js"></script>

1、JS的数据类型

四基两空一对象 , bigInt

- 四基: number(数值类型) 、string (字符串类型) 、 bool(布尔类型)、 symbol(符号类型)

- 两空: Null (空对象,空引用) Undefined (未定义的空值)

- 一对象: Object (对象类型,复杂数据,引用数据类型)

- 在JavaScript中除开基本数据类型以外,“万物皆对象”

1、Number 数值类型 数值型的相关数据,整数、小数 特殊的数值类型: NAN (not a number)

2、String 字符串类型 字符串类型是由单引号或者双引号引起来的,称作为字符串类型

3、Boolean 布尔类型 只有两个值 true(真) 和 false(假) 代表真和假 true和false是布尔值,也叫做逻辑值

4、Null 类型 空引用,空对象 该类型的值只有一个 null

5、Undefined 空值 该类型的值只有 Undefined

typeof 运算符 可以检测对应变量的类型;语法:typeof 变量名

2、硬盘和内存存储数据的区别

1、硬盘的读取速度慢,内存读取速度更快

2、硬盘的容量更大可以存储大量的数据,内存容量有限

3、硬盘保存的是永久性数据,内存保存的是临时数据(断电消失)

3、标识符的命名规则

标识符:就是为变量、函数、形参、对象属性、对象方法等命名的一段字符

标识符的命名规则: 1、标识符只能由数字、字母、下划线、$组成 ;2、不能以数字进行开头 ; 3、不能使用关键字或者保留字作为标识符的名字 ;4、标识符的命名严格区分大小写 ;5、标识符的命名应该遵循'见名知义' ;6、如果标识符由多个单词组成应采用驼峰命名法 abcAbcBcc (比如 blackGroundColor)。

4、数据类型的相互转换

数据类型的相互转换:强制转换 (人为) ;隐式转换(自动转换)

1- 将其他数据类型转换为 Number,有三个方法可以实现——三个全局函数 1、Number() 2、paserInt()(遇到第一个非number数据形式的字符就停止转换,将之前的数值格式的数据转换并返回)  3、paserFloat()

2-将其他数据类型转换为字符串类型 string类型 1、String()​ 2、 toString()

3- 将其他类型转换为布尔类型 Boolean()

二、运算符

算术运算符、单目运算符(一元运算符)、自增和自减运算符(也是单目运算符)、比较运算符、逻辑运算符、括号运算符、逗号运算符、条件运算符

1、算术运算符

算术运算符:+ - * / %(模、取余) **(幂运算)

+(加号): 将+号两边的number类型的数据,进行相加得到一个相加后的值 如果+号的两边不是number类型(string类型除外),它会先将其隐式转为number类型然后再进行计算

-(减号) : 将-号两边的number类型的数据,进行相减得到一个相减后的值 如果-号的两边不是number类型,它会先将其隐式转为number类型然后再进行计算

* (乘号) : 将*号两边的number类型的数据,进行相乘得到一个相乘后的值 如果*号的两边不是number类型,它会先将其隐式转为number类型然后再进行计算

/ (除号,数学意义上的除法) : 将*号两边的number类型的数据,进行相除得到一个相除后的值;如果*号的两边不是number类型,它会先将其隐式转为number类型然后再进行计算

2、自增自减运算符

++(自增运算) -- (自减运算),两个都是属于单目运算

++(自增运算),有两种形式:

- 前自加:

语法: ++变量名 ==> 变量名 = 变量名 + 1

前自加是先将变量的值进行加1后,再参与后续的计算

- 后自加

语法: 变量名++ ==> 变量名 = 变量名 + 1

先使用变量当前值参与运算,运算完毕后,再将变量的值进行加1

-- (自减运算)与自增运算同理

3、逻辑运算符

逻辑运算符:与(&&) 或(||) 非(!)逻辑运算符,是将两边表达式进行逻辑比较,得到的也是一个逻辑值。逻辑运算符的结果不一定是true 或者 false 逻辑运算表达式的结果是将表达式中所计算的实际值,作为整个逻辑表达式的结果进行返回。

逻辑与(&&): 表达式1 && 表达式2 && 表达式3。口诀:一假即假,全真才真。js中的逻辑与是属于短路与,一旦表达式1为false,将不再进行表达式2的运算,直接将表达式1的值进行返回。

逻辑或(||): 表达式1 || 表达式2。口诀:一真即真,全假才假。js中的逻辑或是属于短路或,一旦表达式1为true,将不再进行表达式2的运算,直接将表达式1的实际值进行返回不管是逻辑与还是逻辑或,它是将表达式的值,作为整个逻辑表达式的值进行返回。

逻辑非(!)也是一元运算(单目运算)。如果对一个值连续取反,那么将得到该值的逻辑值

三、流程控制结构

顺序结构( js代码整体的运行轨迹是从上往下依次执行的);选择结构 ((单分支 if语句)( 双分支 if...else))(条件分支 switch...case);循环结构( for、 while、 do...while)

1、if语句(单分支)

if语句的执行流程,当执行到if语句时先进行括号中表达式值的判断;如果该表达式的值是true或者fasle,根据结果去判断是否 执行if后面的第一条语句,如果为true 语句执行 ,否则语句不执行;如果该表达式的值不是bool类型,它会先隐式转换为布尔类型,然后再进行判断,如果为true 语句执行 ,否则语句不执行。注意:if语句可以进行嵌套。

2、if...else语句(多分支)

if...else的配对规则:else永远向上面去找离它最近为配对的if进行配对。

if...else语句的执行流程,当执行到if语句时先进行括号中表达式值的判断;如果该表达式的值是true或者fasle,根据结果去判断是否 执行if后面的第一条语句,如果为true 语句执行 ,否则执行else中的语句;如果该表达式的值不是bool类型,它会先隐式转换为布尔类型,然后再进行判断,如果为true 语句执行 ,否则执行else中的语句。

3、switch...case语句

当js程序执行到switch语句时:计算switch后面表达式的值;将刚才计算的值,与{}中从上往下去进行匹配 表达式1 === 每一个case后的表达式进行匹配。可以通过break关键字,强制中断后续的case语句的执行 ;如果switch在匹配case的过程中,没有找到一个与之匹配的话可以将其视为一种特殊的情况:在switch中添加关键字 default 从而执行default后的语句。

4、while循环语句

while语句使用时必须指定两个东西:循环控制变量;每一次循环中要更新当前的循环控制变量。

while语句的执行流程:计算while括号中表达式的值,如果为false 不会执行循环体中的语句,while语句就结束了,继续执行后续的代码 ;如果表达式的结果为 true ,就会执行循环体中的代码, 当循环体中的代码执行完毕后,又会回到表达式,进行下一次的逻辑判断,如果继续为true,则继续进行循环体内容的执行,重复此操作,直到表达式为false,循环才会结束。

四、对象类型

在JS中对象是有具象的表达的和具象的描述的。对象有:{}(括号对象)、[](数组对象)、函数(函数对象)、js的内置对象,浏览器提供的对象(宿主对象)

1、括号对象

括号对象(对象类型):它是有大括号包裹的,将一些key:value 键值对的数据,进行统一保存,该对象是无序的没有下标的说法,只有对象的属性这个概念。

对象的结构: { key:value, key:value, .... }。key是字符串类型,但通常在书写时省略引号部分,key作为标识符,命名必须遵守标识符的命名规则对象结构的主要作用就是保存多个不同类型的值。对象中可以同时存储,不同类型的数据。

<script>var name = '张三'var age = 18var sex = '男'var adders = '重庆市九龙坡区渝州路18号'// 如何创建一个对象// 1、通过字面量直接创建一个对象,该方式也是使用比较频繁的一种var person1 = {name: '张三',age: 18,sex: true,adders: '重庆市九龙坡区渝州路18号'}// 2、通过new 构造函数  new Object(),该方式会创建一个空对象 { }var person2 = new Object()// 如何访问对象的数据?// 1、直接访问该对象的整体console.log(person1, person2)// 2、如何访问对象中具体属性的值// 1)通过 对象名.属性名 点语法console.log(person1.name, person1.age)// 访问对象中不存在的属性时,不会报错,只是返回undefinedconsole.log(person1.xxx)// 2)通过 对象名[属性名]  注意:通过[]访问对象属性时,必须给属性加上引号,如果是变量中保存的是字符串类型,也是可以的var xxx = 'name'console.log(person1['name'] === person1[xxx])// 3、对象中不允许存在相同属性名的属性console.log(person1)// 4、如何修改对象中属性的值,通过 ‘=’ 赋值运算符进行修改// 如果对一个存在的属性赋值时,新的属性值会覆盖掉之前属性的值person1.age = 20console.log(person1)person1['name'] = '李四'console.log(person1)// 5、如何向现有的对象中添加额外的属性// 如果对一个不存在的属性赋值时,该对象首先会创建一个属性,然后再对其进行赋值person1.xxx = '我是新的属性'console.log(person1)console.log(person2)person2.name = '张三'person2.age = 18console.log(person2)
</script>

2、数组对象

JavaScript中由‘[]‘’括起来的,用于存储有序的数据的一个数据结构,称作为数组![]中可以同时存储,多个不同类型的数据,多个数据之间使用逗号分隔即可。

    //如何创建一个数组// 方式一:字面量var arr1 = [1,2,'a']console.log(arr1)// 方式二:new 构造函数var arr2 = new Array() //如果不向构造函数传入参数那么,该数组是空数组console.log(arr2)var arr2 = new Array(1,2,'a') //如果不向构造函数传入参数那么,该数组是空数组console.log(arr2)// 访问数组中具体的某个元素的值  通过 数组名[下标值]  注意:下标值是从0开始计算var arr = [1,2,3,'a','b']console.log(arr[3])// 修改数组中元素的值var arr = [4,5,6,7,8]arr[0] = 50console.log(arr)arr[6] = 'xxx'console.log(arr[6],arr)arr[20] = 'yyy'console.log(arr)// 注意:不建议对超过当前数组长度的下标进行赋值!这样会造成很多的空元素console.log(arr[5])var arr = ['a','b','c']console.log(arr,arr.length) // 数组.length 可以返回当前数组的长度// 如何对数组添加新的元素arr.push('d') // push方法只有数组类型的才可以调用,在当前数组的末尾添加一个新的元素console.log(arr)// 如何删除一个元素var res = arr.pop()  //删除数组中最后一个元素console.log(arr.pop())

五、函数

函数:已经封装好了的一段可以重复调用,并且实现某种功能的代码块。 函数的其他叫法: 方法、匿名函数、回调函数、自执行函数、构造函数、全局函数、局部函数、箭头函数等等。

函数在调用时,传参应该遵循一些规则:遵循参数的顺序一致;遵循参数的个数一致;遵循参数的类型一致。函数是一个表达式,函数表达式默认的返回值是undefined。

函数的参数传递分为两种情况:1、值传递 :当函数在调用时,实参数据是基本数据类型时,这时传递给形参的是值,两个独立的空间 ;当函数在运行中改变了形参变量是不会影响到实参变量的。2、引用(地址)传递 :当函数在调用时,实参变量是引用数据类型时,这时传递给形参变量的就是地址值,共享一个空间 ;当函数在运行中改变了形参变量是会影响到实参变量的数据的

1、自执行函数

自执行函数(即时执行函数):函数在被创建的同时就马上执行了,这种函数通常情况下只会执行一次。创建:function(形参列表){............}()

2、构造函数

构造函数:构造函数本质上是去实例一个对象,构造对象的。不同的构造函数,所实例的对象是不同的,类别是不同的。

构造函数语法规则: new 构造函数(形参列表)

构造函数与普通函数的不同: 1、构造函数主要目的不是去实现某个功能,主要是去实例化对象; 2、构造函数中的this指向不同,this指向的是一个新创建的空对象 {} ;3、构造函数一般不会单独执行,应该与new 配合执行 ;4、构造函数的返回值有所不同 (1)如果没有return语句,默认返回新创建的那个空对象 ;(2)如果有return语句: 情况1: 如果return返回的是基本数据类型,直接无视返回值,还是返回空对象 情况2: 如果return返回的是引用数据类型,则返回该引用数据类型;5、 构造函数的首字母应该大写。

3、回调函数

回调函数:将函数作为参数进行传递,传递到另一个函数中,传入的这个函数就称为回调函数。

function fun(){console.log('ok')
}
function foo(myfun){for(var i = 0;i<=10;i++){if(i == 5){myfun()break}}console.log('over')
}
fun()
foo(fun)

4、箭头函数

箭头函数,也是函数的一种,但是相比于其他的函数形式,它很特殊。1、写法特殊 2、不能作为构造函数使用 3、它不具备自己的this(箭头函数的this指向的是,该箭头函数被创建时,当时的作用域下的this ) 4、箭头函数不具备自己的名字写法特殊 、创建特殊.通常箭头函数的写法: (形参列表)=>{........}     箭头函数通常是作为一种函数值,进行传递使用!

六、其他

1、this关键字

this关键字:当函数被调用时,运行环境会自动向该函数隐式传入this对象this的指向是变化的,在不同情况下函数的执行中,this的指向是不一样的。

// 1、当函数作为普通函数调用执行时   函数名()或IIFE  函数的this指向的是window
function fun1(){console.log(this)
}
fun1();(function(){console.log(this)
})()var fun2 = function(){console.log(this)
}
fun2()var obj = {fun3:function(){console.log(this)}
}
var fun4 = obj.fun3
fun4()
//2、当函数作为某个对象的方法进行调用时,该方法中的this指向的是调用者,而非持有者!
// 对象名.方法()   表达式.方法()  对象名[方法名]()
function fun1(){console.log(this)
}
window.fun1()
var obj1 = {name:'obj1',fun1:function(){console.log(this)}
}
obj1.fun1()
obj1['fun1']()
var obj1 = {name:'obj1',fun:function(){console.log(this)}
}
var obj2 = {name:'obj2'}
obj2.xx = obj1.fun
obj1.fun()
obj2.xx()
var obj2 = {name:'obj2',fun:function(){console.log(this)}
}
var obj1 = {name:'obj1',fun:function(){console.log(this)},xxx:obj2
}
obj1.xxx.fun()
// 3、构造函数时this的指向是一个新创建的{}对象
function fun(){console.log(this)
}
fun()
new fun()

this的劫持

this的劫持:强行的人为改变this的指向。实现this劫持的三种方式(基于三个方法):apply、call、 bind 。

<script>var obj1={name:'obj1',fun:function(a,b){console.log(a+b);console.log(this);}}var myfun=obj1.funvar obj2={name:'obj2',fun:myfun}// apply// 函数表达式.apply(函数,数组)myfun.apply(obj1,[10,5])// call// 函数表达式.call(函数,形参1,形参2...)myfun.call(obj1,10,5)// bind// 函数表达式.bind(函数,形参1,形参2...)()myfun.bind(obj1,10,5)()</script>

2、垃圾回收机制

垃圾回收:JavaScript程序在运行的过程中,随着运行时间的增加,那么会相应的产生一些垃圾数据,垃圾回收机制主要是定时的去清理这些垃圾数据,避免内存泄漏导致程序崩溃。

如何定义垃圾:标记清除:假设所有的变量或者函数等其他数据,一开始就认为他们不是垃圾!当他们产生了某种变化后,就会被打上标记,标记为垃圾;引用计数:当引用型数据,没有再被任何引用时,引用链条为0的时候,就自动判定为垃圾数据。

正常情况下:全局作用域下的变量、函数在程序执行完毕后才会销毁;局部作用域下的变量、函数,当该局部作用域执行完了,结束后,就销毁对应的变量以及函数;引用数据当引用链条数量为0的时候,也会被销毁。

3、闭包

正常情况下:局部作用域下声明变量或者函数,当该作用域中代码执行完毕后,该函数所声明的变量、函数就被销毁了

闭包:闭包就是当函数被嵌套声明时,并且该函数被返回或者赋值给某个全局变量, 那么这个时候js内部发生一些事情:1、函数的地址值被返回了;2、产生了一个特殊的对象,闭包 (在这个闭包它打包了该函数作用域链上的所有的变量以及函数。

//   产生了一个闭包对象,并且该闭包对象有两个链子
function fun1() {var a, ba = 100b = 200function xxx(){console.log('xxx')}function fun2() {console.log(++a)xxx()}myfun1 = fun2myfun2 = fun2
}
var myfun1
var myfun2
fun1()
myfun1()//101
myfun2()//102//   产生了两个独立的闭包对象,每个闭包对象分别有一个链子
function fun1() {var a, ba = 100b = 200function xxx() {console.log('xxx')}function fun2() {console.log(++a)}return fun2
}
var myfun1 = fun1()
var myfun2 = fun1()
myfun1()//101
myfun2()//101

4、原型和原型链

1、原型属性

原型属性,每一个对象身上都具备一个属性,该属性称作为原型属性.原型属性有两类:显式原型属性 (prototype) :每一个函数都具备 prototype,并且还具备__proto__ ;隐式原型属性 (__proto__) :每一个实例对象,都具备 __proto__。

2、原型对象

原型对象:存放在prototype属性或者__proto__属性中的对象,称作为原型对象prototype;存放在该属性中的对象称作为显式原型对象__proto__,存放在该属性中的对象称作为隐式原型对象。显式原型对象(prototype)的作用:1、当函数作为构造函数使用,该属性才发发挥作用,如果是普通函数执行,原型对象毫无作用 ;2、当函数作为构造函数时,会创建一个实列的空对象 创建好空对象后,就会把 prototype中指向的原型对象赋值给 空对象的__proto__属性中 这样被创建好的空对象就具备了自己的原型对象。

3、原型链

原型链:JavaScript通过每个实例对象上的__proto__隐式原型属性,将原型对象进行链接,在通过原型对象的原型属性再进行链接,以此往复,直到最终的null,这样便形成了JavaScript中的原型链.原型链的寻找一定是通过实例对象的__proto__去寻找的!

5、String实例对象的API

// 字面量直接创建var str = 'hello!'new String()console.log(str.__proto__)// length 属性 获取字符串的长度var str = 'hello'console.log(str.length)// 注意:可以通过 字符串[索引值] 去访问字符串中对应的单个字符!但是不能通过这种方式进行修改var str = 'hello'console.log(str[0],str[1])// charAt方法// 从一个字符串中返回指定位置的字符// 语法: str.charAt([index])    []包裹的形参代表的是可选参数,不是必选  index是一个number类型// index默认值是0var str='dys sjx gdg yq gxh qxx mhtzjl'console.log(str.charAt(0));//dconsole.log(str.charAt(10));//g// charCodeAt方法// 从一个字符串中返回指定索引下对应字符的编码// 语法: str.charCodeAt([index])var str='aAbBcC'console.log(str.charCodeAt(0));//97console.log(str.charCodeAt(4));//99// 检查字符串中是否包含特定的子串// 1、  indexOf 方法// 从当前字符串的指定位置中查找第一个出现的特定的子串的位置索引,// 如果查找成功 则放回该子串字符的首字符索引下标,如果未查找成功则返回 -1//  语法: str.indexOf(searchValue[,fromIndex])//  fromIndex默认值是0//  注意:使用indexOf大部分情况不会传入fromIndex//  注意:该方法是正向查找!var str='hello world!'console.log(str.indexOf('ell'));//1console.log(str.indexOf('h'));//0console.log(str.indexOf('lle'));//-1// 2、 lastIndexOf 方法// 从当前字符串的指定位置中查找第一个出现的特定的子串的位置索引,// 如果查找成功 则放回该子串字符的首字符索引下标,如果未查找成功则返回 -1//  语法: str.lastIndexOf(searValue[,fromIndex])//  fromIndex默认值是0//  注意:使用lastIndexOf大部分情况不会传入fromIndex//  注意:该方法是反向查找!var str='hello world!dys gdg sjx gxh'console.log(str.lastIndexOf('h'));//26console.log(str.lastIndexOf('s'));//20console.log(str.lastIndexOf('syd'));//-1// 3、incudes方法// 判断当前字符串中有没有指定的某个子串,如果有则返回 true  没有则返回falsevar str='hello world!'console.log(str.includes('h'));//tconsole.log(str.includes('a'));//fconsole.log(str.includes('w'));//t// 4、starsWith方法// 判断当前字符串是否以某个指定字符串进行开头 根据情况返回 true 或者 falseconsole.log(str.startsWith('hello'));//tconsole.log(str.startsWith('h'));//t// 5、 endWith方法// 判断当前字符串是否以某个指定字符串进行结尾 根据情况返回 true 或者 falseconsole.log(str.endsWith('!'));//tconsole.log(str.endsWith('world!'));//t// concat 方法// 将一个或多个字符串与现有的字符串进行拼接,形成一个新字符串返回// 注意:不会影响原字符串// 注意:在性能优化下,如果需要实现字符串的合并 推荐使用 + 运算符!var str1='sjx'var str2='gxh'var str3='dys'console.log(str1.concat(str2,str3));console.log(str1,str2);// split方法// 使用指定的分隔符字符串,将一个string对象进行分割,形成一个字符串数组!// split方法的返回值是一个 Array// 注意:如果不传入指定的分隔符,那么则将原字符串一次性返回// split方法有两个参数   1、分隔符字符串  2、指定返回给数组元素个数var str='dys gdgyq qxxhjh sjxgxh mhtzjl'console.log(str.split());console.log(str.split(' '));console.log(str.split(' ',1));// 截取字符串相关方法// 1、 slice 方法//  截取某个字符串中的一部分,并返回一个新的字符串,不会改变原字符串//  slice方法两个参数 1、开始下标 2、结束下标(默认就是截取到最后)//  注意:[beginIndex,endIndex)var str='hello world!'console.log(str.slice(0,3));console.log(str.slice(-2,11));//负数形式两数字间的范围,结束下标必须在开始下标之后console.log(str.slice(2));// 2、subString 方法// 返回一个字符串在开始索引到结束索引之间字符串// 注意:不支持负数形式!如果为负数,无法进行截取则返回完整的字符串// 左边右开的区间// 如果biginIndex<endIndex 两者进行交换var str='hello world!'console.log(str.substring(0,3));console.log(str.substring(3));console.log(str.substring(1,100));// 字符串字母大小写转换// 1、 toLowerCase  方法// 将大写字母转换成小写字母// 2、 toUpperCase  方法// 将小写字母转换成大写字母var str ='DYS SJXGXH qxxhjh mhtzjl 尚九熙 秦霄贤 0307'console.log(str.toLowerCase());console.log(str.toUpperCase());// 去除字符串的空白字符// 空白字符:空格  水平制表符tab  换行符  等// trim 去除字符串前后两端的空白符// trimStart 去除开头空白符// trimEnd  去除结尾空白符var str='       sjxgxh      'console.log(str.trim());console.log(str.trimStart());console.log(str.trimEnd());

6、Array实例对象的API

    // length属性// 返回或者设置数组的长度!let arr=['a','b','c','d']console.log(arr.length);arr.length=10console.log(arr.length);console.log(arr);// 注意:尽量不要手动的去设置数组的长度!容易造成稀疏数组的产生// 数组访问元素   数组[下标值]  下标值是从0开始计数,不能为负数// 注意:如果访问的下标值大于等于数组的长度则返回undefinedconsole.log(arr[2]);console.log(arr[6]);// 数组元素的修改  数组[下标值]=表达式arr[3]=12console.log(arr);console.log(arr[3]);// 1、at方法 通过指定的数值去返回对应元素,支持负数// 语法规则: at(index) index默认值0// 如果index是负值,那么则从当前元素的后面开始计算console.log(arr.at());//aconsole.log(arr.at(1));//bconsole.log(arr.at(-1));//12// 2、push方法// 对当前数组末尾添加一个或多个新元素,该方法改变原数组// 返回值:数组新的length值arr.push('dys','sjx')console.log(arr);// 3、pop方法// 删除当前数组中的最后的一个元素,并返回let arr = ['a', 'b', 'c', 'd']console.log(arr.pop(), arr);// 4、unshift方法// 对当前数组开始位置添加一个或多个新元素,该方法改变原数组arr.unshift('x', 'y')console.log(arr);// 5、shift方法// 删除当前数组中的第一个元素,并返回console.log(arr.shift(), arr);// 数组反序 reverse方法// 将数组逆转arr.reverse()console.log(arr);// sort方法 排序// 该方法是对数组中的元素进行排序,可接受参数,但参数必须是函数(比较函数)// 如果不传入比较函数,会按照字符编码进行排序// 比较函数:函数体内部主要是做比较运算// 比较函数有两个参数,a 第一个比较的函数  b  第二个比较的函数// 大于0  等于0  小于0let arr =[1,3,5,23,100,45]console.log(arr.sort());arr.sort((a,b)=>{return a-b})arr.sort((a,b)=>{return b-a})console.log(arr);// concat方法// 连接多个数组,返回一个新数组let arr1=[1,2]let arr2=[3]let arr3=[4]console.log(arr1.concat(arr2,arr3));// join方法// 将数组中的元素进行合并,通过指定的分隔符,合并后形成一个字符串并返回// 语法规则:join(str)// 默认情况 str为','let arr=[1,2,5,'a',100]console.log(arr.join());console.log(arr.join(' '));console.log(arr.join('-'));// splice方法// 通过该方法可以删除、修改、添加指定元素  任意位置// 语法规则: splice(index,hm,elmt1,elmt2)// 注意:省略hm数组将被清空// 返回值:被删除的元素数组// 删除let arr=['a','b','c','d']arr.splice(0,1)console.log(arr);// 修改arr.splice(0,1,'sjx')console.log(arr);// 添加arr.splice(2,0,'sjx')console.log(arr);

7、数组相关的遍历器

    // 遍历:将数组中的元素,每一个都访问一次!// 1、传统的数组遍历  for语句// 特点:性能稳定、可以提前结束遍历的过程!let arr = ['a','b','c','d']for(let i=0;i<arr.length;i++){console.log(arr[i])if(i == 2){break}}// 2、 forEach方法// 语法规则: arr.forEach(callback(elment,index,thisArg))// elment:代表当前数组中的元素// indx:代表当前数组中元素的下标// thisArg:接受回调this,  thisArg  ===》 arr// 回调函数,一般采用箭头函数的写法!但是呢也可以使用function函数// 注意:被传入的这个回调函数,每访问一次数组中的元素就被执行一次!// forEach方法的返回值undefined// forEach遍历数组整个过程不允许中断!let arr = ['a','b','c','d',1,2,3]arr.forEach((elment,index,thisArg)=>{// console.log(elment,index,thisArg)console.log(666)// console.log(thisArg === arr) })// 3、map方法 (不改变原数组)// 语法:arr.map(callback(elment,index,thisArg))// 该方法会遍历每一个数组元素// 每遍历一个元素都会调用一次回调函数,并且将该回调函数的返回值,存放到一个新数组中,最终作为map方法的返回值、、、、、、、。整体返回let arr = [1,2,3,4]arr = arr.map((el)=>{console.log(el)return el*2})console.log(arr)// 4、filter方法 (不改变原数组)// 语法:arr.filter(callback(elment,index,thisArg))// 每访问一次元素都会调用一次回调函数,如果该回调函数的返回值是true,那么将当前访问的元素保存到一个新数组,最终作为filter方法的返回值let arr = [1,2,3,4,5,10,300,40,50,70]let arr2 = arr.filter((el)=>{// console.log(el)return  el%2 == 1// if(el%2 == 0 ){//     return true// }})console.log(arr2)

8、Object对象的静态方法

        // keys// 返回指定对象上自身的可以枚举的属性,所组成的数组let obj={a:'100',b:'200',c:'300'}console.log(Object.keys(obj));// values// 返回指定对象上自身的可以枚举的属性值,所组成的数组let obj1={a:'100',b:'200',c:'300'}console.log(Object.values(obj1));// entries// 返回一个给定对象自身上可枚举属性的键值对数组let obj2={a:'100',b:'200',c:'300'}console.log(Object.entries(obj2));

9、Object实例对象的方法

        // 1、valueOf// 该方法会返回指定对象(任何类型的对象)的原始值let obj={a:100,b:200,c:300}console.log(obj.valueOf() === obj);console.log((100).valueOf());console.log((true).valueOf());console.log(([1,2,3]).valueOf());// 2、toString// 返回一个该对象的字符串形式console.log(obj.toString());console.log((100).toString());console.log((true).toString());console.log(([1,2,3]).toString());// 3、hasOwnProperty// 判断当前对象的某个属性是否为当前对象自身的属性,还是原型链上的属性console.log(obj.hasOwnProperty('a'));console.log(obj.hasOwnProperty('toString'));// in运算// 判断某个属性是否存在于该对象上,包括原型链上的属性console.log('a' in obj)console.log('xxxx' in obj)// 4、isPrototypeOf// 判断某个对象是否是另一个对象的原型对象console.log(Object.prototype.isPrototypeOf({}));console.log(Object.prototype.isPrototypeOf([]));// 5、propertyIsEnumerable// 判断对象自身上的属性是否是可枚举属性// 如果不是自身上的属性将直接返回false// 默认情况下原型对象上的属性都是不可枚举的,自定义的属性除外!默认情况下是可枚举的Object.prototype.d=300console.log(obj.propertyIsEnumerable('c'));console.log(obj.propertyIsEnumerable('d'));

七、总结

通过这一阶段的学习和对本阶段知识的整理,加深了对本阶段知识的一个记忆,但是感觉自己掌握的还不是特别的好,有一些知识点记得没有那么的深刻,在做练习题时,需要去看那些知识点,还没有很深刻的记忆,对于这些知识点还要去再好好地理解,变成自己明白的点,为以后的学习打下一个好的基础。

JavaScript编程技术基础相关推荐

  1. 高等学校计算机科学与技术教材:tcp/ip网络编程技术基础,TCP/IP网络编程技术基础...

    TCP/IP网络编程技术基础 语音 编辑 锁定 讨论 上传视频 <TCP/IP网络编程技术基础>是2012年北京交通大学出版社出版的图书,作者是王雷. 书    名 TCP/IP网络编程技 ...

  2. python渗透测试编程技术基础书评_【新手必看】渗透测试学习书籍推荐

    Web综合渗透方向 <Web安全攻防:渗透测试实战指南> 该书出版于2018-7,全书416页,涉及知识面虽广,但90%的知识点都不深入,在新手层面相对深入讲解了SQL注入的利用:知识排序 ...

  3. web编程技术基础---CSS

    转载链接: https://www.baidu.com/link?url=J4xBnCADPUYpDI132XvKo2F9k49iKoskRJARTEMwySMBC5PRGXM6kYVJ_RATuOu ...

  4. javascript面向对象技术基础(二)

    数组 我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的数据类型.数组本身仍旧是对象,但是由于数组的很多特性,通常 ...

  5. javascript面向对象技术基础(四)

    类.构造函数.原型 先来说明一点:在上面的内容中提到,每一个函数都包含了一个prototype属性,这个属性指向了一个prototype对象(Every function has a prototyp ...

  6. JavaScript编程技术实验报告3

    一.实验目的 熟悉JavaScript中数组的概念 掌握数组的创建,赋值,遍历等数组操作 掌握数组中常用的属性和方法 二.预习内容及要求(要求写出预习内容) 数组的创建: 使用Array对象创建数组, ...

  7. html语言技术基础,第2章Web编程基础HTML语言技术方案.ppt

    通过Internet浏览世界各地的网络资源,或者要把信息通过Internet以Web方式发布到全球,就必须使用网页.网页就是用户在浏览器上看到的一个个画面.通过网页,即便是一个不懂计算机的人,也能借助 ...

  8. 了解使用JavaScript进行面向对象编程的基础(并增强您的编码…

    by Kris Baillargeon 通过克里斯·拜伦 学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...

  9. 麒麟子Javascript游戏编程零基础教程大纲

    大家好,我是麒麟子, 开源项目<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 开源项目地址(Github与Gitee同步更新): Github ht ...

最新文章

  1. 原创 人物志|山东省临沭县 - 一位身残志坚的奋斗青年 - 吴忠军
  2. GPT-3 再更新,新增编辑和插入文本功能,简直不要太好用!
  3. python手机版安卓-用Python实现自动化操作Android手机
  4. python 欧氏距离_如何用NumPy计算欧氏距离?
  5. LINQ TO SQL中还是用传统的连接串方式建立DbContext更好些
  6. leetcode(动态规划专题)
  7. Linux磁盘分区详解(fdisk)
  8. 广实1592: 1.6-06:校门外的树
  9. 博主在哈佛评论网上的博客
  10. 对话框式activity
  11. matlab 计算指北角,最优化方法MATLAB4
  12. 精美高清壁纸:2014年1月桌面日历壁纸免费下载
  13. NEU 1683: H-Index
  14. adb工具包的安装和使用方法
  15. 嵌入式开发|STM32工程中添加Bootloader实现串口程序下载
  16. 在手机上共享屏幕,更专业的远程协助软件
  17. 原生开发跟混合开发?两者有什么区别?
  18. 慧之声科技- 致AI 2B先驱者
  19. “打开文件所在位置”提示“找不到应用程序”的解决方案
  20. 医疗图像处理与深度学习(二)

热门文章

  1. 1w存银行一年多少利息_银行存款100万,一年后可以拿到多少钱?
  2. 工信部计算机二级证书有什么用,公务员考试,这三个证书用处大,持证年薪10W+...
  3. 如何模拟微信内置浏览器阅读环境打开文章
  4. SCRIPT5: 拒绝访问
  5. java-编写简单的编辑器
  6. plotly使用指南
  7. 简述CISC、RISC、RISC-V、MIPS
  8. 列表的增删改查,嵌套等,及元组的查
  9. Indie Maker 一个人的创业
  10. 05,数据采集:怎样做好全量全要素连接和实时反馈