分享
是一种美德

【收藏】js数组方法整理

wangtong阅读(1053)

整理了以下数组方法

  • join()
  • push()和pop()
  • shift() 和 unshift()
  • sort()
  • reverse()
  • concat()
  • slice()
  • splice()
  • indexOf()和 lastIndexOf() (ES5新增)
  • forEach() (ES5新增)
  • map() (ES5新增)
  • filter() (ES5新增)
  • every() (ES5新增)
  • some() (ES5新增)

1、join()

join,就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号(  ,)

书写格式:join(” “),括号里面写字符串  (“要加引号”),

var arr = [1,2,3]; 
console.log(arr.join());     // 1,2,3 
console.log(arr.join("-"));   // 1-2-3 
console.log(arr);         // [1, 2, 3](原数组不变)

 

2、push()和pop()

push():  把里面的内容添加到数组末尾,并返回修改后的长度。

pop():移除数组最后一项,返回移除的那个值,减少数组的length。

书写格式:arr.push(” “),括号里面写内容  (“字符串要加引号”),

书写格式:arr.pop( )

var arr = ["Lily","lucy","Tom"]; 
var count = arr.push("Jack","Sean"); 
console.log(count);           // 5 
console.log(arr);            // ["Lily", "lucy", "Tom", "Jack", "Sean"] 
var item = arr.pop(); 
console.log(item);            // Sean 
console.log(arr);            // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()   (和上面的push,pop相反,针对第一项内容)

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。

 

unshift:将参数添加到原数组开头,并返回数组的长度 。

    书写格式:arr.shift(” “),括号里面写内容  (“字符串要加引号”),

var arr = ["Lily","lucy","Tom"]; 
var count = arr.unshift("Jack","Sean"); 
console.log(count);               // 5 
console.log(arr);                //["Jack", "Sean", "Lily", "lucy", "Tom"] 
var item = arr.shift(); 
console.log(item);               // Jack 
console.log(arr);                // ["Sean", "Lily", "lucy", "Tom"]

4、sort()

sort():将数组里的项从小到大排序

书写格式:arr.sort( )

var arr1 = ["a", "d", "c", "b"]; 
console.log(arr1.sort());           // ["a", "b", "c", "d"]

sort()方法比较的是字符串,没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数

function sortNumber(a,b) {
   return a - b 
}
arr = [13, 24, 51, 3]; 
console.log(arr.sort());           // [13, 24, 3, 51]
console.log(arr.sort(sortNumber));     // [3, 13, 24, 51](数组被改变)

5、reverse()

reverse():反转数组项的顺序。

书写格式:arr.reverse( )

var arr = [13, 24, 51, 3]; 
console.log(arr.reverse());         //[3, 51, 24, 13] 
console.log(arr);               //[3, 51, 24, 13](原数组改变)

6、concat()

concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

    书写格式:arr.concat(),括号里面写内容  (“字符串要加引号”),

var arr = [1,3,5,7]; 
var arrCopy = arr.concat(9,[11,13]); 
console.log(arrCopy);             //[1, 3, 5, 7, 9, 11, 13] 
console.log(arr);               // [1, 3, 5, 7](原数组未被修改)

7、slice()

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

    书写格式:arr.slice( 1 , 3  )

var arr = [1,3,5,7,9,11]; 
var arrCopy = arr.slice(1); 
var arrCopy2 = arr.slice(1,4); 
var arrCopy3 = arr.slice(1,-2); 
var arrCopy4 = arr.slice(-4,-1); 
console.log(arr);               //[1, 3, 5, 7, 9, 11](原数组没变) 
console.log(arrCopy);             //[3, 5, 7, 9, 11] 
console.log(arrCopy2);            //[3, 5, 7] 
console.log(arrCopy3);            //[3, 5, 7] 
console.log(arrCopy4);            //[5, 7, 9]

arrCopy只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。

arrCopy2设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。

arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。

arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)。

8、splice()

splice():删除、插入和替换。

删除:指定 2 个参数:要删除的第一项的位置和要删除的项数。

书写格式:arr.splice( 1 , 3  )

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。

书写格式:arr.splice(  2,0,4,6  )
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

    书写格式:arr.splice(  2,0,4,6  )

