js-基础-笔记

  • avaScript 网景
  • Jscript 微软

二者的基础是ECMAscript

  • js 书写的三种位置
位置语义
行内直接写在元素内部
内嵌
外部
  • 变量

数据类型:获得值时确定变量类型

  • 分类:

一. 基本数据类型

类型语义默认值
Number数字型 包括浮点 整型0
Booleantrue falsefalse
String字符串“”
Undefined声明了变量未赋值undefined
Null声明变量为空值null
<script>//Numbervar num = 10;var PI = 3.14;//8进制 0o 开头 0开头老写法 0-7var ba = 0o12;console.log(ba);//16进制 0x 0-9 A-Fvar shiLiu = 0xAconsole.log(shiLiu);//最大/小值console.log(Number.MAX_VALUE);console.log(Number.MIN_VALUE);//三个特殊值console.log(Infinity);//无穷大 大于任何数值console.log(-Infinity);//无穷小console.log(NaN);// 代表一个非数值var a = 'xxx';var nan = isNaN(a);//是不是数字console.log(nan);//String 可以"" 也可以''//引号内嵌 单双区分//转义字符 \n换行, \t tab缩进, \b 空格var yin = '我是"大帅逼"\n不信?';console.log(yin);// lengthvar str = 'dkfcsdv';console.log(str.length);//拼接 newStr = 字符串 + 任何类型newStr = str+'233';//booleanvar flag = true;console.log(flag+1);//结果2,参与加法运算相当于1//undefined 变量未赋值var unde;console.log(unde);console.log(unde+'233');//结果undefined233,console.log(unde+1);//结果NaN//nullvar nu = null;console.log(nu+'233');//结果null233console.log(nu+1);//结果1//获取数据类型console.log(typeof nu);script>
  • 类型转换
  • - >String
  • 变量.toString()
  • String(var) 强制转换
  • 字符串拼接
  • 转为数字类型
方式语义
parseInt(String)to整型
console.log(parseInt('ee'))//结果NaN
parseFloat(String)to 浮动型 注意String 是数字字符串
Number(var)强制转换
隐式转换(- * /)算术隐式转换 ‘12’-0
console.log('12'-1);//结果11
  • 转为Boolean
    Boolean(var)
    ‘’, 0, NaN, undefined 转为false,其余基本为true

变量的运算表达 等与java 基本差不多 需要注意的是 === 不转换类型比较
19===‘19’ false
== 转换类型再比较
19==‘19’ true

  • 数组: 可以存放任何类型
  • 创建方式
  • new
  • 利用数组字面量创建
<script>//创建数组//1var arr = new Array();var arr2 = [];var arr2 = [1,2,'233',true];//访问[i]console.log(arr2[1]);//遍历数组for(var i = 0;i<arr2.length;i++){console.log(arr2[i]);}//新增元素//1 修改长度arr2.length=5;console.log(arr2[4]);//结果undefined//2,修改索引号var arr3 = [1,2,3];console.log(arr3);arr3[4] = 5;console.log(arr3[3]);//undefined//注意arr3 = 'ddd';//变成 字符串//伪数组 arguments 只有函数才有这个对象 且每个对象都内置好 这个东西function sun(a,b) {console.log(arguments);//里面存储了传过来的实参console.log(arguments.length);console.log(arguments[i]);//有数组的属性,但他没有一些方法 如pop() push()等return a+b;}console.log('----')sun(1,2,3);//2如下 数组对象
script>
  • 函数

function 函数名(形参1,形参2…){

return … ;//或不返回值
}
注意形参不用声明。

<script>//函数//函数声明 两种方式//1function name() {}//2 函数表达式var fun = function () {};//调用fun();//多形参问题function add(a,b) {console.log(a+b);return a+b;}add(1,2);add(1,2,3);//结果3 取前两个add(1);//结果undefined 另一个形参得到的undefined//返回 如果没有return 返回的是undefined;script>
  • 作用域:
  • 全局作用域: 整个script 标签 或者 一个单独的js 文件
  • 局部作用域 :函数内部
  • 全局变量 :浏览器关闭页面才销毁 占内存
  • 局部变量 :程序执行完销毁
  • js 在es6 新增块级作用域
<script>var num = 10;
script>
<script>console.log(num);//10for (var i = 0;i<4;i++){var x = 10;a = 10;//注意 全局变量}console.log(i);//4console.log(x);//10console.log(a);//10console.log('-----')function link() {var num = 20;function link2() {console.log(num);//20 作用域链 就近原则}link2();}link();
script>

注意:所有全局变量都会是window对象的属性 函数 是window 的方法

  • 预解析:
  • js js 引擎运行顺序
  • 先把所有的var function 提到当前作用域前面
  • 从下往下执行;
  • 预解析 分为变量预解析 和函数预解析
  • 变量预解析 :把所有变量声明提到当前作用前面,不做赋值操作;
  • 函数预解析 :把所有函数声明提到当前作用域前面
  • 对象Object:
  • 4种创建方法:
