Javascript基础，让小白一看就会的基础

Javascript笔记

• 一、书写为位置

分三种:行内js（不推荐使用） 内部js（学习期间使用） 外部js（工作实际开发中常用）
常用的三个输入输出语句：alert（ ）； console.log（ ）； prompt（ ）;

为什么要用变量：有些数据我们需要保存起来，方便后期使用
什么是变量：变量本质就是一个容器（盒子），用来保存数据；就是在内存中申请一块用来保存数据的空间。
为什么要有变量名：为了方便快速找到变量这个容器盒子里面存储的数据
什么是变量名：给变量容器盒子起的名字叫变量名
变量的使用：先var 声明 然后再用 = 赋值使用。其中var 是js中的一个关键字
声明变量本质是去内存申请空间
语法: var 变量名 = 变量值;
一个var 可以声明多个变量 但是变量之间要用逗号隔开，变量不要加引号。

变量重复赋值：一个变量被重复赋值的话，后面的赋值会重叠掉前面的赋值，以最后一次赋值的值为准。
var age = 10;
age = 20;
最后的结果就是 20 因为 10 覆盖掉了

• 变量使用注意事项：

1、只声明，不赋值 -------- 会出现underfind
2、不声明，不赋值，直接使用 --------- 会出现直接报错
3、不声明，只赋值 --------- 可以正常运行，但是这个是不严谨的，不被推荐。
变量命名规则:1、由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成
2、严格区分大小写
3、不能以数字开头，不能是关键字、保留字、或者代码符号
变量命名规范：变量名必须有意义
建议使用驼峰命名法，例如：myName
什么是数据类型：数据类型不同，他们处理存储和处理方式就不同
字面量：顾名思义–就是从字面上的意思看

• 简单数据类型：

1、数值型number
2、字符型string 字符型都带引号，具有拼接功能，多个字符间用 + 相连（含有隐式转换）
字符串 + 任何类型 = 拼接之后的新字符串拼接前 会把 与字符串 相加的 任何类 型 转成 字符串，再拼接成一个新的字符串
总结口诀：数值相加 字符相连
3、布尔型boolean 分两种true 和 false
4、未定义类型undefined
特殊值NaN（Not a Number）
console.log(‘andy’ - 10); // NaN not a number 不是一个数字
检测变量是不是数字:isNaN(x) ：因为NaN不是一个数字，所以
如果检测为数值输出false
如果检测不是数值则输出true
字符串转义符 \n代表换行 \’ 代表单引号 \t 代表Tab

• 字符串的长度检测：

var strMsg = “我是帅气多金的程序猿！— 恩，我看出了你的自信。”;
alert(strMsg.length); // 显示 26
同样strMsg.length可以直接使用，应用于判断中。

• 获取检测变量的数据类型：

typeof 可用来获取检测变量的数据类型
var num = 3747;
var isNum = typeof num; // 也可以 写成 typeof(num)
alert(isNum); // “number”

• 数据类型转换：
• 把变量转换为字符串

num.tostring（）把变量转换为字符串
String（）强制转换 把特殊值转换为字符串
加号拼接字符串 使用加号通过隐式转换进行字符串拼接（最常用）
当 + 两边 一个是 字符串类型，另一个是 其它类型 的时候，会先把 其它类型 转换成 字符串 再进行字符串拼接，最后返回字符串

• 把变量转换为数值

1、parseInt（）把string类型转换为整数
//规则1.永远记住它是取整函数
var numLove = parseInt(18.08); // 18
var numLove = parseInt(18.88); // 18

//规则2.如果第一个字符不是数字符号或者负号，返回NaN
var numLove = parseInt(“aboard211”); // NaN

//规则3.如果第一个字符是数字，则继续解析直至字符串解析完毕 或者 遇到一个非数字符号为止
var numLove = parseInt(“520littlecat”); // 520

2、parseFloat（） 把string类型转换为浮点数将* 浮点数值字符串(“12.3abc”)*转成 浮点数值

3、number（）强制转换为数值，若里面出现非数字字符或者undefined 则返回NaN
如果该值是空值、0、null、 false 则返回0 若为true则返回1
4、隐式转换，通过算术运算 实现字符串到数值的转换，称之为隐式转换
var str= '123 ';
var x = str-0;
var x = x*1;
5、转换为boolean值
Boolean（）
被转化为false的有6种：‘’、0、NaN、null、undefined、false
其余任何值都会转化为true