var arr = [1,3,5,7,9,11]; 
var arrRemoved = arr.splice(0,2); 
console.log(arr);                //[5, 7, 9, 11] 
console.log(arrRemoved);            //[1, 3] 
var arrRemoved2 = arr.splice(2,0,4,6); 
console.log(arr);                // [5, 7, 4, 6, 9, 11] 
console.log(arrRemoved2);           // [] 
var arrRemoved3 = arr.splice(1,1,2,4); 
console.log(arr);                // [5, 2, 4, 4, 6, 9, 11] 
console.log(arrRemoved3);           //[7]

9、indexOf()和 lastIndexOf()

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

    书写格式:arr.indexof( 5 )

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。 

    书写格式:arr.lastIndexOf(  5,4  )

var arr = [1,3,5,7,7,5,3,1]; 
console.log(arr.indexOf(5));       //2 
console.log(arr.lastIndexOf(5));     //5 
console.log(arr.indexOf(5,2));      //2 
console.log(arr.lastIndexOf(5,4));   //2 
console.log(arr.indexOf("5"));      //-1

10、forEach()

forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

    书写格式:arr.forEach()

var arr = [1, 2, 3, 4, 5]; 
arr.forEach(function(x, index, a){ 
    console.log(x + '|' + index + '|' + (a === arr));
 });
 // 输出为: 
// 1|0|true 
// 2|1|true 
// 3|2|true 
// 4|3|true 
// 5|4|true

11、map()

map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

    书写格式:arr.map()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.map(function(item){ 
    return item*item; 
}); 
console.log(arr2);         //[1, 4, 9, 16, 25]

12、filter()

filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

    书写格式:arr.filter()

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var arr2 = arr.filter(function(x, index) { 
    return index % 3 === 0 || x >= 8; 
}); 
console.log(arr2);         //[1, 4, 7, 8, 9, 10]

13、every()

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

    书写格式:arr.every()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.every(function(x) { 
    return x < 10; 
}); 
console.log(arr2);         //true 
var arr3 = arr.every(function(x) { 
    return x < 3; 
}); 
console.log(arr3);         // false

14、some()

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

    书写格式:arr.some()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.some(function(x) { 
    return x < 3; 
}); 
console.log(arr2);         //true 
var arr3 = arr.some(function(x) { 
    return x < 1; 
}); 
console.log(arr3);         // false

 

本文作者张永峰
本文链接:https://www.cnblogs.com/zyfeng/p/10541133.html

学习笔记4-React技术全家桶-组件实例的三大核心属性

wangtong阅读(306)

1、state

理解

  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

  1. 组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈建议:

  1. 组件中render方法中的this为组件实例对象

  1. 组件自定义的方法中this为undefined,如何解决?

    a) 强制绑定this: 通过函数对象的bind()

    b) 箭头函数

  2. 状态数据,不能直接修改或更新,必须是通过setState进行更新,且更新是一种合并不是替换

2、props

理解

  1. 每个组件对象都会有props(properties的简写)属性

  2. 组件标签的所有属性都保存在props中

作用

  1. 通过标签属性从组件外向组件内传递变化的数据

  2. 注意: 组件内部不要修改props数据

编码操作

  1. 内部读取某个属性值

    this.props.name

  2. 对props中的属性值进行类型限制和必要性限制

    第一种方式(React v15.5 开始已弃用):

    Person.propTypes = {
     name: React.PropTypes.string.isRequired,
     age: React.PropTypes.number
    }

    第二种方式(新):使用prop-types库进限制(需要引入prop-types库)

    Person.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number. 
    }

  3. 扩展属性: 将对象的所有属性通过props传递

    <Person {...person}/>

  4. 默认属性值:

    Person.defaultProps = {
      age: 18,
      sex:'男'
    }

  5. 组件类的构造函数

    constructor(props){
      super(props)
      console.log(props)//打印所有属性
    }

3、refs

理解

组件内的标签可以定义ref属性来标识自己

编码

  1. 字符串形式的ref

    <input ref="input1"/>

  1. 回调形式的ref

    <input ref={(c)=>{this.input1 = c}}

  2. createRef创建ref容器·

    myRef = React.createRef() 
    <input ref={this.myRef}/>

事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)

    1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

    2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

  1. 通过event.target得到发生事件的DOM元素对象

 

 

 

欢迎大家关注公众号:

学习笔记3-React技术全家桶-组件

wangtong阅读(254)

