js基础知识笔记

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

三种方式转换为字符串型

1
2
3

var num = 1; alert(num.toString());
var num = 1; alert(String(num));
var num = 1; alert(num+“我是字符串”);

toString() 和 String() 使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一方式也称为隐士转换

转换为数字型

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parselnt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’-0

注意 parseInt 和 parseFloat ，这两个是重点
隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

转换为布尔型

方法	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

代表空，否定的值会被转换为false，如 ’ ’ , 0, NaN , null , undefined
其余的值都会被被转换为true

运算符

1、前置递增运算符
++num （num = num + 1）

使用口诀:先自加，后返回值

1 2	var num = 10; alert (++num + 10); // 21

先自加 10+1=11，返回11，此时num=11

2、后置递增运算符🔥
num ++ （num = num +1）

使用口诀:先返回原值，后自加

1 2	var num = 10; alert(10 + num++); // 20

单独使用时，运行结果相同；与其他代码联用时，执行结果会不同
开发时，大多使用后置递增/减，并且代码独占一行

===== 小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等(注意此时有隐士转换)
===	全等	判断两边的值和数据类型是否完全相同

1 2	console.log(18 == '18'); //true console.log(18 === '18'); //false

短路运算(逻辑中断)

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

①逻辑与

语法：表达式1 && 表达式2
如果结果值为真，则返回为真的表达式
如果结果值为假，则返回为假的表达式

1
2
3

console.log(123 && 456);   //456 	true&&true=true
console.log(0 && 456);     //0		false&&true=false
console.log(123 && 456 && 789);  //789

②逻辑或

语法：表达式1 || 表达式2
有真，则返回第一个为真的表达式
所有表达式为假则返回假的表达式

1
2
3

console.log(123 || 456); //123
console.log(0 || 456);   //456
console.log(123 || 456 || 789);  //123

var num = 0;
console.log(123 || num++);
// 先返回在加，相当于 (123 || 0)
console.log(num);    // 123

「运算符优先级」

优先级	运算符	顺序
1	小括号	()
2	一元运算符	! ++ –
3	算数运算符	先* / % 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	,

「三元表达式」

1 2	//如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值表达式1 ? 表达式2 : 表达式3;

创建数组

利用new关键字创建数组；

1 2	var 数组名 = new Array([n]);//[]代表可选若写n，则代表数组的长度 var arr = new Array();//创建了一个名为 arr 的空数组

利用数组字面量创建数组

// 1. 使用数组字面量方式创建空的数组
var 数组名 = [];//若写n，则代表数组的长度

//2. 使用数组字面量方式创建带初始值的数组
//3. 声明数组并赋值称为数组的初始化
var arr =['1','2','3','4'];
var arr2 = ['fan',true,17.5];//数组中可以存放任意类型的数据

数组中新增元素

①通过修改 length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined

②通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据
这种方式也是我们最常用的一种方式

1
2
3

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

函数

「1. 函数的概念」

封装了一段可被重复调用执行的代码块，通过函数可以实现大量代码的重复使用。函数是一种数据类型。

「2. 函数的使用」

声明函数

1. 通过function关键字定义函数 – 命名函数

function 函数名() {
    //函数体代码  
}
  // 1.1 function 是声明函数的关键字，必须小写
  // 1.2 函数名 命名为动词形式 例: getSum

2.通过函数表达式定义函数 —匿名函数

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function() {};
// 2.1 fn是变量名，不是函数名
// 2.2 fn是变量，只不过变量存储的是函数
// 2.3 函数表达式创建的函数可以通过 变量名(); 来调用
// 2.4 函数表达式也可以定义形参和调用传入实参。

3.匿名函数使用的第2种方式–匿名函数自调用

1
2
3

(function(){
	alert(123);  
})();

调用函数

1	函数名();// 函数声明后调用才会执行函数体代码

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

/*例用封装函数计算1-100累加和*/
function getSum() {
    var sumNum = 0; // 准备一个变量，保存累加和
    for (var i = 1; i <= 100; i++) {
      sumNum += i; // 把每个数值 都累加 到变量中
    }
      alert(sumNum);
}
// 调用函数
getSum();

