Javascript基本语法速查

亦凉 2022-10-01 08:48 238阅读 0赞

大家好，我是言淦，我今天带来的文章是《Javascript基本语法速查》，希望能给你们带来帮助！

*  1.变量
 *  2.数据类型
    
     *  2.1.Symbol
     *  2.2.值类型和引用类型区别
     *  2.3.类型判断
     *  2.4.判断整数和浮点数
     *  2.5.判断对象是否相等
     *  2.6.判断是否是字符串数字
 *  3.类型转换
 *  4.字符串操作
 *  5.数据结构
    
     *  判断元素是否存在
     *  Object的增删查改
     *  Array的增删查改
     *  单词计数
 *  6.For循环的四种形式
 *  7.深拷贝与浅拷贝

## 1.变量 ##

ES6规范之前， Js定义变量的方式只有一种，即var； 在ES6规范到来后，Js定义变量的方式有三种，var， let和const。

var： 使用var声明变量有两个”bug“， 第一是没有块级作用域； 第二是循环内变量过度共享。  
let： 解决上述var声明的两个bug， 可以说let是更完美的var。  
const：定义常量

**变量提升**

*  函数及变量的声明都将被提升到函数的最顶部
 *  变量可以在使用后声明，也就是变量可以先使用再声明

参考： [www.jianshu.com/p/4e9cd99ec…][www.jianshu.com_p_4e9cd99ec]

## 2.数据类型 ##

值类型(基本类型)： 字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、Symbol  
引用类型：对象(Object)、数组(Array)、函数(Function)

### 2.1.Symbol ###

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

### 2.2.值类型和引用类型区别 ###

// 值类型（d的值不会跟着c变）
    > c = 1
     1
    > d = c
     1
    > c = 2
     2
    > d
     1
    
    // 引用类型（l2的值会跟着l变）
    > a = [1, 2, 3]
    (3) [1, 2, 3]
    > a2 = a
    (3) [1, 2, 3]
    > a[0] = 4
    4
    > a2
    (3) [4, 2, 3]
    复制代码

### 2.3.类型判断 ###

*  typeof： 返回的结果有number、boolean、symbol、string、object、undefined、function
 *  instanceof：检测的只是原型。或者说instanceof只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。（不建议用）
 *  constructor： 用法和typeof差不多，但是不支持null和undefined，第二是注意prototype属性重写的问题
 *  toString： 用法和typeof差不多

参考： [www.cnblogs.com/onepixel/p/…][www.cnblogs.com_onepixel_p]

**什么是原型?**  
3.1.原型是JavaScript为了继承设计出的一个概念

3.2.Js没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。

3.3.”原型“可以理解为面对对象语言的”构造函数“

// Java写法
    public class Dog{
        String name;
        int age;
        // 构造方法
        Dog(String name, int age){
            this.name = name;
            this.age = age;
        }
    }
    // Java new一个对象
    Dog damao = new Dog("大毛", 1);
    
    // JavaScript写法(是不是跟构造函数很像)
    function Dog(name, age){
        this.name = name;
        this.age = age;
    }
    // JavaScript new一个对象
    var damao = new Dog('大毛', 1);
    复制代码

3.4.Js new出来的实例无法共享属性（每一个实例都有自己的属性和方法的副本），无法做到数据共享，造成资源的极大浪费， 所以设计者决定为构造函数设置prototype属性。

3.5.由于所有的实例对象(dogA, dogB)共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型(父类，爸爸)，而实例对象则好像"继承"了prototype对象一样（Java 子类默认继承父类属性，除非自己重写）

参考： [www.ruanyifeng.com/blog/2011/0…][www.ruanyifeng.com_blog_2011_0]

### 2.4.判断整数和浮点数 ###

*  Math.floor(obj) === obj // 推荐
 *  Number.isInteger(obj) // 推荐，但是只在ES6中支持

### 2.5.判断对象是否相等 ###

*  JSON.stringify()： 有局限性，比如位置变化

### 2.6.判断是否是字符串数字 ###

*  isNaN(value): 如果value是Number类型为False
 *  !Number.isNaN(Number(value))： 如果value是Number类型为true
 *  正则

