JS--ECMA

Yolo.H

已于 2022-03-04 00:48:40 修改

阅读量307

点赞数

分类专栏： # js 文章标签： javascript 前端

于 2022-03-02 14:05:05 首次发布

本文链接：https://blog.csdn.net/qq_49075665/article/details/123228542

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基础知识

JS是什么？

JavaScript：是一种运行在客户端的脚本语言。
客户端：自己的电脑，无需远程服务器
脚本语言：不需要编译，会逐行解释执行的高级编程语言

浏览器如何执行JS

浏览器有两部分：

渲染引擎：用于解析HTML和CSS，俗称内核
JS引擎（JS解释器）：用于读取网页中的JS代码，对其处理后运行

执行过程：JS引擎逐行解释每一句源码（转换为机器语言），然后由计算机执行

JS的组成

ECMAScript （JS基本语法）
DOM（页面文档对象模型）
BOM（浏览器对象模型）

JS的书写位置

行内式的js

 <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

内嵌式的js

<script>
        alert('沙漠')
</script>

外部js

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

JS的注释

单行注释 // ctrl+/
多行注释 /* */ 默认：shift + alt + a

Js的输入输出语句

prompt('弹出输入框')
alert('弹出框')
console.log('控制台')

变量

是什么

存放数据的容器（本质：程序在内存中申请的一块用于存放数据的空间）

变量的使用：声明+赋值

//声明一个age的变量
var age
//赋值  将值存入这个变量中
age = 18
console.log(age)

//声明变量并赋值 == 变量的初始化
var myName = 'hhh'
console.log(myName)

注意项：

更新变量：原有值被重新赋值后将被覆盖，以最后一次赋的值为准
同时声明多个变量，用,隔开：

var age = 18,
    address = '地球',
    sex = 'guess'

声明赋值多种情况

//变量只声明不赋值
var nam;
console.log(nam)  //undefined

//不生命只赋值
qq = 110
console.log(qq)   //110

//变量不声明不赋值
console.log(tel)  //报错

命名规范

严格区分大小写
变量名必须有意义
遵守驼峰命名法：首字母小写，后面单词的首字母需要大写 myFirstName
name有特殊含义，尽量不使用其作为变量名

了解：

不同数据类型，占据的内存空间也不同
js的变量数据类型只有程序在运行过程中，根据等号右边的值来确定的
js是动态语言，变量的数据类型是可以变化的
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型 / 基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，放到栈
string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，地址放在栈中，由栈中的地址到堆中值找
通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

JS数据类型

简单数据类型

Number数字型

//Number型数字包括整数，也包含小数
var age = 18
var PI = 3.14

//8进制：数字前加0
var num1 = 010
console.log(num1)  //8

//16进制：数字前加0x 0~9 a~f
var num2 = 0xa
console.log(num2)  //10

console.log(Number.MAX_VALUE)  //1.7976931348623157e+308  最大值
console.log(Number.MIN_VALUE)  //5e-324  最小值

console.log(Number.MAX_VALUE * 2) //Infinity  无穷大
console.log(-Number.MAX_VALUE * 2);  //-Infinity  无穷小

console.log('pink' - 100); //NaN  非数字


//能够判断是否是非数字
console.log(isNaN(100));    //不是非数字 false
console.log(isNaN('pink'))  //非数字 true

String字符串型

注意：

JS中"" 、''都可以使用，但更推荐''
JS的引号遵循就近原则，在字符串中需要增加引号时，可使用外单内双，外双内单的原则
转义字符

//1.检测字符串的长度
var str = 'my name is kangkang'
console.log(str.length)  //19

//2.字符串的拼接，字符串+任何类型 =字符串
console.log('沙漠' + '骆驼')  //沙漠骆驼
console.log('骆驼重' + 131);  //骆驼重131

//3.变量----字符串相连的方式
var weight = 131
console.log('骆驼重' + weight + '斤');

Boolean布尔型

var flag1 = true
var flag2 = false
console.log(flag1 + 1)  //2  true参与加法运算,当1
console.log(flag2 + 1)  //1  false参与加法运算,当0

