JavaScript基础知识

无心的空白

已于 2022-06-09 21:29:29 修改

阅读量488

点赞数 2

分类专栏：原生js 文章标签： javascript

于 2021-09-17 22:19:44 首次发布

本文链接：https://blog.csdn.net/m0_55240753/article/details/120357863

版权

原生js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当你尝试把一个大问题化解成许多小问题时，或许你就会有思路了。 ------niannian

注：本篇文章比较长，可按需查看。

我最开始接触js（JavaScript的简称）是通过一张图开始的，如下图：

上面这张图让我们聊了，js的大概作用，下面开始正式介绍

第一章认识JavaScript

1.1 介绍js

JavaScript是一门编程语言，也就是计算机语言，是我们与计算机交流的语言。就像我们与外国人交流一样，需要英语，我们与计算机交流同意需要语言——编程语言。

1.2 js发展史

机器语言：01时代，代码全是有0和1组成
汇编语言：用各种特殊符号代替冗长、难以记忆的0和1代码，比如：mov、add等指令
高级语言：也就是我们现在所使用的语言

1.3 js起源

1995年网景公司的程序员Brendan Eich用了10天时间写出来JavaScript这门语言，最开始主要是应用于表单验证

1.4 js包含

js主要包含ECMAScript（JavaScript标准）、DOM、BOM。

1.5 js编写位置

主要就是以下几种写法，注意小细节：

script标签如果用于引入外部标签栏，则当前标签内部无法再写其他js代码了
如果在内部js代码中需要用到外部js文件里面的变量，则需要在这之前就因为该外部js文件
script标签既可以引入本地js文件，也可以引入远程js文件（俗称CDN方式）
如果可以的话尽量在body的末尾引入js文件，因为在之前引入，系统会先去引入js文件，再来解析HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <!-- 主要是引用外部js文件 -->
    <script src="js文件路径"></script>
    <!-- 内部js代码 -->
    <script>
       // 代码
    </script>
  </head>
  <body>
    <!-- 行内写法 -->
    <a href="javascript: void(0)"></a>
    <!-- 主要是引用外部js文件 -->
    <script src="js文件路径"></script>
    <!-- 内部js代码 -->
    <script>
       // 代码
    </script>
  </body>
</html>

第二张 JavaScript基础

2.1 基础语法

2.1.1 注释

也就是解释当前代码的主要作用
单行注释："//" 双斜杠（vscode编辑器快捷键 ctrl+/）
多行注释：以 "/*" 开始，以 "*/" 结束

// 单行注释

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

2.1.2 语句

一条语句一般采用分号结尾，每条语句独占一行这样的格式来编写代码。每个大括号内部叫做一个代码块。

const num = 10;
const obj = {
         name: "niannian"
      }
// 注意console.log这个将会是你以后编程的同伴，后面就会体会这句话了
console.log(num);

2.1.3 标识符

const num = 5;
const TestNum = 10;
const testNum = 20;
const test_num = 30;

上面的num、TestNum、testNum、test_num就叫做标识符

命名的硬性要求：

可以是由数字、字母、下划线和美元符号（$）组成，不允许包含其他特殊符号
不能以数字开头
禁止使用JavaScript中的关键字和保留字来进行命名
严格区分大小写

命名的方法：

TestNum：大驼峰命名法
testNum：小驼峰命名法（常用，推荐）
test_num：蛇形命名法

关键字以及保留字：

abstract、await、boolean、break、byte、case、catch、char、class、const、continue、debugger、default、delete、do、double、else、enum、export、extends、false、final、finally、float、for、function、goto、if、implements、import、in、instanceof、int、interface、let、long、native、new、null、package、private、protected、public̵return、short、static、super、switch、synchronized、this、throw、throws、transient、true̵try、typeof、var、volatile、void、while、with、yield

2.1.4 数据类型

简单数据类型：string、number、boolean、null、undefined、symbol公六种
复杂数据类型：object共一种

