开发者社区> 7qaurmniryimw> 正文

前端开发笔记——JavaScript

简介: 阿里云前端路线JavaScript入门笔记
+关注继续查看
JS基础知识
  • 变量命名规则
  1. 变量的名字必须是数字、字母、下划线和$组成
  2. 变量的名字不能以数字开头
  3. 变量的名字不能是关键字for while if
  4. 建议 变量有意义
  5. Js中变量区分大小写
  6. 如果变量重名了,后面的会替换前面的
  7. 变量的命名尽可能使用驼峰法命名
  • 注释
  1. //
  2. / 无论是什么都不会被运行 /
JS数据类型
  • 数值Number、字符串String、布尔Booleanundefinednull、对象Object(函数、数组)
  1. 如果要在字符串中使用引号,请使用转义字符 \'
  2. 使用单引号或者双引号引起来的才是字符串
  3. 字符串相加与数值运算
  4. +既可以作为数学运算使用也可以作为字符串拼接使用
  5. 从前往后运算,如果两个变量都是数值型那么加号作为数学运算符
  6. 直到遇到一个字符串,此后所有的加号都是字符串拼接
  • 类型转换
  1. 其他类型转为数值类型:
var a=Number(null) //0
var b=Number(undefined) //NaN
var c=Number("c") ///NaN

var d=parseInt(null) //NaN
var e=parseInt(undefined) //NaN
var f=parseInt('23k') //23
var g=parseInt('k23') //NaN
  1. 其他类型转换为布尔类型:
var a=Boolean('0') //true
var b=Boolean(0) //false
var c= Boolean(null) //false
var d=Boolean(undefined) //false
var e=Boolean('') //false
var f=Boolean(' ')//true
JS操作符与运算符
  • 操作符在变量前面,先进行自身运算,再进行其他运算
  • 操作符在变量的后面,先进行其他运算,再进行自身运算
  • 在JS中 ,逻辑运算的结果是决定整个表达式的子表达式
var a=1;
var b=2;
var c=0;

console.log(c && b); //0
console.log(a || c); //1
//运算优先级 先运算&&再运算||
console.log(a||c&&b); //1
console.log(a&&b) //2(b是决定整个表达式的子表达式)
console.log(b&&a) //1
  • JS是一种弱类型语言,变量的数据类型存在自动转换
var a='2';
var b=2;
//==只比较值,不比较数据类型
console.log(a==b); //true
//=== 全等比较 既比较值也比较数据类型
console.log(a===b); //false
  • 运算符优先级(从高到低)
  1. ()优先级最高
  2. 一元运算符 ++ -- !
  3. 算数运算符 先* / 后+ -
  4. 关系运算符 > < >= <=
  5. 相等运算符 == === != !==
  6. 逻辑运算符 先&&后||
  7. 赋值运算 =
JS语句
  • switch case不加break和加break的区别
//不加break未捕获到
var a=10;
switch(a){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 5:
        console.log(5);
    default:
        console.log("ok");
}//ok

//不加break捕获到
var a=2;
switch(a){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 5:
        console.log(5)
    default:
        console.log("ok")
}//2 5 ok

//加break捕获到
var a=2;
switch(a){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2);
        break;
    case 5:
        console.log(5);
        break;
    default:
        console.log("ok");
        break;
}//2
  • do while循环 先执行一次代码,然后再进行条件判断
JS数组
  • 创建数组
var a1=[];//直接定义空数组
var a2=new Array(1,"2",3)//构造函数方式创建数组
JS函数
  • 形参和实参

形式参数:是在声明函数时写的,多个形参使用“,”隔开,形参的值是不固定,形参仅仅是一个占位。与实参实际传入的值要一一对应。

实际参数:在调用时,实际传入函数中的值,多个使用“,”隔开,传入后,在函数中使用形参获取具体的值。

  • 函数返回值
  1. 如果函数中没有return,那么函数调用之后的返回值就是undefined。
function fun(a,b){
    var c=a-b;
}
var res=fun(10,1);
console.log(res) //undefined
  1. 如果函数中有return,但return后面没有值,那么函数调用之后的返回值就是undefined。
function fun(a,b){
    var c=a-b;
    return ;
}
var res=fun(10,1);
console.log(res) //undefined
  1. 函数return之后,不管后面有什么代码,均不执行,return后函数调用结束。
function fun(a,b){
    var c=a-b;
    return c;
    console.log(a);
}
var res=fun(10,1);
console.log(res) //9
  • 匿名函数

作用域在函数当中,防止全局变量的污染,封装一个局部作用。

  • 函数当作参数
  1. 回调
function f1(s){
    var k=123+s;
    console.log(k);
    s();
}
var f2=function(){
    console.log(123);
}
f1(f2);
  1. 闭包
function f1(){
    var a=10;
    var f2=function(){
        alert(12);
    }
    return f2;
}
var res=f1();
res();
  • 变量提升:在代码执行之前变量已经在编译阶段被声明

JS代码的运行分为两个阶段

  1. 解析(编译)阶段:语法检查,变量及函数进行声明
  2. 运行阶段:变量的赋值,代码流程的执行
console.log(a);//undefined
var a=1;
//先声明变量再运行代码
  • 代码执行

在变量未赋值的情况下,如果函数与变量同名,那么函数声明会替代变量声明

console.log(a);//f a{console.log("a"); }
function a(){
    console.log("a");
}
var a=1;
console.log(a);//1
  • 作用域与作用域链

作用域链:当函数中使用某个变量时,优先在自己的作用域中查找。如果找不到,就会向上一级作用域查找。如果找不到继续往上一层查找,直到全局作用域。如果还找不到直接报错。

// var a=0;
function f1(){
    // var a=1;
    function f2(){
        // var a=2;
        function f3(){
            // var a=3;
            console.log(a);
        }
        f3();
    }
    f2();
}
f1();
//从上到下取消注释
// a is not defined
//0
//1
//2
//3
JS对象
  • this指向
  1. 在方法中的this指的就是这个方法所在的对象
var obj1={
    name:'fqc',
    age:18,
    fu:function(){
        var a=this.age;
        console.log(a)
    }
}
obj1.fu();
  1. 普通函数中的this指向全局对象(window)
function fun(){
    console.log(this)//window
}
  1. this运行在哪个对象下,就指向哪个对象
k = '678';
function fun() {
    var k = '89'
    console.log(this.k);
}
var o1 = {
    k:'123',
    f:fun,
}
var o2 = {
    k:'345',
    f:fun,
}
o1.f();//123
o2.f();//345
  • 包装对象:原始类型(数值、字符串、布尔)的数据在一定条件下可以自动转为对象。如果包装对象使用完成会立即自动销毁。
  • 数字对象:获取n-m之间随机数的值
Math.floor(Math.random()*(m-n)+n);
  • 日期对象

JS中获取的时间是计算本地时间,JS中月份的数组是从0开始的。

其它
  • localStorage and sessionStorage

HTML5提供了两种在客户端存储数据的新方法:

  1. localStorage-没有时间限制的数据存储(5M)
  2. sessionStorage-针对一个session的数据存储,当用户关闭当前浏览器窗口,数据会被删除(5M)。

之前,这些都是由cookie完成的。但是cookie(4k)不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cook速度很慢而且效率也不高。

个人博客地址:www.fangqc.xyz

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19807 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29151 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22538 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20695 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16442 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14900 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23580 0
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载