JavaScript基础

JavaScript基础

JavaScript-介绍

书写方式

内联

<button onclick="alert('内联')">内联</button>

内部书写

一般写在 上面

  <script>
      alert('内部样式')
  </script>

外部引入

一般写在 上面

<script src="./js.js"></script>

注释

//单行注释
/*多行注释*/

输入输出语句

输出

//输出语法 网页输出
document.write('giao');
//弹窗
alert('giao');
//控制台输出
console.log('giao');

输入

//输入
prompt('提示语','默认值');
//确认
confirm('提示语');

JavaScript-变量

声明赋值

//声明变量  
//关键字  变量名
let number ;
//给关键字赋值
//这个数据存入了 number 这个“容器”中
number = 20;

关键字 let const var

块级作用域 : ES6新增 变量只能在当前作用域访问

变量提升 : 历史遗留 , 定义了一个变量浏览器会默认给这个变量赋值undefined, 不会报错, 将变量提升至作用域顶端

暂时性死区 : 如果区块内存在 let , const ,从一开始就是形成封闭作用域, 再声明之前使用变量, 会报错形成暂时性死区

let const

1. 不存在变量提升
2. 同一作用域不能重复
3. 有块级作用域
4. const 值 不能修改

var

1. 有变量提升
2. 同一作用域可以重复声明
3. 没有块级作用域(有全局和函数作用域)

变量名规则

• 只能是字母，数字，下划线，$，但不能以数字开头
• 字母区分大小写
• 不能使用关键字
• 尽量有语义
• 尽量遵守驼峰命名法

变量数组

可以保存多个数据

语法

// let 数组名  = ['内容','内容','内容'];
   let arr    = ['内容','内容','内容'];
// 下标   		  0      1      2

• 数字是按顺序保存，每个数据都有自己的编号
• 编号从 0 开始，也叫索引或下标
• 可以存储任意类型数据

取值

let arr = ['内容','内容','内容'];
//数组名[下标]
console.log(arr[0]);
//数组长度 length
console.log(arr.length);

• 数组长度 arr.length
• 数组下标长度 arr.length - 1

数据类型

基本类型 (常用)

Number String Boolean null undefined object

引用类型 数组 对象

number 数字型类型

let score = 100; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数

string字符串类型

let user_name = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let str = '123'; // 看上去是数字，但是用引号包裹了就成了字符串了
let str1 = ''; // 这种情况叫空字符串

• 单引号和双引号本质上没区别
• 推荐使用单引号
• 必要时可以使用转义符 \，输出单引号或双引号

string 字符串拼接

用 + 拼接

let name = '小啊giao';
let age = 22;
console.log('我叫'+name+',今年'+age+'了')

模板字符串 ``

可以换行 填写嵌套代码

let name = '小啊giao';
let age = 22;
console.log(`我叫${name},今年${age}了`)

boolean 布尔类型

let isCool1 = true; // 正确
let isCool2 = false; //错误

undefined 未定义类型

let name ; //声明未赋值
document.write(name);  //输出undefined

null 空类型

let name = null ;

• 表示赋值了，但内容为空

数据类型判断

typeof

可以判断基本类型, 不能对null , {} , [] 进行精确判断, 返回object

console.log(typeof 'giao');  // string
console.log(typeof 123);  //number
console.log(typeof false);  // boolean
console.log(typeof undefined); // undefined
console.log(typeof function () { }); // function
console.log(typeof {}); // object
console.log(typeof []);  // object
console.log(typeof null);  // object

instanceof

能判断复杂类型 不能判断基本类型 , [] 也判断成 Object

console.log([] instanceof Array);  // true
console.log([] instanceof Object); // true
console.log('giao' instanceof string); // 报错

Object.prototype.toString.call()

可以判断数据的原始类型

Object.prototype.toString.call(2); // "[object Number]"
Object.prototype.toString.call(""); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(Math); // "[object Math]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function () { }); // "[object Function]"

类型转换

隐式转换

let name = '123';
let age = 123;
//结果  字符类型
console.log(name+age);
//结果  数字类型
console.log(name-age);

• 加号 两边只要有一个是字符串，结果都会是字符串
• 除了加号的运算符 都可以 转换为数字类型