undefined和null

//当一个变量仅声明不赋值,undefined
var str;
console.log(str)
var va = undefined
console.log(va + 'hhh')     //undefinedhhh
console.log(va + 1)         //NaN

//null 空值
var space = null
console.log(space + 'hhh')   //nullhhh
console.log(space + 1)       //1

获取数据类型

typeof

var age = prompt('请输入你的年龄')
console.log(age)    //18
console.log(typeof (age))   //string

chrome浏览器中的颜色

浅蓝色–number
黑色–string
深蓝–boolean
浅灰–undefined,null

字面量：简单即可看出是哪种数据类型

数字字面量：0，8，9
字符串字面量：‘前端’
布尔字面量：true,false

数据类型转换

1. 转换为字符串类型：一般采用第三种

// 1.  使用 变量.toString() 
var num = 10
var str = num.toString();
console.log(typeof (str));  //string

//2. 使用String()
console.log(String(num));  //黑色的10

//3. 利用 + 拼接字符串 ,这是一种隐式转换
console.log(num + '')      //黑色的10

2. 转换为数字型：一般采用第一和第二种

//1.  parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
console.log(parseInt('2.14'));      //2  取整
console.log(parseInt('2.98'));      //2  取整
console.log(parseInt('2.98px'));    //2 会去掉px这个单位
console.log(parseInt('rem2.98px')); //NaN

//2. parseFloat(变量)  可以把字符型的转换为数字型 得到的是小数、浮点型
console.log(parseFloat('2.14'));       //2.14
console.log(parseFloat('2.98px'));     //2.98 会去掉px这个单位
console.log(parseFloat('rem2.98px'));  //NaN

//3，利用Number(变量)
var str = '123'
console.log(Number(str));  //123

//4. 利用算式运算 - * /  隐式转换
//注意：+号不行，因为字符串中+号可以拼接
console.log('12' - 0);          //12
console.log('123' - '120');     //3
console.log('123' * 1);         //123

3. 转换为布尔型：Boolean(变量)

//代表空、否定的值会被转换为 false  ，如 ''、0、NaN、null、undefined 
//其余值都会被转换为 true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

扩展知识

编程语言经过`翻译器`被翻译成机器语言。

翻译器翻译的方式有两种：（翻译的时间点不同）

编译（先翻译，生成中间代码文件，再执行代码）
解释（边解释边执行）

标识符：为变量、属性、函数、参数取的名字

关键字：JS本身已经使用的字

保留字：预留的关键字，如`let`、`package`等

JS运算符

1. 算术运算符 `+`，`-`，`*`，`/`，`%`

浮点数: 存在浮点数精度问题，不能直接判断两个浮点数是否相等
表达式：是由数字、运算符、变量组成的式子
表达式最终会有一个结果，返回给我们，称为返回值
++num 先自加，再返回值
num++ 先返回值，再自加

2. 比较运算符

== 默认转换数据类型: 会把字符串型的数据转换为数字型的

console.log(18 == 18)
console.log(18 == '18')

=== 要求数据类型和数值全相同，才为true

3. 逻辑运算符

&& 逻辑与
|| 逻辑或
！ 逻辑非

短路运算（逻辑中断）

逻辑与：

表达式1 && 表达式2
如果第一个表达式为真，则返回表达式2
如果第一个表达式为假，则返回表达式1

console.log(11 && 98)  //98
console.log(0 && 98)   //0

逻辑或：

表达式1 || 表达式2
如果第一个表达式为真，则返回表达式1
如果第一个表达式为假，则返回表达式2

console.log(11 || 98)  //11
console.log(0 || 98)   //98

逻辑中断会影响运算结果

var num = 0
console.log(123 || num++)  //123
console.log(num) //0  因为123 || num 先执行，这是一处逻辑中断，之后的num++ 不执行了，所以num依旧为0

4. 运算符优先级

选择

`if`语句

if () {
  
} else if () {
   
} else if () {

} else if () {

} else {

}

`switch`语句

var f = prompt('请输入你要查询的水果')
switch (f) {
    case '榴莲':
        alert('35元/斤')
        break
    case '苹果':
        alert('3.5元/斤')
        break
    default:
        alert('没有此水果')
}

