JavaScript学习笔记

Posted 小言同学Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习笔记相关的知识，希望对你有一定的参考价值。

文章目录

一、什么是javascript？

  • JavaScript是一门世界上最流行的脚本语言
  • 一个合格的后端人员，必须要精通
  • JavaScript严格区分大小写

二、快速入门

2.1引入JavaScript

  • 内部标签
<script>
	//.......
</script>
  • 外部引用
    a.js
//.......

text.html

<script src="a.js"><script>
  • 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签：写JavaScript代码-->
	<script>
	alert('hello world');
	</script>
	
    <!--外部引入-->
    <!--注意：script标签必须成对出现-->
    <!--<script src="../js/qj.js" type="text/javascript"></script>-->

</head>
<body>

</body>
</html>

2.2基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //1.定义变量   变量类型  变量名=变量值
        var score=77;
        var name="小言";
        //2.条件控制
        if(score>60&&score<70)
            alert("60~70");
        else if(score>70&&score<80)
            alert("70~80");
        else
            alert("other");
        
        //console.log() 在浏览器的控制台打印变量！
    </script>

</head>
<body>

</body>
</html>

2.3数据类型

数值，文本，图形，音频，视频…

numbe：js不区分小数和整数

123//整数123
123.1 //浮点数123.1
1.23e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大

字符串：‘abc’ “abc”
布尔值：true false
逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真

比较运算符

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

  • NaN === NaN，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3));

尽量避免使用浮点数进行运算，存在精度问题！

null和undefind

  • null 空
  • undefind 未定义

数组
Java的数组必须是相同类型的对象，JS中不需要这样！

var arr=[1,2,3,4,"hello",null,true];

取数组下标：如果越界了，就会是：undefined;

对象
对象是打括号，数组是中括号

 var person=
     name: "xiaoyan",
     age: 18,
     tags: ['js','java','web','...']

取对象的值

person.name
>xiaoyan
person.age
>18

2.4 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA 需要设置支持ES6语法
    'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题
    必须写在JavaScript的第一行
    局部变量建议都使用let去定义
    -->
  <script>
      'use strict';
     
     let i=1;
    //ES6  let
  </script>
</head>
<body>

</body>
</html>

三、数据类型

3.1 字符串

  1. 正常字符串我们使用单引号，或者双引号包裹
  2. 注意转义字符 \\
\\'
\\n
\\t
\\u4e2d  \\u####  unicode字符
\\x41     Ascll 字符
  1. 多字符串编写
//tab 上面 esc键下面
var msg=`hello
         world
         你好`
  1. 模板字符串
 //tab 上面 esc键下面
let name="xiaoyan";
let age=18;
let msg= `你好呀，$name`;
console.log(msg);
  1. 字符串长度
str.length
  1. 字符串的可变性，不可变

  1. 大小写转换
//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()
  1. student.indexOf(‘t’)：搜索指定字符的下标（位置）
  2. substring
[)
student.substring(1) //从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2数组

Array 可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0]=1
  1. 长度
arr.length

注意：假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失。

  1. indexOf,通过元素获得下标索引
arr.indexOf(2)
1

字符串的“1”和数组的1 是不同的

  1. slice() 截取array的一部分，返回一个新数组。类似于String中的substring
  2. push()，pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素

  1. unshift()，shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素

  1. 排序 sort()

  2. 元素反转

  3. concat()


注意：concat()并没有修改数组，只是会返回一个新的数组

  1. 连接符 join
    打印拼接数组，使用特点的字符串连接

  2. 多维数组

3.3 对象

若干个键值对

var 对象名=
属性名：属性值，
属性名：属性值，
属性名：属性值


//定义了一个person对象，它有四个属性！
var person=
    name:"XiaoYan",
    age:18,
    email:"2757435302@qq.com",
    score:100

JS对象中，…表示一个对象，键值对描述属性。多个属性之间使用逗号隔开，最后一个属性不加逗号。

JavaScript中所有的键都是字符串，值是任意对象！

  1. 对象赋值

  2. 使用一个不存在的对象属性，不会报错！是会显示一个undefined

  3. 动态的删减属性，通过delete删除对象属性

  4. 动态的添加，直接给新的属性添加值即可

  5. 判断属性值是否在这个对象中。 xx in xxx

'age' int person
true
//继承
'toString' in person
true
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true​

3.4 流程控制

  1. if判断
var age=18
if(age>=18)
    alert("已成年");