显示转换

let name = '123';
let age = 123;
let age2 = '123.12';
 
// 0 null Nav undefined 可以转换
let zifu = String(age);
console.log(typeof zifu)  //结果  string
 
// 0 null Nav undefined 不能用 .toString()转换
let zifu2 = age.toString();
console.log(typeof zifu2)  //结果  string
 
let zhengshu = parseInt(name);
console.log(typeof zhengshu) //结果  number
 
let xiaoshu = parseFloat(age2);
console.log(typeof xiaoshu)  //结果  number

赋值运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

let n = 1;
n += 4;  //n = n + 5
n -= 4;  //n = n - 5
n *= 4;  //n = n * 5
n %= 4;  //n = n % 5
n /= 4;  //n = n / 5
console.log(n);

一元运算符

• 根据表达数的个数 分为 一元 二元 三元

自增 ++

• 让变量的值加1

自减 --

• 让变量的值减1

前置自增和后置自增

//先赋值后运算
n++;
//先运算后赋值
++n;

比较运算符

>： 左边是否大于右边
<： 左边是否小于右边
>=： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==： 左右两边是否相等
===： 左右两边是否类型和值都相等
!==： 左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

逻辑运算符

• && 与 并且 两边结果都为true 结果才为true
• || 或 或者 两边有一个true 结果为true
• ! 非 取反 true变false false变true

短路

• && 左边为false就不执行

JavaScript-语句

if语句

条件判断

单分支

if(条件){
   代码块
}

双分支

if(条件){
   代码块
}else {
   代码块
}

多分支

if(条件){
   代码块
}else if(条件2){
   代码块
}else {
   代码块
}

其他

if(变量){
  代码块
}else {
   代码块
}

• 根据变量的值来判断

三元运算符

条件 ? 满足条件的代码 : 满足条件的代码

switch 语句

switch (数据) {
    case '1':
        代码
        break;  //直接跳出switch
    case '2':
        代码
        break;
   default:     
    	代码
        break;
}

• switch 的判断条件 必须和 case 一样

  //1.
  switch ('1') {
      case '1':
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }
  //2.
  switch (true) {
      case true:
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }
  //3.
  switch (false) {
      case false:
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }

JavaScript-循环语句

while 循环

先判断，在执行

while (循环条件) {
  代码块
}

for 循环

把声明起始值、循环条件、变化值写到一起，让人一目了然

for (变量初始值; 循环条件; 变化值) {
  代码
}

continue和break区别

• continue 结束本次循环，继续下次循环
• break 跳出所在循环

双 for 循环

for (变量初始值; 循环条件; 变化值) {
  for (变量初始值; 循环条件; 变化值) {
    代码
  }
}

//九九乘法表
document.write(`<table border=1px; style = 'border-collapse:collapse;'>`);
for (let i = 1; i <= 9; i++) {
document.write(`<tr>`);
    for (let j = 1; j <= i; j++) {
        document.write(`<td>`);
        document.write(`${i}X${j}=${i*j}`);   
        document.write(`</td>`);         
    }
document.write(`</tr>`);
}
document.write(`</table>`);

JavaScript-操作数组

查询元素

数组[下标]

let arr = [2,3,4]
console.log(arr[0]) // 2

修改元素

数组[下标] = 新值

let arr = [2,3,4]
arr[0] = 7
console.log(arr[0]) // 7

添加元素

arr.push() 从后面添加元素

arr.unshift() 从前面添加元素

let arr = [2,3,4]
arr.push(9)
arr.unshift(0) 
console.log(arr) // [0,2,3,4,9]

删除元素

arr.splice(下标,个数(默认删到最后),替换的元素)

// 删除
let arr = ["Banana", "Orange", "Apple", "Mango"];
arr.splice(2,1);
console.log(arr) // ["Banana", "Orange", "Mango"]
// 替换
let arr = ["Banana", "Orange", "Apple", "Mango"];
arr.splice(2,1,"Lemon","Kiwi");
console.log(arr) // ["Banana","Orange","Lemon","Kiwi","Mango"]

冒泡排序