• 算术运算符：
• • • / % 用来处理四则运算
      前置++运算 和 后置++运算 区别
      ++num 和 num++ 在单独使用时 结果是一样的
      ++num 是先自加然后返回值
      num++ 是先返回值然后在自加 开发中最常用
      var a = 1
      a++ + a++ ::a++ 先返回值为1 此时a++为1 然后再自身计算a为2，后面的a++此时为2
      此时算术表达式结果为3

比较运算符：进行关系比较之后会返回布尔值 false 或者 true
其中 = 为赋值 == 为判断（判断两边数值是否相等-有隐式转换）
=== 为全等 （判断两边数值和数据类型是否完全相等）
逻辑运算符：与&& （两边都是true 才判断为true 否则为false）
或|| （两边有一方为true就是true 否则为false）
非! （true的取反）

或与非的使用
	var a = 2,b=3;
	&&的原则是夫唱妇随
	var c= a>b && 'yes';   // false    解：a>b为假 直接输出不在执行后面的
	var d=a <b && 'yes';  // yes  解：a<b为真 就执行后面的代码为 yes
	||的原则是你行你上
	var e=a >b || 'yes';  // yes  解：a>b为假，后面的行执行后面的
	var f= a<b || 'yes';  // true  解：a<b为真，直接是执行当前代码
	取反
	var g =(!a>b);  // true  解：a>b为假，取反 为真
	var h=(!a<b);  // false  解：a<b为真，取反 为假

运算符优先级

1. () 优先级最高
2. 一元运算符 ++ – !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符

规律：
先一元 后 二元
先 算数 后 关系

• 流程控制
• If语句

If （条件表达式）{
满足条件执行的语句；
}
If else语句
If （条件表达式）{
满足条件执行的语句
} else {
不满足条件执行的语句
}
If else if语句
If （条件表达式）{

} else if （条件表达式）{

} else {

}

三元运算符：

格式：   条件 ? 表达式1 : 表达式2;

var a , b;
a = 20;
b = 10;
// 求两个数值中的较大的值
var c = （（a > b） ? （a） : （b））;

// c就是比较大的值
// 有三个数，求三个数中的较大的值。

• Swicth case

如果a >7为true 则执行resuit = 21
如果为false 则执行result =12
var a = 10;
var result = 0;
if(a > 7){
result = 21;
}else{
result = 12
}
alert(result); // 21

• switch case 结构

switch( 变量 ){
case value1:
//表达式结果 等于 value1 时 要执行的代码
break;
case value2:
//表达式结果 等于 value2 时 要执行的代码
break;
default:
//表达式结果 不等于任何一个 value 时 要执行的代码
}
执行顺序：1、先从变量中获取一个值，然后表达式中的值会与case中的值进行比较
2、如果存在匹配项 即变量值 === case 则与case相关联的代码块被执行，遇到break停止，整个switch 代码执行结束
3、如果所有case值都没有匹配项 则执行default中的程序
4、我们case后面的值，通常都是一个常量

• 三种循环结构 while do…while for

三个关键词 计数器 循环条件（判断条件） 循环自加器（计数器自增）
for 循环语句
for （变量初始化（var i = 0；）；条件表达式（i < 100）; 计数器自增（i++））{
满足条件循环体；
}

• 双重for 循环语句

for (外循环的初始; 外循环的条件; 外循环的增量) {
for (内循环的初始; 内循环的条件; 内循环的增量) {
需执行的代码;
}

}
1、内层循环可以看做外出循环的语句。
2、内层循环执行的顺序也要遵循for循环的执行书序。
3、外层循环执行一次，则内层循环要执行全部次数（跑完毕）[因为需要内层循环跑到不再满足循环条件，跳出在开始外层循环]。

双重循环：案例：D:\黑马练习\js03
While循环：//条件表达式为 true 时重复执行循环体代码
//条件表达式为 false 退出循环
while (条件表达式) {
// 循环体代码
} 只要表达式为真，则会一直执行循环体
案例：
var numCount = 1; // 用来记录循环次数
while(numCount <= 10){ // 判断循环的次数是否达到我们的条件
console.log(‘Hi,有空吗？’); // 要执行的循环体 业务代码
numCount++; // 要添加条件做改变，否则 循环会出现【死循环】！
}