## 模块与组件、模块化与组件化的理解
### 模块:
​   理解:向外提供特定功能的js程序(一个js文件就是一个模块)
​   为什么要拆成模块:业务量增加的话,代码会越来越多,并且变得更加复杂,维护成本会提高
​   作用:将js变更为可复用的文件,简化js的编写及提高js的运行效率
### 组件
​   理解:用来实现局部功能效果的代码和资源的集合(html、js、css、image等)
​   为什么要用组件:一个页面的功能更加复杂
​   作用:服用编码,简化项目编码,提高运行效率
### 模块化
​   当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
### 组件化
​   当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
## React 面向组件编程
### 组件的定义方式:
    1、函数式组件
        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后,发生了什么:
                1、React解析组件标签,找到了<MyComponent/>组件
                2、发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,之后呈现在页面中。
    2、类式组件
        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后,发生了什么:
                1、React解析组件标签,找到了<MyComponent/>组件
                2、发现组件是使用类定义的,随后new 出该类的实例,并通过该实例调用到原型上的render方法。
                3将render返回的虚拟DOM转为真实DOM,之后呈现在页面中。
        类的基本知识复习:
             总结:
             1、类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性时才写
             2、如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的
             3、类中所定义的方法,都是放在类的原型对象上,供实例去使用
### 注意
    1、组件名必须首字母大写
    2、虚拟DOM元素只能有一个根元素
    3、虚拟DOM元素必须有结束标签
### 渲染类组件标签的基本流程:
    1、React内部会创建组件实例对象
    2、调用render()得到的虚拟DOM,并解析为真实DOM
    3、插入到指定的页面元素内部

欢迎大家关注公众号:

学习笔记2-React技术全家桶

wangtong阅读(252)

## 基本使用
    1、核心js库:
        (1)react.js:React核心库。
        (2)react-dom.js:提供操作DOM的react扩展库。
        (3)babel.min.js:解析JSX语法代码转为JS代码的库。
    2、创建虚拟DOM的两种方式:
        (1)纯JS创建
        (2)JSX创建
## JSX语法规则:
    1、定义虚拟DOM时,不要写引号
    2、标签中混入JS表达式时要用{}
        一定注意区分:【js语句(代码)】与【js表达式】
            1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
                下面这些都是表达式:
                    (1)a
                    (2)a+b
                    (3)demo(1)
                    (4)arr.map()
                    (5)funuction test(){}
            2、语句(代码):
                下面这些都是语句(代码):
                    (1)if(){}
                    (2)for(){}
                    (3)switch(){case:***}
    3、样式的类名指定不能用class,要用className
    4、内联样式格式:style={{key:value}}
    5、虚拟DOM只能有一个根标签
    6、标签必须闭合
    7、标签首字母
        (1)若小写字母开头,则将改标签为html中同名元素,若html中无该标签对应的同名元素,则报错
        (2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

欢迎大家关注公众号:

【收藏】JS中Class类的详解

wangtong阅读(403)

概述

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

严格模式

类和模块的内部,默认就是严格模式,所以不需要使用 use strict 指定运行模式

类的声明

定义一个类的一种方法是使用一个类声明,即用带有class关键字的类名(这里是“Rectangle”)
函数名和实例化构造名相同且大写(非强制)

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

var person= new Person()
class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
// Personis not defined

类声明不可以重复

class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

类必须使用 new 调用,否则会报错。这是它跟普通构造函数的一个主要区别,就是后者不用 new 也可以执行

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
Person()
// TypeError Class constructor Person cannot be invoked without 'new'

类表达式(类定义)

类表达式可以是被命名的或匿名的

/* 匿名类 */ 
let Person = class {
        constructor(x, y) {
        this.x = x
        this.y = y
    }
}

/* 命名的类 */ 
let Person = class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

类的方法
constructor 方法

constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person {
    constructor(x, y) {
        this.x = x // 默认返回实例对象 this
        this.y = y
    }
    toString() {
        console.log(this.x + ', ' + this.y)
    }
}

注意:

  1. 在类中声明方法的时候,方法前不加 function 关键字
  2. 方法之间不要用逗号分隔,否则会报错
  3. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
  4. 一个类中只能拥有一个 constructor 方法

静态方法

静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function

原型方法

类的所有方法都定义在类的 prototype 属性上面,在类的实例上面调用方法,其实就是调用原型上的方法
原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class Person {
    constructor() {
        // 默认返回实例对象 this
    }
    sum() {
    }
    toString() {
        console.log('123456')
    }
}
// 给 Person 的原型添加方法
Person.prototype.toVal = function() {
    console.log('I am is toVal')
}

// 等同于
Person.prototype = {
    constructor() {},
    sum() {},
    toString() {}
}

var p = new Person()
p.toString() // 123456
p.toVal() // I am is toVal
Person.toString() // TypeError Person.toStringis not a function
Person.toVal() // TypeError Person.toVal is not a function

实例方法

实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

class Person {
    constructor() {
        this.sum = function(a, b) {
            console.log(a + b)
        }
    }
}
var p = new Person()
p.sum(1,2) // 3
Person.sum(1,2) // TypeError Person.sum is not a function

欢迎大家关注公众号:

 

 

————————————————
版权声明:本文为CSDN博主「半度℃温热」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fu983531588/article/details/89499461

【收藏】如何正确的判断this的指向?

wangtong阅读(397)

this的指向问题在JavaScript中是非常重要的,如果用一句话说明 this 的指向,那么就是: 谁调用它,this 就指向谁。

1、普通函数(this指向window)默认绑定;严格模式下会抛出错误undefined(’use strict’)

var age = 18;
function fun() {
    console.log(this.age);
}

fun();//18 this指向window

2、对象函数(this指向该方法所属对象)

var o = {
    sayHi:function(){
        console.log(this); 
    }
}
o.sayHi();//{sayHi: ƒ}

3、构造函数(如果没有return,则this指向这个对象实例;如果存在return返回一个对象,则this指向返回的这个对象)

function Star(uname,age){
    this.uname = uname;
    this.age = age;
}
let a = new Star('xiaoming',18);
console.log(a);//Star {uname: "xiaoming", age: 18}
function Star(uname,age){
    this.uname = uname;
    this.age = age;
    let obj = {
        age:10
    }
    return obj;
}
let a = new Star('xiaoming',18);
console.log(a);//{age: 10}

 

4、绑定事件函数(this指向的是函数的调用者,指向了接收事件的 HTML 元素)

var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this); //btn <button>点击</button>
}