//七位数
let array = [3,4,6,2,1,7,5];  
//设置酱油瓶
let temp = [];
// 总循环次数   .length - 1  //  6
for (let i = 1; i < array.length - 1; i++) {
    //需要j做下标 设值 0  每行循环次数 - i次
    for (let j = 0; j < array.length - i; j++) {
        //比较  用酱油瓶  交换
        if (array[j] > array[j + 1]) {
            temp = array[j];
            array[j] = array[j + 1];
            array[j + 1] = temp
        }
    document.write('&nbsp;&nbsp;&nbsp;&nbsp;'+'内层'+' '+ (j+1)+'次'+'</br>');
    }
    document.write('外层'+' '+ (i+1)+' '+'行'+'</br>');
}
document.write('<h2>'+array+'</h2>');

数组去重并赋值新数组

• 方法一

let array = ['a', 'b', 'c', 'a', 'd', 'a', 'c', 'b', 'c', 'd', 'a', 'b', 'c', 'c', 'a',];
//定义新数组
let newArray = [];
// 遍历原数组元素
for (let i = 0; i < array.length; i++) {
     //用indexOf比较  相等返回索引   不等返回-1
     if (newArray.indexOf(array[i]) == -1) {
         // 如果不相等 添加
         newArray.push(array[i]);
     }
}
document.write(newArray);

• 方法二

//遍历原数组元素
for (let i = 0; i < array.length; i++) {
    //判断条件
    let flag = true;
    // 遍历新数组元素  如果新数组无值跳过  有值判断
    for (let j = 0; j < newArray.length; j++) {
        //比较  相等  返回false
        if (newArray[j] == array[i]) {
            flag = false;
        }
    }
    //判断  添加
    if (flag) {
        newArray.push(array[i])
    }
}
document.write(newArray);

JavaScript-函数

可以把具有相同逻辑的代码包裹起来，有利于精简代码，方便复用

声明

function 函数名() {
	函数体
}

函数命名

和变量基本一致

# 常用动词约定
 
can  判断某个动作
 
has  判断是否含某个值
 
is   判断是否为某个值
 
get  获取某个值
 
set  设置某个值
 
load    加载某些数据

调用方法

函数名()

函数参数

声明

可以传多个数据

参数与参数之间逗号隔开

function 函数名(参数,参数) {
  函数体
}

调用

函数名(参数,参数);

形参和实参

function getname(name) {  //形式参数
    document.write(name)
}
getname('giao'); //实际参数

• 开发中尽量保持形参和实参个数一致

函数返回值

return 数据;

• 能将内部的执行结果交给函数外部使用
• 只能出现一个return 并后面的代码不再执行
• 会结束当前函数
• 默认值 undefined

作用域

全局作用域

script标签内部有效

局部作用域

函数内部有效

块级作用域

{} 括号里有效 比如 if{} for{}

变量的作用域

全局变量

script标签内部可以访问修改

局部作用域

函数内部可以访问修改

块级作用域

{} 括号里有效 比如 if{} for{}

注意：var不具有块级作用域的说法 也是全局变量

作用域链

当前作用域没有变量, 一层一层向上寻找作用域的变量,这个关系, 作用域链

匿名函数

let 名字 = function (){};

• 函数也是数据
• 把函数赋值给变量
• 调用 名字()

自执行函数

//方法一
;(function (形参) {} )(实参);
//方法二
;(function (形参) {} (实参));

输入数字 转时间

function showTime(shu) {
    //时
    let h = parseInt(shu / 60 / 60);
    //分  去除余下的秒数
    let f = parseInt(shu / 60 % 60);
    //秒  余出来的数
    let m = shu % 60;
    h = h < 10 ? '0' + h : h;
    f = f < 10 ? '0' + f : f;
    m = m < 10 ? '0' + m : m;
    document.write(`转换为：${h}时${f}分${m}秒`);
}
let shu = prompt ('数');
showTime(shu);

JavaScript-对象

什么是对象

• 对象是一种数据类型
• 无序的数据结合
• 可以详细的描述某个事物

声明

多属性之间用,分隔

let 对象名 = {
  属性名:属性值,
  属性名:属性值,
  方法名:函数
}

访问属性

//方法一
对象名.属性名
//方法二
对象名['属性名']
 