• do…while 语句

do{
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
do先执行一次，然后在判断while中的条件表达式，若为真则一直执行do中循环体。
Demo
do {
var ask = prompt(‘你喜欢我吗？ y/n’);
} while (ask !== ‘y’);
alert(‘我也喜欢你啊’);

• Continue跳出本次循环

立即跳出本次循环，继续下一次循环（本次循环体 continu 之后的 代码 就都少执行这一次）
demo
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log(‘这个包子有虫子，扔掉’);
continue; // 跳出本次循环 跳出的是 第 3次 循环
}
console.log(‘我正在吃第’ + i + ‘个包子呢’);
}

• Break退出整个循环

理解跳出整个循环（循环结束），开始执行 循环后面的代码
demo
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个for 循环 跳到 整个for 下面的语句
}
console.log(‘我正在吃第’ + i + ‘个包子呢’);
}
数组：为什么要使用数组：可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。

• 创建数组的两种方式

1、var arrStus01 = new Array();// 创建一个空新数组
2、var arr = [];

数组中可以存放任意类型的数据；
数组是有下标或者索引号的，索引号从0开始排序
Var arr = [1, 2, 4, 6, 7,89];
或者数组元素 arr[0];
给数组添加元素：给空余的索引号添加；
数组的length属性 计算数组内有多少数组元素arr.length - 1 -i
遍历数组是什么意思：就是把数组内的数组元素都输出点名一次

遍历数组使用for循环语句

 for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
}

for里面的i是索引号 arr[i]这个代表是数组元素
遍历数组元素为字符型
demo

var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var separator = '|'
for (var i = 0; i < arr.length; i++) {
   str += arr[i] + separator;
}
console.log(str);

数组比较大小：
demo案例

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);

数组翻转：案例

var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
newArr[newArr.length] = arr[arr.length - 1 - i];
}
console.log(newArr);

冒泡排序:案例

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

小结
数组的 元素 可以是 任意类型
数组的 长度（容量） 是可变的
数组的 length 属性可读写

• 函数

什么是函数：就是 封装了 一段 可被重复调用执行的 代码块。 可以实现大量代码的重复使用。 非常赞
函数声明

function 函数名() {
    //函数体代码
}

• //函数调用

函数名();// 通过调用函数名来 执行函数体代码
函数本身不会执行代码，只有调用了函数才会执行
函数是有形参和实参的
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数，用 逗号 分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

Demo

function sayHiToMe(usrName,usrAge){
    //函数体
    var strMsg = 'Hi,我的名字叫' + usrName + '，年龄：' + usrAge;
    alert(strMsg);
}

sayHiToMe(‘小爱’,21); // 调用函数，并传入 两个实参 ‘小爱’ 和 21，分别 传给了形参 usrName 和 usrAge
1、多个参数之间用逗号隔开；
2、形参的个数和实参的个数一定要匹配。
3、上面我们用的console 在函数内 输出是没有价值的。
4、函数是有返回值的哦 --return
5、return的本质就是：调用函数并将需要值返回给调用者
6、外部想要得到结果，在函数内部需要使用return返回值。
7、return 返回return 中的值 同时结束当前的函数体内的代码

• arguments 是一个伪数组，可以进行遍历

arguments 对象中，存储了传递的所有的实参，所有的函数都内置了一个arguments对象

• 伪数组的特征：

1、具有length属性
2、按索引号方式进行存储数据
3、不具有数组的push pop等方法
arguments用途：当我们不确定用户要传输多少个实参的时候，可以用arguments来获取。

函数定义有两种方式

function fun() {  // 命名函数
}
fun()
var fun = function() { //匿名函数（函数表达式方式）

} // 调用的方式 但是这个方式，函数调用必须写到函数体下面
fn(); // fn 里面存储的是一个函数。

匿名函数可以设置为自执行函数—定义后立即自执行
(function () {
alert(‘我是匿名函数，被自执行啦~~！’);
})();

• 函数也是一种数据类型

function fn() {
console.log(‘11’);
}
console.log(typeof fn) // function

函数可以作为参数：函数可以接受任何类型的数据作为参数，数值 字符 函数

函数可以作为返回值
function fn() {
return function() {
console.log(‘函数可以作为返回值’);
}
}