5、定时器函数(this指向window)

setTimeout(function(){
    console.log(this);
}, 2000);//this指向window

6、立即执行函数(this 指向window)

(function(){
    console.log(this); //this指向window
})();

7、箭头函数(不绑定this关键字,指向的是函数定义位置的上下文this)

const obj ={name:'xiaoming'};
function fn(){
    console.log(this);//{name: "xiaoming"}
    return ()=>{
        console.log(this);//{name: "xiaoming"}
    }
}
const resFn = fn.call(obj);
resFn();

8、显示绑定:函数通过call()、apply()调用,bind()方法绑定,this指向的就是指定的对象;

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(person); //20
fun.apply(person); //20
fun.bind(person)(); //20

如果这些方法传入的第一个参数是 undefined 或者 null,严格模式下 this 指向为传入的值undefined / null;非严格模式下指向window(全局);

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(null); //28

9、 隐式绑定:函数的调用是在某个对象上触发的,即调用位置上存在上下文对象(相当于对象函数中的this指向)。典型的隐式调用为: xxx.fn()

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
person.fun(); //20 隐式绑定

 

欢迎大家关注公众号:

 

————————————————
版权声明:本文为CSDN博主「中南啊哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42721322/article/details/106391922

学习笔记1-React技术全家桶

wangtong阅读(526)

  1. React是什么?

    React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。(用于动态构建用户界面的Javascript库(只关注视图)

  2. 为什么要学?

    2.1、原生js操作DOM繁琐、效率低(DOM-API操作UI)

    2.2、 使用js直接操作DOM,导致浏览器进行大量的重绘重排

    2.3、原生js没有组件化编码方案,复用率低

  3. React的特点:

    3.1、采用组件化编码、声明式编码,提高开发效率及组件复用率 

             React 高效的原因:

                (1)使用虚拟DOM,不总是直接操作页面的真实DOM
                (2)DOM Diffing算法,最小化页面重绘

    3.2、在React Native中可以使用React语法进行移动端开发

    3.3、使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

  4. 学习React之前需要掌握的js基础知识

    4.1、判断this的指向

    4.2、class(类)

    4.3、ES6语法规范

    4.4、npm包管理器

    4.5、原型、原链接

    4.6、数组常用方法

    4.7、模块化

欢迎大家关注公众号: