4-js基础(ECMAScript)

编程语言

• 类似人类的语言,用它来进行控制计算机,让计算机为我们做事.
• 编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同的汇编语言的格式和词汇不一样),必须遵守.
• 有很强的逻辑和行为能力
• 编程语言总体上分为机器语言,汇编语言和高级语言三大类
  • 汇编语言和机器语言实质相同,都是对硬件操作,指令采用了英文缩写的识别符,容易辨别和记忆
  • 高级语言主要是相对于低级语言而言,并不特指某一特种语言,包括了很多编程语言,常用的有c语言,c++,java,javascript等.
    • 高级语言需要一个翻译器转换为计算机识别的机器语言
  • 计算机语言:计算机最终执行的是机器语言,由0和1组成的二进制数,二进制是计算机语言的基础

javaScript

1. 运行在客户端的脚本语言(script是脚本的意思)
2. 脚本语言不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
3. 实现业务逻辑和页面控制

浏览器执行js

• 浏览器分为渲染引擎和js引擎
  • 渲染引擎:用来解析html和css,俗称内核.
  • js引擎:也称为js解释器,用来读取js代码,对其处理后运行.

js三部分组成

• ECMAScript(javeScript语法)
  • 由ECMA国际进行标准化的一门编程语言,被称为JavaScript和JScript,但实际上后两者是ECMAScript语言的实现和扩展
• DOM页面文档对象模型
  • 对页面的各种元素进行操作
• BOM浏览器对象模型
  • 对浏览器的窗口进行操作

js三种书写位置

• 行内式
  • 可以将单行或少量js写在标签中
  • 可读性差,引号多层嵌套时易错,容易混乱
• 内嵌式
  • 可以将多行js代码写到script标签中
  • 学习时常用的方法
• 外链式
  • 引用外部js文件的script标签中间不可以写代码
  • 适合js代码量比较大的情况

变量

• 保存数据的容器,可以通过变量名获取数据,数据可以修改.
• 变量是程序在内存中申请的一块用来存放数据的空间

变量的使用

1. 声明一个变量 var age;
   • var是一个js关键字,用来声明变量.使用该关键字声明变量后,计算机会自动为变量分配内存空间.
   • age是自己给这个变量取的名字.
2. 赋值 age = 10; 把自定义的一个值存入这个变量中
3. var age = 10; 变量+赋值一起写称为变量的初始化.
4. console.log(age) 在浏览器控制台打印输出这个变量的值

• 更新变量:变量被重新赋值后,她原有的值会被覆盖,以最后一次赋的值为准,类似css层叠性.
• 同时声明多个变量:只需要写一个var,多个变量名之间用英语逗号隔开.
  • var age = 18, myname= ‘卡卡西’ , address = ‘火影村’ ;

变量的命名

• 由字母,数字,下划线,美元符号组成.

• 严格区别大小写

• 不能以数字开头

• 不能以关键字和保留字命名

  • name在某些网站有特殊的含义,尽量不要用来命名.

• 变量名必须有意义(使用英文单词)

• 两个单词之间不能有空格,并遵守驼峰命名法

js输入输出语句

• prompt(info) 浏览器弹出的输入框,用户可以输入
• alert(msg) 浏览器弹出警示框 输出的
• console.log(msg) 浏览器内控制台打印输出显示的信息
• 要一次输出多个变量,可以用逗号隔开
  • console.warn(‘控制台显示警告提示’);
  • console.error(‘控制台显示可能出现错误的代码提示’) ;
• 检测字符串的长度
  • console.log(str.length) str为要检测长度的变量名
• 检测数据类型
  • typeof(num); num为要要检测数据类型的变量名
• confirm(‘提示内容’) 浏览器弹出确认取消框 返回一个布尔值

Js的数据类型

1. 数据类型: 根据数据不同的类型存放在不同的地方,可以更好的利用空间.
2. js的变量数据类型是只有程序在运行时,根据等号右边的值来确定的.
3. js是动态语言,变量的数据类型是可以变化的

基本包装类型

• 基本包装类型就是把简单数据类型自动包装成了复杂数据类型.
• 基本包装类型 String Number 和Boolean
  1. 生成临时变量,将简单类型包装成了复杂类型
  2. 赋值给我们声明的字符变量
  3. 销毁临时变量.

简单数据类型

1. 简单数据类型又称值类型
2. 在存储时变量中存储的是值本身,因此叫做值类型
3. 简单数据类型有:String,Number,Boolean,underfined,null
4. 简单数据类型在函数里传递参数的时候,传递的是值本身
   • typeof检测null 返回的是objeat 空的对象.
   • 如果某个变量打算存储为对象,暂时还不知道放啥的话,可以给null