• 作用域

作用域分
全局变量：在函数外部定义的变量，全局变量在任何敌方都可以使用。
特殊情况，在函数内没有var声明的变量，也是全局变量，但是不建议使用
局部变量（函数作用域）定义在函数内部的变量，只能在函数内部使用。在外部使用会找不到，函数的形参实际上就是局部变量，局部变量运行结束后自动销毁，节约内存。

• 作用域链：

1、只要是代码就至少有一个作用域。
2、如果函数中还有函数，就会又诞生一个作用域
3、根据内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据可以被内部函数访问，这就叫做链式（作用域链）
4、作用域链函数计算采用就近原则

<script>
    var num = 10;
    Function fn() {
    var num = 20;
    console.log(num); // 20
}
    fn();

// 作用域链 ： 我们按照链式方式 去查找，最终决定我们变量执行那个值的过程（就近原则）

• 预解析：

js解析器在运行代码的时候需要进行两部：预解析和代码执行
首先，预解析是在全局环境中把代码中的function var 关键字先查找出来，
变量只声明不赋值，函数只声明不调用，预解析只发生在当前作用域下。
同时预解析也叫变量 函数的提升—提升的时候，变量 函数会被提升到当前作用域的最前面，但是变量只提升不赋值，函数只提升不调用
变量名和函数名相同时，优先执行函数。
执行过程优先级问题：
变量赋值 函数调用 表达式运算等

对象

什么是对象：万物皆对象
泛指，指一类，比如苹果泛指一类，苹果可以分红苹果，青苹果等等
特指，具体就是指某一个，这个东西，那个东西
对象里面分（变量）属性（名词 外在固定特性）和（函数）方法（动词）
对象是封装了相关属性和方法的复杂数据类型
本质：对象就是一组无序的相关属性和方法的集合
函数和对象的区别：
函数 是按功能封装代码，对象是按功能封装方法和属性，都可以起到重复使用数据和代码的作用。
为什么要有对象？
就是保存一系列的数据，使用对象较为方便，快捷。代码可以大量复用。

好处：
我们可以用对象把一组相关的变量和函数关联起来，访问和作为参数传递起来更为方便
创建对象：两种方法：

• 1、利用对象字面量创建对象：

对象字面量：是封闭在花括号对 {} 中的一个对象的0个或多个 键:值 无序列表
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数值类型、字符串类型、布尔类型，甚至 函数类型）

• 2、用花括号包括，属性值之间用逗号隔开，属性名和属性值之间用冒号定义

例如：

