About JS Basic knowledge

JS基础

JS初识

JavaScript 定义

JS 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：由Js引擎（JS解释器） 逐行进行解释并执行 若某行报错，则停在该行

Js的作用

1.表单动态校验（JS产生的最初目的）
2.网页特效
3.服务端开发
4.App
5.etc

HTML CSS JS 关系

1.HTML / CSS ：标记语言-----描述类语言

HTML 决定网页结构和内容
CSS 决定网页呈现给用户的模样

2.JS ：脚本语言-----编程类语言

实现业务逻辑和页面控制（决定功能）

浏览器如何执行JS

JS的组成

（1）ECMAScript

JS 基础语法 由 ECMAScript规定
（2）DOM 文档对象模型
以document里的各个元素为对象
文档对象模型（Document Object Model ） 是W3C组织推荐的处理可拓展标记语言的标准接口
通过DOM提供的接口 可以对页面上的各种元素进行操作

（3）BOM 浏览器对象模型
以window（浏览器）为对象
BOM（Browser Object Model） 是指浏览器对象模型，它提供了独立于内容的，可以与浏览器进行互动的对象结构 。通过BOM可以操作浏览器窗口

1.JS书写位置

（1）行内式
可将JS写到元素内部
e.g.

<input	type ="button" value="click" οnclick="alert('Hello')/>

(2)内嵌式
在html标签页书写

<script>
alert("what's wrong?");
</script>

(3)外部JS
先在外面创建一个页面
XXX.js
然后在HTML页面中 引入该页面

<script src ="xxx.js">
</script>

2.输入输出

（1）输入框

prompt('please input here');
// 弹出框 弹出“please input here”

（2）输出（通过弹出框 展示给用户）

alert('the result is right');

(3)控制台输出（在console框中 展示给程序员）

console.log('u r a grammer');

3.变量

（1）变量的定义
变量：一个装东西的盒子
变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
（2）变量的使用
先声明 再赋值

var uname ='levi'; //为uname 这个变量进行了初始化 即声明+赋值

var 为 关键字 用于声明js中的任意变量
uname 为变量名

//输出用户输入的值
var value = prompt('please input');
alert(value);

（3）变量语法拓展
变量值 可由顺序赋值而被覆盖
可以同时生变多个变量，但需要用英文逗号隔开
声明变量特殊情况

ps：不声明 直接赋值 该变量直接转换为全局变量
（4）变量命名规范

conclusion: 只能由 英文字母 数字 下划线 美元符号组成&& 不能是数字开头&&不能是关键字且要有意义&&多单词采用驼峰命名

4.数据类型

变量的数据类型 根据右边的 值来决定
（1） 数据类型分类

1.数字型 Number

(1)数字型进制

八进制 前面添加 0
16进制前面添加0x
输出都是对应的 十进制
（2）数字型范围

（3）数字型的三个特殊值

（4）isNaN（）

用于判断一个变量是否为非数字的类型 返回true/false

2.字符串型String

（1）字符串 用单引号/双引号 嵌套

（2）字符串转义符

（3）字符串长度
利用字符串的length属性 求整个字符串长度

（4）字符串拼接

只要是 字符串和 任意一种类型进行‘+’运算 ，则这里的 ‘+’起的是 拼接作用

（若某字符串-其他类型 输出NaN）

3.布尔型Boolean

console.log(true+1); //2
console.log(false+1);//1

4.undefined&null

在声明一个变量之后未对其赋值 ，输出该变量得到undefined
给一个变量赋值为null 该变量返回为一个 空对象

5.检测数据类型

用typeof + 变量 来检测
e.g.

注释表示结果

5.数据类型转换

将一种数据类型的变量转换为另一种数据类型
以下三种： 转换为 字符串类型 数字型 布尔型
（1）转换为字符串类型