• number 数字型 (包含整数和小数 默认值0)

  • 八进制 数字前面加0表示八进制 0~7
  • 十六进制 数字前面加0x 表示十六进制 0~9 a~f
  • Infinity 无穷大 -Infinity 无穷小 NaN 非数字
  • console.log(isNaN(12)); 可以检测一个值是不是数字类型

• String 字符串类型

  • 用单引号和双引号包裹起来的就是字符串型,js中推荐使用单引号 (html,css中推荐始终双引号)
    • 字符串嵌套 外单内双或者外双内单
  • 字符串转义符 (以\开头) 必须写在字符串里面
    • \n 换行 \r\n 兼容windows和linux
    • \\ 斜杠\
    • \b空格
    • \t tab 缩进
  • 字符串拼接
    • 字符串+任何类型的数据类型 都会变成字符串类型的

• Boolean 布尔值类型 默认false

  • true(真的/对) 参与加法运算 等价于1
  • fales(假的/错) 参与加法运算 等价于0

• undefined 未定义数据类型

  • 和数字相加 结果是NaN

• null 空值

  • 可以和数值相加

• isNaN(12) 判断非数字

  • 如果是数字返回fales 如果不是数字返回ture.

• 字符类型的转换

  • console.log(typeof str) 检测一个变量是什么数据类型 str为变量名 用空格隔开

• 转换为字符串类型

  • 转换为字符串类型

    • num.toString() num为要转换字符串的变量名
    • String(变量) 强制转换
    • 变量+’’ 加号拼接字符串(隐式转换)

  • 转换为数字类型

    • parseInt(变量) 取整(不适用四舍五入,会去掉单位,但是必须以数字开头)
    • parseFloat(变量) 保留小数(不适用四舍五入 会去掉单位,但是必须以数字开头)
    • Number(变量) 强制转换为数字型 有不能识别的内容 不能转化
    • ‘12’ - 0 隐式转换 利用算术运算隐式转换为数字型
      • 加法不能隐式转换,只有- * / 可以

  • 转换为布尔型

    • Boolean(变量)函数
      • 代表空和否定的值会被转换为false, 如" , 0 , NaN , null , undefined

  • 字面量

    ​ 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

    ​ 简单来说就一眼看过去就知道这个数据是什么类型的字面量

    • 数字字面量：8, 9, 10
    • 字符串字面量：‘黑马程序员’, “大前端”
    • 布尔字面量：true，false

复杂数据类型

1. 复杂数据类型又叫引用类型
2. 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用) 其数据是放在堆中的
3. 通过new关键字创建的对象(系统对象,自定义对象)如Object,Array,Date
4. 值相同的两个变量 对比 地址是不同的 只要一个变量的数据进行了修改 另一个也会跟着变化
5. 复杂数据类型在函数里传递参数的时候,传递的是地址

堆和栈

• 简单数据类型存放到栈里面, 栈里面开辟一个空间, 将值存在里面.
• 复杂数据类型存放到堆里面,首先在栈里面存放一个地址,然后这个地址指向堆里面存放的数据
  • 复杂数据类型 传递参数时,传递的是地址

运算符

• 算术运算符

​ (先乘除后加减,有小括号先算小括号里的)

• 加(+)

• 减(-)

• 乘(*) 次方(**)

  • 2**3=8 (2的三次方等于8)

• 除(/)

• 取余(%)

  • 左边的数除以右边的数 能整除为0 不能整除 会除以最大能除的数 剩下的数为取余结果
  • 5%3=2，5%2=1, 5%4=1
  • 0是false,所以能整除为0 反而是false;

• 浮点数(小数)进行算术计算时精确度远远不如整数,尽量避免用浮点数计算

  • 0.1 + 0.2 结果不是0.3 而是:0.300000000000004
  • 0.07 * 100 结果不是7 而是:7.00000000000001

• 同理,不能拿浮点数来进行比较 是否相等

• 表达式和返回值

• 表达式:由数字,运算符,变量等组成的式子 称为表达式

• 返回值:表达式计算后,返回的结果 称为返回值

• 递增递减运算符

• 必须和变量配合使用

• 前置运算符:++nub --nub 后置运算符: nub++ nub-- 让变量的值+1或者-1.

• 前置递增和后置递增单独使用时,运行效果相同.

• 前置:先自加,后运算

• 后置:先返回原值,后自加.

  • var num = 2; num++ +1=2 console.log(num) num =2

• var nub= 10; nub++; 运算之后,nub++=10; nub=11;

• 比较运算符 (比较的结果返回一个布尔值对或错)

• 小于号 <

• 大于号 >

• 大于等于号 >=

• 小于等于号 <=