<script>//创建对象的4种方法// 1. 利用对象字面量创建方法//var obj1 = {}//创建空对象var obj1 = {name:'余小C_C',age:18,sex:'男',fun:function () {console.log('hello');}}//使用对象console.log(obj1.age);obj1.fun();console.log(obj1);//第二种调用console.log(obj1['age']);console.log('----');//2. newvar obj2 = new Object();obj2.name = '余小C_C';obj2.age = 18;obj2.fun = function () {console.log('hello');}//利用构造函数 构造对象// function 构造函数名() {//     this.属性 = '值',//     this.方法名 = function () {////      }// }// new 构造函数名();调用function User(name,age) {this.name = name;this.age = age;this.fun = function () {console.log('构造函数方法');}var sex;}var user = new User('张三',18);console.log(user);console.log(user.sex);//undefineduser.sex = '男';console.log(user);console.log(user.sex);
//4. es6 注意大小写class Person {constructor(name,age){ //constructor是一个构造方法,用来接收参数this.name = name;  //this代表实例对象this.age = age;}say(){return this.name;}}var person = new Person('z',18);console.log(person.say());
script>

注意函数的本质:ECMAScript 定义的 函数实际上是功能完整的对象。

ES6 class的写法实质就是构造函数。

  • 遍历对象:
<script>console.log('----------')//遍历对象var obj3 = {name:'余小C_C',age:18,sex:'男',fun:function () {console.log('hello');}}for(var k in obj3){console.log(k);//name age sex fun 得到属性名console.log(obj3[k]);//得到属性值}
script>

js 对象:

  • 自定义对象
  • 内置对象
  • 浏览器对象

常见内置对象
官网:

https://developer.mozilla.org/zh-CN/

  • Math 对象 静态对象 不是构造函数
  • 日期对象
  • 数组对象
  • 字符串对象
<script>console.log(Math.PI);console.log(Math.max(1,2,3))//原理var MyMath = {PI:3.14,max: function () {var max = arguments[0];for (var i = 1;i<arguments.length;i++){if(arguments[i] > max ){max = arguments[i];}}}}console.log(Math.abs(-1))//绝对值console.log(Math.abs('-1'))//-1console.log(Math.floor(1.9))//向下取整console.log(Math.ceil(1.9))//2 向上去整console.log(Math.round(1.1))//四舍5入 .5 往x轴正轴取 如 -1.5 -1console.log(Math.random())//随机数//日期对象var now = new Date();console.log(now);//参数 数字或字符串console.log(new Date(2019,11,11));console.log(new Date('2019-11-11 11:11:11'))console.log(now.getFullYear());//2021console.log(now.getHours());console.log(now.getMonth()+1);//需要加1才是当前月console.log(now.getDay());//周日0console.log(now.valueOf())//距离 1970 1.1 的毫秒数console.log(now.getTime())//距离 1970 1.1 的毫秒数var now1 = +new Date();// 距离 1970 1.1 的毫秒数var now2 = Date.now();// 距离 1970 1.1 的毫秒数console.log(now1);console.log(now2);function countTime(inputTime){var now = new Date();//当前时间总豪秒数var times = (inputTime-now) / 1000;var d = parseInt(times / 60 / 60 / 24);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;}script>
<script>//数组对象var arr1 = new Array();var arr2 = new Array(3);//长度为3var arr3 = new Array(1,2,3);console.log(arr3 instanceof Array)//是否是数组1console.log(Array.isArray(arr3))//是否是数组2 h5新增ie9//CRUD Arrayarr3.push(4);//末尾加 返回值是新数组的长度console.log(arr3);arr3.unshift(0,1,0)//头加一个或多个 返回值是新数组的长度console.log(arr3);var p = arr3.pop()//末尾弹出一个 (删除) 返回弹出的那个元素console.log(p);console.log(arr3)console.log('------')var sh = arr3.shift();//删头一个 返回弹出的那个元素console.log(sh)console.log(arr3)console.log('-------')//数组索引var arr4 = [1,2,3,4,2];console.log(arr4.indexOf(1))//0 返回索引 没有返回-1console.log(arr4.lastIndexOf(2))//4 从后往前开始找script>
<script>console.log('-------')//字符串对象var x = '1';x = '2';//它在内存中新开辟了一个内存空间 1 仍在内存中//不可变性: 不要大量拼接字符串var str1 = '012345';console.log(str1.indexOf('2'));//2索引返回与数组一样console.log(str1.indexOf('2',1));//从索引1 开始查找var str2 = 'jdsh';console.log(str2.charAt(2));//根据位置返回字符console.log(str2.charCodeAt(2))//返回字符ASCII码//拼接 截取var str3 = str1.concat(str2); // 拼接多个字符串var str4 = str3.substr(1,4);//1234 从1 截取4个字符var str5 = str3.slice(1,4);//123 从1 截取到3var str6 = str3.substring(-1,4);//0123 从-1 截取到3 接受负值console.log(str4);console.log(str5);console.log(str6);//替换 转为数组spilt join 是数组变字符串console.log('----');var str7 = 'w,dnmd';var str8 = str7.replace('w','sb');console.log(str8);console.log(str8.split(','));//[sb,nmd]
script>

另外:

  • 简单数据类型放在栈内存 存放的是值,
  • 复杂数据类型 栈内存存放指针 指向堆内存的值
  • 简单传参 把实参值给形参,在栈内存
  • 复杂传参 对象传参 :栈内存 存指针(地址)指向 在堆内存 (存对象) 索引形参得到的是复制而来的栈内存指针,


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部