return语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

return 语句的语法格式如下：

/ 声明函数
function 函数名（）{
    ...
    return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

// 声明函数
function sum(){
    ...
    return  666;
}
// 调用函数
sum();      // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者

return 终止函数

return 语句之后的代码不被执行

function add(num1，num2){
    //函数体
    return num1 + num2; // 注意：return 后的代码不执行
    alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 27

return 的返回值

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准

function add(num1，num2){
    //函数体
    return num1,num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6

arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。
JS中arguments实际上它是当前函数的一个内置对象。
所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。

伪数组具有以下特点：
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push，pop等方法

 function fn() {
   //arguments 里面存储了所有传递过来的实参
   console.log(arguments);// [1,2,3...]
   console.log(arguments[1]); // 2
   console.log(arguments.length); // 3
   
   //我们可以按照数组的方式 遍历argument  
 }
 fn(1, 2, 3);

// 用伪数组 实现求最大值
function getMax() {
   var max = arguments[0];
   for (var i = 1; i < arguments.length; i++) {
     if (arguments[i] > arguments[0]) {
       max = arguments[i];
     }
   }
   return max;
 }
 var result = getMax(1,3,77,5,85)
 colsole.log(result);

全局变量：

在全局作用域下 var 声明的变量是全局变量。
在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

局部变量：

在函数内部 var 声明的变量是局部变量，函数的形参实际上就是局部变量。
只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

预解析

「预解析相关概念」JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。

「预解析」在当前作用域下，JS代码执行之前，浏览器会默认把带有 var 和 function声明的变量在内存中进行提前声明或定义。
「代码执行」从上往下执行JS语句

预解析会把变量和函数的声明在代码执行之前完成，预解析也叫做变量、函数提升。

「变量预解析(变量提升)」 变量的声明会被提升到当前作用域的最上面，变量的赋值不提升。

console.log(num);  // 结果是多少？
var num = 10;      // ？

相当于
var num;
console.log(num);// 结果是 undefined
num = 10;
//结果: undefined
//注意: 变量提升只提升声明，不提升赋值。

「函数预解析(函数提升)」 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

  fn();
  function fn() {
      console.log('打印');
  }
  //结果: 控制台打印字符串 --- "打印"
//相当于以下
  function fn() {
      console.log('打印');
  }
  fn();		//此时才调用函数
  //注意: 函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

「函数表达式声明函数问题」

//函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用
  fn();
  var fn = function(){
    console.log("想不到吧");
  }
  //结果:报错提示 "fn is not a function"
  //相当于执行以下代码
 var fn;
 fn();			//fn()未被定义为函数，报错
 fn = function(){
    console.log("想不到吧");
  }
  解释: 该段代码执行之前，会做变量声明提升，fn在提升之后的值
        是undefined;而fn调用是在fn被赋值为函数体之前，
        此时调用的fn未赋值为函数，所以无法被调用而出错

预解析案例

// 练习1
var num = 10;
fun();
function fun() {
    console.log(num);	//undefined
    var num = 20;
}
// 最终结果是 undefined

//相当于以下
var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

上面PS：函数声明提升，函数内的局部变量声明也在函数内部提升

// 练习2
var num = 10;
function fn(){
    console.log(num);		//undefined
    var num = 20;
    console.log(num);		//20
}
fn();
// 最终结果是 undefined 20


//相当于以下
var num;
function fn(){
    var num;
    console.log(num);
   	num = 20;
    console.log(num);
}
num = 10;
fn();

//预解析案例3
  var a = 18;
  f1();
  function f1(){
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
  }

//相当于执行了以下操作 结果为 undefined 9
  var a;
  function f1(){
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';  
  }
  a = 18;
  f1();  
  //undefined 9

//预解析案例3
  f1();
  console.log(c);
  console.log(b);
  console.log(a);
  function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
  }
  
//相当于执行了以下操作 结果为 9 9 9 9 9 "报错--a is not defined"

  function f1() {
    var a;
    a = b = c = 9;//相当于 var a = 9; b=9; c=9; b和c 直接赋					值，没有var声明，当全局变量看。
				   //差异：集体声明 var a = 9,b = 9, c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
  }
  f1();
  console.log(c);
  console.log(b);
  console.log(a);	//此时a为局部变量

注意：var a = b = c = 9;

相当于 var a = 9; b=9; c=9;

b和c 直接赋值，未在函数内部var声明，则为全局变量，而a为布局变量。

对象

对象的概念

「对象」在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中常用方法来表示（常用动词）

「为什么需要对象」

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，如果保存一个的完整信息呢？
为了更好地存储一组数据，对象应用而生；对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

var obj = {
  "name":"fan",
  "sex":"male",
  "age":18,
  "height":155
}

创建对象的三种方式

「1. 利用字面量创建对象」使用对象字面量创建对象：

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示
-键：相当于属性名
-值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

// star 就是创建的对象
var star = {		//对象-star
  name : 'pink',	//属性-name
  age : 18,
  sex : '男',
  sayHi : function() {
    alert('大家好啊');
  }
};

对象的使用
- 对象的属性：对象中存储具体数据的“键值对”中的键称为对象的属性，即对象中存储具体数据的项。
- 对象的方法：对象中存储函数的“键值对”中的“键”称为对象的方法，即对象中存储函数的项。
- 访问对象的属性：对象里面的属性调用：对象.属性名；对象里面属性的另一种调用方式：对象[‘属性名’],注意方括号里面的属性必须加上引号。
- 调用对象的方法:对象.方法名();
- 变量、属性、函数、方法总结：
  ①变量：单独声明赋值，单独存在
  ②属性:对象里面的变量称为属性，不需要声明，用来描述该对象的特征。
  ③方法：方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器。对象里面的函数称为方法，方法不需要声明，使用”对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
  ④函数:单独存在的，通过”函数名()”的方式就可以调用。

1
2
3

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();

「2. 利用new Object创建对象」

创建空对象

1 2	//通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象 var andy = new Object();

给空对象添加属性和方法

通过对象操作属性和方法的方式，来为对象增加属性和方法
andy.name = 'pink';
andy.age = 18; // andy.age = 19修改对象属性
andy.sex = '男；// andy.phoneNum = 110 添加属性
andy.sayHi = function() {
  alert('大家好');
}
andy.sayHi();调用对象的方法 //第二种写法 obj['sayHi']();

// Object()第一个字母大写；
//new Object() 需要new关键字，使用的格式:对象.属性 = 值

「3. 利用构造函数创建对象」

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值,它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽出来，然后封装到这个函数里面。

构造函数的封装格式：

function 构造函数名(形参1，形参2，形参3...) {
  this.属性名1 = 参数1;
  this.属性名2 = 参数2;
  this.属性名3 = 参数3;
  this.方法名 = 函数体;
}

构造函数的调用格式

  var 对象名 = new 构造函数名(实参1，实参2，实参3);
  // 以上代码中，obj即接收到构造函数创建出来的对象。
  注意事项：
    1.构造函数约定首字母大写
    2.函数内的属性和方法前面需要添加this，表示当前对象的属性和方法
    3.构造函数中不需要retrun返回结果
    4.但我们创建对象的时候，必须用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('刘德华',18,'男');
console.log(typeof ldh) // object对象，调用函数返回的是对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');//把冰雨传给了sang
//结果显示 object 刘德华 男 冰雨
var zxy = new Star('张学友',20,'男性');//若第二次调用构造函数
console.log(typeof ldh)
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('abc');
//结果显示 object 刘德华 男 abc
//前面第一次构造的保持不变
    1.其他：构造函数如Stars(),抽取了对象的公共部分，封装到了函数里面，它泛指某一大类(class)
    2.创建对象，如new Stars();特指某一个，利用new关键字创建对象的过程，我们也称为对象实例化

new关键字的作用(面试题)
- 1.在构造函数代码开始执行之前，创建一个空对象；
- 2.修改this的指向，把this指向创建出来的空对象；
- 3.执行构造函数内的代码，给这个新对象添加属性和方法
- 4.在函数完成之后，返回这个创建出来的新对象(所以构造函数里面不需要return)

//******以下暂未理解*****
// 工厂函数创建对象 这个把创建好的对象返回给函数调用处
//构造函数createPerson
  function createPerson(name, age, job) {
    var person = new Object();//创建新对象
    person.name = name;
    person.age = age;
    person.job = job;
    person.sayHi = function(){
      console.log('Hello,everyBody');
    }
    return person;
    }
  var p1 = createPerson('张三', 22, 'actor');

遍历对象

  for...in 语句用于对数组或者对象的属性进行循环操作。

  //其语法如下：
  for (变量 in 对象名字) {
      // 在此执行代码
  }

  //语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
  
  for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

遍历对象案例

var obj = {
    name: '秦',
    age: 18,
    sex: '男',
    fn:function() {};
};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);

//for in 遍历我们的对象
//for (变量 in 对象){}
//我们使用for in 里面的变量 我们喜欢写k 或者key
for(var k in obj){
    console.log(k); // k 变量 输出得到的是属性名
    console.log(obj[k]); // obj[k] 得到的是属性值
}
//输出结果为 秦 18 男 name 秦 age 18 sex 男 fn ƒ () {}

内置对象

「内置对象」JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于JS独有的，JS API讲解内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而非必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发。

「查文档」学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习。
MDN:https://developer.mozilla.org/zh-CN/

Math对象

「Math对象」不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关。

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

//- 获取指定范围的随机整数
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }

日期对象

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

使用Date实例化日期对象
- 获取当前时间必须实例化
- 获取指定时间的日期对象

1
2
3

var now = new Date();
var future = new Date('2020/10/1')
// 注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

续上
- 使用Date实例的方法和属性
- 注意！！：getMonth()方法获取到的月份 + 1 = 当月

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月(0-11)	dObj.getMonth()
getDate	获取当天日期	dObj.getDate()
getDay()	获取星期几(周日0到周六6)	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前小时	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.gerSeconds()

//参数常用写法 数字型或者字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
//日期格式化
// 格式化日期 年 月 日
var date = new Date();
console.log(date.getFullYear()); //返回当前日期的年 2020
console.log(date.getMonth() + 1); //月份 返回的月份小1个月，记得月份加1呦
console.log(date.getDate()); //返回的是 几号
console.log(date.getDay()); //周一返回的是1 周六返回的是6 周日返回的是0
//我们写一个 完整的年月日
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
if (day == 0) {
    day = "星期日";
}
console.log("今天是" + year + "年" + month + "月" + dates + "日" + '星期' + day);
//格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); // 
//封装一个函数返回当前的 时 分 秒 
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    var h = h < 10 ? "0" + h : h
    var m = time.getMinutes();
    var m = m < 10 ? "0" + m : m
    var s = time.getSeconds();
    var s = s < 10 ? "0" + s : s;
    return h + ":" + h + ":" + s;
}
console.log('现在的时间是' + getTimer());