• 判等号(会转型) ==

  • 只要值一样就会判对, 并且会转换为数字类型

• 不等号 !=

• 全等号或者全不等 === !==

  • 全等要求数值和数据类型完全一样才可以

• 逻辑运算符

• && 逻辑与 简称与 and

  • 逻辑与两边的比较 只要有一个是fales 结果就是fales

• || 逻辑或 简称或 or

  • 逻辑或两边的比较 只要有一个是true 结果就是true

• ! 逻辑非,简称非 not

  • !true 返回值为fales 也叫作取反符

• 逻辑与短路运算(逻辑中断)

  • 当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算
  • 语法: 表达式1 && 表达式2
  • 如果第一个表达式的值为true, 则返回表达式2
  • 如果第一个表达式的值为假,则返回表达式1 右边的不用运算了

• 逻辑或短路运算(逻辑中断)

  • 和逻辑与相反
  • 语法: 表达式1 || 表达式2
  • 如果第一个表达式的值为true, 则返回表达式1,中断后面的运算.

• 如果第一个表达式的值为假,则返回表达式2

• 赋值运算符

• = 直接赋值 var age =10; //10

• += -= 左边加减一个右边的值 var age= 10; age+=5; //15

• *= /= %= 乘 除 取模 右边的值 var age=10; age/=5; //2

• 运算符优先级

1. 小括号 ()
2. 一元运算符 ++ – !(逻辑非)
3. 算术运算符 先* / 后+ -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后|| 先与后或
7. 赋值运算符 =
8. 逗号运算符 ,

流程控制

流程控制就是来控制我们的代码按照什么结构顺序来执行

顺序流程控制

• 最基本的流程控制,没有特定的语法结构, 程序会按照代码的先后顺序依次执行,大多数代码都是这样执行的.

分支流程控制 if switch

if语句

• 根据不同的条件,执行不同的路径代码,会产生不同的结果.
• if(条件表达式) { 条件成立所执行的代码 ;}
  • if里面的条件表达式结果为true 则执行大括号里面的执行语句.
  • 如果表达式的结果为fales,则不执行大括号里面的语句.

2. if else 语句 else(否则)

• if(条件表达式) { 条件成立所执行的代码 ;} else{条件不成立所执行的语句}
• if和else 最终只会执行一个

3. if else if 语句 (多分支语句)

• if (条件表达式1) {语句1}

  else if (条件表达式2) {语句2}

  else if (条件表达式3) {语句3}

  else {最后的语句}

  • 从上往下执行,只要满足一个条件表达式就会执行里面的语句,否则执行最后的语句
  • 多选一,只会执行一个语句, else if 中间有空格.

三元表达式

• 类似简化版的ifelse语句
• 语法: 条件表达式 ? 表达式1 : 表达式2
• 语法: var nub1 = nub > 5 ? ‘是的’ : ‘不是的’
• 如果条件表达式是ture则返回表达式1,如果是false,则返回表达式2.

switch语句

• 和if else 类似,但是只有一个表达式,且表达式的值一般会是特定的值或一个固定的值.

  switch(表达式) {
      case value1:执行语句1;break;
  	case value2:执行语句2;break;     ....
  	default:最后执行的语句;
  }
  

• 表达式的值和哪个case 后面的值匹配 就会执行哪段代码,都不匹配则会执行最后一个.同样是只能执行一个.

• 表达式和值要全等 才能执行 值和数据类型一致!

• case(小例子) break(退出)

循环 for while do while

1. 重复执行某一段代码叫循环,被重复执行的语句叫循环体, 能否重复执行,取决于循环的终止条件,由以上两点组成的称之为循环语句.

for 循环 (重复执行某些代码, 通常跟计数有关系)

for(var i = 0;i < 3 ;i++) {
	console.log('hellow')
}
//会打印输出3次hellow

• 语法: for (初始化变量; 条件表达式; 操作表达式) {循环体}

• for (var nub = 1; nub<=100; nub++) { 执行的代码 }

  • 初始化变量就是声明一个普通变量,用来表示当前循环次数
  • 条件表达式 就是设置要循环的次数
  • 操作表达式就是递增或者递增 改变初始化变量的值,一旦不符合第二条的条件表达式的要求,将会终止循环.

• 可以利用nub += 1和字符串的方式让循环体拼接在一行.

while 循环

• 语法: while (条件表达式){ 循环体; 变量++}
• 如果条件表达式的值一直是ture，循环体中不进行终止条件的话,会一直循环
• 可以做一些更精细的判断再循环

do while 循环

