JS初学者

Gouyx

已于 2022-07-09 18:15:30 修改

阅读量197

点赞数 1

分类专栏：新手学习文章标签： javascript

于 2022-07-03 19:52:46 首次发布

本文链接：https://blog.csdn.net/Gouyx/article/details/125588394

版权

新手学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

从事三年android 开发，三年B端产品经理；在工作之余准备学习学习JS；

以下会整理一些学习笔记和学习心得；这样方便大家一起沟通学习和交流；有不足之处还请指正。

（有时排版可能有问题，还请见谅。哈哈哈）

javascript：

一、初步定义：JS 轻量级的的客户端脚本编程语言；

编程语言： HTML+CSS师编辑语言；编程语言具备一定的逻辑；又有自己的编程思想（面向对象编程）
C语言是面向过程的；

二、面向对象的编程语言：

C++
Java
PHP
C#
JS

三、JS可以基于node可以做服务器端程序，所以JS是一个全栈编程语言

JS的组成部分

ES（ECMAScript）：JS的核心语法；
DOM-document object model 文档对象模型：

提供各种属性和方法，让JS可以获取或者操作页面HTML元素

BOM：browser object model 浏览器对象模型

提供各种API让JS可以操作浏览器；

四、ESMAScript（ES）

是JS的语法规划，JS中的变量、数据类型、语法桂发、操作语句、设计模式等等都是ES规定的

五、变量（variable）：

他不是具体的值，只是一个用来存储具体值的容器或者代名词，因为存储的值可以改变，所以称为变量；

基于ES语法规范，在JS钟创建变量有以下方式：

var （ES3）
function （ES3）创建函数（函数名也是变量，只不过存储的值是一个函数类型而已）
let (ES6)
const (ES6) 创建的是常量
import (ES6)
class (ES6) 基于ES6创建类

举例说明：

var [变量名]= 值；
let [变量名]=值；
const [变量名]=值；不能多次赋值；
function 函数名(){

}

变量命名规范：

区分大小写
驼峰命名
不能使用关键字；

数据类型：

基本数据类型

数字 number
字符串 string
布尔 boolean
null
undefined

数字类型中有一个特殊的值：NAN（not a number）

引用数据类型

对象object

普通对象
数组对象
正则对象
日期对象
...

ES6 中新增的一种类型 Symbol

引用数据类型

普通对象 var a = {name:"ceshi",age:10} 普通对象； var b = {} 空对象

数组对象： var ary = [1,2,3,4,45] var ary = [] 空数组

====================

扩展：

JS代码如何被运行；

[如何运行]

把代码运行在浏览器中；
基于node来运行（node也是一个基于V8引擎渲染和解析JS到工具）

[如何输出结果]

alert：输出的结果是字符串
confirm:确认提示框；用法合alert一样； eg: var flag = confirm("确定要退出吗") if(flag){ //true }else{ //false }
prompt:在confirm的基础上增加输入框
console.log：在浏览器控制台输出日志
console.table:json按照表格方式输出
console.dir:输出更加详细到信息；

number数字类型：

NaN：是一个数字类型

isNaN：检测当前值是否不是有效数字，返回true代表不是有效数字，false是有效数字；

语法：isNaN（值）
isNaN('12')=>false
isNaN检测机制：

首先验证当前的值是否为数字类型的，如果不是，浏览器会默认的把值转化为数字类型；
当前检测带值已经是数字类型，是有效数字返回false，不是返回true；（数字类型中，只有NaN不是有效数字，其他都是有效数字）

其他数据转化为布尔类型：

布尔类型中，除0合NaN为false，其他都是true；

Boolean Boolean(1) true Boolean(0) false Boolean(NaN) false
! 非取反
!! 两次取反

在JS中只有【0/NaN/空字符串/null/undefined】这五个值转换给布尔类型为false，其余都为true

null:空对象：一般都是自己手动赋值的（var a = null） undefined:未定义;一般都不是自己手动赋值，是浏览器自己分配的值（var abd）//这个时候abd就是undefined；后面赋值也是可以的；

object 对象数据类型：

普通对象

由大括号包裹起来的
由0到多组属性名和属性值组成（键值对）

`属性名相当于key ，属性值相当于 value`

var obj = {
 	name :'ceshi',
	id:20
};

[获取]
obj.name
obj['name']


[增/改]
JS对象中的 属性名不允许重复，是唯一的


修改：
obj.name ='123'
obj['name'] = '234'
增加：
obj.sex = '男'

[删除]

彻底删除：
delete obj.name;

delete obj['name'];

假删除：

obj.age = null;

注意⚠️：
obj['name']和obj[name]的区别：

‘name'：是一个字符串值，代表他本身；
name：是一个变量，代表的是本身存储的这个值；

如果对象中没有这个属性获取到的值就是undefined，如有有属性名称，就算值为null，也可以获取到，只是获取到的信息为null

一个对象中的属性名不仅仅是字符串格式的，还可能是数字格式的；


var obj = {

	name :'hahah',
	0:200

}

obj['0']      => 200

obj[0] 	  =>200

obj.0是不符合语法的


当存储的属性名不是字符串也不是数字时，浏览器会将属性名转换成字符串（toString()）,然后进行存储；
 

数组的属性名是当前对象的索引


数组对象的属性名是数字，


var a = 13;
var b = a;
console.log(a);

输出结果为13


var obj1 = {n:100};
var obj2 = obj1;
obj2['n']=200;
console.log(obj1);


输出结果为：200

/*
*JS的运行机制
*
* 1、当浏览器渲染和解析JS的时候会提供一个JS代码运行的环境，这个环境称为：全局作用域（scope/global）
* 2、代码自上而下执行
*
*/



var obj = {
    n:100,
    m:obj.n *10
};

console.log(m);//Uncaught TypeError: Cannot read properties of undefined (reading 'n')

/**
 * 1、代码从上而下执行
 *      首先开一个堆内存；
 *      obj.n没有存储完成，相当于没有值，此时 obj.n是undefined；
 */


var arry1 = [3,4];
var arry2 = arry1;

arry2[0] = 1;// arry1 = [1,4]

arry2 = [4,5];
arry2[1] = 2;//arry2 = [4,2]
arry1[1] = 0;//arry1 = [1,0]