var star = {
    name : '刘德华',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

• 对象调用：

属性调用分两种方法
1、对象名.属性名
2、对象[‘属性名’]
对象方法调用：对象.方法名（）
注意事项：
1、函数是单独存在的， 调用的时候 函数名() 就可以了
2、方法是再对象里面， 调用的时候，对象.方法名()

• new Obect () 创建对象

和我们前面学习的new Array （）一样
Object()是构造函数，首字母要大写
new Object() 是调用构造函数 因为构造函数需要new 来调用 同时再内存中创建一个对象
注意里面使用的时候用点 不是 冒号
案例分析

var stuObj = new Obect();
stuObj.name = 'james';
stuObj.age = 11;
stuObj.sex = true;
stuObj.sayHi = function(){
    alert('大家好啊~');
}

• 自定义构造函数：

构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。
构造函数：用于创建某一大类对象（前面提到的泛指），首字母要大写
构造函数要和new一起使用才有意义
构造函数案例

function Person(name, age, sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
          alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

其中 Person（）时构造函数，主要用来进行 初始化对象用的，泛指某一大类。
new Person（）是用来创建对象的。特指某一个，通过关键字new创建对象的过程叫对象实例化

• new关键字

function Start（name，age，sex）{
This.name=name;
This.age=age;
This.sex=sex;
this.sayHi=fuction(){
Alter(‘Hi’);
}
}

var lileileo=new Start=(‘李雷雷’，32，’男’)；
Lileilei.this.sayHi（）；

• new在执行的时候会做四件事

1、new会在内存中创建一个新的空对象。
2、New会让this指向这个新的对象
3、执行构造函数里面代码的目的：给这个新对象加属性和方法；
4、New会返回这个新对象（所以构造函数里面不需要return）

• This详解：

1、函数在创建的时候this指向是不明确的，只有在调用的时候才可以确定
2、一般函数直接执行，内部this指向是全局windows
3、函数作为一个对象的方法，被该对象所调用，那么this就是指向该对象（谁调用指向谁）
4、构造函数中的this 对象的实例

• 遍历对象的属性：

for…in 语句用于对数组或者对象的属性进行循环操作。
语法：
for (变量 in 对象名字) { //这个变量（属性名）自定义符合命名规范，但是我们一般用k或者key
在此执行代码 //这里是对象 或者数组，因为数组也是对象。
}
demo

var obj = {
     name: 'andy',
     age: 18,
     sex: '男'
}
console.log(obj.length); // undefined
for (var k in obj) {
    console.log(k); // 这里的k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

遍历json

Var json ={
“Id”:”1”,
“name”:”andy”,
“age”:”18”,
“tel”:”432435”,	
}
For (var k in json) {
Conlose.log(k +”:”+json[k]);
} 

Json 数据的书写格式是：名称/值对
里面的属性和属性值都要用双引号括起来

• 内置对象

内置对象指js中自带的一些对象，供开发者直接使用
对象是带有属性和方法的特殊数据类型，我们可以通过MDN来查询
MDN网址：(https://developer.mozilla.org/zh-CN/)
如何学习对象中的方法？
1、具有什么功能？能实现什么功能
2、参数的意义和类型
3、返回值的意义和类型

**-

• Math对象

**

Math对象不是构造函数，
Math.PI为圆周率 输出为很长的数字
Math.floor（）向下取整 向小的方向取整
Math.ceil（）向上取整 向大的方向取整
Math.random（） 生成随机数。在 [0 1）之间生成，但是包括0，不包括1

• 求两个整数之间的随机整数，但是要包括这两个整数

需要公式：Math.floor（Math.random（）*（max - min + 1）+min）
直接封装函数：

function getRandom(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandom(10, 20))

随机生成颜色GRB

function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

function getColor(max, min) {
var c1 = getRandom(max, min);
var c2 = getRandom(max, min);
var c3 = getRandom(max, min);
return 'rgb(' + c1 + ', ' + c2 + ', ' + c3 + ')';
}
console.log(getColor(0, 255));

• Date时间对象

他是一个构造函数，Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。
Date（）的使用
1、var now =new Date（）----- console.log（now）；
如果Date（）里面不写参数，就返回当前值
如果Date（2019/05/30 08:08:08）里面写参数，就返回括号里面的输入的时间

• 获取毫秒时间的方法：

// 注意他们都是方法

var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())

// 简单写可以这么做

var now = + new Date();			

// HTML5中提供的方法，有兼容性问题

var now = Date.now();

• 日期格式化方法：

功能 方法名 代码实现
获取年份 getFullYear（） 对象名.getFullYear（）
获取月份 getMonth（） 对象名.getMonth（）
获取天数 getDate（） 对象名.getDate（）
获取星期 getDay（）（0-6） 对象名.getDay（）
获取小时 getHours（） 对象名.getHours（）
获取分钟 getMinutes（） 对象名.getMinutes（）
获取秒数 getSecond（） 对象名.getSecond（）

注意：月份和星期都是从 0 开始统计
使用月份记得 + 1
使用星期记得使用 数组 得到 星期数

• 倒计时计算

时间相减得到的就是毫秒数
秒数/60/60/24 得到的是天数
秒数/60/60%24 得到的是小时数
秒数/60%60 得到的是分钟数
秒数%60 得到的是秒数

• 简单数据类型和复杂数据类型

简单数据类型：值类型，在存储时，变量中存储的是值本身，他们相互之间不会影响
其中包括:String Number Boolean undefined null
Null 其实是一个bug 但是现在已经习惯了，所以没有在改正，
var timer = null;
console.log(typeof timer); // 返回的数据类型是 object 是历史遗留的一个bug
// 我们以后有个变量，我们不知道将来是什么数据类型或者 给什么值

• 复杂数据类型：

引用数据类型 在存储时， 变量中存储的是地址（引用）
其中包括：我们new出来的对象 （系统对象 内置对象） Array Object Date
他们存储其实都是存储的地址，都有指向性，都是通过地址找到他们，如果对象里面的数据改变了，所有指向这个对象的地址输出的数据都要相对应的改变。
Js还提供了三种特殊的 引用类型String Boolean Number
上述称为 基本包装类型 — 即把简单的数据类型包装为复杂数据类型–就有了属性和方法
按照我们学的简单数据类型是没有属性和方法的，但是js把他们包装为了复杂数据类型，先生成临时变量，然后转换为复杂数据类型
案例：str 字符串
// 下面代码的问题？
var str = ‘andy’;
console.log(str.length);
// 按道理 基本数据类型 是 没有属性和方法的
// 对象才有属性和方法的
// 这个原因是因为， js 会把 基本数据类型包装为复杂数据类型
// 执行过程如下 生成临时变量 把简单类型包装为复杂数据类型
var temp = new String(‘andy’); // 这些就是包装的过程 先new一个对象，然后赋值
// 赋值给 我们声明的 字符变量
str = temp;
// 销毁给临时变量
temp = null;

• String 对象

特性：不可变，指的是值不可变，赋值之后除非销毁否则一直存在，我们看到的改变其实改变的只是地址。
var str = ‘abc’;
str = ‘hello’;
// 当重新给str赋值的时候，常量’abc’不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

• 创建字符串对象：

Var str =’andy’;
Console.log (str); 简单的输出，我们看不到属性和方法 ，但是下面的可以
Var str1= new String（‘andy’）
Console.log （str1） //字符串经过基本包装可以看见属性和方法

• 字符串对象常用方法

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

• 1、获取字符串位置方法（根据字符返回位置）

indexOf（‘要查找的字符’，开始的位置（索引））—返回指定元素在原字符串中的位置，如果找不到就返回-1，开始的位置就是index的索引号
例如：

var str = 'my name is andy';
console.log(str.indexOf('n')); // 3
console.log(str.indexOf('l')); // -1

有时候一个字符串中会有相同的字符。此时就需要我们多次查找
// 2. 如果indexof 返回的结果 不是 -1 说明后面还有o 我们就继续查找 循环

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

另外一种方法：lastindexOf（）从后往前找第一个匹配的

• 2、根据位置获取字符

charAt（index） 返回指定位置的字符（index字符串的索引号）
案例：遍历得到全部字符

var str = 'andy';
console.log(str.charAt(0)); // a
// 可以遍历的方法 得到所有的字符串
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

charCodeAt（）返回指定位置处的字符的ASCII码（index索引号）
str（index） 返回指定位置处的字符（index字符串的索引号） HTML5 和IE8+支持等价于charAt

• 3、字符串操作方法

concat（str1，str2，str3…） 连接两个或者多个字符 等价于 + 同时 + 更加常用
// concat 进行字符串连接 和+ 等价

var str = 'ni hao ';
var str1 = 'ni zai gan ma';
console.log(str.concat(str1)); //输出 ni hao ni zai gan ma

substr（start，length）  其中length指截取的个数

例如：var str = ‘my name is andy’;

console.log(str.substr(1)); // y name is andy  默认从第1个到最后
console.log(str.substr(0, 2)); // my 从第0个开始，取2个
console.log(str.substr(3, 7)); //name  is 从第 3个索引号开始，取 7个

slice（start，end）截取到end的位置 但是end 截取不到，start和end都是索引号
substring(start, end)  用法和slice（）几乎是完全一样

• 4、replace（）替换

主要用在字符串中，用一些别的字符来替换当前的字符
格式-----：replace(被替换的字符串， 要替换为的字符串)；
案例：
分析：首先利用字符查找位置indexOf（）找到需要替换的字符
然后利用replace 把字符替换掉

var s = 'abcoefoxyozzopp';
while (s.indexOf('o') !== -1) {
    s = s.replace('o', '!');
}
console.log(s);  //这句代码一定要放在循环外部，如果放在循环内部，会使浏览器运行崩溃

• 转换大小写

toUpperCase（） // 转换大写
toLowerCase（） //转换为小写
案例：

var str = 'ANDY';
console.log(str.toLowerCase()); // andy   //  转换为小写
var str = 'andy';
console.log(str.toUpperCase()); // ANDY    //   转换为大写

• split（）切割字符串为数组

切割完毕之后，返回的是一个新数组
案例:

var str = 'a,b,c,d';
console.log(str.split(',')); //返回的是一个数组 [a, b, c, d]
// 切割字符串为数组 split()
var s = 'ab,co,ef,ox,yo,zz,op,p';
console.log(s.split(','));

Array数组

• 创建数组的两种方式

字面量创建：var arr = [3,4,5]
使用new Array （）创建 var arr= new Array（3,4,5）
获取数组中 元素的个数 arr.length

• 判断一个对象是否是数组

instanceof 判断一个对象是否是什么类型
Array.isArray（） html5中提供的方法，具有兼容性
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false/ .

• 数组常用方法

• 添加删除数组元素方法

push（参数…） 末尾添加一个或者多个数组元素，会修改原数组 并返回新的数组长度
// push

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.push('lightpink')); //  返回数组长度  4
console.log(arr); //  ['pink', 'deeppink', 'hotpink', 'linghtpink']

**pop（）**删除数组最后一个数组元素，把数组长度减 1 不需要填写参数，会修改原数组 返回删除的数组元素
// pop

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.pop()); // 返回删除的那1个元素  'hotpink'
console.log(arr); // 返回删除的那1个元素  ["pink", "deeppink"]

unshift（参数…） 向数组开头添加一个或者多个元素，会修改原数组 返回新的数组长度
// unshift

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.unshift('lightpink')); //  返回数组长度  4
console.log(arr); //  ['linghtpink','pink', 'deeppink', 'hotpink']

**shift（ 把数组的第一个元素从其中删除，**把数组长度减1，不需要填写参数，会修改原数组，返回删除的第一个数组元素）
// shift

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.shift()); // 返回删除的那1个元素  'pink'
console.log(arr); // 返回删除的那1个元素  ["deeppink", "hotpink"]

