js基础
Posted 兔子零84
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js基础相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 浏览器不会执行JS代码,是通过JS内置引擎(解释器)来执行代码. BOM 浏览器对象模型 DOM 文档对象模型 javascript 由三部分组成:ECMAScript,DOM,BOM JavaScript 应用场景 1. 网页特效 2. 服务端开发(Node.js) 3. 命令行工具(Node.js) 4. 桌面程序(Electron) 5. App(Cordova) 6. 控制硬件-物联网(Ruff) 7. 游戏开发(cocos2d-js) 行内样式 <button onclick="alert(‘你好啊‘)">点击</button> 内嵌样式 <script></script> 外部样式 <script src="outdoor.js"></script> 警示框 alert(‘迪丽热巴‘); 控制台 console.log(‘古丽扎娜‘); 提示用户输入框 prompt(‘请输入您喜欢的明星:‘); typeof() 判断数据类型 isNaN 检测是不是数字 是数值结果就是false 是字符就是true 什么是变量？ 概念：变量是用于存放数据的容器. 声明变量，并赋值 语法：var 变量名 = 变量值; 二进制 0 1 八进制 0~7 十进制 12 77 99 十六进制 0~9 a~f 0x12 数据类型转换 typeof 检测字符或者数值 在chrome 里面 数值类型 是蓝色 字符型是 黑色 数值里面只有一个字符就会转成 字符串 Number()转成数字类型 toString() 转换字符 parseInt() 整数 parseFloat 浮点数 Boolean() 转换成布尔类型 只有 真/假 true/false isNaN 不是数值(true) 是数值(false) 是不是人 转换为Boolean值 代表 空、否定的值 会被转换为 false 有五种 “ ‘‘、0、NaN、null、undefined 其余任何值都会被转换为 true 换行符（重要)newline 斜杠 ‘ 单引号 ‘ " 双引号 " Tab 空格 blank 回车符 &&并且 ||或者 1. () 优先级最高 2. 一元运算符 ++ -- ! 3. 算数运算符 先* / % 后 + - 4. 关系运算符 > >= < <= 5. 相等运算符 == != === !== 6. 逻辑运算符 先&& 后|| 7. 赋值运算符 if (条件表达式) { // [如果] 条件成立执行的代码 } else { // [否则] 执行的代码 } if-else-if语句语法: if (表达式1) { 执行代码1 } else if (表达式2) { 执行代码2 } else if (表达式3) { 执行代码3 } else { 执行代码4 } 三运表达式达式1 ? 表达式2 : 表达式3 switch( 变量 ){ case value1: //表达式结果 等于 value1 时 要执行的代码 break; case value2: //表达式结果 等于 value2 时 要执行的代码 break; default: //表达式结果 不等于任何一个 value 时 要执行的代码 } for(初始化; 条件表达式; 自增表达式 ){ //循环体 } 双重for循环 for (外循环的初始; 外循环的条件; 外循环的增量) { for (内循环的初始; 内循环的条件; 内循环的增量) { 需执行的代码; } } while (条件表达式) { // 循环体代码 } do{ // 循环体代码 - 条件表达式为 true 时重复执行循环体代码 } while(条件表达式); continue 跳出本次循环 break 退出整个循环 arr.length 获得数组长度 列如: <script> //索引下标 0 1 2 3 4 5 6 var arr=[‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘,‘星期七‘,]; console.log(arr[5]); //输出的是 星期六 console.log(arr[2]);// 输出的是 星期三 console.log(arr.length); //数组长度 7 </script> 数组中i 代表数组 索引(下标) arr[i]代表数组的元素 翻转数组: 0,1,2,3,4 旧 0,1,2,3,4 新 数组长度-i-1 length-i -1 冒泡 外层 数组长度-1 length-1 内层 数组长度-i -1 length-i -1 判断进行交换 函数 就是 封装了 一段 可被重复调用执行的 代码块。 基本函数写法: function sayHi(){} sayHi(); 匿名函数: function(){} 函数表达式 var fn=function(){} fn(); 自调用函数: (function(){})() retrun 后的代码不被执行 function add(num1，num2){ //函数体 return num1 + num2; // 注意：return 后的代码不执行 alert(‘我不会被执行，因为前面有 return‘); } return 返回值 arguments 伪数组 函数可以作为参数传递 function fn() { return function() { console.log(‘函数可以作为返回值‘); } } var ff = fn(); // 相当于 // var ff = function() { // console.log(‘函数可以作为返回值‘); // }; ff(); 局部变量 - 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量） - 局部变量只能在该函数内部使用 全局作用域 供所有代码执行的环境(整个script标签内部) 或者一个独立的js文件中 - JavaScript解析器会在全局环境下查找 var、function关键字，变量只声明不赋值，函数声明不调用。 - 预解析只发生在当前作用域下 对象: 就是将现实事物抽象为功能代码. 将现实世界的东西,用对象的语法格式来表示. 对象的语法: 对象中有属性和方法 （名词） 属性 （动词） 称为 方法 - 对象里面的属性调用 : 对象.属性名 这个小点 就理解为 的 - 对象里面的属性另外调用方式 : 对象[‘属性名‘] 注意 方括号里面的属性 必须加 引号 我们后面会用 - 对象里面的方法调用： 对象.方法名() 注意这个方法名字后面一定加括号 对象.属性名 对象[‘属性名‘] 对象.方法名() 对象的三种写法: 1.字面量写法 var star = { name : ‘刘德华‘, age : 18, sex : ‘男‘, sayHi : function(){ alert(‘大家好啊~‘); } }; console.log(star.name); 或console.log(star[‘name‘]); star.sayHi(); 对象.属性名 对象[‘属性名‘] 对象.方法名() 2. new Object()写法 var zs = new Object(); zs.name=‘张三‘; zs.age=18; zs.sayHi=function(){} 对象名.属性名 = 值 对象名.方法名 = function(){} 构造函数可以创建多个对象 把相同定的属性和方法进行抽象,然后进行函数封装 1. 构造函数用于创建某一大类对象，首字母要大写。 2. 构造函数要和new一起使用才有意义。 function 构造函数名(参数1..){ 构造函数名首字母大写 this.属性名=属性值; this.方法名=funtion(){} } 调用构造函数 new 构造函数名(); 3.构造函数写法 function Programmer (name,age,sex){ this.name = name; this.age =age; this.sex = sex; this.sing =function(){ alert(‘敲代码‘); } } var wangmiao = new Programmer(‘汪苗‘,18,‘男‘); console.log(wangmiao.name); wangmiao.sing(); new会在内存中创建一个新的空对象 new 会让this指向这个新的对象 执行构造函数里面的代码 目的：给这个新对象加属性和方法 new会返回这个新对象 （所以构造函数里面不需要return） 1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定 2. 一般函数直接执行，内部this指向全局window 3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象（谁调用指向谁） 4. 构造函数中的this 对象的实例 for (变量 in 对象名字) { 变量输出的是属性名 对象[变量]输出的是 属性值 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 key 后面的是对象 可以 数组 因为 数组也属于对象 对象的遍历: for-in function Yingxiong(name,type,blood){ this.name = name; this.type = type; this.blood = blood; this.singgj=function(){ alert(‘攻击‘); } } var houyi = new Yingxiong(‘后裔‘,‘射手型‘,‘2333血量‘); /* console.log(houyi.name); houyi.singgj(); console.log(houyi); */ for (var key in houyi){ console.log(‘属性名:‘+key+‘ ‘+‘值是:‘+houyi[key]); } 1. JSON 数据的书写格式是：名称/值对。 2. 里面的属性和值都要用 双引号 括起来 var json = { "id": "1", "name": "andy", "age": "18", "tel": "110120" } for (var k in json) { console.log(k); // 这里的k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 } Math.PI // 圆周率 Math.floor() // 向下取整 Math.ceil() // 向上取整 Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 Math.abs() // 绝对值 Math.max()/Math.min() // 求最大和最小值 Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt()// 求指数次幂/求平方根 Math.random 生成随机数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } console.log(getRandom(10, 20)) 随机背景颜色 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function getRandomColor() { var c1 = getRandom(0, 255); var c2 = getRandom(0, 255); var c3 = getRandom(0, 255); return ‘rgb(‘ + c1 + ‘, ‘ + c2 + ‘, ‘ + c3 + ‘)‘; } window.onload=function(){ document.body.style.backgroundColor=getRandomColor(); } Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。 // 获取当前时间， var now = new Date(); console.log(now); +new 获得当前毫秒数 列如: var now = +new Date(); console.log(now); 新方法获得当前毫秒数 console.log(Date.now()); Date构造函数的参数 // 括号里面时间 ，就返回 参数里面的时间 日期格式字符串 ‘2015-5-1‘ new Date(‘2015-5-1‘) 或者 new Date(‘2015/5/1‘) getFullYear() 获取当年 dObj.getFullYear() getMonth() +1 获取当月（0-11）输入数值类型要少一个月 dObj.getMonth() getDate() 获取当天日期 dObj.getDate() getDay() 获取星期几 （周日0 到周六6） dObj.getDay() getHours() 获取当前小时 dObj.getHours() getMinutes() 获取当前分钟 dObj.getMinutes() getSeconds() 获取当前秒钟 dObj.getSeconds() 现在时间 function getMyDate() { var arr = [‘星期天‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘]; var date = new Date(); // 2018年5月29日 星期二 var str = date.getFullYear() + ‘年‘ + (date.getMonth() + 1) + ‘月‘ + date.getDate() + ‘日 ‘ + arr[date.getDay()]; return str; } console.log(getMyDate()); 当前时间案列 function getTimer() { var date = new Date(); // var str = date.getHours() + ‘:‘ + date.getMinutes() + ‘:‘ + date.getSeconds(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); // if(h < 0) { // h = ‘0‘ + h; // } h = h < 10 ? ‘0‘ + h : h m = m < 10 ? ‘0‘ + m : m s = s < 10 ? ‘0‘ + s : s return h + ‘:‘ + m + ‘:‘ + s; } console.log(getTimer()); - 计算公式： d = parseInt(countTime/ 60/60 /24); // 计算天数 d = d < 10 ? ‘0‘+ d : d h = parseInt(countTime/ 60/60 %24); // 计算小时 h = h < 10 ? ‘0‘+ h : h m = parseInt(countTime /60 %60 ); // 计算分数 m = m < 10 ? ‘0‘+ m : m s = parseInt(countTime%60); // 计算当前秒数 s = s < 10 ? ‘0‘+ s : s return ‘还剩下‘+ d + ‘天‘ + h + ‘时‘ + m + ‘分‘ + s +‘秒‘; d = parseInt(总秒数/ 60/60 /24); // 计算天数 h = parseInt(总秒数/ 60/60 %24) // 计算小时 m = parseInt(总秒数 /60 %60 ); // 计算分数 s = parseInt(总秒数%60); // 计算当前秒数 倒计时天数: function getCountTime(endTime){ var d, h, m , s; var countTime = parseInt((new Date(endTime)- new Date())/1000); d = parseInt(countTime/ 60/60 /24); // 计算天数 d = d < 10 ? ‘0‘+ d : d h = parseInt(countTime/ 60/60 %24); // 计算小时 h = h < 10 ? ‘0‘+ h : h m = parseInt(countTime /60 %60 ); // 计算分数 m = m < 10 ? ‘0‘+ m : m s = parseInt(countTime%60); // 计算当前秒数 s = s < 10 ? ‘0‘+ s : s return ‘还剩下‘+ d + ‘天‘ + h + ‘时‘ + m + ‘分‘ + s +‘秒‘;- } console.log(getCountTime(‘2018-10-8 12:00‘)); 创建数组对象的两种方式 - 字面量方式 - new Array() instanceof 检测是否为数组 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 筛选 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); 升序公式sort冒泡) var arr = [1, 64, 9, 6]; arr.sort(function(a, b) { return b - a; // 降a序 // return a - b; 升序 }); console.log(arr); 连接数组concat var arr1 = [1, 2]; var arr2 = [‘pink‘, ‘red‘]; var arr3 = [‘andy‘, 18]; //返回连接之后的新数组 console.log(arr1.concat(arr2, arr3)); 1.indexOf(要查找的字符,开始位置) 开始位置不写默认从0开始，找不到返回-1 ----查找字符 2.charAt(字符位置) 给一个位置，返回该位置的字符 ----获取字符 3.subStr(开始位置，截取个数) 返回截取的字符串结果 ----截取字符 4.replace(要替换的字符,替换的新字符) ----替换字符 5.join(连接符) 将数组通过连接符连接，返回字符串 ----连接字符 6.split(连接符) 将字符根据连接符分割成多个值的数组,返回数组 ----分割字符 7.toUpperCase() 将字符串转换为大写 ----转换成大写 8.toLowerCase() 将字符串转换为小写 ----转换成小写 把数字 转换字符串 toString() 把数组转换成字符串，逗号分隔每一项 返回一个字符串 join(‘分隔符‘) 方法用于把数组中的所有元素转换为一个字符串。 返回一个字符串 var arr = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘]; console.log(arr.join()); // 跟toString() 一样， 转换为字符串 console.log(arr.join(‘-‘)); //red-green-blue-pink splice() 数组删除splice(第几个开始,要删除个数) 返回被删除项目的新数组 注意，这个会影响原数组 slice() 数组截取slice(begin, end) 返回被截取项目的新数组 concat() 合并 连接两个或多个数组 不影响原数组 返回一个新的数组 reverse()翻转数组 颠倒数组中元素的顺序,无参数 该方法会改变原来的数组 返回新数组 sort() 升序(降序)冒泡 对数组的元素进行排序 该方法会改变原来的数组 返回新数组 push(参数1） 末尾添加一个或多个元素 ，注意修改原数组 并返回新的长度 pop() 删除数组最后一个元素，把数组长度减 1 无参数、注意修改原数组 返回它删除的元素的值 unshift(参数1...) 向数组的开头添加一个或更多元素，注意修改原数组， 并返回新的长度 shift() 把数组的第一个元素从其中删除，把数组长度减 1 无参数、注意修改原数组，返回第一个元素的值 splice（） 删除某个元素 可以替换或者插入元素 插入splice（0,0,‘值‘） splice（2,0,‘值‘）第2中间插入 splice（2,1,‘值‘） 替换元素 清空数组 var arr = [1,2,3,4,5]; arr = []; indexOf 查询元素位置 从左到右查询 lastIndexOf 查询元素位置 从右到左查询 indexOf() 数组中查找给定元素的第一个索引 如果存在返回索引号 如果不存在，则返回-1。 查找全部 var arr = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘,‘blue‘]; var index = arr.indexOf(‘blue‘); while (index !== -1){ console.log(index); index = arr.indexOf(‘blue‘,index + 1); } 编写一个方法去掉一个数组的重复元素 var arr=[‘c‘, ‘a‘, ‘z‘, ‘a‘, ‘x‘, ‘a‘, ‘x‘, ‘c‘, ‘b‘]; var newArr=[]; for(var i = 0; i< arr.length;i++){ if(newArr.indexOf(arr[i])=== -1){ newArr.push(arr[i]); } } console.log(newArr); 值类型当参数,传递的是复制一份,相互之间不影响 引用类型参数,传递的是同一份地址,一个人修改, 大家都修改. 后台传数据 function params (url){ var arr = url.split(‘?‘); // console.log(arr); var params = arr[1]; //console.log(params); var arr1 = params.split(‘&‘); //console.log(arr1); var o = {}; for(var i = 0; i< arr1.length;i++){ //console.log(arr1[i]); var newArr = arr1[i].split(‘=‘); // console.log(newArr); o[newArr[0]]=newArr[1]; } return o ; } //params(‘http://www.itheima.com/login?name=zs&age=18‘); console.log(params(‘http://www.itheima.com/login?name=zs&age=18‘));
forEach遍历
var arr1=[1,3,5,61,8];
arr1.forEach(function(item){
console.log(item);
})
// forEach遍历 箭头函数
arr1.forEach(item=>{console.log(item)});
arr1.forEach(item=>console.log(item))
//each遍历
$(function(){
$(‘li‘).each(function(index,ele){
console.log(this);
// console.log(index);
// console.log(ele);
$(this).css({‘color‘:"red"})
})
})
arr1.map(function(item){
return item*2;
})
console.log(arr1);
arr1.forEach()
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
</body> </html>
以上是关于js基础的主要内容，如果未能解决你的问题，请参考以下文章