检测数据类型方法：

typeof 如果需要的类型不复杂建议使用这个
Object.prototype.toString.cell() 这个更准确

console.log(typeof 10); // number
console.log(typeof true); // boolean
console.log(typeof 'Hello'); // string
console.log(typeof [1,'1',2]); // object
console.log(typeof {}); // object

console.log(Object.prototype.toString.cell(10)); // [object Number]
console.log(Object.prototype.toString.cell([1,'2'])); // [object Array]
console.log(Object.prototype.toString.cell({})); // [object Object]

2.1.5 声明变量（可变、可以重新赋值）和常量（不可变、不能重新赋值，否则报错）

var：声明变量，早期使用，现在尽量不要用了
let：声明变量（建议使用）
const：声明常量（特别推荐），用此关键字声明的复杂数据类型依然可以重新赋值

var num1 = 10;
let num2 = 20;
const num3 = 30;

2.1.6 变量赋值（给一个新的值）和初始化（最开始给的值）

let num1 = 10;  // 初始化
num1 = 20;      // 重新赋值
console.log(num1); // 20

// 初始化
let obj1 = {
    name: 'niannian1'
}
obj1.name = 'niannian2'; // 重新赋值
console.log(obj1); // { name:"niannian2" }

// 初始化
const obj2 = {
      name: 'niannian1',
}
obj2.name = 'niannian2'; // 重新赋值
console.log(obj2); // { name: "niannian2" }

const num2 = 20; // 初始化
num2 = 30;       // 报错
console.log(num2);  // 无法执行

2.1.7 作用域

// 全局作用域
const num1 = 10;

const obj1 = {
      // 大括号内部 称为局部作用域
      name: 'niannian1'
}

const obj2 = {
      // 大括号内部 称为局部作用域
      name: 'niannian2'
}

const num1 = 20; // 报错
let num1 = 20;  // 报错 如果上一行不注释掉，将不会执行到这里来

2.2 数据类型

2.2.1 undefined类型

值只有一个，为undefined

let a;
console.log(typeof a); // undefined
console.log(typeof b); // undefined
console.log(a); // undefined
console.log(b); // 报错：b is not defined

2.2.2 unll类型

表示一个空对象（空指针对象），值只有一个为null

let a = null;
console.log(typeof a); // object

console.log(null == undefined); // true
console.log(null === undefined); // false

2.2.3 布尔类型（boolean）

值只有两个：true（对）和false（错）

const boo = true;
console.log(boo); // true
console.log(typeof boo); // boolean

console.log(Boolean("niannian")); // true
console.log(Boolean(22)); // true
console.log(Boolean(0)); // false

2.2.4 数字类型（number）

整数——正整数和负整数
实数——小数，又称浮点数
js数值范围，最大值(Infinity)：Number.MAX_VALUE或Math.pow(2,1024)，最小值(-Infinity)：Number.MIN_VALUE或-Math.pow(2,1024);
NaN非数值，就是除了数字之外的任何东西，可以用isNaN方法检测，如果是非数值返回true，反之返回false，NaN和任何值都不相等，包括自己
数值转换Number()、parseInt()、parseFloat()
Number.isInteger(num) 判断是否为整数
Number.isFinite(num) 判断是否为有限数字，传入参数不为数字时总是返回false
(3.15).toFixed(num) 将前面括号里面的数据四舍五入变为小数点后存在num为数字，num范围为0-20
toExponential()、toPrecision()等方法都是改变数字的方法

const num1 = 10;        // 正整数
const num2 = 20;        // 负整数
const num3 = 3.14;      // 小数
const num4 = 9.12e+2;   // 科学计数法，小数  结果为912

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Math.pow(2, 1024)); // Infinity
console.log(-Math.pow(2, 1024)); // -Infinity