• 数组排序方法

**reverse（）颠倒数组中的数组元素，**无参数 该方法会改变原来的数组，返回新的数组，原来的数组也会被修改
// 翻转数组

var arr = [2, 4, 6, 1, 7];
var newArr = arr.reverse()
console.log(newArr); // 翻转数组

sort（）对数组的元素进行排序，该方法会改变原来的数组，返回新的数组，原来的数组也会被修改
// 数组元素排序

var arr = [2, 4, 6, 1, 7];
var newArr = arr.sort();
console.log(newArr); // 对数组进行排序

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a; // 降a序
    // return a - b;   升序
});
console.log(arr);

• 数组操作方法：

**concat（）连接两个或者多个数组，**不会改变原来的数组，返回值是返回一个新的数组
console.log(arr1.concat(arr2, arr3)); 语法
// 数组操作方法
// concat（）

var arr = [12, 13, 4, 1];
var arr1 = [6, 7, 8, ];
var arr2 = arr.concat(arr1); // 将arr 和 arr1 进行数组拼接
console.log(arr2);

数组的slice（）和字符的slice（）用法相同，参考字符

splice（第几个开始，要删除的个数） 进行数组删除 返回被删除了之后的新数组，这个操作方法会影响原来的数组
同时splice（） 还可以进行插入 替换数组等操作方法
// 数组删除 splice()