获取Date日期总的毫秒数(时间戳)
getTime() 返回距 1970 年 1 月 1 日(世界标准世界)之间的毫秒数：

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(now.valueOf()) 
console.log(now.getTime()) 
// 2. 简单写可以这么做 (最常用的)
var now = + new Date();   
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

倒计时案例 ：
  1.输入的时间减去现在的时间就是剩余的时间，即倒计时。
  2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，
   得到的就是剩余时间的毫秒数
  3.把剩余时间总的毫秒数转换为天、时、分、秒  (时间戳转换时分秒)
    转换公式如下：
    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("2020-10-1 18:00:00"));
      var date = new Date();
      console.log(date);

数组对象

「创建数组的两种方式」

1. 字面量方式var arr = [1,"test",true];
2. 实例化数组对象 new Array() var arr = new Array();
- 注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
- 如果只传入一个参数(数字)，则参数规定了数组的长度。
- 如果传入了多个参数，则参数称为数组的元素。

「检测是否为数组」

**1. instanceof 运算符 **(注意这个是运算符)
- instanceof 可以判断一个对象是否是某个构造函数的实例
- A instanceof B
- （1）A是否是B的实例
  
  （2）A是否是B子类的实例
  
  （3）A是否是B接口实现类的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true	
console.log(obj instanceof Array); // false
console.log(arr instanceof Object); // true
console.log(obj instanceof Object); // true

