看哪一个函数是闭包函数,主要四个先决条件,缺一不可
外部函数是否被调用
内部函数是否和外部函数形成嵌套
内部函数是否作为外部函数的返回值
内部函数是否引用了外部函数的局部变量
JavaScript中的数据类型
数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数值型 | 0 |
String | 字符串型 | “” |
Boolean | 布尔型 | false |
null | 空值 | null |
undefined | 声明了变量,但未赋值 | undefined |
null的类型为object
数值型简介
- Number
- 数值型的范围(最大值:
Number.MAX_VALUE
;最小值:Number.MIN_VALUE
) - 三个特殊值(
infinity
、-infinity
、NaN
) isNaN
–用来判断一个变量是否为非数字的类型,返回true / falseisNaN(x)
如果x为数字,则返回falseisNaN(x)
如果x不为数字,则返回true
- 数值型的范围(最大值:
字面量
- 字面量简单概括就是肉眼可见一个值的类型是什么
- 如下
数字字面量:1,2,3
字符串字面量:‘hello world’
布尔字面量:true、false
数据类型的转换
转换为字符串
方式 | 说明 | 案例 |
---|---|---|
toString | 转换成字符串 | var num = 1; num.toString() |
String() | 转换成字符串 | var num = 1; String(num) |
+ | 与字符串拼接的结果都是字符串(隐式转换) | var num = 1; num + ‘hello world’ |
转化为数值
方式 | 说明 | 案例 |
---|---|---|
parseInt()函数 | 将string转换为数值 | parseInt('89') |
parseFloat()函数 | 将string转换为浮点值 | parseFloat('89.12') |
Number()强制转换 | 将string转换为数值 | Number('1234') |
- * / | 利用算数运算符可以隐式转换 | '10-0' |
转换为布尔
方式 | 说明 | 案例 |
---|---|---|
Boolean() | 将其它类型转换为布尔 | Boolean('11') |
- 代表空、否定的值都会被转换为false,如’’ 0 NaN null undefined
运算符
算数运算符
+ - * / % 分别为 加 减 乘 除 取余
递增递减运算符
++ --
- 前置先自加,后返回值
- 后置先返回原值,后自加
var num = 10;
console.log(++num + 10); //21
console.log(num++ + 10); // 20
- 1
- 2
- 3
- 4
比较运算符
< > <== >== == != !== ===
!== **===**两者表示全等,要求值与数据类型都要一致
console.log(18 == '18'); //true
console.log(18 === '18'); //false
- 1
- 2
逻辑运算符
&& || !
- && 两边都是 true才返回 true,否则返回 false
- ** ||**两边都是 false才返回 false,否则返回 false
- !为取反
!true
的值为false
//如果第一个表达式的值为真,则返回表达式1
//如果第一个表达式的值为假,则返回表达式2
console.log(2||3); // 2
console.log(0||3); // 3
//如果第一个表达式的值为真,则返回表达式2
//如果第一个表达式的值为假,则返回表达式1
console.log(2&&3); // 3
console.log(0&&3); // 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
赋值运算符
= += -= *= /= %=
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
- 1
- 2
- 3
- 4
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
流程控制概念
- 流程控制三种结构顺序结构、分支结构和循环结构
顺序结构
程序按照代码的先后顺序执行(没有特定的语法结构)
分支结构
- if语句、if else语句、if else if语句
if(条件表达式){
} else if(条件表达式) {
} else {
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- switch语句
switch(表达式){
case value1:
// 表达之等于value1时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
三元表达式
表达式1 ? 表达式2 : 表达式3;
如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值
循环结构
for循环
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
- 1
- 2
- 3
while循环
while (条件表达式) {
// 循环体代码
}
- 1
- 2
- 3
do-while循环
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
- 1
- 2
- 3
break
continue
的作用
- break 关键字用于立即跳出整个循环(循环结束)。
- continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
数组
创建数组的两种方法
var arr = new Array(); //创建一个新的空数组
-------
var arr = []; //创建一个新的空数组(用字面量创建)
- 1
- 2
- 3
获取数组中元素的方法
- 通过索引来获取(数组下标从0开始)
var arr = ['a','b','c'];
console.log(arr[1]); // 获取 b
- 1
- 2
注意:如果访问时数组没有和索引值对应的元素,则得到的值是undefined
遍历数组
- 通过for循环进行遍历
var arr = ['a','b','c']
for(var i = 0; i < arr.length; i++){
console.log(arr.[i]);
}
- 1
- 2
- 3
- 4
获取数组的长度
- 通过length来获取
var arr = ['a','b','c'];
arr.length; // 3
- 1
- 2
注意:
此处数组的长度是数组元素的个数 ,不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化
数组的length属性可以被修改:
如果设置的length属性值大于数组的元素个数,则会在数组末尾出现空白元素;
如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除
数组中新增元素
- 可通过如下元素在数组末尾插入新元素
数组[数组.length] = 新数组;
var arr = [1,2,3];
arr[arr.length] = 4; // arr=[1,2,3,4]
- 1
- 2
- 3
- 4
函数
- 函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数的声明与调用
// 声明函数
function 函数名() {
//函数体代码
}
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
案例:
/*
计算1-100之间值的函数
*/
// 声明函数
function getSum(){
var sumNum = 0;// 准备一个变量,保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值 都累加 到变量中
}
alert(sumNum);
}
// 调用函数
getSum();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
函数的参数
- 形参:函数定义时设置接收调用时传入
- 实参:函数调用时传入小括号内的真实数据
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
- 1
- 2
- 3
- 4
- 5
- 6
函数形参与实参数不匹配时:
参数个数 | 说明 |
---|---|
实参等于形参个数 | 输出正确结果 |
实参多于形参个数 | 只取到形参的个数 |
实参小于形参个数 | 多的形参定义为undefined, 结果为NaN |
注意:在JavaScript中,形参的默认值是undefined。
函数的返回值
- 使用
return
进行返回 - 返回值:函数调用整体代表的数据;函数执行完成后可以通过
return
语句将指定数据返回 。
// 声明函数
function 函数名(){
...
return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意
在使用 return 语句时,函数会停止执行,并返回指定的值
如果函数没有 return ,返回的值是 undefined
break ,continue ,return 的区别
- break :结束当前的循环体(如 for、while)
- continue :跳出本次循环,继续执行下次循环(如 for、while)
- return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
arguments
的使用
当不确定有多少个参数传递的时候,可以用 arguments 来获取。JavaScript 中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 等方法
注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。
函数声明的两种方式
- 自定义函数(命名函数)
// 声明定义方式
function fn() {...}
// 调用
fn();
- 1
- 2
- 3
- 4
- 函数表达式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
- 1
- 2
- 3
- 4
- 立即执行函数
(function(){})() 或者 (function(){}())
// 主要作用: 创建一个独立的作用域。 避免了命名冲突问题
- 1
- 2
作用域
- es6前作用域有两种:全局作用域和局部作用域
全局作用域
- 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
局部作用域
- 作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
变量作用域
- 在JavaScript中,根据作用域的不同,变量可以分为两种:全局变量和局部变量
全局变量
-
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
-
全局变量在代码的任何位置都可以使用
-
在全局作用域下 var 声明的变量 是全局变量
-
特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)
局部变量
-
在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
-
局部变量只能在该函数内部使用
-
在函数内部 var 声明的变量是局部变量
-
函数的形参实际上就是局部变量
全局变量于局部变量的区别
- 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
- 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间
作用域链
只要是代码都一个作用域中,写在函数内部的局部作用域,未写在任何函数内部即在全局作用域中;如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;根据在**[内部函数可以访问外部函数变量]**的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
预解析
-
预解析也叫做变量、函数提升。
-
变量提升(变量预解析): 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
-
变量提升只提升声明,不提升赋值
-
函数只提升函数声明,不调用函数
console.log(num); // 结果是多少?
var num = 10; // ? undefined
fn();
function fn() {
console.log(‘打印’);
}
// 正常执行
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
对象
- 在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
创建对象的三种方式
通过字面量{}
创建
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过new Object创建
var andy = new Obect(); //创建空对象
andy.name = ‘pink’;
andy.age = 18;
andy.sex = ‘男’;
andy.sayHi = function(){
alert(‘大家好啊~’);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过构造函数创建对象
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
var obj = new 构造函数名(实参1,实参2,实参3);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意:
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候,必须用 new 来调用构造函数。
调用对象的方法
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
console.log(star.name) // 调用名字属性
console.log(star[‘name’]) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
遍历对象
- 使用
for...in
语句对数组或者对象的属性进行循环操作
for (变量 in 对象名字) {
// 在此执行代码
}
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
JS内置对象
Math对象
属性、方法名 | 功能 |
---|---|
Math.PI | 圆周率 |
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入(在负数里面,就近取整,即-2.5结果为-2 -2.6的结果为-3) |
Math.abs() | 绝对值 |
Math.max()/min() | 最大值与最小值 |
Math.random() | 获取范围在**[0,1)**内的随机值 |
获取指定范围内的随机整数(重要)
// 获取指定范围内的随机整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max -min + 1)) + min;
}
// 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[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
最大值与最小值方法
// Math数学对象 不是一个构造函数 ,所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99, 'pink老师')); // NaN
console.log(Math.max()); // -Infinity
- 1
- 2
- 3
- 4
- 5
- 6
封装数学对象(求最大值与最小值)
// 利用对象封装自己的数学对象 里面有 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));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
绝对值方法
// 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
- 1
- 2
- 3
- 4
- 5
三个取整方法
// 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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
Date对象
- Date 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
var now = new Date();
var future = new Date('2019/5/1');
- 1
- 2
注意:如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | obj.getFullYear() |
getMonth() | 获取当月(0-11) | obj.getMonth() |
getDate() | 获取当天日期 | obj.getDate() |
getDay() | 获取星期几(周日0 周六6) | obj.getDay() |
getHours() | 获取小时 | obj.getHours() |
getMinutes() | 获取当前分钟 | obj.getMinutes() |
getSeconds() | 获取当前秒钟 | obj.getSeconds() |
获取毫秒数
- 总毫秒数的含义:基于1970年1月1日(世界标准时间)起的毫秒数
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
格式化日期
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 我们写一个 2019年 5月 1日 星期三
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]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
格式化时分秒
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 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());
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
倒计时效果
// 倒计时效果
// 1.核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
// 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('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
Array对象
var arr = new Array();
// 注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数参数传递规则如下:
- 如果只传入一个参数,则参数规定了数组的长度
- 如果传入了多个参数,则参数称为数组的元素
- 1
- 2
- 3
- 4
检测是否为数组
instanceof
运算符
instanceof 可以判断一个对象是否是某个构造函数的实例
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
- 1
- 2
- 3
- 4
Array.isArray()
Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
- 1
- 2
- 3
- 4
方法 | 说明 |
---|---|
push() | 在末尾添加一个或者多个元素,会修改原数组,并返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减一,修改原数组 |
unshift() | 向数组开头添加一个或者多个元素怒,修改原数组 |
shift() | 删除数组的第一个元素,数组长度减一,修改原数组 |
reverse() | 将数组中的元素倒序排列,返回新数组,会修改原数组 |
sort() | 对数组进行排序,返回新数组,会修改原数组 |
indexOf() | 查找数组中给定元素的第一个索引,如果存在返回索引号,否则返回-1 |
lastIndexOf() | 查找数组中最后一个索引,如果存在返回索引号,否则返回-1 |
toString() | 将数组转换为字符串,逗号分隔每一项,返回一个字符串 |
join('分隔符') | 将数组中的所有元素转换为一个字符串 |
concat() | 连接两个或者多个数组,不影响原数组,返回一个新数组 |
slice() | 数组截取slice(begin, end) ,返回被截取后元素的新数组,不影响原数组 |
splice() | 数组删除splice(begin, 要删除的个数) ,返回删除后的数组,会影响原数组 |
数组排序(重要)
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序(冒泡排序)
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
获取数组元素索引
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素,则返回的是 -1
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf(‘blue’)); // 4
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
数组去重
// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 1.目标: 把旧数组里面不重复的元素选取出来放到新数组中, 重复的元素只保留一个, 放到新数组中去重。
// 2.核心算法: 我们遍历旧数组, 然后拿着旧数组元素去查询新数组, 如果该元素在新数组里面没有出现过, 我们就添加, 否则不添加。
// 3.我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique 独一无二的
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(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo = unique(['blue', 'green', 'blue'])
console.log(demo);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
数组转字符串
// 数组转换为字符串
// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符)
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
String对象
方法 | 说明 |
---|---|
indexOf('要查找的字符', 开始的位置) | 返回指定内容在元素中的位置,如果找不到就返回-1 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
charAt(index) | 根据指定的索引值返回元素str.charAt(0) |
charCode(index) | 获取指定索引值对应元素的ASCII码 str.charCode(0) |
str[index] | 获取指定位置处字符(h5、ie8+支持 和charAt()等效 ) |
concat(str1,str2,str3) | 拼接字符串 等效于+ |
substr(start, length) | 从start开始截取,length是截取的个数(重点) |
slice(start, end) | 从start开始截取到end位置,end取不到 |
substring(start, end) | 从start开始截取到end位置(不接受负值) |
replace() | 替换字符串 字符串.replace(被替换的字符串, 要替换为的字符串); |
split() | 用于切分字符串,返回一个新数组,字符串.split("分割字符") |
基本包装类型
- 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
// str能够使用length方法就是通过基本包装类型实现
var str = 'andy';
console.log(str.length);
// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String(‘andy’);
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
字符串的不可变
- 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
- 当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。
- 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
查找字符串元素的索引值
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找
- 1
- 2
- 3
- 4
查找字符串中某个字符出现的个数
// 查找字符串"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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
根据位置返回字符串
// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
统计出现最多的字符和次数
// 判断一个字符串 '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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
替换字符串与分隔符
// 1. 替换字符 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);
// 2. 字符转换为数组 split(‘分隔符’) 前面我们学过 join 把数组转换为字符串
var str2 = ‘red, pink, blue’;
console.log(str2.split(‘,’));
var str3 = ‘red&pink&blue’;
console.log(str3.split(‘&’));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
</article>