//调用对象的方法
对象名.方法名();

增加属性 / 修改属性

//方法一
对象名.属性名 = '属性值'
//方法二
对象名['属性名'] = '属性值'
 
//增加对象方法的值
对象名.方法名() = function() {}

删除属性

delete 对象名.属性名
delete 对象名.方法名

遍历对象

//变量  in  对象
for (let key in object) {
     // 输出属性名
     console.log(key);
     //输出值
     console.log(object[key]);
}

遍历对象数据

let students = [
    {name: '小明', age: 18, gender: '男', hometown: '河北省'},
    {name: '小红', age: 19, gender: '女', hometown: '河南省'},
    {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
    {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
];
for (let i = 0; i < students.length; i++) {
    document.write(`
        <tr>
            <td>${i + 1}</td>
            <td>${students[i].name}</td>
            <td>${students[i].age}</td>
            <td>${students[i].gender}</td>
            <td>${students[i].hometown}</td>
        </tr>
    `)
}

求这个字符串里面出现最多的字符是哪个，出现了几次

let str = '132642343739373635384628633124abcdaabca';
//定义一个新对象        
let newStr ={};
//遍历出str的每个值
for (let i = 0; i < str.length; i++) {
    //判断newStr里是否有值  有值true 无值false
    //str[i] 相当于属性名
    if (newStr[str[i]]) {
        //有值  值+1
        newStr[str[i]]++;
    }else{
        //无值  赋值
        // 同时把属性名str[i] 也赋值进去
        newStr[str[i]] = 1;
    }
}
//最大属性名
let max = str[0];
//出现几次
let biJiao = newStr[str[0]]
//遍历newStr 的值
for (let key in newStr) {
    //比较
    if (newStr[key] > biJiao) {
        //如果大于赋值
        biJiao = newStr[key];
        // 同时赋值属性名
        max = key;
    }
}
console.log(biJiao + max);

几种对象

• 自定义对象：基础内容 属于ECMAScript
• 内置对象：指JS语言自带的一些对象
• 浏览器对象：JS独有的 ， JSAPI

Math对象 - 内置对象

//求 n - m 的随机数
 
//Math.floor  向下取整  
//Math.random 0-1取不到1
//( m - n + 1 ) 因为随机不到1所以加1向下取整
//+ n  从n开始随机
Math.floor(Math.random() * ( m - n + 1 ) + n);

Date对象 - 构造函数

• 必须使用 new 来调用

let now = new Date();

• 参数格式 YYYY-MM-DD hh:mm:ss'

let now = new Date(年,月,日,时,分,秒);

• 如果后面的时间没有写，默认为0

取值

let date = new Date();
//返回当前年份
console.log(date.getFullYear());
//返回月份小一个月  +1
console.log(date.getMonth() + 1);
//返回几号
console.log(date.getDate());
//返回星期几  从周日返回0 周一至周六 1-6
let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
let day = date.getDay()
console.log(arr[date.getDay()]);
//返回时
let h = date.getHours();
h = h < 10 ? '0' + h : h;
console.log(h);
//返回分
let m = date.getMinutes();
m = m < 10 ? '0' + m : m;
console.log(m);
//返回秒
let s = date.getSeconds();
s = s < 10 ? '0' + s : s;
console.log(s);

时间戳

//获取毫秒 - 距离1970年1月1日过了多少毫秒
//1.通过valueOf() getTime
let date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//2.常见的
let date = +new Date();
console.log(date);
//3.H5 新增
console.log(Date.now());

Array对象

//判断是否为数组
let arr = [];
// 1. instanceof
console.log(arr instanceof Array);
// 2. .isArray H5新增
console.log(Array.isArray(arr));
//反转数组
let arr = ['1','2','3'];
arr.reverse();
console.log(arr);
//数组排序
let arr = ['1','2','3'];
arr.sort(function (a,b) {
    return a - b;  //升序
    return b - a;  //降序
});
//返回数组元素的索引
let arr = ['1','2','3'];
console.log(arr.indexOf('2'));
//转换字符串
//1. .toString()
let arr = ['giao','giao','giao'];
console.log(arr.toString());
//2. .join  可以添加分隔符
console.log(arr.join('-'));