两者比较

分支比较少，if…else 执行效率比较高
分支比较多，switch执行效率比较高

三元表达式

console.log(5 > 3 ? 'Yes' : 'No')

循环

for循环

//双重for循环
var str = ''
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str += '♥'   
    }
    str += '\n'
}
console.log(str)

/*采用字符串追加的方式才能实现这样完整输出
♥♥♥♥♥
♥♥♥♥♥
♥♥♥♥♥
♥♥♥♥♥
♥♥♥♥♥
*/

while循环：

while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

while(条件表达式){
	循环体
}

do-while循环：

先执行一次循环体代码
再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

continue与break

continue: 立即跳出本次循环，继续下一次循环
break: 立即跳出整个循环（循环结束）

数组

创建

利用new创建数组： var arr = new Array()
（常用）利用数组字面量创建数组 var arr = []

获取数组元素
使用下标（索引），从0开始，格式：数组名[下标]

var arr = ['地理人吧']
console.log(arr[0]);   //地理人吧
console.log(arr[1]);   //undefined

遍历数组: for循环
数组长度：数组名.length
新增数组元素

// 1. 新增数组元素 修改length长度 
var arr = ['red', 'green', 'blue'];
arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

// 2. 新增数组元素 修改索引号 追加数组元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
 arr1 = '有点意思';
console.log(arr1); // 有点意思 不要直接给 数组名赋值 否则里面的数组元素都没有了

函数

概念：封装一段可以被重复执行调用的代码块
目的：让大量代码可以被重复使用
使用：

函数表达式（）

//1.声明函数
var fun = function(形参1,...){
	函数体
}

//2.调用函数
fun(实参1,...)

简单函数体

//1.声明函数
function 函数名() {
    函数体
}
//2.调用函数
函数名()

带参数的函数体

//1.声明函数
function 函数名(形参1,形参2,...) {
    函数体
}
//2.调用函数
函数名(实参1，实参2,...)

// 形参和实参个数相等，一一对应
// 实参个数多于形参，从前取对应的形参
// 实参个数少于形参，多余的形参定义为undefined

有返回值的函数体

// 声明函数
function 函数名（）{
    ...
    return  返回值；
}
// 调用函数
var re=函数名();    // 此时调用函数就可以得到函数体内return 后面的值,在实际开发里，一般用一个变量来接受函数的返回值
console.log(re)  //可以通过控制台知道返回值

//return只能返回一个值，并且只返回最后一个数
//若要返回多个值，可以封装在数组里

注意：

函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined

例子

//1.声明函数
function getSum() {
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i
    }
    console.log(sum);
}
//2.调用函数
getSum()

//1.声明函数
function getSum(num1, num2) {
    console.log(num1 + num2);
}
//2.调用函数
getSum(2, 3)

//1.声明函数
function getRe(num1, num2) {
    return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]
}

//2.调用函数
var re = getRe(88, 4)
console.log(re);

Arguments

只有函数才有arguments对象，而且是每个函数都内置了这个arguments
arguments展示形式是一个伪数组,接受调用函数时所传递的实参

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

作用域

全局作用域
局部作用域
块级作用域：js在es6中才新增的

if(3<5){
	var num==5
	//num在{}里声明的，以外的区域访问不到
}

作用域链：采取就近原则的方式来查找变量最终的值。

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;  
f1();  //123

全局变量与局部变量

全局变量:

在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

局部变量

在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

预解析

js引擎运行js 分为两步：预解析代码执行

预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
代码执行按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

例子：