console.log(typeof NaN); // number
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
console.log(isNaN('123')); // false
console.log(isNaN(123)); // false
console.log(isNaN('hello')); // true
console.log(isNaN(true)); // false

/**
 * 二进制：以0b开头，如：0b101转为十进制为5
 * 八进制：以0o开头，如：0o17转为十进制为15
 * 十进制：我们常用的数字写法
 * 十六进制：以0x开头，如：0xFD转为实际值为253
 */
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(10)); // 10
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("123")); // 123
console.log(Number("0123")); // 123
console.log(Number("0b101")); // 5
console.log(Number("0o17")); // 15
console.log(Number("0xFD")); // 253
console.log(Number("")); // 0
console.log(Number("123hello")); // NaN

/** 转为整形
 * parseInt接收两个参数，第二个参数可以不传
 * 第一个参数：被转的字符或数字
 * 第二个参数：指定被转的字符是什么进制的数字，可以为2、8、10、16
 */
parseInt(a, b);

/** 转为浮点数
 * parseFloat接收一个参数
 * 第一个参数：被转的字符或数字
 */
parseFloat(a);


let num5 = 3.15;
console.log(num5.toFixed(0)); // 3
console.log(num5.toFixed(1)); // 3.2
console.log(num5.toFixed(2)); // 3.15

2.2.5 字符串类型（String）

const str = ""; 双引号空字符串，还可以写为单引号空字符串和模板字符串``
const str2 = ''abcd";
toString()将其他类型的值转为字符串类型
模板字符串

const str1 = "";  // 双引号
const str2 = '';  // 单引号
const str3 = ``;  // 模板字符串 优点内部可以写单双引号以及占位符，换行写不会被折叠

const str4 = "a"b""; // 错误写法
const str5 = "a'b'"; // 正确写法
const str6  = 'a'b''; // 错误写法
const str7 = 'a"b"'; // 正确写法

const num1 = 10;
const str8 = `a"b",c'd',${num1}`; // a"b",c'd',10
const str9 = `hello
world`;

// 如果num1是数字，toString可以接收一个参数，表示把num1转为几进制的数字字符串，如2、8、10、16
console.log(num1.toString()); // 10

// 获取字符串长度
const str10 = "niannian";
console.log(str10.length); // 8


/**
 * 额外方法，有兴趣，可以深入了解
 *  str.charAt()        比较常用
 *  str.charCodeAt()
 *  str.formCharCode()
 *  str.concat()
 *  str.slice()         常用
 *  str.substr()
 *  str.substring()
 *  str.indexOf()       常用
 *  str.lastIndexOf()
 *  str.includes()      常用
 *  str.startsWith()
 *  str.endsWith()
 *  str.trim()          常用
 *  str.trimLeft()
 *  str.trimRight()
 *  str.repeat()
 *  str.toLowerCase()
 *  str.toUpperCase()
 *  str.toLocaleLowerCase()
 *  str.toLocaleUpperCase()
 * /

2.2.6 symbol类型

es6新增，这里是认识js篇，就对这个类型不做详细介绍了

2.3 运算符

算术运算符： +（加）、-（减）、*（乘）、/（除）、%（求余）、**（平方）
一元运算符：+=（加等于）、-=（减等于）、*=（乘等于）、/=（除等于）、%=（求余等于）、++（递增）、--（递减）
比较运算符：>、<、>=（大于等于）、<=（小于等于）、==（相等）、===（全等）、!=（不相等）、!==（不全等）
逻辑运算符：!（非，取反）、&&（与）、||（或）
位运算符：~（按位非，求相反数再减一）、&（按位与）、|（按位或）、^（按位异或）、<<（按位左移）、>>（按位右移）、>>>（按位右移）

console.log(5 + 3); // 8
console.log(5 - 3); // 2
console.log(5 * 3); // 13
console.log(6 / 3); // 2;
console.log(5 % 3); // 2
console.log(5 ** 3); // 125

let a = 5;
a += 5; // 等同于 a = a + 5; 其余同理
console.log(a); // 10
a -= 3;
console.log(a); // 7
a *= 4;
console.log(a); // 28
a /= 7;
console.log(a); // 4;
a %= 2;
console.log(a); // 0

let b = 2;
console.log(b++); // 2  这里执行结束 b = 3
console.log(++b); // 4  这里执行结束 b = 4
console.log(b--); // 4  这里执行结束 b = 3
console.log(--b); // 2  这里执行结束 b = 2

const num1 = 10;
const num2 = 20;
const num3 = 10;
console.log(num1 > num2); // false 
console.log(num1 < num2); // true 
console.log(num1 >= num2); // false 
console.log(num1 <= num2); // true
console.log(num1 == num3); // true 
console.log(num1 === num3); // true 
console.log(num1 != num2); // true 
console.log(num1 !== num2); // true
/** 
 * 注意点
 *   2 < num < 5  错误写法
 *   2 < num && num <5  正确写法
 */