2. Array.isArray()
- Array.isArray()用于判断一个对象是否为数组
- isArray() 是 HTML5 中提供的方法
- Array.isArray(arr) arr是否是Array的实例

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

3. 注意 typeof用法
- typeof 用于判断变量的类型

1 2	var arr = [1, 23]; console.log(typeof arr) // object 对象arr是构造函数的实例因此是对象数据类型

「添加删除数组元素的方法」

数组中有进行增加、删除元素的方法，部分方法如下表👇

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素

var arr = [1, 2, 3];
console.log(arr.push(6, 7)); // 5 向数组末尾添加元素 返回新的长度
arr.pop(); //删除数组最后一个值并返回
console.log(arr); // [1,2,3,6]
// 向数组的开头添加元素并返回数组长度 
console.log(arr.unshift(9,10));// 6 数组变为[10,1,2,3,6]
console.log(arr.shift()); //9 删除数组开头的元素并返回被删的值

「数组排序」

数组中有对数组本身排序的方法，部分方法如下表

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组返回新数组

注意：sort方法需要传入参数(函数)来设置按大小升序、降序排序

如果在sort中传入“function(a,b){ return a-b;}”，则为从小到大升序
如果在sort中传入“function(a,b){ return b-a;}”，则为从大到小降序

// 踩坑 数组sort()排序(冒泡排序) return a - b 则升序
// 写法固定 参考如下
var arr1 = [13,4,77,1,7];
console.log(arr1.reverse())//[7, 1, 77, 4, 13]	颠倒顺序
arr1.sort(function(a,b){	//创建函数
  return a-b;
});
console.log(arr1);	//[1, 4, 7, 13, 77]

「数组索引方法」

数组中有获取数组指定元素索引值的方法，部分方法如下表

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组的最后一个索引，从后向前索引	如果存在返回索引号，如果不存在，则返回-1

var arr = [1, 2, 3, 4, 5, 4, 1, 2];
// 查找第一个元素2的索引
console.log(arr.indexOf(2)); // 1
// 查找最后一个元素1在数组中的最后的索引
console.log(arr.lastIndexOf(1)); // 6

「数组转换为字符串」

数组中有把数组转化为字符串的方法，部分方法如下表
注意：join方法如果不传入参数，则按照 “ , ”拼接元素

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

var arr = [1, 2, 3, 4];
var arr2 = arr;
var str = arr.toString(); // 将数组转换为字符串
console.log(str); //  1,2,3,4
  
var str2 = arr2.join("|");//按照键入字符将数组转换为字符串
console.log(str2);//  1|2|3|4

「其他方法」

方法名	说明	返回值
concat()	连接两个或多个数组不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始要删除的个数)	返回被删除项目的新数组，这个会影响原数组

var arr = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr3 = arr.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6,7,8]

//slice(begin,end) 相当于复制出来。是一种左闭右开区间 [1,3)
// 从索引1出开始截取，到索引3之前
var arr4 = arr.slice(1, 3);
console.log(arr4); // [2,3]
//splice()相当于剪切 
var arr5 = arr2.splice(0, 3);	//左闭右开
console.log(arr5); // [5,6,7]
   console.log(arr2); // [8]   splice()会影响原数组

字符串对象

「基本包装类型」为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

1
2
3

// 下面代码有什么问题？
var str = 'andy';			//字符串类型
console.log(str.length); // 4

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，相当于其执行过程如下：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
console.log(typeof str)	//object
// 3. 销毁临时变量
temp = null;