var arr = [12, 13, 4, 1];
var newArr = arr.splice(1, 2); //删除数组，从索引号为1的数组元素开始，删除两个元素
console.log(newArr);

• 数组的插入

// (3) 插入或者 替换数组中的元素 数组.splice(起始位置, [删除的个数], [元素1, 元素2…])

var arr4 = ['red', 'green', 'blue', 'pink'];
// arr4.splice(0, 0, 'hotpink');
// arr4.splice(0, 0, 'hotpink', 'lightpink');
// 在 索引号2 的位置 前面 插入 某几个元素 
arr4.splice(2, 0, 'hotpink', 'lightpink');
console.log(arr4);	

• 数组的替换

  // (4) 替换数组中的元素

var arr5 = [‘red’, ‘green’, ‘blue’, ‘pink’];
// 我们把 pink 颜色替换为 skyblue （删掉 pink 替换为 skyblue）
arr5.splice(3, 1, ‘skyblue’);
console.log(arr5);

- 清空数组的方式：

1、直接给数组赋值一个空数组
2、arr.length = 0
3、arr.splice（0，arr.length）

数组位置的方法：
indexOf（） 数组中查找给定元素的第一个索引 如果存在返回索引号，如果不存在返回-1
lastindexOf（）数组中的最后一份索引， 如果存在返回索引号，如果不存在返回-1