console.log(!true); // false
console.log(!false); // true  
console.log(true && false); // false
console.log(true && ture); // true
console.log(true && !false); // true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

console.log(~5); // -6
console.log(~-10); // 9
conseol.log(12 & 10); // 8
conseol.log(12 | 10); // 14
conseol.log(12 ^ 10); // 6
conseol.log(3 << 5); // 3*(2**5) 3乘以2的五次方 96
conseol.log(48 >> 4); // 48 / (2**4) 48除以2的四次方 3

第三章流程控制语句

3.1 条件语句

3.1.1 单分支语句

if后面的括号内部为条件语句，如果为true就执行大括号内部的语句，否则就跳过，如果条件语句不为布尔值会被转换为布尔值，比如：数字1会被转为true，数字0会被转换为false

const age = 22;
if(age >= 18){
  console.log(`niannian已经成年了，今年${age}岁`);
}

3.1.2 双分支语句

如果if的条件语句为false，则会直接执行else里面的语句，简单的双分支语句可以使用三目运算代替，三木运算，由三部分组成，条件语句和两个表达式，如果条件语句为true就执行表达式1，反之则执行表达式2。

// 双分支语句
const age = 23;
if(age <= 18){
  console.log('niannian还没成年呢！');
}else{
  console.log('niannian已经成年了！');
}

// 双目运算   格式：条件语句?表达式1:表达式2
const name = '年年';
const say = name==='年年' ? '我是姐姐' : '我是妹妹';
console.log(say); // 我是姐姐

3.1.3 多分支语句

else...if...可以有很多个，无限制，但是else if必须在if的大括号后面，在else的前面（存在else分支的话），像下面这样写很繁琐，可以是由后面即将提到的switch语句替代。

const day = 2;
if(day === 1){
  console.log('今天周一');
}else if(day === 2){
  console.log('今天周二');
}else if(day === 3){
  console.log('今天周三');
}else if(day === 4){
  console.log('今天周四');
}else if(day === 5){
  console.log('今天周五');
}else if(day === 6){
  console.log('今天周六');
}else if(day === 7){
  console.log('今天周末');
}else{
  console.log('请输入正确的数字');
}

3.1.4 switch语句

switch后面小括号里面你的就是需要匹配的条件，如果case后面跟着的内容和小括号里面的条件一样就执行case下面的代码，case和break（后面会有return也可以，在函数的时候会提到这个return）是一组的，如果没有再匹配到第一组的时候还会继续向下执行，直到遇到break或执行完才会停止，default就是前面所有都没有匹配到的时候，会直接执行，就行if...else..的else一样。

const day = 3;
switch(day){
  case 1:
       consoel.log('今天周一');
       break;
  case 2:
       consoel.log('今天周二');
       break;
  case 3:
       consoel.log('今天周三');
       break;
  case 4:
       consoel.log('今天周四');
       break;
  case 5:
       consoel.log('今天周五');
       break;
  case 6:
       consoel.log('今天周六');
       break;
  case 7:
       consoel.log('今天周末');
       break;
  default:
       consoel.log('请输入正确的数字');

}

