JS基础知识

JS基础知识

一．基础定义

1. 变量声明 var
2. 输出结果 console.log();
3. 输入信息弹框prompt()
4. 弹出输出框alert()

 

1. 由字母，下划线，数字，美元符号组成；

   严格区分大小写

   不能以数字开头

不能是关键字，保留字

变量名必须有意义

首字母小写

推荐翻译网站：有道，爱词霸

尽量不用name

1. 数据类型

   简单数据类型：Number,String,Boolean,Undefined,Null;

   复杂数据类型： object;

  在JS中八进制前面加0，十六进制前面加0x

  Alert(Number.MAX_VALUE); 最大值

Alert(Number.MIN_VALUE)最小值

Alert(Infinity)无穷大

Alert(-Infinity)无穷小

Alert(NaN);  非数字

 

1. IsNaN这个方法用来判断非数字，并且返回一个值，是数字返回的是false,不是数字返回的true

 

1. 字符串中的转义符

写入字符串里面

 

1. 字符串长度

   xx.length;

 输出字符串长度console.log(str.length)

1. 字符串的拼接 数值相加，字符串相连

+号  只要有字符串和其他类型相+， 就是拼接

   Console.log(‘pink’+18);

 

1. 检测数据类型

   Typeof xx

Promot取过来的值时是字符型的

 

1. 字面量

   数字字面量：8,9,10

   字符串字面量：‘大前端’

   布尔字面量： true

 

1. 数据类型转换

   转换为字符串类型：

 

 转换为数字型：

 

parseInt(‘120px’)显示时会自动去掉px单位

 

 

转换为布尔型

 

1. 解释性语言：js
2. 编译型语言：java
3. 标识符 ：开发人员为变量数形函数等取得名字
4. 关键字：js本身已经使用的
5. 保留字：char, class  

 

• 运算知识

1. 算术运算符

   + - * / %  

   不要判断两个浮点数是否相等

 

1. 逻辑中断

  逻辑与&&：console.log(123&&456); //456 如果表达式1为真则输出表达式2，表达式1为假则输出表达式1 只有当表达式为0时表达式为假。

  逻辑或||：表达式1结果为真，则返回的是表达式1，表达式1结果为假，则返回表达式2

 

1. 赋值运算符

   =直接赋值

  +=， -=，*=， /=，%=

  Num += 2

 

1. 三元表达式

  a+b<c?x:y;

1. Switch(表达式){

       Case value1:  执行语句1；break;

       .....

        Default: 执行最后的语句；

    }

   注意要写break

1. do while至少会执行一次循环体，而while可能一次也不执行

 

• 数组

1.数组（Array）

var arr = new Array(); 创建了一个空数组

var arr = new Array(2)； 创建了两个空数组

var arr = new Array(2,3)；创建了2,3两个数组元素，相当于[2,3]

var arr=[]；创建了一个空数组

长度arr.length

2.检测数组：//返回的是true或者false

1.  instanceof 运算符用来检测是否为数组：

console.log(arr instanceof Array);

1. Array.isArray(参数) //H5新增方法，ie9以上版本支持

            console.log(Array.isArray(obj));

3.添加删除数组方法：

1. push()在数组末尾添加数组元素：arr.push(3，‘pink’);

  console.log(arr.push(3,’pink’)) //返回的是数组长度

1. unshift 在数组的开头添加一个或者多个元素: arr.unshift(‘red’);

  console.log(arr);//输出整个字符串

1. pop可以删除数组的最后一个元素： arr.pop(); //pop()没有参数

  console.pop(arr.pop()); //输出的是所删除的元素

1. shift可以删除数组的第一个元素：arr.shift()//没有参数，同样输出删除的元素

 

 

4.翻转数组：reverse();  冒泡排序：sort() //个位数排序;

 

 

 

5.返回数组元素的索引号

arr.indexOf(); //返回第一个满足条件的索引号，找不到元素则返回-1

 

 

6.数组去重

  

 

6.数组转换为字符串

1）基础方法

 

1. toString()

  var arr = [1, 2, 3];

  console.log(arr.toString()); //1,2,3

1. join分隔符 //默认用逗号分隔

  var arr = [‘green’, ‘blue’, ‘pink’];

console.log(arr.join());

console.log(arr.join(‘-’)); //用-分隔

 

 

重点看一下splice

 

冒泡排序：

 

• 函数

   function函数声明

   函数名（）；

 

 

 

Return 只能返回一个值， 如果多个值，则返回结果是最后一个值

Arguments存储了所有传递过来的实参。Arguments展示形式是一个伪数组，因此可以遍历，具有以下特点：

1. 具有length属性
2. 按索引方式储存数据
3. 不具有数组的push，pop等方法

• JS作用域

1. 全局作用域和局部作用域

 函数的形参也属于局部变量

  Js没有块级作用域

内部函数可以访问外部函数变量， 外部函数不可以访问内部函数变量。

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方法来取那个值，这种结构我们称作作用域链，就近原则。

1. 预解析

Js解析器在运行JS代码的时候分为两步，预解析和代码执行。

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

1. 函数提升，就是把所有的函数声明提升到当前作用域的最前面， 不调用函数。
2. 函数表达式调用必须写在函数表达式的下面

 

1. 预解析 js会把JS里面所有的var，function提升到当前作用域的最前面
2. 代码执行， 按照书写顺序

 

1. 对象

 var obj = new Object();  //创建了一个空对象

obj.uname = ‘张三丰’;

obj.age = 18;

obj.sex = ‘男’;

obj.sayHi = function(){

  console.log(‘hi~’);

}

console.log(obj.uname);

console.log(obj[‘sex’]);

obj.sayHi();

 

构造函数

function 构造函数名(){   //构造函数名第一个词要大写

   this.属性 = 值；

   this.方法 = function() {};

}

new 构造函数名();

例：

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(‘刘德华’, ‘55’, ‘男’); //构造函数不需要return就可以返回

console.log(typeof ldh); //输出ldh的形式是对象

console.log(ldh.name);

console.log(ldh[‘sex’]);

ldh.sing(‘冰雨’);

new关键字的执行过程:

 

 

 

遍历对象

function Star(uname, age, sex){

  this.name = uname;

  this.age = age;

  this.sex = sex;

  this.sing = function(sang){

     console.log(sang);

}

}

for(var k in obj){

console.log(k);   // k变量输出得到的是属性名

console.log(obj[k]);  //obj[k]得到是属性

}

内置对象

JS中的对象分为三种： 自定义对象，内置对象，浏览器对象。

1. 内置对象：是JS语言自带的一些对象，内置对象最大的优点就是帮助我们快速开发。

JS提供了多个内置对象：Math, Date, Array, String等

1. 查文档：MDN/W3C    MDN提供了网络技术的信息，包括HTML，CSS和万维网及HTML5应用的API

 

 

1. MDN网站：https://developer.mozilla.org/zh-CN/

   Math数学对象，不是构造函数，不需要new调用，直接使用里面的属性和方法即可。

 

   console.log(Math.PI);  //一个属性，圆周率

   console.log(Math.max(1, 99, 3));  //99

 

Math.PI  //圆周率

Math.floor() //向下取整， 往小了取整

Math.ceil() //向上取整， 往大了取整  

Math.round() //四舍五入版，就近取整  注意 -3.5   结果是 -3 这里往大了取

Math.abs()  //绝对值

Math.max() / Math.min()   //求最大和最小值

Math.random()  //返回随机小数  0 =< x < 1

Math.floor(Math.random()*(max-min))+min;  得到一个两数之间的随机整数，但是不包括两个数在内

Math.floor(Math.random()*(max-min+1))+min;  得到一个两个数之间的随机整数，包括两个数在内

 

1. 日期函数

 Date() 日期对象 是一个构造函数，必须使用new来调用创建我们的日期对象。

 

日期格式化

 

 

  倒计时

 

1. 字符串

字符串有不可变型，不要大量拼接字符串

简单数据类型，复杂数据类型，基本包装类型

字符串String,  Number,  Blooean属于基本包装类型。

基本包装类型就是讲简单数据类型包装成复杂数据类型

对象object属于复杂数据类型

 

1. 根据字符返回位置

  

1. 根据位置返回字符

 

 

 

例子： 求出现次数最多的字符

 

1. 字符串操作方法

toUpperCase() //转换大写

toLowerCase() //转换小写

 

 

数据类型总结

简单数据类型：又叫做基本数据类型或者值类型

栈用来储存简单数据类型，存值

String,  number,  boolean ,  undefined,  null返回的是object

 

复杂数据类型又叫做引用类型：一般加new就是复杂数据类型

栈存放地址  地址指向堆中的数据

  堆用来存储复杂数据类型， 堆中存放值