else
    alert("未成年")
  1. while循环，避免程序死循环
while(age<100)
   age=age+1;
   console.log(age);


do
   age=age+1;
   console.log(age);
while(age<100)
  1. for循环
for (let i = 0; i < 100; i++) 
    console.log(i)
  1. forEach循环

5.1特性

var age=[1,23,34,5,57,66];
      
age.forEach(function (value)
   console.log(value);
);
  1. for…in
var age=[1,23,34,5,57,66];
/*
for(Type str:el)
 */
//for(var index in object)
for(var num in age)
    if(age.hasOwnProperty(num)) 
        console.log(age[num]);

3.5 Map和Set

ES6的新特性~

  1. Map:
 //ES6 Map
 //学生的成绩，学生的姓名

 var map=new Map([['tom',89],['jack',99],['小言',99]]);
 var name=map.get('tom');//通过key获得value
 map.set('小明',78);   //新增或者修改
 console.log(name); //结果未89
 map.delete("tom");  //删除
  1. Set：无序不重复的集合
var set = new Set([3,1,1,1,1]);//set可以去重
set.add(2);//添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素

3.6 iterate

ES6新特性

  1. 遍历数组
    通过for of 打印出数组具体的值
//for fo:打印具体的值
//for in:输出下标
var arr=[6,7,8]
for(var i of arr)
    console.log(i);
  1. 遍历map
var map=new Map([['tom',89],['jack',99],['小言',99]]);
for(var x of map)
    console.log(x);
  1. 遍历set
 var set=new Set([6,7,8]);
 for(var x of set)
      console.log(x);

四、函数

4.1 定义函数

定义方式一

绝对值函数

function abs(x)
      if(x>=0)
          return x;
      else
          return -x;
  • 一旦执行到return代表函数结束，返回结果！
  • 如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function (x)
       if(x>=0)
           return x;
       else
           return -x;
  • function…这是应该匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数！
  • 方式一和方式二等价！

调用函数

4.2 变量的作用域

  • 在JavaScript中，var定义的变量实际是有作用域的；
  • 假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，可以去研究一下闭包)
function a()
      var x=1;
      x=x+1;
  
  x=x+2;  //x is not defined

  • 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
  function a()
      var x=1;
      x=x+1;
  

  function b()
      var x='A';
      x=x+1;

提升变量的作用域

function c()
     var x='x'+'y';
     console.log(x);
     var y='y';

结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量的赋值。

function  d()
      var y;
      var x='x'+'y';
      console.log(x);
      y='y';

结果：xy

  • 这个是在JavaScript建立之初九存在的特性。养成规范：所有的变量都放在函数的头部，不要乱放，便于代码维护；

全局函数

//全局变量
 var x=1;
 function e()
     console.log(x);
 
 f();
 console.log(x);

全局对象window

var x=123;
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下；
  • alert()这个函数本身也是一个window变量；

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

== 规范==
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突->如何能减少冲突？

//唯一全局变量
var k=;
//定义全局变量
k.name="小言";
k.add=function (a,b)
    return a+b;
  • 把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

局部作用域 let

function a()
     for (var i=0;i<100;i++)
         console.log(i);
     
     console.log(i+1);
  • ES6 Let关键字，解决局部作用域冲突问题！
  • 建议使用let去定义局部作用域的变量

常量const

  • 在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
  var PI=3.14;
  console.log(PI);
  PI=123; //可以改变这个值
  console.log(PI)

在ES6引入常量关键字const

const PI=3.14; //只读变量

console.log(PI);
//PI=123; //（报错）

4.3 方法

  • 方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
  var person=
    name:'小言',
    year:2000,
    age:function ()
      var now=new Date().getFullYear();
      return now - this.year;
    
  
  //属性
  person.name
  //方法，一定要带（）
  person.age()

apply

在js中可以控制this的指向

function getAge()
        var now=new Date().getFullYear();
        return now - this.year;
    
  var person=
    name:'小言',
    year:2000,
    age:getAge
  ;
  //getAge() //无法直接调用
    //person.age()
   getAge.apply(person,[]);
  • 结果图：

五、内部对象

标准对象

typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof 
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 Date

基本使用

var now = new Datejavascript学习笔记：DOM节点概述


 JavaScript DOM编程艺术-学习笔记（第三章第四章）


 前端乱煮之javascript学习笔记三


 JavaScript学习笔记


 Javascript MVC 学习笔记 视图和模板


 Jquery学习笔记