var num1 = 123;
var num2 = 0.01;
console.log(num1.toString());
console.log(String(num2));
console.log("+num2);

(2)转换为 数字型
以下介绍的 都是 将 字符串类型的 转化为数字型

建议 用最后两个 最简单 直接转换为对应数值型无论是 浮点型还是整数型
Number() / 隐式转换

var str1 ='12';
var  str2 = '12.34';
var num1 =parseInt(str1);
var num2 =parseFloat(str2);
var num11 = str1-0;
var num22 =Number(str2); //

(3)转换为布尔型

6.运算符

（1） 算数运算符
算数运算使用的符号，用于执行两个变量或值的算数运算

浮点精度问题：

因此 不要直接判断两个浮点数是否相等
（2）比较运算符

小结：
（3）逻辑运算符

（4）逻辑中断
即：短路运算
短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
逻辑与：

逻辑或：

我发现： 其实返回的值 就是决定这个式子答案的值
（5）赋值运算符

（6）运算符优先级

7.流程控制分支结构

（1）顺序

（2）if分支
和c一样 不做讲解
（3）三元表达式（ 三元表达式 是一个表达式，有返回值的）
条件表达式？ 表达式1:表达式2；
如果条件表达式为真 则返回 表达式1的值
e.g.

var result = 3>5?  'Yes':'No'

(4)switch 语句
实现多选一
记住这里的 default 一定要写 不然答案不对

Ps：
1.switch（）里的表达式 我们经常写成变量
2.Switch（）里的值和case里的值 匹配时 ，必须是全等（值和数据类型都一致）
3. 若第一个case中没有break，则不退出，直接继续执行下一个case

（5）循环
和c一样
不做讲解

8.数组

（1）创建数组
两种方式：

1.通过数组字面量

var arr = [];
arr = [1,2,'Yes','levi'];

2.通过 new Array() 创建数组

var arr1 = new Array(); //声明了数组
var arr2 = new Array(2);// 声明了 长度为2的数组
var arr3 = new Array (1,2,3,'pink');//对arr3 进行了初始化

(2) 访问数组元素

（3）遍历数组
使用循环

var arr = new Array (1,2,3,4,5)
for(var i = 0;i<arr.length;i++)
{
console.log(arr[i]);
}

(4)数组中新增元素
1.可以后期修改数组长度

var arr =new Array(1,2,3);
arr.length = 7;
//未声明的数组元素 输出为 undefined

2.可以通过修改数组索引来添加数组元素

9. 函数

函数就是封装里一段可以被重复执行调用的代码块
（1）函数的使用
分为 ：声明函数 和 调用函数

Function 函数名（）{
// 函数体
}
（2）调用函数

（3）带参的函数

参数的作用：在函数内部，某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

（4）函数形参和实参个数不匹配问题

（5）函数的返回值
格式：

Return 具有终止函数的功能
并且return只能返回一个值（最后一个值，如下图的num2）

若函数中无返回值，输出该函数得到的是undefined

（5）arguments的使用

function fn () {
console.log(arguments);//arguments 里面存储了所有传递过来的实参
}
fn(1,2,3);

arguments是一个伪数组

（6）函数的两种声明方式
1.利用函数关键字自定义函数（命名函数）

function fun () {
alert('HI');
}
fun();

2.函数表达式 （匿名函数）

var btn=document.querySelector('#btn');
var fun = function () {
btn.click = function () {
alert('time out');
var fn = function (num1,num2) {
sum = 0;
sum =num1+num2;
return sum;
}

Ps：（1）fun是变量名，不是函数名
（2）声明函数表达方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里存的是函数
（3）函数表达式也可以传递参数

10.作用域

Js 作用域：代码名字（变量）在某个作用范围内起作用和效果
1.作用域分类
（1）全局作用域
整个script标签 或 单独js文件内
Ps： 若在函数内部，没有声明，直接赋值的变量也属于全局变量
（2）局部作用域（函数作用域）
这个代码的名字只在函数内部起效果/作用
函数的形参也看作是局部变量
（3）全局变量和局部变量的区别

2.作用域链： 内部函数访问外部函数的变量，采取的是链式查找方式来决定取哪个值，这种结构我们称为作用域链------就近原则

11.Js预解析

1.js引擎运行js 分为两步：预解析 代码执行
（1）预解析：js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面

（2）代码执行 ：按照代码书写的顺序，从上往下执行

2.预解 析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
（1）变量提升：就是把所有的变量声明提升到当前的作用域前面 只提升声明，不提升赋值操作

（2）函数提升：把所有的函数声明，提前到当前作用域的最前面（不调用函数）

12.对象

（1）对象定义

（2）创建对象

有以下三种方式 创建对象
： 利用字面量创建
利用 new Object（）
利用 构造函数

1.利用字面量创建对象

var obj = {
uname: 'Levi',
age:18,
sing:function() {
alert('Havana');
}

2.利用new Object() 创建对象

var ldh = new Object();
ldh.name = 'liudehua';
ldh.age = 50;
ldh.sing = function() {
console.log('sing a song');
}

3.构造函数

function Star(name,age) {
this.name = name;
this.age = age;
this.sing = function () {

}
new ldh = new Star ('ldh',19);
for(var k in ldh)
{
console(k); //k得到的是 属性名
console(ldh[k]); //ldh[k]为属性值
}

（1）构造函数 首字母要大写
（2）构造函数不需要return，就可以返回结果 返回的是一个对象
（3）调用构造函数 必须使用new
（4）只要new Star（） 调用函数就创建一个对象
我们的属性和方法前面必须添加this

13.内置对象

（1）Math对象
Math数学对象 不是一个构造函数 无需new 直接使用里面的属性和方法

注意：

console.log(Math.round(-1.1)); // -1 Math.round() 四舍五入
console.log(Math(-1.5)); //-1 注意 对于.5都是往大的取
console.log(Math.abs('-1'));//1 abs是取绝对值 这里还存在隐式转换 将字符串型 转换为数值型
console.log('Math.asb('pink'));// 输出NaN

（2）random（） 随机数

console.log(Math.random());//然后就会输出一个随机数 （该数>=0 &&<1)

（3）日期对象使用
Date() 日期对象 是一个构造函数 必须使用new来调用日期对象

var time = new Date();
console.log(time);//会得到当前准确时间

var date = new Date();
console,log(date.getfullyear());
console.log(date.getMonth() + 1);//date.getMounth() 得到的是0-11月

若要得到 总时间毫秒数 从1970年 1月1日 到现在

console.log(date.valueOf());
console.log(date.getTime());
var timer = +new Date();//+new Date() 就是总的ms数
var timerr = Date.now();

（4）数组对象
1.创建数组的两种方式：

//前面有讲过，再说一次吧
//利用字面量
var arr1 = [];
arr1 = [1,2,3];
//利用new Array();
var arr2 = new Array(1,2,3);

2.检测是否为数组的两种方式：

var arr = [];
console.log(arr instanceOf Array);
console.log(Array.isArray(arr));

（输出true 则为数组/false则不是）

//emmm 这个arr instanceOf Array 好像行不通 等把所有博客补完 我再来纠正吧

3.添加数组元素
在数组末尾和前面添加元素有以下两种方法

var arr = new Array(1,2,3);
arr.push('lexi','levi'); //输出这个返回的是新数组的长度 这是在数组末尾添加
arr.unshift('Mark','richard'); //输出这个返回的是新数组的长度。这是在数组前面添加

4.删除数组元素
删除数组最后一个元素 和 第一个元素有以下方法

var arr =[1,2,3];
arr.pop();//返回的是 删除的那个元素
arr.shift();//返回的是 删除的那个元素

这里的push（） 在数组末尾增加元素，括号里就是要增加的元素 ，因此括号里有参数 返回新数组长度
unshift（）在数组前面增加元素，括号里就是要增加的元素 ，因此括号里有参数 返回新数组长度
pop() 只是删除 最后一个元素 括号里无参数 返回被删去的元素
shift（）只是删除数组第一个元素 括号里无参数 返回被删去的元素

6.数组排序
（1）reverse（）

arr..reverse(); //将数组翻转
console.log(arr);

直接调用函数reverse() 进行反转数组
（2）sort（）
仅限于个位数 排序

arr.sort();

(3)对于不仅限对于个位数的排序

将a-b改为b-a则为 降序

7.数组索引方法

var arr =['pink','blue','yellow'];
console.log(arr.indexOf('blue'));//存在则返回索引号若不存在则返回-1；

8.将数组转换为字符串

join() 分割数组
若要用（）中的符号分隔开数组 该符号需加’ ’

（5）字符串对象
（1）基本包装类型：就是把 简单数据类型 包装为 复杂数据类型

（2）字符串的不可变
指的是 里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
（3）查找字符位置

e.g.

通过字符求索引号

（4）根据位置返回字符

str.charAt()通过索引号求字符
str.charCodeAt()通过索引号求相应字符对应的Ascii码值

（5）字符串操作方法
1.拼接以及截取字符串

var str ='levi is such a great person';
str.concat('red');//=str+'red'
str.substr(5,3);//5表示 开始截取字符索引号 ，3表示截取长度
str.slice(1,3);//1表示开始截取位置（可以截取到），3表示结束截取位置（截取不到end）

2.替换字符串以及转换为数组

var str = 'leviii';
str,replace('i','m');//输出则为levmii 因为只会替换第一个i

14.13.简单数据类型与复杂数据类型

（1）数据类型内存分配

（2）堆和盏

BOM和DOM近期会补完的。。。都写在word文档里的 没有整理好