switch(day){
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
       consoel.log('今天是工作日');
       break;
  case 6:
  case 7:
       consoel.log('今天休息日');
       break;
  default:
       consoel.log('请输入正确的数字');

}

3.2 循环语句

3.2.1 while循环

while后面小括号里面的为表达式，如果表达式为true，那么大括号里面的代码会一直循环执行，知道表达式为false，所以再使用while的时候，一直要注意什么时候结束，很容易导致进入死循环，从而导致电脑死机。

// 计算从1到100的和
let i = 1;
let sum = 0;
while(i < 101){
  sum += i;
  i++;
}
console.log(sum); // 5050

3.2.2 do...while循环

这个循环比较特殊，就是不管表达式为true还是false都会先执行一遍do后面大括号里面的语句，再去判断表达式，后面的执行和while一样。

let i = 1;
let sum = 0;
do{
  sum += i;
  i++;
}while(i < 101);

console.log(sum); // 5050

3.2.3 for循环

for循环总共有三个表达式，分别使用分号隔开，第一个表达式是声明一个变量，第二个表达式是规定这个变量的范围，第三个表达式是控制这个变量递增还是递减，可以嵌套使用。

for循环关键字（都是在for循环的大括号内部使用，不可同时出现）：

break 是跳出当前循环
continue 是跳出本次循环

// 单个使用
let sum = 0;
for(let i = 1;i <= 100; i++){
  sum += i;
}
consoel.log(sum); // 5050

// 嵌套使用  打印九九乘法表
let str = "";
for(let i = 1;i <= 9;i++){
  for(let j = 1;j <= i;j++){
    str += i + "*" + j + "=" + (i*j) + " ";
  }
  console.log(str);
  str = "";
}
// 1*1=1
// 2*1=2 2*2=4
// 3*1=3 3*2=6 3*3=9
// 4*1=4 4*2=8 4*3=12 4*4=16
// 5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
// 6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
// 7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
// 8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
// 9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81

// 简单介绍关键字用法
for(let i = 0;i < 10;i++){
   if(i == 5){
     break;
     // continue
   }
}
// 起名字跳出循环
name1:for(let i = 0;i < 10;i++){
  name2:for(let i = 0;i < 10;i++){
    if(i == 5){
      break name1;
      // continue name2;
    }
  }
}

第四章数据结构

4.1 数组

数组内部可以放js所有类型的值
数组下标是从0开始的
以下内容别没有做过多的详细介绍，后续文章或有详细的内容，敬请关注

// 创建数组
let arr1 = [];                             // 创建一个空数组 字面量创建  常用！！！
let arr2 = [1, '2', true];                 // 创建一个有初始值的数组 字面量创建  常用！！！
let xArr1 = [[]];                          // 创建一个多维空数组，可以无限嵌套
let xArr2 = [[1,2], [5,6,]];               // 创建一个有值的多维数组
let arr3 = new Array();                    // 创建一个空数组 构造函数创建
let arr4 = new Array(5);                   // 创建一个长度为5的数组 构造函数创建
let arr5 = new Array(1, '2', false);       // 创建一个有初始值的数组 构造函数创建
let arr6 = new Array(8).fill('niannian');  // 创建一个长度为8的数组，并且给每个位置填充 构造函数创建

// 数组赋值
let arr7 = [1, 2];
console.log(arr7); // [1, 2]
arr7[0] = 6;
arr7[5] = 9;
console.log(arr7); // [6, 2, <3 empty items>, 9]
let xArr3 = [[],[]];
xArr3[0][0] = 12;
xArr3[1][0] = 13;
consoel.log(xArr3); // [[12], [13]]  访问的时候同理，不管怎么嵌套已经累计就好了

