文章目录
输入输出
prompt("请输入您想输入的内容")
alert("弹出对话框")
console.log("控制台输出打印")
变量
声明
- 只声明不赋值是undefined
- 不声明不赋值直接报错
- 直接赋值可以使用(但是会变成全局变量)
var age
var age = 18
var age = prompt("输入您的年龄") //取过来的值是字符串型
var age=18,
address = "火影春",
gz = 2000
案例: 交换两个变量的值
//交换两个变量值
var apple1 = 10
var apple = 12
var temp =apple1
apple1 = apple2
apple2 = temp
命名规范
- 区分大小写 (name是一个关键字)
- 可以用$符号
- 遵循驼峰命名法
数据类型
- js变量数据类型是只有程序运行中,根据右边的值的数据类型进行判断
- 动态语言,数据类型可以变化
var x = 10//数字型
x = 'ssc'//字符串型
简单数据类型
- Number (Infinity无穷大 -Infinity无穷小 NaN非数字)
isNaN() 是数字返回true 非数字false
- Boolean
参与运算时 true当作1 false当作0
- String
外单内双 或者 内单外双
转义字符需要加上反斜杠 \n换行 \反斜杠 \t缩进 \b空格
字符串 + 任何数据类型 = 字符串 - Null
null + 字符串 = 字符串
null + 数字 = 数字 (当作0来看) - Undefined
undefined + 字符串 = 字符串
undefined + 数字 = NaN
//number
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
console.log("ssc"-num) //非数字 NaN
//String
var str = '我去 你真 厉害!!'
console.log(str.lenght) //输出字符串的长度
//获取变量数据类型 蓝色number boolean 灰色null undefined 黑色string
var num = 10
console.log(typeof num) //number
数据类型转换
- 转换为字符串类型
var num = 1
console.log(num.tostring()) //第一种
console.log(String(num)) //第二种
- 转换为数字型类型
var age = prompt("输入你的年龄")
console.log(parseInt(age)) //转换函数 得到是整数 向下取整 120px会去掉后面的单位
console.log(parseFloat("12.323")) //转换为小数
console.log(Number("12.323")) //转换为小数
//利用算术符号 隐式转换为数字型
- 转换为布尔型类型
//只有这五个是false其他都是true
console.log('')
console.log(0)
console.log(null)
console.log(NaN)
console.log(null)
console.log(undefined)
运算符
- 运算符
浮点数不能直接用来计算有精度问题 - 前置运算符和后置运算符
b = ++a + 2
b = a++ + 2
b = a++ + ++a 相当于(b = a + (++a)) - 比较运算符
== :会转型 (18 == ‘18’ 结果为true)
=== : 不会转型 (18 === ‘18’ 结果为false) - 运算优先级
()
一元运算符(++ – !)
算术运算符
关系运算符
相等运算符
逻辑运算符 (逻辑与 比 逻辑或级高)
赋值运算符
逗号运算符
数组
- 数组长度:元素个数
console.log(arr.length)
- 数组中的最大值
var arr = [1,5,3,25,1000,3,6,3,45,1];
var max = arr[0];
for (let index = 1; index < arr.length; index++) {
if (max < arr[index]) {
max = arr[index];
}
}
console.log(max);
- 数组切割字符串
var strArr = ['aad','asdas','123','xasda'];
var str = '';
for (let index = 0; index < strArr.length; index++) {
str += (strArr[index]+'&')
}
console.log(str);
- 数组新增元素
arr.lenght = 5; //手动赋给数组的长度
- 去除数组中的为0的元素
var arr1 = [0,10,23,25,36,52,36,0,15];
var arr2 = [];
var j = 0;
for (let index = 0; index < arr1.length; index++) {
if (arr1[index] != 0) {
arr2[j] = arr1[index];
j++;
}
}
console.log(arr2);
- 反转数组
var arr1 = [0,1,2,3,4,5,6,7,8];
var arr2 = [];
var j = 0;
for (let index = (arr1.length-1); index >= 0; index--) {
arr2[j] = arr1[index];
j++;
}
console.log(arr2);
- 冒泡排序
var arr1 = [1,0,8,5,2,3,7,4,6];
var temp;
var flag = 0;
for (let i = arr1.length; i > 0 ; i--) {
flag = 0;
for (let j = 0 ;j < i ;j++) {
if (arr1[j] > arr1[j+1]) {
temp = arr1[j];
arr1[j] = arr1[j+1];
arr1[j+1] = temp;
flag = 1;
}
}
if (flag == 0){
break;
}
console.log(arr1);
}
函数
- 格式:
function 函数名(){
函数体;
}
var 变量名 = function(){
匿名函数函数体
} - 形参的个数小于实参个数 则会忽略后面的实参
- 形参的个数大于实参个数 则多余的形参会变成undefined (一个)
- 函数无返回值就返回的是undefined
arguments
- 不确定有多少个参数传递时,不好定义形参的个数时,可以通过arguments(内置对象存储了所有的实参)获取
- 伪数组:
- 具有length属性
- 按照索引方式存储
- 没有数组的 pop push 函数
作用域
- 全局和局部优先局部
- 在函数内部直接使用的变量也是全局变量(要调用函数之后才生效)
预解析
- js会把var 和 function提升到当前作用域的组前面
- 参考离自己最近的变量值
对象
- 对象里面可以拥有匿名函数
- 匿名函数 调用时要带上小括号
- 调用属性的方式:
- obj.属性名
- obj[’属性名‘]
构造函数
- 构造函数创建对象为了解决批量创建对象
- function 构造函数名() {
this.属性 = 值;
this.方法 = function(){}
}
- function 构造函数名() {
- 构造函数和对象
- 构造函数是指一类抽象出来的
- 对象是具体的指某一个对象
function Star(uanme ,age ,sex){
this.uanme = uanme;
this.age = age;
this.sex = sex;
}
var star1 = new Star("刘德华",18,'男');
console.log(star1);
new
-
new的四步走:
- 创建一个空的对象
- this.就会指向创建的空对象
- 执行构造函数给对象添加属性和方法
- 返回这个新对象
遍历对象
function Star(uanme ,age ,sex){
this.uanme = uanme;
this.age = age;
this.sex = sex;
}
var star1 = new Star("刘德华",18,'男');
for (const key in star1) {
console.log(key); //获取属性名
console.log(star1.key); //undefined
console.log(star1[key]); //获取属性值
}
内置对象
- JS已经提供的常用的对象和功能 (常用:Math Date Array String)
Math对象
- MDN Math 标准库
- Math.abs 绝对值
- Math.floor 向下取整
- Math.ceil 向上取整
- Math.round 四舍五入 (数字五比较特殊 往大了取 负数比较特殊 -1.5取-1)
- Math.random() 返回一个浮点数的随机小数 (0<=x<1)
// 猜数字游戏
var rd = Math.floor(Math.random()*(10)+1);
while (true) {
var num = prompt("输入一个1-10之间的数字:")
if (rd < num) {
alert("大了")
}else if (rd > num) {
alert("小了")
}else{
alert("恭喜你,猜对啦")
setTimeout(3000);
break;
}
}
日期对象
- Date 标准库
- 只能通过构造函数来构造 new一下
var date = new Date();
console.log(date);
- 常用的写法
var date = new Date(2019,10,1); //输出的月份会比真实月份大一个月
var date = new Date('2019/5/1'); //输出的月份是正确的
- 月份是0-11 星期几中 0 代表周日
- 起始时间是1970-01-01
var date = new Date();
console.log(date);
console.log(date.valueOf());
console.log(date.getTime());
// 程序中最常用的写法
var date1 = +new Date() ;
console.log(date1);
// H5的最新写法
console.log(Date.now());
Array
- array标准库
- 判断是不是一个数组
arr instanceof Array; // 返回值时true 或者 false
Array.isArray(arr); //H5新增的方法 ie9以上支持
- 添加删除元素
arr.push(元素); //在数组末尾添加元素 有返回值 返回数组的新长度 原数组也会发生变化
arr.unshift(元素); // 在数组的前面追加元素 有返回值 返回的数组的新长度 原数组也会发生变化
arr.pop(); // 删除数组的最后一个元素 有返回值 返回的是被弹出来的最后一个元素
arr.shift(); // 删除数组的第一个元素 有返回值 返回的是被弹出来的第一个元素
- 反转数组
arr.reverse(); //反转数组
- 冒泡排序
arr.sort(); // 只会按照个位数排序
arr.sort(function(a,b){
return a-b; // 升序
return b-a; // 降序
}
)
- 获取数组的索引
arr.indexOf(元素); // 从前面查找只返回第一个元素的索引号 找不到就返回-1
arr.lastIndexOf(元素); // 从后面查找只返回第一个元素的索引号 找不到就返回-1
- 数组去重
function quChong(arr) {
var nowArr = [];
for (let i = 0; i < arr.length; i++) {
if (nowArr.indexOf(arr[i]) === -1) {
nowArr.push(arr[i]);
}
}
return nowArr;
}
var demo = quChong(['1','2','1','3']);
console.log(demo);
- 数组转化为字符串
var arr = [1,2,3];
arr.toString()
arr.join(); // 默认逗号隔开
arr.join('-'); //用-隔开
String
- 基本包装类型
var str = 'anyday';
console.log(str.lenght);
// 等价于
var temp = new String('anyday');
var str = temp;
temp = null; // 销毁临时变量temp
- 字符串不可变性 不要大量拼接字符串
- 字符串所有方法都不会修改字符串本身,而是返回一个新的字符串
// 执行速度很慢并且可能会卡死
var str = '我去';
for (let i = 0;i<10000000000;i++){
str += '你好!!'
}
- 根据字符返回位置
var str = '改革春风吹满地';
console.log(str.indexOf('春'), 起始位置); // 从索引后面开始查找
console.log(str.lastIndexOf('春')); // 从后面开始查找
var str = 'asdjbaoasdjhadasjhdaodhjadojasdjosad';
function searchO(str1,target) {
var i = 1;
var weiZhi = [];
while (str1.indexOf(target,i) != -1) {
weiZhi.push(str1.indexOf(target,i));
i = str1.indexOf(target,i);
i = i + 1;
}
console.log(weiZhi);
}
searchO(str,'b');
- 根据位置返回字符
str.charAt(index); // 根据index返回字符
str.charCodeAt(0); // 返回ASCII码确定用户按了哪个键
str[index]; // H5和IE8+支持
- 统计出现最多的字符和次数
function maxTimes(str){
var obj = new Object();
for (let index = 0; index < str.length; index++) {
console.log(str[index]);
if (obj[str[index]]) {
obj[str[index]] += 1;
}else{
obj[str[index]] = 1;
}
}
console.log(obj);
}
maxTimes(str);
字符串操作重要方法
- str.replace(被替换字符,替换为的字符) // 只会替换第一个字符
- str.split(需要被什么字符隔开) // 把字符串按照某个字符隔开并且把字符串变为数组
- str.toUpperCase() //转为大写
- str.Lower() // 转换为小写
简单数据类型和复杂类型
- string number boolean null undefined (简单数据类型)
- 如果一个对象没想好存放什么就先赋值为null
- 简单数据类型存放在栈里面 复杂数据类型存放在堆里面
- 复杂对象里面存数据现在堆里面开辟一个数据空间,通过栈里面的十六进制的地址来指向它
简单数据类型传参
复杂数据类型传参