JavaScript(1)-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <!-- JavaScript内部编写位置 -->
  <Script>
    // 弹出提示框
    alert('hello world!');
  </Script>
</body>
</html>

也可以在head部分进行js代码的编写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    alert('hello js')
  </script>
</head>
<body>


  <!-- JavaScript内部编写位置 -->
  <Script>
    // 弹出提示框
    alert('hello world!');
  </Script>
</body>
</html>

js是顺序解释执行，所以会先弹出'hello js'，再弹出'hello world'。如果我们需要头部的js语言等html的全部执行完成后在执行可以使用 window.οnlοad=function(){//需要执行的js代码} 类似于生命周期的函数，进行页面加载时的判断，加载完成执行内部的js代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 类似于生命周期函数，进行页面加载的判断
    window.onload=function(){
      // 需要执行的js代码
      alert('hello js')
    }
  </script>
</head>
<body>


  <!-- JavaScript内部编写位置 -->
  <Script>
    // 弹出提示框
    alert('hello world!');
  </Script>
</body>
</html>

2.外部JavaScript使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 通过script的src属性将test.js的文件导入进来 -->
  <script src="./test.js"></script>
</head>
<body>



</body>
</html>

js文件内容

alert('Hello Js');

在body和head中写入js代码的区别

在body部分中的JavaScript会在页面加载的时候被执行，在head部分中的JavaScript会在被调用的时候才执行，因为浏览器html解析是从上到下的，如果把JavaScript放在head里的话，则先被解析，但是body还没有加载出来的话，则会返回一个空值，导致页面出现错误

2.关键字与保留字

关键字:(在js中有特殊功能)

break do try typeof case else new var catch finally return void continue for switch while debugger this function with default if throw instanceof delete in

保留字：(将来可能成为关键字)

abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger double implements protected volatile import public

(1) 区分大小写

var 关键字， VAR 非关键字

(2) 标识符

指变量，函数，属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符：

1.字母，数字，下划线，$组成

2.只能以字母，下划线，$开头。

3.不能将关键字作为标识符。命名推荐采用驼峰式命名

3.变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型（松散类型），可以用来保存任何类型的数据。

// 变量声明
var a;
// 变量初始化
a = 3;
// 变量调用 打印变量
console.log(a);

js是弱类型的语言

弱类型语言具有如下特点：

变量的数据类型在初始化的时候确定
变量的数据类型可以随时发生改变
类型细分不明显

Java 是强类型语言:

变量的数据类型在声明的时候确定
变量的数据类型一定确定不能更改

3.1变量声明提升

console.log(a); //undefined
var a = 123;
console.log(a); //123

var声明的变量会导致变量声明提升，此处，a的声明被提升到作用域顶部，相当于:

var a;
console.log(a); //undefined
a = 123;
console.log(a) // 123

3.2 var声明的作用域

例一

函数作用域

函数中声明的对象作用范围只会在函数中存在

function fn(){
  var a = 3;
  console.log(a);
}
fn();
console.log(a); // a is not defined

var 的变量声明提前只会提升到当前作用域的最前面

例二

如果一个变量没有被var声明说明是一个是全局变量

// 如果一个变量没有被var声明 说明是一个是全局变量
function fn(){
  message = "hello";
}
fn();
// 全局变量
console.log(global);
console.log(message); // hello

例三

全局作用域

用var操作符定义的变量将成为定义该变量的作用域中的局部变量

//用var操作符定义的变量将成为定义该变量的作用域中的局部变量
//全局作用域
function b(){
  a = 10;//全局声明
  return
}
var a = 1; // ==> a = 1;
console.log(a); // 1
b(); // b(); ==> a = 10;
console.log(a); // 10

例四

a函数声明，提前变量a，将a认为是函数b作用域的变量，具有局部效果

//函数作用域：局部作用域
var a = 1;
function b() {
  a = 10;
  return;
  //a函数声明，提前变量a，将a认为是函数b作用域的变量，具有局部效果
  function a(){}
} 
b(); 
console.log(a); // 1

//执行结果如下：
function b(){
    function a(){}
    a = 10;
    return;
}
var a;
a = 1
b();
console.log(a) // 1

例五

a = 1;// gloabal.a
console.log(a); //1
function b(){
  console.log(a); //1
  console.log(this.a); //指向全局变量a 如果你在局部作用域中使用this this就是global
  var a = 2;
  console.log(a); //2
}
b();
console.log(a); // 1
console.log(this); //{}

例六

(function () {
   console.log(a);
   var a=1;
   function a() {
       console.log("biu~");
   }
})()
实际执行结果：

(function () {
   function a() {
       console.log("biu~");
   }
   console.log(a);//打印了a这个函数的函数体
   a=1;//因为函数有限声明提升，所以这里的var a被提升时，发现重复声明，故被忽略了var a；    
})()

4.数据类型

基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

// 字符串
var a = 'shang\nsan';
var b = "lisi";
// 模板字符串
var c = `abc`;
console.log(typeof a, b, c);// string lisi abc

// number 数字
var num1 = 34; // 34
var num2 = 010; //8 八进制
var num3 = 0x10;//16 十六进制
console.log(num1, num2, num3);

// 数值检测
 var d = 10 / 'd';
 var e = 10 / '10';
//  如果你的字符串也是一个数字字符串 那么先会将字符串转换为number
 console.log(d, typeof e)

//  NUmber的范围 极大值 极小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

// =等号
// 一个等号  赋值操作 将等号后的值赋值给等号前面的变量
var f = 1
console.log(f); // 1
// 两个等号 左右变量/数据类型的比较 只会比较值是否相等 不会比较数据类型
console.log(10 == '10');
// 三个等号 严格相等 先去判断数据类型是否一样 如果不一样 直接false
// 如果数据类型一样 再去比较值
console.log(10 === '10');
// console.log(undefined == null); //true
// console.log(undefined === null); // false

4.1基本数据类型和引用数据类型在内存中如何存储

基本数据类型

var a = 123;
var b = a;
b = 456;
console.log(a, b); // 123 456

var a = 123; b = a;基本数据类型是在栈内存中存储的，如下图，b = a的时候，b直接把a的值存进去

b = 456; 会把b的值改为456，但是对b没有任何影响，所以最后会输出a = 123,b = 456

结论：基本数据类型的值存在栈,值与值之间独立存在，修改一个值不会影响其他变量

引用数据类型

// 浅拷贝
var c ={name: 'zhangsan', age: 20};
var d = c;
d.name = 'lisi'
console.log(c, d)// {name: 'lisi', age: 20}{name: 'lisi', age: 20}

引用数据类型将变量和内存地址放到了栈区，将内容放在了堆区

结论：当栈存放引用类型时，值为对象的地址，obj与obj1指向同一个地址，所以当obj的name值变为“lisi”时，obj1也会发生变化

4.2深拷贝和浅拷贝

深拷贝和浅拷贝主要针对于引用数据类型参数说的，浅拷贝表示仅拷贝引用地址，深拷贝表示对于对象的克隆。

解决浅拷贝的方法：

使用点语法

var c ={name: 'zhangsan', age: 20};
// 三点运算符
console.log({...c} === c)
var d = {...c};
// 对对象中的属性进行操作 直接使用点语法就好了
d.name = 'lisi'
console.log(c, d)//{name: 'zhangsan', age: 20}{name: 'lisi', age: 20}

lodash

var _ = require('lodash');
// 深拷贝 浅拷贝
var obj1 = {name:'zhangsan'}
var obj2 = _.cloneDeep(obj1)
obj2.name = 'lisi'
console.log(obj1, obj2); //{name:'zhangsan'}{name:'lisi'}

5.类型判断

typeof: 通过typeof可以判断一个变量的类型

var a = 3;
console.log(typeof a); //number

isNaN: 判断是否是不是一个数字

var a = 'asdasd';
console.log(isNaN(a)); //true

isFinite:返回一个 Boolean 值,指明所提供的数字是否是有限的。

var a = 10/0 ;
isFinite(a)   // false