// 访问数组元素
let arr8 = [666, "niannian", 'is', '公主'];
console.log(arr8[1]); // niannian

// 删除数组元素
let arr9 = [1, 2, 3];
delete arr[1]; // 不建议使用这种方式 后面会有更好的方法
console.log(arr9); // [1, <1 empty items>, 3];

/**
 *   出于习惯，下面会使用箭头函数，后面的文章会讲到，如：() => {}
 *   例子：(item,index) => {}  等价于 function(item, index){}
 * 遍历数组
 *  -> for           利用下标遍历数组
 *  -> for...in...   遍历数组的下标
 *  -> for...of...   遍历数组每个元素
 *  -> forEach       遍历数组的每个元素
 *  -> map           主要用于处理数组的每一项，返回值为处理后的数组
 *  -> filter        主要用于过滤数组中的元素，返回值为过滤后的数组
 *  -> some          根据条件判断，如果返回值中有一个为true这该方法返回一个true，反之返回false
 *  -> every         根据条件判断，如果返回值全部为true，该方法才返回true，反之返回false
 *  -> find          根据条件查找，返回匹配条件的第一个元素
 *  -> findIndex     根据条件查找，返回匹配条件的第一个元素的下标
 */
const arr10 = [1, 2, '3', true, 5, 8];
// for
for(let i = 0; i < arr10.length; i++){
  console.log(`键为${i}的元素值为${arr10[i]}`);
}
// for...in...
for(let i in arr10){
  console.log(`键为${i}的元素值为${arr10[i]}`);
}
// for...of...
for(let item of arr10){
  console.log(item);
}
// forEach  index可以不写
arr10.forEach((item,index)=>{
  console.log(`键为${index}的元素值为${item}`);
})
// map index可以不写
const newArr10_1 = arr10.map((item,index) => {
  if(item === 2){
    item *= 10;
  }
  return item;
})
console.log(newArr10_1);
// filter index可以不写
const newArr10_2 = arr10.filter((item,index) => {
  if(item % 2 === 0){
    return item;
  }
})
console.log(newArr10_2);
// some  index可以不写
const boo1 = arr10.some((item,index)=>{
  if(item === 2){
    return true;
  }else{
    return false;
  }
})
console.log(boo1); // true
// every index可以不写
const boo2 = arr10.every((item,index)=>{
  if(item === 2){
    return true;
  }else{
    return false;
  }
})
console.log(boo2); // false
// find   可以加index
const item1 = arr10.find((item)=>{
  if(item === 2){
    return item;
  }
})
// findIndex   可以加index
const arrIndex = arr10.findIndex((item)=>{
  if(item === 2){
    return item;
  }
})

/**
 * 迭代器
 *  keys()     用法：arr.keys()  返回一个由该数组下标组成的数组
 *  values()   用法：arr.values() 返回一个用该数组元素组成的数组，相当于元素
 *  entries()  用法：arr.entries() 返回一个二维数组，有下标和对应的值组成  
 */
let arr11 = [66, 99, 88];
console.log(arr11.keys());    // [0, 1, 2]
console.log(arr11.value());   // [66, 99, 88]
console.log(arr11.entries()); // [[0,66], [1,99], [2, 88]]

// 结构数组
const arr12 = [66, 88, 99];
const [x, y, z] = arr12;
console.log(x, y, z); // 66 88 99
// 结构实现交换两个变量的值
let a = 6;
let b = 8;
[a, b] = [b, a];
console.log(a, b);  // 8 6

// 拓展运算符
const str1 = 'niannian';
const tArr = [1,2,3];
const rArr = [4,5,6];
const eArr = [...tArr, ...rArr];
const yArr = [...tArr, 4,5,6]
const strArr = [...str1];
console.log(eArr); // [1,2,3,4,5,6]
console.log(yArr); // [1,2,3,4,5,6]
console.log(strArr); // ['n', 'i', 'a', 'n', 'n', 'i', 'a', 'n'];

