JS基础知识总结
JavaScript的作用域
JavaScript作用域
就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突
js的作用域（es6）之前 ： 全局作用域 局部作用域
-
全局作用域： 整个script标签 或者是一个单独的js文件
-
局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
变量的作用域
根据作用域的不同我们变量分为全局变量和局部变量
全局变量：
-
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)
-
全局变量在代码的任何位置都可以使用
-
在全局作用域下var 声明的变量是全局变量
注意：如果在函数内部 没有声明直接赋值的变量也属于全局变量
局部变量：
-
在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
-
局部变量只能在该函数内部使用
-
在函数内部var声明的变量是局部变量
注意： 函数的形参也可以看做是局部变量
从执行效率来看全局变量和局部变量
(1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
注意：现阶段js 没有 块级作用域，js 在 es6 有新增的块级作用域
作用域链
内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链，（就近原则）
JavaScript预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
预解析：js引擎运行js 分为两步： 预解析 代码执行
(1) 预解析 js引擎会把js 里面所有的 var（声明） 还有 function（函数） 提升到当前作用域的最前面
(2) 代码执行 按照代码书写的顺序从上往下执行
预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
JS预解析案例拓展：
进行JS预解析和变量声明提升
console.log(num); // undefined 坑 1
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;
进行JS预解析，函数声明提升
fun(); // 报错 坑2 调用时前面无fun()函数
var fun = function () {
console.log(22);
}
// 函数表达式 调用必须写在函数表达式的下面
// 相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
// console.log(22);
// }
进行函数声明提升
fn();
function fn() {
console.log(11);
}
// 相当于执行了以下代码
// function fn() {
// console.log(22);
// }
// fn();
重点案例：集体声明时，只有第一个值为var 声明赋值，其余值全部为全局变量赋值
fn();
console.log(c); // 9
console.log(b); // 9
console.log(a); // 报错
function fn() {
var a = b = c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
// 相当于执行以下代码
// function fn() {
// 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); // 9
// console.log(b); // 9
// console.log(c); // 9
// }
// fn();
// console.log(c); // 9
// console.log(b); // 9
// console.log(a); // 报错
JavaScript对象
对象是一个具体的事物，看得见摸得着的实物。
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
-
属性∶事物的特征，在对象中用属性来表示(常用名词)
-
方法：事物的行为，在对象中用方法来表示(常用动词)
对象的创建：
在JavaScript中，现阶段我们可以采用三种方式创建对象( object ) :
利用字面量创建对象；利用new Object创建对象；利用构造函数创建对象
字面量创建对象
var obj = {}; // 创建了一个空的对象
var obj = { 属性名: 属性值, 属性名: 属性值... };
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
(1) 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
(2) 多个属性或者方法中间用逗号隔开的
(3) 方法冒号后面跟的是一个匿名函数
对象的调用:
-
对象里面的属性调用：对象.属性名，这个小点.就理解为“的”
-
象里面属性的另一种调用方式:对象[‘属性名’]，> 注意方括号里面的属性必须加引号， 对象里面的方法调用∶对象.方法名()，> 注意这个方法名字后面一定加括号
new Object创建对象
var obj = new Object(); // 创建了一个空的对象
var obj = new Object();
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
(1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
(2) 每个属性和方法之间用 分号结束
构造函数创建对象
因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
又因为这个函数不一样，里面封装的不是普通代码，而是 对象
构造函数 就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数的语法格式
function 构造函数名() { //构造函数名首字母大写
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名();
-
构造函数名字首字母要大写
-
我们构造函数不需要return 就可以返回结果
-
我们调用构造函数 必须使用 new
-
我们只要new Star() 调用函数就创建一个对象 ldh {}
-
我们的属性和方法前面必须添加 this 进行接收
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(ldh.name);
console.log(ldh['sex']);
构造函数和对象
构造函数 明星 泛指的某一大类 它类似于 java 语言里面的 类(class)
创建对象，如new Stars)，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
构造函数中new 关键字的执行过程
new在执行时会做四件事情:
-
在内存中创建一个新的空对象。
-
让this指向这个新的对象。
-
执行构造函数里面的代码，给这个新对象添加属性和方法。
-
返回这个新对象（所以构造函数里面不需要return )。
遍历对象
for…in语句用于对数组或者对象的属性进行循环操作。
for (var k in obj) {
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
}
使用 for…in 里面的变量 我们喜欢写 k 或者 key
变量、属性、函数、方法的区别：
变量和属性的相同点 他们都是用来存储数据的
变量 单独声明并赋值 使用的时候直接写变量名 单独存在
属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
函数和方法的相同点 都是实现某种功能 做某件事
函数是单独声明 并且调用的 函数名() 单独存在的
方法 在对象里面 调用的时候 对象.方法()
对象总结
-
对象可以让代码结构更清晰
-
对象复杂数据类型object。
-
本质∶对象就是一组无序的相关属性和方法的集合。
-
构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果
-
对象实例特指一个事物，比如这个苹果、正在给你们讲课的老师等。
-
for …in语句用于对对象的属性进行循环操作。
JS对象拓展案例：
判断是否有该属性 对象[‘属性名’]
var o = {
age: 18
}
if (o['sex']) { // 判断对象中是否有某个属性
console.log('里面有该属性');
} else {
console.log('没有该属性');
}
JavaScript内置对象
JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象
前面两种对象是js基础内容，属于ECMAScript；第三个浏览器对象属于JS独有，在JS API讲解
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
JavaScript提供了多个内置对象∶Math、Date . Array、String等
查文档
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN )提供了有关开放网络技术(Open Web )的信息，包括HTML、CSS和万维网及HTML5应用的 API。
MDN: https://developer.mozilla.org/zh-CN/
如何学习对象中的方法
-
查阅该方法的功能
-
查看里面参数的意义和类型
-
查看返回值的意义和类型
-
通过demo进行测试
Math对象
Math是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象。
Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
| 方法 | 描述 |
|---|---|
| Math.PI | 圆周率 |
| Math.max(1， 2， 3); | 求1，2，3中的最大值，如果没有参数，则结果为-Infinity，如果有任一参数不能被转换为数值，则结果为NaN |
| Math.abs(); | 取绝对值，隐式转换 会把字符串型 “-1” 转换为数字型 |
| Math.floor(); | 向下取整，往小了取，有小数去除小数位 |
| Math.ceil(); | 向上取整，往大了取，有小数个位数 +1 |
| Math.round(); | 四舍五入，但是 .5 特殊 它往大了取。console.log(Math.round(1.5)); // 2。console.log(Math.round(-1.5)); // -1 |
| Math.random(); | 取随机数, random() 返回一个随机的小数 0 =< x < 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(1, 10));
案例：随机点名
var arr = ['张三', '李四', '王五', '赵六', '刘七'];
// console.log(arr[0]);
// console.log(arr[getRandom(0, 4)])
console.log(arr[getRandom(0, arr.length - 1)]);
案例：猜数字游戏
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) { // 避免死循环，正确时退出循环
var num = prompt('你来猜？ 输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你好帅哦，猜对了');
break; // 退出整个循环结束程序
}
}
Date对象
Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var date = new Date(); // Date实例用来处理日期和时间
-
使用Date 如果没有参数 返回当前系统的当前时间
-
带参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 ‘2019-10-1 8:8:8’
如果括号里面有时间，就返回参数里面的时间。例做旧期格式字符串为‘2019-5-1’可以写成newDate(2019-5-1’)或者new Date(2019/5/1)
日期格式化
需要获取日期指定的部分，所以我们要手动的得到这种格式。
| 方法 | 描述 | 案例 |
|---|---|---|
| getFullYear() | 获取当年 | Date.getFullYear() |
| getMonth() | 获取当月(0-11) | Date.getMonth() |
| getDate() | 获取当天日期 | Date.getDate() |
| getDay() | 获取星期几(周日0到周六6) | Date.getDay() |
| getHours() | 获取当前小时 | Date.getHours() |
| getMinutes() | 获取当前分钟 | Date.getMinutes() |
| getSeconds() | 获取当前秒钟 | Date.getSeconds() |
案例：返回当前年，月，日，星期
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
案例：封装一个函数返回当前的时分秒 格式 08:08:08
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;
}
console.log(getTimer());
获取曰期的总的毫秒形式
Date对象是基于1970年1月1日（世界标准时间）起的
我们经常利用总的毫秒数来计算时间，因为它更精确
- 通过 valueOf() getTime() 获得Date总的毫秒数(时间戳)
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
- 简单的写法 (最常用的写法)
var date = +new Date(); // 为空返回当前的总毫秒数，不为空返回输入的总毫秒数
- H5 新增的 获得总的毫秒数
console.log(Date.now()); // 当前时间戳
拓展案例：
输入的时间减去现在的时间就是剩余的时间，即倒计时
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('2050-1-1 00:00:00'));
Array对象（数组）
数组的创建
- 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
- 利用new Array()
var arr1 = new Array(); // 创建了一个空的数组
var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
判断是否为数组
- 参数 instanceof Array; 运算符 它可以用来检测是否为数组
console.log(arr instanceof Array); 如果是数组返回值为true，不是数组返回值为false
- Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr)); 如果是数组返回值为true，不是数组返回值为false
数组元素添加删除
| 方法 | 描述 | 返回值 |
|---|---|---|
| push(参数1…) | 末尾添加一个或多个元素，> 注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1…) | 向数组的开头添加一个或更多元素，> 注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 返回第一个元素的值 |
添加：push(末尾添加); unshift(首添加);
push 是可以给数组末尾追加新的元素
push() 参数直接写 数组元素就可以了，push完毕之后，返回的结果是新数组的长度，原数组也会发生变化
var arr = [1, 2, 3];
console.log(arr.push(4, 5));
unshift是可以给数组前面追加新的元素
unshift() 参数直接写 数组元素就可以了,unshift完毕之后，返回的结果是新数组的长度 ,原数组也会发生变化
console.log(arr.unshift('red', 'blue'));
删除：pop(末尾删除); shift(首删除);
pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
pop() 没有参数， pop完毕之后，返回的结果是删除的那个元素 ，原数组也会发生变化
console.log(arr.pop());
shift是可以删除数组的第一个元素 记住一次只能删除一个元素
shift() 没有参数，shift完毕之后，返回的结果是删除的那个元素，原数组也会发生变化
console.log(arr.shift());
数组添加删除拓展案例：
把数组中工资超过2000的删除
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);
数组排序
| 方法 | 描述 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组返回新数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组返回新数组 |
- 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
- 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
数组的索引方法
| 方法 | 描述 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号如果不存在，则返回-1 |
| lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号如果不存在，则返回-1 |
| indexOf(数组元素) | 作用就是返回该数组元素的索引号，从前面开始查找 | 返回第一个满足条件的索引号，它如果在该数组里面找不到元素，则返回的是 -1 |
| lastIndexOf(数组元素) | 作用就是返回该数组元素的索引号 从后面开始查找 | 返回第一个满足条件的索引号，它如果在该数组里面找不到元素，则返回的是 -1 |
数组索引拓展案例：
把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重
核心算法： 遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['blue', 'green', 'blue'])
console.log(demo);
数组转换为字符串
| 方法 | 描述 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join("分隔符”) | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
join(分隔符)
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('&')); // green&blue&pink
数组中常用的其他方法
| 方法 | 描述 | 返回值 |
|---|---|---|
| concat() | 连接两个或多个数组不影响原数组 | 返回一个新的数组 |
| slice() | 数组截取slice(start, end) | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组。> 注意：这个会影响原数组 |
concat() 连接两个或多个数组不影响原数组，返回一个新的数组不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。
使用方法 arr1.concat(arr2); 把arr2数组拼接到arr1数组的后面
function cat(arr1, arr2) {
var newArr = arr1.concat(arr2);
return newArr;
}
console.log(cat([1, 2, 3], [4, 5]));
slice() 数组截取slice(start, end)，以新的数组对象，返回数组中被选中的元素，从start开始到end结束，但不包括end，返回被截取项目的新数组
var arr = [1, 2, 3, 4, 5, 6];
var excision = arr.slice(3, 5);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(excision); // [4, 5]
splice() 向数组添加/删除项目，并返回删除的项目，splice(第几个开始,要删除个数)，返回被删除项目的新数组> 注意，这个会影响原数组
var arr = ["red", "green", "blue", "white", "black", "grey"];
var cat = arr.splice(3, 2);
console.log(arr); // ["red", "green", "blue", "grey"]
console.log(cat); // ["white", "black"]
注意：slice() 方法不会改变原始数组，splice() 方法会改变原始数组（重点）。
字符串对象
基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
基本包装类型： 就是把简单数据类型包装成为了复杂数据类型，因为复杂数据类型才有属性和方法
// 1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new string ( 'andy" ) ;
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;
字符串的不可变：
-
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
-
因为我们字符串的不可变所以不要大量的拼接字符串
根据指定字符返回位置
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
| 方法 | 描述 |
|---|---|
| indexOf(“要查找的字符”,开始的位置(索引号)) | 返回指定内容在元字符串中的位置，如果找不到就返回-1 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
字符串对象 根据字符返回位置 str.indexOf(‘要查找的字符’, [起始的位置即索引号])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春')); // 2
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找
字符串返回位置拓展案例：
查找字符串"abcoefoxyozopp"中所有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("o出现的索引为：" + index);
num++;
index = str.indexOf('o', index + 1); // 查询的字符串后面没有o，index的值才为-1
}
console.log('o出现的次数是: ' + num);
根据位置返回字符
| 方法 | 描述 | 案例 |
|---|---|---|
| charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
- charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
- charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键
console.log(str.charCodeAt(0)); // 97
- str[index] H5 新增的
console.log(str[0]); // a
字符串对象拓展案例：
判断一个字符串"abcoefoxyozzopp’中出现次数最多的字符，并统计其次数。
核心算法：利用charA(）遍历这个字符串，把每个字符都存储给对象， 如果对象没有该属性，就为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]++; // 有o.chars属性，0.chars的属性值+1
} else {
o[chars] = 1; // 没有o.chars属性，0.chars的属性值赋值为1
}
}
console.log(o);
// 遍历对象，获取最大值
var max = 0;
var ch = '';
for (var k in o) { // k 得到是 属性名，o为对象，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相同但是不接受负值 |
arr.concat(‘字符串1’,‘字符串2’…) 字符串拼接在arr的后面拼接
var str = 'andy';
console.log(str.concat('red'));
substr(‘截取的起始位置’, ‘截取几个字符’);
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 第一个2 是索引号 第二个2 是取几个字符
字符串拼接和转换数组操作
替换字符 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);
字符转换为数组 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] 利用字符串中 “ & ” 进行分割
其他字符串操作
toUpperCase() //转换大写
toLowerCase() //转换小写
封装对象
利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
},
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
JavaScript数据类型
简单数据类型和复杂数据类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
简单数据类型（值类型）
简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number , boolean, undefined , null
注意：null 返回的是一个空的对象 object，如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null
复杂数据类型（引用类型）
复杂数据类型（引用类型）︰在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆和栈
堆栈空间分配区别:
-
栈(操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。（简单数据类型存放到栈里面）
-
堆(操作系统）∶存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。（复杂数据类型存放到堆里面）
JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式
存储分配
简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
传参
简单数据类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a) { // 通过形参 a 传参 x
a++;
console.log(a); // 11
}
var x = 10;
fn(x);
console.log(x); // 10
复杂数据类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person(name) { // 通过name 传参 “刘德华”
this.name = name;
}
function f1(x) { // 通过 x 传参 p
console.log(x.name); // 2. 这个输出什么 ? 刘德华
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ? 张学友
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ? 刘德华
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 张学友
拓展知识
解释型语言和编译语言
翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
标识符、关键字、保留字
标识符：
标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
关键字：
关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括: break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
保留字：
保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括: boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、 short、static、super、synchronized,throws、transient、volatile等。
断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