var num = 10;
fun();
function fun() {
   	console.log(num);
    var num = 20;

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

对象

定义：是一个具体的事物，实实在在存在的，具有属性和方法两种特性
属性：事物的特征
方法：事物的行为

创建对象

利用字面量创建对象 {}

()运算符
[] 数组字面量
{}对象字面量

变量与属性：都用来存储数据的 
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

函数与方法：都是实现某种功能,做某件事
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

//创建对象
var obj = {
    //属性名：键:值,
    uname: '张三丰',
    age: 18,
    sex: '男',

    //方法名：匿名函数
    sayHi: function () {
        console.log('Hi')
    }
}

//使用对象
//属性： 对象名.属性名
console.log(obj.uname);

//属性：对象名['属性名']，
console.log(obj['uname']);

//方法：对象.方法名()
obj.sayHi()

利用 new Object来创建对象

//创建对象
var obj = new Object()
//利用 等号 = 赋值 的方法 添加属性和方法
obj.name = '鸣人'
obj.sex = '男'
obj.age = '19'
obj.skill = '影分身术'
obj.sayHi = function () {
    console.log('Hi')
}

console.log(obj.name)
console.log(obj['age'])
obj.sayHi()

利用构造函数的方式创建对象
以上两种方法一次只能创建一个对象
构造函数：就是将对象里面一些相同的属性和方法抽象出来封装到函数里，构造函数中封装的不是普通代码，而是对象
构造函数：封装了对象的公共部分，泛指某一大类
对象：具体指到一个，通过new关键字创建对象的过程成为对象实例化

//利用构造函数创建对象

// function 构造函数名() {
//     this.属性 = 值;
//     this.方法 = function () {

//     }
// }

//调用构造函数的同时已经创建了对象
// new 构造函数名()

//注意点：
// 1. 构造函数名首字母大写
// 2.构造函数不需要return,就可以返回结果

function Star(nam, age, sex) {
    this.nam = nam
    this.age = age
    this.sex = sex
    this.sing = function (song) {
        console.log(song);
    }
}
var ldh = new Star('刘德华', 18, '男')
console.log(ldh.nam);
ldh.sing('冰雨');

var zxy = new Star('张学友', 21, '男')
console.log(zxy.nam);
zxy.sing('风花');

New关键字

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

遍历整个对象

var obj = {
    name: 'pink老师',
    age: 18,
    sex: '男',
    fn: function () { }
}
// for in 遍历我们的对象
// for (变量 in 对象) {

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

内置对象

Math对象：

// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN 

// 2.三个取整方法
// (1) Math.floor()   地板 向下取整  往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1

//3.最大值
Math.max()
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1

//4.最小值
Math.min()
console.log(Math.max(1, 99, 'pink老师')); // NaN
console.log(Math.max()); // -Infinity

//5.PI
Math.PI	
console.log(Math.PI);

//6.随机数
// 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证 
console.log(Math.random());
// 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 5. 随机点名  
var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
console.log(arr[getRandom(0, arr.length - 1)]);

Date对象

//Date() 日期对象是一个构造函数，必须使用new来调用创建日期对象
//Date对象是基于1970年1月1日（世界标准时间）起的毫秒数
//1.使用Date 没有参数，返回当前系统的当前时间
var date = new Date();
console.log(date)
//2.返回当前的年份
console.log(date.getFullYear());
//3.返回当前的月份小1个月,要+1
console.log(date.getMonth());
console.log(date.getMonth() + 1);
//4.返回几号
console.log(date.getDate());
//5.返回星期， 星期日-星期六 0-6
console.log(date.getDay());
//6.返回时
console.log(date.getHours());
//7.返回分
console.log(date.getMinutes());
//8.返回秒
console.log(date.getSeconds());
//9.返回距离1970年1月1日过了多少毫秒（时间戳，永远不会重复）
console.log(date.valueOf());
console.log(date.getTime());
var dat = +new Date();  //+new Date() 最常用的写法
console.log(dat)
console.log(Date.now()) //H5新增的，最简单的

//10.参数常用的写法
//-数字型
var date1 = new Date(2019, 10, 1)
console.log(date1);  //Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
//-字符串型（主要）
var date2 = new Date('2019-10-1 8:8:8')
console.log(date2); //Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)


//格式化时分秒
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}

// 格式化 2019年 5月 1日 星期三
function getYMD() {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    return ('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
}

//倒计时效果
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);

数组对象

//检测是否为数组
// 1.instanceof
var arr = []
console.log(arr instanceof Array);  //true
//2. Array.isArray(参数)  H5新增的,ie9以上版本支持
console.log(Array.isArray(arr));    //true