// length 返回数组长度
const qArr1 = [1, 2, 3];
console.log(qArr1.length); // 3

// push()  从后面加入元素  返回值为最新长度 括号里面可以有多个元素 可以使用拓展运算符
const qArr2 = [1, 2];
const newLen1 = qArr2.push(3);
console.log(newLen1); // 3
console.log(qArr2); // [1, 2, 3]

// pop()  取出最后一个元素  返回取出的这个元素
const qArr3 = [1, 2, 3];
const qArrItem1 = qArr3.pop();
console.log(qArrItem1); // 3
console.log(qArr3); // [1, 2]

// unshift() 从前面加入元素  返回值为最新长度 括号里面可以有多个元素 可以使用拓展运算符
const qArr4 = [1, 2];
const newLen2 = qArr4.unshift(3, 9);
console.log(newLen2); // 4
console.log(qArr2); // [3, 9, 1, 2]

// shift()  取出第一个元素  返回取出的这个元素
const qArr5 = [1, 2, 3];
const qArrItem2 = qArr5.shift();
console.log(qArrItem2); // 1
console.log(qArr5); // [2, 3]

// concat()  拼接数组   括号内部可以不用传参
const qArr6 = [1, 2, 3];
const newQArr6 = qArr6.concat(4, 5, 6);
console.log(newQArr6); // [1,2,3,4,5,6]

// slice()  截取原数组，不影响原数组  第一个参数截取起始位置  第二个参数（可以不传）结束位置，不传默认从开始位置截取到尾部  两个参数都必须小于该数组的length，第二个参数要大于第一个参数
const qArr7 = [1, 5, 3, 6];
console.log(qArr7.slice(1, 3)); // [5, 3, 6]
console.log(qArr7); // [1, 5, 3, 6]

// splice
// splice(a)、splice(a,b)  和slice一样 不过会影响原数组
// splice(a, 0, item1, item2...)  插入元素
// splice(a, 2, item1, item2)  替换元素

// join() 将数组拼接为字符串返回，括号内部可以传分隔符号

// split()  将字符串转为数组，括号内部可以传以什么符号分隔

// reverse() 将整个数组倒着排列

// sort() 排序，直接使用如果数组中有除数字意外的元素则按照Unicode表排序
// arr.sort((a,b) => a-b); 升序  纯数字数组
// arr.sort((a,b) => b-a); 降序  纯数字数组

// arr.indexOf(item); 从左往右返回第一个item元素的下标，如果item不在arr中就返回-1
// arr.lastIndexOf(item); 从右往左返回第一个item元素的下标，如果item不在arr中就返回-1
// arr.includes(item); 如果item在arr中就返回true，反之返回false

4.2 集合

// 创建集合   弱集合（拓展）：new WeakSet()
let s1 = new Set();        // Set {}
let s2 = new Set([1,2,3]); // Set { 1, 2, 3 }

// 添加元素
s2.add(1); // 集合中不允许出现相同的元素，所以会自动过滤
console.log(s2); // Set { 1, 2, 3 }
s1.add(1).add(2).add(3);
console.log(s1); // Set { 1, 2, 3 }
let s3 = new Set();
s3.add([1, 2, 3]);
console.log(s3); // Set { [1, 2, 3] }

console.log(s1.size); // 3
console.log(s3.size); // 1
console.log(s1.has(1)); // true
console.log(s1.has(5)); // false
s1.delete(2);
console.log(s1); // Set { 1, 3 }

// 遍历  也可以使用forEach、keys()、value()、entries()
for(let item of s1){
  console.log(item)
}

// 集合转数组  巧妙给数组去重
const arr = [1, 1, 2, 1, 3, 5, 5];
let s4 = new Set(arr);
const newArr = [...s4];
console.log(newArr); // [1, 2, 3, 5]

4.3 映射