「字符串的不可变」

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在「大量拼接字符串」的时候会有效率问题

「根据字符返回位置」

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

方法名	说明
indexOf(‘要查找的字符’，开始的位置)	返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	从后往前找，只找第一个匹配的

var str = "anndy";
console.log(str.indexOf("d")); // 3
//指定从索引号为4的地方开始查找字符"d"
console.log(str.indexOf("d", 4)); // -1	从4开始查找d
console.log(str.lastIndexOf("n")); // 2	但是索引是正的

案例：查找字符串”abcoefoxyozzopp”中所有o出现的位置以及次数

先查找第一个o出现的位置
然后只要indexOf 返回的结果不是 -1 就继续往后查找
因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

var str = "oabcoefoxyozzopp";
var index = str.indexOf("o");
var num = 0;
while (index !== -1) {
  console.log(index);
  num++;
  index = str.indexOf("o", index + 1);
}
console.log('o出现的次数是: ' + num);//o出现的次数是: 5

「根据位置返回字符」

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

方法名	说明	使用
charAt(index)	返回指定位置的字符(index字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML,IE8+支持和charAt()等效

// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3)); // y
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
} // a n d y

// 2. charCodeAt(index)  
//返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a

案例：判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符，并统计其次数
1. 核心算法：利用 charAt() 遍历这个字符串
2. 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1
3. 遍历对象，得到最大值和该字符注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数

var str = "abcoefoxyozzopp";
// 创建一个空对象来存储每一个字符(键)和对应的次数(值)
var o = {}; //创建了一个对象
console.log(typeof o)
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // chars 是字符串的每一个字符
    //开始的时候是空对象,o[chars]这个属性值(字符次数为0) 
    //o[chars]=1说明 这个字符之前已经存在
    if (o[chars]) { //存在则计数加1次
        o[chars]++;
    }
    //进行下边语句o[chars]=0 ,证明之前这个键在对像里没有,则新建储存一次
    //如o[a]=undefined，则新建并储存{a:1}
    else { //不存在则新建一次
        o[chars] = 1;
    }
}
console.log(o);
// 2. 遍历对象
var max = 0;
var ch = "";
for (var k in o) {
    // k 得到是 属性名
    // o[k] 得到的是属性值
    if (o[k] > max) {
        max = o[k];
        ch = k;
    }
}
console.log(max);
console.log("最多的字符是" + ch);

「字符串操作方法」

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

方法名	说明
concat(str1,str2,str3…)	concat() 方法用于连接两个或对各字符串。拼接字符串
substr(start,length)	从 start 位置开始(索引号), length 取的字符个数。
slice(start,end)	从 start 位置开始，截取到 end 位置，end 取不到 (两个都是索引号)
substring(start,end)	从 start 位置开始，截取到 end 位置，end 取不到 (基本和 slice 相同，但是不接受负)

// 字符串操作方法
// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red')); // andyred
// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
// 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符
console.log(str1.substr(2, 2)); // 春风

replace()方法
- replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

1
2
3

字符串.replace(被替换的字符串，要替换为的字符串)；
var str1 = '改革春风吹满地';
console.log(str1.replace('春风', '号角'));//改革号角吹满地

split()方法
- split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
- 其使用格式如下：字符串.split(“分割字符”)将字符串按’分割字符’分割出来

字符串.split("分割字符")
// 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
    var str = "andyandy";
    console.log(str.replace("a", "b")); // bndyandy
// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
    var str1 = "abcoefoxyozzopp";
    while (str1.indexOf("o") !== -1) {
      str1 = str1.replace("o", "*");
    }
    console.log(str1); // abc*ef*xy*zz*pp

// 2. 字符转换为数组 split('分隔符')    
// 前面我们学过 join 把数组转换为字符串
    var str2 = "red, pink, blue";
    console.log(str2.split(",")); //[red,pink,blue]
    var str3 = "red&pink&blue";
    console.log(str3.split("&")); // [red,pink,blue]