//添加删除数组元素
//1.push() 在数组末尾添加一个或多个数组元素  返回新数组的长度
var arr = [1, 2, 3]
// arr.push(4, 'Pink')
console.log(arr.push(4, 'Pink'));  //5
console.log(arr);   //(5) [1, 2, 3, 4, "Pink"]
//2.unshift('red') 在数组头增加新的元素    返回新数组的长度
console.log(arr.unshift(0, 'youyouo'));  //7
console.log(arr);   //[0, "youyouo", 1, 2, 3, 4, "Pink"]

//删除元素
//1.pop  删除最后一个元素  返回要删除的元素
console.log(arr.pop())
console.log(arr);
//2.shift()  删除第一个元素  返回要删除的元素
console.log(arr.shift())
console.log(arr);

//数组排序
//1.翻转数组
var arr = ['red', 'pink', 'green']
arr.reverse()
console.log(arr);

//2.数组排序（冒泡排序）
var arr = [3, 9, 7, 8]
arr.sort()
console.log(arr);  //[3, 7, 8, 9]

var arr = [3, 43, 2, 18]
arr.sort()
console.log(arr);  //[18, 2, 3, 43]  此处是一位一位比较

var arr = [3, 43, 2, 18]
arr.sort(function (a, b) {
    return a - b //升序   [2, 3, 18, 43]
    // return b - a  //降序  [43, 18, 3, 2]
})
console.log(arr);


// 数组索引  
// indexOf  返回第一个该数组元素的索引号，当找不到该元素的时候，返回-1
var arr = ['red', 'pink', 'green', 'red']
console.log(arr.indexOf('red'));  //0
// lastIndexOf
console.log(arr.lastIndexOf('red'));  //3

//数组去重
function unique(arr) {
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        if (i === arr.indexOf(arr[i])) {
            newArr.push(arr[i])
        }
    }
    return newArr
}
var re = unique([2, 3, 5, 67, 2, 3, 4, 5, 7])
console.log(re);

//数组转换成字符串
//1.toString() 
var arr = ['red', 'pink', 'green', 'red']
console.log(arr.toString());  //red,pink,green,red
//2.分隔符
var arr = ['red', 'pink', 'green', 'red']
console.log(arr.join());  //red,pink,green,red
console.log(arr.join('-')); //red-pink-green-red
console.log(arr.join('/'));//red/pink/green/red

在这里插入图片描述

基本包装类型

// 基本包装类型
var str = 'andy';
console.log(str.length);

对象才有属性和方法复杂数据类型才有属性和方法
简单数据类型为什么会有length 属性呢？
基本包装类型： 就是把简单数据类型 包装成为了 复杂数据类型
三种基本包装类型：String,Number,Boolean

//故：
// 基本包装类型
var str = 'andy';
console.log(str.length);

// (1) 把简单数据类型包装为复杂数据类型 
var temp = new String('andy');
// (2) 把临时变量的值 给 str
str = temp;
// (3) 销毁这个临时变量
temp = null;

字符串对象

// 字符串的不可变性
// 指的是里面的值不可变
// 虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
// 故不要大量的拼接字符串


//根据字符返回位置
//字符串名.indexOf('要查找的字符',开始的位置)  找不到则返回-1
var str = '改革春风吹大地,春天来了'
console.log(str.indexOf('春'));  //2  第一个'春'
console.log(str.indexOf('春', 3));  //8
//字符串名.lastIndexOf('要查找的字符')  从后往前找，返回第一个匹配的字符
console.log(str.lastIndexOf('春'));  //8


// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

//根据位置返回字符
//1.chatAt(index)
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}
// 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a

//  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// o.a = 1
// o.b = 1
// o.c = 1
// o.o = 4
// 核心算法：利用 charAt(） 遍历这个字符串
// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // chars 是 字符串的每一个字符
    if (o[chars]) { // o[chars] 得到的是属性值
        o[chars]++;
    } 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('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));

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

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

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

//转换大写
toUpperCase()

//转换小写
toLowerCase()