// 创建映射    弱映射（拓展） new WeakMap()
let m1 = new Map();  // Map {}
let m2 = new Map([[1, 'niannian'], ['ss', 'kk']]); // Map { 1 => 'niannian', 'ss' => 'kk' }

// 添加元素
m1.set('name', 'niannian');
console.log(m1); // Map { 'name' => 'niannian' };
console.log(m1.get('name')); // niannian

console.log(m1.size); // 1
console.log(m1.has('name')); // true
// m.delete(key)   删除指定元素
// m.clear()       清空映射里面的所有元素
// for...of...、keys()、values()、entries()都可以遍历映射
// 映射转数组同样可以使用拓展运算符

第五章函数

函数是js的一等公民，几乎可以出现在代码中的任何地方，可以重复使用
函数三要素：功能、参数、返回值
函数有基础函数和箭头函数两种

/**
 * 字面量声明函数
 * function 是声明函数的关键字
 * fnName是函数的名字 也就是标识符
 * 函数名后面的括号内就是形参，可以有多个，也可以没有，形参可以有默认值
 * 后面的花括号内部就是函数体了
 * 接着后面就是调用函数了，调用函数时就是使用函数名调用的，实参和形参相互对应
 * 
 */
function fnName(形参1, 形参2 = 默认值){
  // 函数体
}
fnName(实参1, 实参2);

// 函数表达式声明函数  调用方法和上面一样
const fnName2 = function(){}

// 箭头函数声明  调用方法和上面一样
const fnName3 = () => {};  // 没有参数
const fnName4 = _ => {};  // 没有参数
const fnName5 = (item) => {}; // 有一个参数
const fnName6 = item => {}; // 有一个参数
const fnName7 = (item1, item2) => {}; // 有多个参数

// 立即执行函数  在早期的单例模式（一个构造函数只有一个实例对象）时用的比较多
const num1 = (function(){
   return 456;
})()

// 函数返回值
function fnName8(){
   return 123;
}

第六章对象

对象内部可以有js所有数据类型
对象可以嵌套

// 创建对象
const obj = {
  age: 22
}
obj.name = 'niannian'; // 点方法 新增
obj.age = 26; // 改变
obj['sex'] = '女'; // 中括号方法
delete obj.sex; // 删除
console.log(obj.name); // niannian
console.log(obj['name]); // niannian

console.log('name' in obj); // true  判断对应的键值是否在对象中
console.log('qqq' in obj); // false

// 使用for...in...可以遍历出对象的所有键值
console.log(Object.keys(obj)); // ['age', 'name']
console.log(Object.values(obj)); // [26, 'niannian']
console.log(Object.entries(obj)); // [['age', 26], ['name', 'niannian']]

// 对象结构
const { name, age } = obj;
console.log(name, age); // niannian 26
// 匿名结构
const { age: qAge, name: qName } = obj;
console.log(qAge, qName); // 26 niannian
// 默认值结构
const { sex='nv', name:uName } = obj;
console.log(sex, name); // nv niannian

// 兑现所有值写法 综合
const aaa = "qqq";
const obj1 = {
  num: 1,
  str: 'niannian',
  boo: true,
  nullStr: null,
  undeStr: undefined,
  fnName1: function(){},
  fnName2(){},
  aaa,
  fnName3: () => {},
  obj2: {},
  arr: []
  [aaa]: '动态键名',
}

6.1 JSON

JSON经常被用于Web服务之间交换信息，也被很多网站用来共享信息。和队友之间存在的区别：

属性名必须用双引号引起来
允许的值包括数字、布尔值（true和false）、null、数字、对象、已经双引号空字符串
不允许有函数

const jsonObj = {
    "name": "niannian",
    "age": 26
}

// JSON对象转为JSON字符串
console.log(JSON.stringify(jsonObj)); // { "name":"niannian","age":26 }

// JSON字符串转为JSON对象
console.log(JSON.parse(jsonStr));