• 语法 do { //循环体} while (条件表达式)

• 和while 基本一直,但是do while 无论 是否达成条件,都会先执行一次循环体.

• 关键字 continue

• continue; 退出本次循环(当前次的循环) 继续执行其他循环;

• 可以利用if (条件表达式) 删除一些不想要的循环;

九九乘法表

str = '';
for (i=1;i<10;i++) {
	for (var j = 1;j<=i;j++){
		str += j + 'x' + i + '=' + i * j+ '\t';
	}
	str+='\n';
}
console.log(str)

数组(arr)

1. 数组就是一串数据的集合,里面的数据称为数组元素
2. 数组元素之间用逗号隔开, 数组元素的数据类型没有限制.
3. 声明数组并赋值称为数组初始化.

• 语法1:var arr = new Array(); new关键字 创建一个空数组
• 语法2:var arr1 = [] ; 字面量创建一个空数组

1. 数组的索引(index)

• 表示某个数组元素在数组中的排列序号

  • 数组元素的排列序号 是从0 开的,提取第一个数组元素,索引号要写0
  • 索引号大于数组元素的个数会表示undefined

• 用来提取数组里的某一个元素

• 提取数组元素 语法:数组名[索引号];

2. 数组长度 arr.length

• 可以计算数组里的数组元素有几个(动态检测)
• 语法 (数组名.length)
• 数组元素为空的时候 : 数组名.length 的值为 0 ;

3. 遍历数组

• 利用for循环将数组里的元素 按顺序全部访问一次

• 因为数组元素第一个是从0开始的,所以 i要等于0 , 输出的时候输出第 i 个

  var arr = [1,2,3]
  for (var i = 0;i < arr.length; i++) {
  	console.log(arr[i])   //分别输出1  2  3
  }
  

4. 数组新元素

• 新增数组元素 修改length长度
  • 语法:数组名.length = 数组个数++; 可以扩充数组容量
  • 但是扩充的数组元素没有内容,会显示undefined
• 修改索引号 并赋值 追加数组元素
  • 语法:数组名[数组元素长度++] = 数组元素;
  • 追加的索引号是数组里面有的,会替换那个数组元素的值;
  • 不要直接给数组名赋值 否则之前的数据将全部被覆盖

数组的翻转

• arr.reverse() 数组翻转方法

//数组翻转原生写法
function overturn(arr){
    var temp = 0;
    var num = arr.length-1;
    for (var i = 0; i < arr.length / 2 ; i++) {
        temp = arr[i];
        arr[i]=arr[num];
        arr[num] =temp;
        num--;
    }
    console.log(arr)
}
overturn([1,2,3,4,5,6])

冒泡排序

• 为数字排大小 从大到小排列or从小到大排列
• 外层循环数组元素长度的次数
• 里层循环的次数比外层少一次 所以要减去 i
• 里层循环每次都是从0 开始的 对比第一个和第二个可以 用 j 和 j +1
• 运用一个空的变量 交换两个数组元素的值;

var arr = [1,8,3,5,2,9,6]
var temp = 0;
for (var i = 0;i<arr.length;i++){
	for(var j = 0;j<arr.length-i -1;j++) {
		if (arr[j]<arr[j+1]){
		temp = arr[j];
		arr[j] = arr[j+1];
		arr[j+1] = temp;
		}
	}
}
console.log(arr)

• 数组的最大值最小值
• Math.max(…数组名) 可以利用扩展运算符求出最大最小值

函数(function)

• 将重复的代码装在一个盒子中 谁需要使用就调用这个盒子 ，这个盒子就是函数
• 函数的声明有两种方式(命名函数和匿名函数)
• 函数可以调用另外一个函数(在一个函数体里面调用其他函数即可)

命名函数

1. 声明函数
   • 语法: function 函数名() {函数体}
   • 函数是做某件事情,函数名一般是动词
   • 函数不调用,自己不执行
2. 调用函数
   • 语法: 函数名();

匿名函数

• var 变量名 = function(){函数体};
• 声明的是变量名,不是函数名
• 这个变量里面存的是函数.

函数的参数

• 语法:function 函数名(形参1,形参2… ) {函数体}

• 函数名(实参1,实参2…)

  • 形参：函数声明后面的小括号里面的参数,称为形参,可以在函数体中使用,相当于变量。
  • 实参：调用的时候小括号要传递的值称为实参,相当于变量的值
  • 调用的时候 实参的值才会传给形参.
  • 参数的作用,函数的某些值不固定,在调用的时候再传递不同的值进去.
  • 多个参数之间用逗号隔开

• 函数的形参实参个数不匹配时

• 实参个数多于形参个数 : 值取到形参的个数,多的实参传递无效

• 实参个数少于形参个数 : 多余的形参取不到值会定义为undefined 和数字运算会变为NaN

函数的返回值(return)

• function 函数名(形参1,形参2… ) { return 返回的值 ; }

• 函数只是实现某种功能,最终的结果需要返回给函数的调用者(实参)才合理, 通过return实现的

• 只要函数遇到return 就把后面的结果返回给实参.

• 通常用一个变量来接收 函数的返回结果(实参) 使用更简单.

• var 变量名 = 函数名(返回结果);

• return终止函数只能返回一个值!

  • return 只能返回一个值, 如果用,号表示了多个值,只会返回最后一个值. 可以用数组保存多个值 返回这个数组即可
  • 函数返回值 return 后面的代码不会执行了

• 如果函数没有return ， 返回的是undefined。

break,continue,return的区别

• break 退出当前的循环体
• continue 跳出此次循环,继续执行剩下的循环
• return 不仅可以退出循环,还可以返回值,同时会结束当前函数,后面的代码不执行;

arguments伪数组 (存储了传递的实参)

• 当不确定会接收几个实参的时候 形参内的小括号可以空着，在函数中可以通过argumengts获得传递过来的实参.
• argumengts是一个伪数组，可以通过**argumengts[index]**获得对应的实参
• 伪数组无法使用数组的push，pop等方法
• 只有函数才有arguments。

作用域(es6)

• js作用域: 将变量的命名 限定在某个范围 内其效果, 减少命名冲突,提高可靠性.

1. 全局作用域:整个script标签里面 或者是一个单独的js文件.
2. 局部作用域:只在这个函数内部起效果 也叫函数作用域.
3. 系统默认script内部至函数外部 与 函数内部是两个不同的作用域,起同样的名字不会冲突.
4. es6之前没有块级作用域.

• 变量的作用域

根据作用域的不同,分为全局变量和局部变量

1. 全局变量:在全局作用域下声明 的变量 在全局都可以使用 (函数外部声明的变量)
   • 函数内部外部都可以使用
   • 如果在函数内部 没有声明就直接赋值的变量也属于全局变量;
2. 局部变量:在局部作用域下的变量, 在函数内部声明的变量就是局部变量
   • 局部变量只能在函数内部使用
   • 函数的形参也是局部变量

• 全局变量:只有浏览器关闭的时候才会销毁,比较占内存

• 局部变量:当程序执行完毕就会销毁,比较节约内存资源

• 作用域链

  • 在函数进行嵌套时,内层函数使用某个变量,若是同级作用域没有就找上级,取就近原则.

预解析

1. js代码执行之前会先进行预解析
2. js引擎会把js里面所用的var 还有function 提升到当前作用域的最前面先执行(只是声明)
3. 然后再执行代码 书写的顺序 从上往下执行.
4. 预解析分为变量预解析和函数预解析

• 变量预解析(变量提升) 就是把变量的声明提升到当前作用域的最前面先执行

  console.log(num);
  var num = 10;
  相当于:
  var num;
  console.log(num);
  num=10;
  //还没赋值就打印了 所以num结果为undefined
  

• 函数预解析(函数提升) 就是把函数的声明提升到当前作用域的最前面先执行(不调用)

  fun();
  var fun = function() {
  		console.log(22);
  }
  相当于:
  var fun;
  fun();   //fun()上面没有 变量fun
  fun = function() {
  		console.log(22);
  }
  //所以会报错
  //函数表达式的调用一定要放在函数表达式的下面
  

对象(object)

1. 对象是一个具体的实物 (女朋友不是具体的某一个人false,张三是具体的某个人ture)
2. 对象是由**属性(特征,常用名词)和方法(行为,常用动词)**组成的
3. 表达更清晰 , 用来保存一套完整的信息
4. 对象属于复杂数据类型

字面量创建对象 {}

• 语法 var 对象名 = {}; 创建一个空的对象.

• var 对象名 = {属性1:值, 属性2:值, 属性3:值, 属性4:值, 方法名: function () {函数体} }

  • 里面的属性采取键值对的形式保存信息
  • 多个属性或者方法中间用逗号隔开
  • 方法名冒号跟的是一个匿名函数

• 调用对象的属性

  • 方式1: 对象名 . 属性名 如：obj.name
  • 方式2: 对象名[‘属性名’] 如：obj[i]
    • 一般用于属性名是一个变量的时候 比如遍历对象 for in

• 调用对象的方法 : 对象名.方法名() 如：obj.fn()

变量和属性的不同,函数和方法的不同

1. 变量 : 单独声明赋值,单独存在
2. 属性 : 对象里面的变量称为属性,不需要声明, 调用要加对象名
3. 函数 : 单独声明s存在,通过 函数名() 的方式就可以调用
4. 方法 : 对象里面的函数称为方法,不需要声明,调用要加对象名

new Object 创建对象

• 语法 : var obj = new Object(); 创建了一个空的对象.

• 对象名.属性1= 值 ; 对象名.属性2= 值 ;

• 对象名.方法名 = function () {函数体} ;

  • 使用属性并赋值可以给空对象添加属性
  • 使用方法名并声明可以给空对象添加方法
  • 调用的方法是一样的

构造函数创建对象

1. 构造函数和普通函数不同,里面封装的是对象
2. 利用函数,重复不同对象里面相同的属性或行为, 这个函数称为构造函数.
3. 构造函数名字首字母要大写
4. 调用构造函数前面要加一个new
5. 构造函数不需要return 就可以返回结果
6. 调用函数返回的数据类型是对象
7. 只要调用了new 对象名() 就创建了一个对象
8. 构造函数:泛指某一大类 对象: 某一大类里面的某一个东西

function Star(uname,age,sex) {
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sing = function(sang) {
		console.log(sang);
	}
}
var ldh = new Star('刘德华',18,'男');  //声明一个变量保存了返回的对象类型相当于 声明了一个对象名 
console.log(ldh.name) 
console.log(ldh['sex'])
ldh.sing('冰雨') //调用对象里的sing函数 将实参传给形参sang 函数执行形参的内容
var zxy = new Star('张学友',20,'男');

new关键字

1. new构造函数可以创造一个空的对象
2. this会指向刚才创才的空对象
3. 执行构造函数里的代码,给空对象添加属性和方法
4. 返回值给这个new实例

• 遍历对象(for…in)

• 语法: for (var 变量 in 对象) { }

• 我们习惯用k或者key表示这个变量名

• 循环次数为属性和方法数量的和

for(var k in Obj) {
	console.log(k);   //变量 输出 得到的是属性名
	console.log(Obj[k]); //对象[变量]输出 得到的是属性值
}

内置对象

• 内置对象就是语言自带的一些对象, 自带了一些常用或者必要的功能(属性和方法)
• 可以帮助我们快速开发
• 可以直接使用

MDN/W3C 查文档

• MDN提供了最常用的一些H5,CSS3一些技术
• 并且拥有很多全面的代码信息
• 网址:https://developer.mozilla.org/zh-CN/

Math对象(数字对象)

• 如果没有参数 结果为 -Infinity 如果有一个参数不是数值,返回NaN

1. Math.max(1,20,5) 最大值

   • 取一组数字中的最大值 数字之间用逗号隔开

2. Math.min() 最小值

   • 取一组数字中的最小值 数字之间用逗号隔开

3. Math.abs() 绝对值

   • 可以将负值的 或者 字符串 的数字 转换成 正值的数字 (自带隐式转换)

4. Math.floor() 向下取整

   • 相当于parseInt() 去除小数

5. Math.ceil() 向上取整

   • 相当于(parseInt() ) +1 去除小数 +1

6. Math.round() 四舍五入

   • Math.round(-1.5) 返回值 - 1
   • 其他数字都是四舍五入 但是.5特殊 往大取值

7. Math.random() 随机数

   • 返回一个浮点数 (随机在0~1之间) 大于等于0 但是小于1
   • 里面不跟参数

   function getRandom(min,max) {
   	return Math.floor(Math.random() * (max - min + 1)) +min;
   }
   getRandom(1,10)
   var random = getRandom(1,10);
   //随机max到min 之间的一个整数 并且包含这两个整数
   

Date()日期

• 是一个构造函数 必须使用new 来调用日期对象
• 要想使用date的方法 必须先创建new一个日期对象
• 语法 : var date = new Date()
  • 如果Date()没有参数 返回当前系统的当前时间
  • 数字型参数:new Date(2019,10,01) 返回的月份会比填写的大一月
  • 字符串型(常用)参数:new Date(‘2019-10-1 8:8:8’); 返回的和填写的一样

格式化日期 年月日

• date.getFullYear() 返回当前日期的年

• date.getMonth()+1 返回(0-11) 返回的月份小1个月 记得+1

• date.getDate() 返回的是几号

• date.getDay() 返回(0-6) 返回的是星期几 0是周日

  • var arr = [‘星期日’,‘星期一’,‘星期二’,‘星期三’,‘星期四’,‘星期五’,‘星期六’]
  • 可以利用数组 arr[返回值] 的方式表示星期几

• date.getHours() 返回时

• date.getMinutes() 返回分

• date.getSeconds() 返回秒

  • 利用三元运算符简单地在 时分秒小于10的时候在前面加个0
  • h = h < 10 ? ‘0’ + h : h ;

• 获取Date总的毫秒数(时间戳)

  • 计算机起始时间从1970年1月1日开始
  • 所以是距离1970年1月1号过了多少毫秒
  • 1秒=1000毫秒
  1. 方式1：console.log(date.getTime()) or date.valueOf()
  2. 方式2：var date1 = +new Date() 简单写法 new前面写个加号
     • +new Date() 参数自己输入的话,可以获得起始时间至 输入日期时的总毫秒数
  3. Date.now() H5新增的

倒计时

• 因为直接用时分秒相减有成负数,所以不能用时分秒直接相减
• 输入未来的时间的毫秒数减去现在时间的毫秒数 就可以做到了
• 将剩余的时间总的毫秒数转换成天,时,分,秒(时间戳转换为时分秒)

        //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
        //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
        //  m = parseInt(总秒数 /60 %60 );     //   计算分数
        //  s = parseInt(总秒数%60);            //   计算当前秒数
        function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2019-5-1 18:00:00'));
        var date = new Date();
        console.log(date);

数组对象Array

• 语法var arr = new Array() 创建一个而空的数组

1. new Array(2) 参数为数字型

   • 表示数组长度 里面有两个空的数组元素

2. new Array(2 , 3) 参数用逗号隔开了

   • 相当于[2,3] 表示里面有两个数组元素 第一个2 第二个3

3. 检测是否为数组

   • instanseof 运算符检测 语法: (arr instanceof Array) 返回值 true和false
   • 语法2 : (Array.isArray(arr)) 返回值 true和false h5新增的方法

数组的一些方法 push pop splice join等

1. 添加数组元素 push unshift

• 数组名.push() 在数组的末尾 添加一个或 多个数组元素
• 数组名.unshift 在数组的开头 添加一个或 多个数组元素
  • 参数直接写数组元素即可,多个参数之间用逗号隔开
  • push和unshift完毕后,返回的值 是新数组的长度
  • 原数组也会发生变化

2. 删除数组元素 pop shift

• 数组名.pop() 删除数组的最后一个元素
• 数组名.shift() 删除数组的第一个元素
  • 没有参数 , 执行 一次只能删除一个
  • 返回的值是删除的那个数组元素
  • 原数组也会发生变化

3. 组合数组 arr.concat()

• var newArr = arr1.concat(arr2,arr3)
  • 连接两个或者多个数组用逗号隔开 返回一个新的数组

4. 截取数组 arr.slice()

• 数组截取 slice(截取开始的索引,截取结束的索引 )
  • 返回被截取项目的新数组(截取结束的索引不包裹在内)
  • 不影响原数组
  • 第二个值不填 默认截取到最后

5. 数组截取 arr.splice() 影响原数组

• arr.splice(截取开始的索引 , 截取的个数, 用什么替换删除的内容)
  • 返回截取的数组 替换的值不再截取的新数组中

6. 翻转数组 arr.reverse();

7. 冒泡排序 arr.sort()

• 只能排序个位数的 两位数以上会按数字的第一位数排序,解决方案:

  • 数组名.sort(function(a,b){return a - b}? 升序排列(从小到大)

  • 数组名.sort(function(a,b){return b - a}? 降序排列(从大到小)

8. 获取查找元素在数组元素索引

• arr.indexOf() 参数输入要查找的元素
  • 如果有会返回索引号 有多个只返回第一个索引号就结束
  • 如果没有要输入的元素 则返回-1
• 数组名.lastIndexOf() last最后 从后往前查找
  • 和indexOf相同 差别是有多个会先返回最后一个的索引号

9. 数组转换为字符串 arr.toString()

10. 数组名.join(分隔符) 返回一个字符串

    • 数组转换为字符串 参数可以填分隔符 分隔符默认逗号

    var arr = [1,2,3]
    var str = arr.join('&')
    console.log(str)     // 1&2&3
    

原生js数组去重

1. 创建一个新的数组
2. 用indexOf() 的返回值是不是-1 搜索 新数组中是否有旧数组的值,如果没有就添加进新数组,如果有返回的值不是-1就不添加
3. 配合for循环 可以遍历旧数组的每一个值 达到一一搜索的效果,从而实现数组去重

var arr = [1,5,1,6,5,3]
var newArr=[];
for (var i = 0;i<arr.length;i++) {
    //如果新数组没有旧数组当前循环的元素返回值就是-1   将这个数组元素添加到新数组中
	newArr.indexOf(arr[i]) == -1 && newArr.push(arr[i]);
}
console.log(newArr)

字符串对象

2. 因为字符串的不可变 所以不要大量的拼接和重新赋值字符串,字符串的值虽然改变了,但只是地址改变了,原先的值还占着内存空间

3. 字符串方法

   • 字符串名.indexOf ( 要搜索的字符串元素 , 搜索起始位置) ;
   • 字符串名.lastIndexOf ( 要搜索的字符串元素 , 搜索起始位置) ;
     • 如果有会返回索引号 有多个只返回第一个索引号就结束
     • 起始位置不填 默认从头开始搜索 last相反 从尾部开始搜索
     • 路径也可以搜索索引

4. 求某个字符出现的次数和位置

   	var str ='ofafobeodsaodsi';
   	var index = str.indexOf('o');
       var num = 0;
       while (index != -1 ) {
           console.log(index);
           index = str.indexOf('o', index + 1);
           num++
       }
       console.log(num);
   

   1. 声明一个变量保存要搜索的字符第一次出现的位置
   2. 条件表达式 if index不等于 -1;利用循环继续搜索indexOf(‘o’, index + 1); 此次搜索出的位置 +1 即可继续搜索后面是否还有要搜索的字符
   3. 声明一个变量等于0, 每次index 不等于 - 1的时候(说明有) 这个变量++ 就计算了这个字符出现的次数

5. 根据位置返回字符

   • 语法: 字符名.charAt(索引) 返回索引号所对应的字符
     • 参数写数字会返回一个字符长度位置的字符
     • 可以利用for循环遍历所有的字符
   • 语法:字符名.charCodeAt() 返回ASCII值
     • 参数填数字 返回索引号字符相应的ASCII值
     • 键盘上每个可以输入的数字,单词,字符的ASCII都不同 , 可以用来判断用户按下了哪个键
   • 语法:字符名[]
     • 填写数字 获取指定位置的字符 h5新增
     • 和数组[]一样

6. 统计出现次数最多的字符

   var str = 'sdadasdtfdgdadvadwq';
   var o = {};      //先创建一个空对象
   for (i=0;i<=str.length;i++) {  //利用for循环遍历字符串
   	var j = str.charAt(i); //声明一个变量j等于此次循环遍历的str字符
       if(o[j]) {				//用if判断空对象o[j] 有没有这个属性,没有
          o[j]++;				//的话, o[j]=1 相当于创建了一个属性j=1;
       } else {				//如果有的话这个属性的值++;
          o[j] = 1;
        }
       }
   console.log(o);			//这样就可以得到每个字符串出现的次数
   var max = 0;			//声明一个最大值 max = 0
   var str1= '' ;				
   for(k in o) {			//遍历对象
     if (o[k] > max) {		//当遍历的这个属性的值 >=max的时候
         max = o[k];		//就用max 保存这个值
         str1 = k;			//因为k不能再外面使用,需要用一个空字符保存
     }
   }
   console.log(str1);		//输出出现次数最多的次数的字符
   console.log(max);		//输出出现次数最多的次数
   

   • 先创建一个空对象
   • 利用for循环和charat 遍历整个字符串
   • 用一个变量保存每次遍历的字符串
   • 用if搜索对象的属性有没有这次遍历的字符串元素,如果有 就为这个对象的属性+1;就声明一个属性赋值等于1; (得出每个不同字符出现的次数)
   • 声明一个变量等于0, 用for…in遍历这个对象的值 对比声明的变量,大于的时候用变量保存这个对象的值 (得出出现次数最的次数)
   • 因为k不能再for外面使用 所以要声明一个空字符串保存这个k;

7. 字符串的操作方式

   • 字符串.concat() 用于拼接多个字符串,等效于+, 但是+更常用
   • 字符串.substr(截取的起始位置(索引号) , 截取几个字符)
     • 后面的值不填,截取后面所有的
   • 字符串.replace(要替换的字符 , 替换后的字符)
     • 有多个一样的要替换的字符时,只会替换第一个
     • 可以利用for循环加indexOf 替换全部要替换的字符
   • 字符串.split( ’ 分隔符 ’ ) 字符串转换为数组
     • 字符串里面要有分隔符转换为数组时才能划分多个数组元素
     • 否则只会有一个数组元素
     • 分割符参数写字符串里面用于分割的分割符, 转换的数组分隔符是逗号
   • 转换大小写
     • 字符串.toUpperCase() 转换大写
     • 字符串.toLowerCase() 转换小写

统计 数组或字符串内 不同元素的出现次数

var arr =["c", "a", "z", "a", "x", "a"];
        var obj = {};                                
        for (var i = 0; i < arr.length;i++) {
            var index = arr[i];
            // if (obj[index]) {          //判断函数是否有这个属性
            //     obj[index]++;          //如果有的话 值+1;
            // } else {
            //     obj[index] = 1;        //如果函数里面没有这个属性 则创建一个并赋值为1
            // }
            obj[index] ? obj[index]++ : obj[index] = 1;
        }
        console.log(obj);

对象和函数应用时机

• 函数是返回的一个值
• 输出对象的时候 可以返回 属性和值 显示出来 是键值对的