var reg = /^[\d|\.]*$/;
    undefined
    reg.test('aa')
    false
    reg.test('111')
    true
    复制代码

## 3.类型转换 ##

3.1 Number转String： String方法

3.2 String转Number

// Number方法： 视图解析你给他的数字
    b = Number("111")
    111
    b = Number("111.111")
    111.111
    b = Number("111.111aaa")
    NaN
    Number("023"); // returns 23
    Number(023); // returns 19
    
    
    // ParseInt, ParseFloat
    parseInt("111.11aa")
    111
    parseInt("aa111")
    NaN
    
    parseFloat("aa111")
    NaN
    parseFloat("111.11aa")
    111.11
    复制代码

3.3 Object转String

*  String: 不行
 *  JSON.stringify: 可以

3.4 String转Object

*  JSON.parse

3.5 Array转String

*  JSON.stringify

3.6 String转Array

*  JSON.parse

## 4.字符串操作 ##

[www.runoob.com/js/js-strin…][www.runoob.com_js_js-strin]

## 5.数据结构 ##

*  Object： 对象
 *  Array： 数组

### 判断元素是否存在 ###

*  in关键字， 适用Object和Array
 *  hasOwnProperty方法： arr.hasOwnProperty(key); 或 obj.hasOwnProperty(key)

### Object的增删查改 ###

*  增加: object.property=value
 *  删除： delete object.property
 *  查找： in关键字 或者 hasOwnProperty方法

### Array的增删查改 ###

*  增加： push（向数组末尾添加元素）， unshift（向数组开头添加元素）
 *  删除： pop（删除数组的最后一项）， shift(删除数组的的第一项)
 *  查找： slice， indexOf
 *  增加+删除（修改）： arr.splice(index, howmany, item1,.....,itemX)
 *  排序： sort（只能排序在10以内的数字）， reverse(把数组倒过来排序)

参考： [www.cnblogs.com/supershare/…][www.cnblogs.com_supershare]

### 单词计数 ###

[blog.csdn.net/u013778905/…][blog.csdn.net_u013778905]

## 6.For循环的四种形式 ##

[juejin.im/entry/5a165…][juejin.im_entry_5a165]

## 7.深拷贝与浅拷贝 ##

针对的对象： 引用类型， 如Object， Array。

Array

*  浅拷贝： 直接赋值
 *  深拷贝

// 1.slice
    arr = [1, 2, 3]
    arr2 = arr.slice(0)
    arr[0] = 4
    arr2 // 仍然为[1, 2, 3]
    
    // 2.concat
    arr = [1, 2, 3]
    arr3 = arr.concat()
    arr[0] = 5
    arr3 // 仍然为[1, 2, 3]
    复制代码

Object  
\- 浅拷贝： 直接赋值 - 深拷贝：

// 1.new 一个对象，把旧对象的值赋予新对象
    var a={
        name:'yy',age:26};
    var b=new Object();
    
    b.name=a.name;
    b.age=a.age;
    
    a.name='xx';
    console.log(b);//Object { name="yy", age=26}
    console.log(a);//Object { name="xx", age=26}
    
    // 2.JSON方法
    var a = {
        age:1,name:'ccy',info:{
        address:'wuhan',interest:'playCards'}};
    var b = JSON.parse(JSON.stringify(a));
    
    a.info.address = 'shenzhen';
    console.log(a.info,b.info);
    
    复制代码

转载于:https://juejin.im/post/5cf9c7326fb9a07eff0079a8

[www.jianshu.com_p_4e9cd99ec]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F4e9cd99ecbf5
[www.cnblogs.com_onepixel_p]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Fonepixel%2Fp%2F5126046.html
[www.ruanyifeng.com_blog_2011_0]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2011%2F06%2Fdesigning_ideas_of_inheritance_mechanism_in_javascript.html
[www.runoob.com_js_js-strin]: https://link.juejin.im?target=https%3A%2F%2Fwww.runoob.com%2Fjs%2Fjs-strings.html
[www.cnblogs.com_supershare]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Fsupershare%2Fp%2F5599242.html
[blog.csdn.net_u013778905]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fu013778905%2Farticle%2Fdetails%2F60970815
[juejin.im_entry_5a165]: https://juejin.im/entry/5a1654e951882554b8373622